{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nvar _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Menu/MenuPositions.tsx\";\nimport React from 'react';\nimport { Menu, Button, VStack, Select, CheckIcon } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport function Example() {\n  var _this = this;\n\n  var _React$useState = React.useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 1),\n      shouldOverlapWithTrigger = _React$useState2[0];\n\n  var _React$useState3 = React.useState('auto'),\n      _React$useState4 = _slicedToArray(_React$useState3, 2),\n      position = _React$useState4[0],\n      setPosition = _React$useState4[1];\n\n  return React.createElement(VStack, {\n    space: 6,\n    alignSelf: \"flex-start\",\n    w: \"100%\"\n  }, React.createElement(Menu, {\n    w: \"160\",\n    shouldOverlapWithTrigger: shouldOverlapWithTrigger,\n    placement: position == 'auto' ? undefined : position,\n    trigger: function trigger(triggerProps) {\n      return React.createElement(Button, _extends({\n        alignSelf: \"center\",\n        variant: \"solid\"\n      }, triggerProps), \"Menu\");\n    }\n  }, React.createElement(Menu.Item, null, \"Arial\"), React.createElement(Menu.Item, null, \"Nunito Sans\"), React.createElement(Menu.Item, null, \"Roboto\")), React.createElement(Select, {\n    selectedValue: position,\n    mx: {\n      base: 0,\n      md: 'auto'\n    },\n    onValueChange: function onValueChange(nextValue) {\n      return setPosition(nextValue);\n    },\n    _selectedItem: {\n      bg: 'cyan.600',\n      endIcon: React.createElement(CheckIcon, {\n        size: 4\n      })\n    },\n    accessibilityLabel: \"Select a position for Menu\"\n  }, React.createElement(Select.Item, {\n    label: \"auto\",\n    value: \"auto\"\n  }), React.createElement(Select.Item, {\n    label: \"Top Left\",\n    value: \"top left\"\n  }), React.createElement(Select.Item, {\n    label: \"Top\",\n    value: \"top\"\n  }), React.createElement(Select.Item, {\n    label: \"Top Right\",\n    value: \"top right\"\n  }), React.createElement(Select.Item, {\n    label: \"Right Top\",\n    value: \"right top\"\n  }), React.createElement(Select.Item, {\n    label: \"Right\",\n    value: \"right\"\n  }), React.createElement(Select.Item, {\n    label: \"Right Bottom\",\n    value: \"right bottom\"\n  }), React.createElement(Select.Item, {\n    label: \"Bottom Left\",\n    value: \"bottom left\"\n  }), React.createElement(Select.Item, {\n    label: \"Bottom\",\n    value: \"bottom\"\n  }), React.createElement(Select.Item, {\n    label: \"Bottom Right\",\n    value: \"bottom right\"\n  }), React.createElement(Select.Item, {\n    label: \"Left Top\",\n    value: \"left top\"\n  }), React.createElement(Select.Item, {\n    label: \"Left\",\n    value: \"left\"\n  }), React.createElement(Select.Item, {\n    label: \"Left Bottom\",\n    value: \"left bottom\"\n  })));\n}","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Menu/MenuPositions.tsx"],"names":["React","Menu","Button","VStack","Select","CheckIcon","Example","useState","shouldOverlapWithTrigger","position","setPosition","undefined","triggerProps","base","md","nextValue","bg","endIcon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Menu, Button, VStack, Select, CheckIcon } from 'native-base';\n\nexport function Example() {\n  const [shouldOverlapWithTrigger] = React.useState(false);\n\n  const [position, setPosition] = React.useState('auto');\n  return (\n    <VStack space={6} alignSelf=\"flex-start\" w=\"100%\">\n      <Menu\n        w=\"160\"\n        shouldOverlapWithTrigger={shouldOverlapWithTrigger}\n        // @ts-ignore\n        placement={position == 'auto' ? undefined : position}\n        trigger={(triggerProps) => {\n          return (\n            <Button alignSelf=\"center\" variant=\"solid\" {...triggerProps}>\n              Menu\n            </Button>\n          );\n        }}\n      >\n        <Menu.Item>Arial</Menu.Item>\n        <Menu.Item>Nunito Sans</Menu.Item>\n        <Menu.Item>Roboto</Menu.Item>\n      </Menu>\n\n      <Select\n        selectedValue={position}\n        mx={{ base: 0, md: 'auto' }}\n        onValueChange={(nextValue) => setPosition(nextValue)}\n        _selectedItem={{\n          bg: 'cyan.600',\n          endIcon: <CheckIcon size={4} />,\n        }}\n        accessibilityLabel=\"Select a position for Menu\"\n      >\n        <Select.Item label=\"auto\" value=\"auto\" />\n        <Select.Item label=\"Top Left\" value=\"top left\" />\n        <Select.Item label=\"Top\" value=\"top\" />\n        <Select.Item label=\"Top Right\" value=\"top right\" />\n        <Select.Item label=\"Right Top\" value=\"right top\" />\n        <Select.Item label=\"Right\" value=\"right\" />\n        <Select.Item label=\"Right Bottom\" value=\"right bottom\" />\n        <Select.Item label=\"Bottom Left\" value=\"bottom left\" />\n        <Select.Item label=\"Bottom\" value=\"bottom\" />\n        <Select.Item label=\"Bottom Right\" value=\"bottom right\" />\n        <Select.Item label=\"Left Top\" value=\"left top\" />\n        <Select.Item label=\"Left\" value=\"left\" />\n        <Select.Item label=\"Left Bottom\" value=\"left bottom\" />\n      </Select>\n    </VStack>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}