{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/defineProperty\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport React from 'react';\nimport { Popover, Button, Input, FormControl, Box } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function Example() {\n  var initialFocusRef = React.useRef(null);\n  return _jsx(Box, {\n    h: \"60%\",\n    w: \"100%\",\n    alignItems: \"center\",\n    children: _jsx(Popover, {\n      initialFocusRef: initialFocusRef,\n      trigger: function trigger(triggerProps) {\n        return _jsx(Button, _objectSpread(_objectSpread({}, triggerProps), {}, {\n          children: \"Edit Info\"\n        }));\n      },\n      children: _jsxs(Popover.Content, {\n        width: \"56\",\n        children: [_jsx(Popover.Arrow, {}), _jsx(Popover.CloseButton, {}), _jsx(Popover.Header, {\n          children: \"Personal Details\"\n        }), _jsxs(Popover.Body, {\n          children: [_jsxs(FormControl, {\n            children: [_jsx(FormControl.Label, {\n              _text: {\n                fontSize: 'xs',\n                fontWeight: 'medium'\n              },\n              children: \"First Name\"\n            }), _jsx(Input, {\n              rounded: \"sm\",\n              fontSize: \"xs\",\n              backgroundColor: \"white\",\n              ref: initialFocusRef\n            })]\n          }), _jsxs(FormControl, {\n            mt: \"3\",\n            children: [_jsx(FormControl.Label, {\n              _text: {\n                fontSize: 'xs',\n                fontWeight: 'medium'\n              },\n              children: \"Last Name\"\n            }), _jsx(Input, {\n              rounded: \"sm\",\n              fontSize: \"xs\",\n              backgroundColor: \"white\"\n            })]\n          })]\n        }), _jsx(Popover.Footer, {\n          children: _jsxs(Button.Group, {\n            children: [_jsx(Button, {\n              colorScheme: \"coolGray\",\n              variant: \"ghost\",\n              children: \"Cancel\"\n            }), _jsx(Button, {\n              children: \"Save\"\n            })]\n          })\n        })]\n      })\n    })\n  });\n}","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Popover/RefEg.tsx"],"names":["React","Popover","Button","Input","FormControl","Box","Example","initialFocusRef","useRef","triggerProps","fontSize","fontWeight"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,EAAkBC,MAAlB,EAA0BC,KAA1B,EAAiCC,WAAjC,EAA8CC,GAA9C;;;AAEA,OAAO,SAASC,OAAT,GAAmB;AACxB,MAAMC,eAAe,GAAGP,KAAK,CAACQ,MAAN,CAAa,IAAb,CAAxB;AACA,SACE,KAAC,GAAD;AAAK,IAAA,CAAC,EAAC,KAAP;AAAa,IAAA,CAAC,EAAC,MAAf;AAAsB,IAAA,UAAU,EAAC,QAAjC;AAAA,cACE,KAAC,OAAD;AACE,MAAA,eAAe,EAAED,eADnB;AAEE,MAAA,OAAO,EAAE,iBAACE,YAAD,EAAkB;AACzB,eAAO,KAAC,MAAD,kCAAYA,YAAZ;AAAA;AAAA,WAAP;AACD,OAJH;AAAA,gBAME,MAAC,OAAD,CAAS,OAAT;AAAiB,QAAA,KAAK,EAAC,IAAvB;AAAA,mBACE,KAAC,OAAD,CAAS,KAAT,KADF,EAEE,KAAC,OAAD,CAAS,WAAT,KAFF,EAIE,KAAC,OAAD,CAAS,MAAT;AAAA;AAAA,UAJF,EAKE,MAAC,OAAD,CAAS,IAAT;AAAA,qBACE,MAAC,WAAD;AAAA,uBACE,KAAC,WAAD,CAAa,KAAb;AACE,cAAA,KAAK,EAAE;AACLC,gBAAAA,QAAQ,EAAE,IADL;AAELC,gBAAAA,UAAU,EAAE;AAFP,eADT;AAAA;AAAA,cADF,EASE,KAAC,KAAD;AACE,cAAA,OAAO,EAAC,IADV;AAEE,cAAA,QAAQ,EAAC,IAFX;AAGE,cAAA,eAAe,EAAC,OAHlB;AAIE,cAAA,GAAG,EAAEJ;AAJP,cATF;AAAA,YADF,EAiBE,MAAC,WAAD;AAAa,YAAA,EAAE,EAAC,GAAhB;AAAA,uBACE,KAAC,WAAD,CAAa,KAAb;AACE,cAAA,KAAK,EAAE;AACLG,gBAAAA,QAAQ,EAAE,IADL;AAELC,gBAAAA,UAAU,EAAE;AAFP,eADT;AAAA;AAAA,cADF,EASE,KAAC,KAAD;AAAO,cAAA,OAAO,EAAC,IAAf;AAAoB,cAAA,QAAQ,EAAC,IAA7B;AAAkC,cAAA,eAAe,EAAC;AAAlD,cATF;AAAA,YAjBF;AAAA,UALF,EAkCE,KAAC,OAAD,CAAS,MAAT;AAAA,oBACE,MAAC,MAAD,CAAQ,KAAR;AAAA,uBACE,KAAC,MAAD;AAAQ,cAAA,WAAW,EAAC,UAApB;AAA+B,cAAA,OAAO,EAAC,OAAvC;AAAA;AAAA,cADF,EAIE,KAAC,MAAD;AAAA;AAAA,cAJF;AAAA;AADF,UAlCF;AAAA;AANF;AADF,IADF;AAsDD","sourcesContent":["import React from 'react';\nimport { Popover, Button, Input, FormControl, Box } from 'native-base';\n\nexport function Example() {\n  const initialFocusRef = React.useRef(null);\n  return (\n    <Box h=\"60%\" w=\"100%\" alignItems=\"center\">\n      <Popover\n        initialFocusRef={initialFocusRef}\n        trigger={(triggerProps) => {\n          return <Button {...triggerProps}>Edit Info</Button>;\n        }}\n      >\n        <Popover.Content width=\"56\">\n          <Popover.Arrow />\n          <Popover.CloseButton />\n          {/* @ts-ignore */}\n          <Popover.Header>Personal Details</Popover.Header>\n          <Popover.Body>\n            <FormControl>\n              <FormControl.Label\n                _text={{\n                  fontSize: 'xs',\n                  fontWeight: 'medium',\n                }}\n              >\n                First Name\n              </FormControl.Label>\n              <Input\n                rounded=\"sm\"\n                fontSize=\"xs\"\n                backgroundColor=\"white\"\n                ref={initialFocusRef}\n              />\n            </FormControl>\n            <FormControl mt=\"3\">\n              <FormControl.Label\n                _text={{\n                  fontSize: 'xs',\n                  fontWeight: 'medium',\n                }}\n              >\n                Last Name\n              </FormControl.Label>\n              <Input rounded=\"sm\" fontSize=\"xs\" backgroundColor=\"white\" />\n            </FormControl>\n          </Popover.Body>\n          <Popover.Footer>\n            <Button.Group>\n              <Button colorScheme=\"coolGray\" variant=\"ghost\">\n                Cancel\n              </Button>\n              <Button>Save</Button>\n            </Button.Group>\n          </Popover.Footer>\n        </Popover.Content>\n      </Popover>\n    </Box>\n  );\n}\n"]},"metadata":{},"sourceType":"module"}