@os-design/core 1.0.156 → 1.0.158

package/dist/cjs/PageHeaderInputSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","PageHeaderContainer","omitEmotionProps","CloseButton","Button","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","forwardRef","ref","locale","defaultLocale","onClose","rest","useState","setVisible","useTheme","mounted","useClosable","useContext","LayoutContext","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useState } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Button from '../Button';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, {\n  PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n  extends Omit<InputSearchProps, 'size' | 'locale'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderInputSearchLocale;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface ContainerProps {\n  visible: boolean;\n}\nconst Container = styled(\n  PageHeaderContainer,\n  omitEmotionProps('visible')\n)<ContainerProps>`\n  z-index: 102; // After PageHeaderContainer\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n  HTMLInputElement,\n  PageHeaderInputSearchProps\n>(({ locale = defaultLocale, onClose = () => {}, ...rest }, ref) => {\n  const [visible, setVisible] = useState(false);\n  const { theme } = useTheme();\n  const mounted = useClosable(visible, theme.transitionDelay);\n  const { hasNavigation } = useContext(LayoutContext);\n\n  return (\n    <>\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={() => setVisible(true)}\n        aria-label={locale.searchLabel}\n      >\n        <Search />\n      </Button>\n\n      {mounted && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n          })}\n        >\n          <Container\n            visible={visible}\n            rightIsGhostButton\n            hasNavigationIndent={hasNavigation}\n          >\n            <InputSearch autoFocus locale={locale} {...rest} ref={ref} />\n            <CloseButton\n              type='ghost'\n              wide='never'\n              onClick={() => {\n                setVisible(false);\n                onClose();\n              }}\n              aria-label={locale.closeLabel}\n            >\n              <Close />\n            </CloseButton>\n          </Container>\n        </ThemeOverrider>\n      )}\n    </>\n  );\n});\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,MAAM,OAAGC,iBAAH,sJAAZ;AAKA,IAAMC,OAAO,OAAGD,iBAAH,wJAAb;;AAKA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD;EAAA,OACpBA,CAAC,CAACC,OAAF,QACAC,WADA,mHAEeN,MAFf,EAEyBI,CAAC,CAACG,KAAF,CAAQC,eAFjC,CADoB;AAAA,CAAtB;;AAMA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACL,CAAD;EAAA,OACtB,CAACA,CAAC,CAACC,OAAH,QACAC,WADA,mHAEeJ,OAFf,EAE0BE,CAAC,CAACG,KAAF,CAAQC,eAFlC,CADsB;AAAA,CAAxB;;AASA,IAAME,SAAS,GAAG,IAAAC,kBAAA,EAChBC,+BADgB,EAEhB,IAAAC,uBAAA,EAAiB,SAAjB,CAFgB,CAAH,0IAKXV,aALW,EAMXM,eANW,CAAf;AASA,IAAMK,WAAW,GAAG,IAAAH,kBAAA,EAAOI,kBAAP,CAAH,kGACA,UAACX,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQS,gCAAf;AAAA,CADA,CAAjB;AAIA;AACA;AACA;;AACA,IAAMC,qBAAqB,gBAAG,IAAAC,iBAAA,EAG5B,gBAA0DC,GAA1D,EAAkE;EAAA,uBAA/DC,MAA+D;EAAA,IAA/DA,MAA+D,4BAAtDC,yBAAsD;EAAA,wBAAvCC,OAAuC;EAAA,IAAvCA,OAAuC,6BAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EAClE,gBAA8B,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOnB,OAAP;EAAA,IAAgBoB,UAAhB;;EACA,gBAAkB,IAAAC,iBAAA,GAAlB;EAAA,IAAQnB,KAAR,aAAQA,KAAR;;EACA,IAAMoB,OAAO,GAAG,IAAAC,kBAAA,EAAYvB,OAAZ,EAAqBE,KAAK,CAACC,eAA3B,CAAhB;;EACA,kBAA0B,IAAAqB,iBAAA,EAAWC,yBAAX,CAA1B;EAAA,IAAQC,aAAR,eAAQA,aAAR;;EAEA,oBACE,+EACE,gCAAC,kBAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE;MAAA,OAAMN,UAAU,CAAC,IAAD,CAAhB;IAAA,CAHX;IAIE,cAAYL,MAAM,CAACY;EAJrB,gBAME,gCAAC,aAAD,OANF,CADF,EAUGL,OAAO,iBACN,gCAAC,uBAAD;IACE,SAAS,EAAE,mBAACM,CAAD;MAAA,OAAQ;QACjBC,uBAAuB,EAAED,CAAC,CAACE;MADV,CAAR;IAAA;EADb,gBAKE,gCAAC,SAAD;IACE,OAAO,EAAE9B,OADX;IAEE,kBAAkB,MAFpB;IAGE,mBAAmB,EAAE0B;EAHvB,gBAKE,gCAAC,uBAAD;IAAa,SAAS,MAAtB;IAAuB,MAAM,EAAEX;EAA/B,GAA2CG,IAA3C;IAAiD,GAAG,EAAEJ;EAAtD,GALF,eAME,gCAAC,WAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE,mBAAM;MACbM,UAAU,CAAC,KAAD,CAAV;MACAH,OAAO;IACR,CANH;IAOE,cAAYF,MAAM,CAACgB;EAPrB,gBASE,gCAAC,YAAD,OATF,CANF,CALF,CAXJ,CADF;AAuCD,CAhD6B,CAA9B;AAkDAnB,qBAAqB,CAACoB,WAAtB,GAAoC,uBAApC;eAEepB,qB"}
+{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","PageHeaderContainer","omitEmotionProps","CloseButton","Button","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","forwardRef","ref","locale","defaultLocale","onClose","rest","useState","setVisible","useTheme","mounted","useClosable","useContext","LayoutContext","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useState } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Button from '../Button';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, {\n  PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n  extends Omit<InputSearchProps, 'size' | 'locale'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderInputSearchLocale;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface ContainerProps {\n  visible: boolean;\n}\nconst Container = styled(\n  PageHeaderContainer,\n  omitEmotionProps('visible')\n)<ContainerProps>`\n  z-index: 102; // After PageHeaderContainer\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n  margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n  HTMLInputElement,\n  PageHeaderInputSearchProps\n>(({ locale = defaultLocale, onClose = () => {}, ...rest }, ref) => {\n  const [visible, setVisible] = useState(false);\n  const { theme } = useTheme();\n  const mounted = useClosable(visible, theme.transitionDelay);\n  const { hasNavigation } = useContext(LayoutContext);\n\n  return (\n    <>\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={() => setVisible(true)}\n        aria-label={locale.searchLabel}\n      >\n        <Search />\n      </Button>\n\n      {mounted && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n          })}\n        >\n          <Container\n            visible={visible}\n            rightIsGhostButton\n            hasNavigationIndent={hasNavigation}\n          >\n            <InputSearch autoFocus locale={locale} {...rest} ref={ref} />\n            <CloseButton\n              type='ghost'\n              wide='never'\n              onClick={() => {\n                setVisible(false);\n                onClose();\n              }}\n              aria-label={locale.closeLabel}\n            >\n              <Close />\n            </CloseButton>\n          </Container>\n        </ThemeOverrider>\n      )}\n    </>\n  );\n});\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAE+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB/B,IAAMA,MAAM,OAAGC,iBAAS,sJAGvB;AAED,IAAMC,OAAO,OAAGD,iBAAS,wJAGxB;AAED,IAAME,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAC;EAAA,OACtBA,CAAC,CAACC,OAAO,QACTC,WAAG,mHACYN,MAAM,EAAII,CAAC,CAACG,KAAK,CAACC,eAAe,CAC/C;AAAA;AAEH,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIL,CAAC;EAAA,OACxB,CAACA,CAAC,CAACC,OAAO,QACVC,WAAG,mHACYJ,OAAO,EAAIE,CAAC,CAACG,KAAK,CAACC,eAAe,CAChD;AAAA;AAKH,IAAME,SAAS,GAAG,IAAAC,kBAAM,EACtBC,+BAAmB,EACnB,IAAAC,uBAAgB,EAAC,SAAS,CAAC,CAC5B,0IAEGV,aAAa,EACbM,eAAe,CAClB;AAED,IAAMK,WAAW,GAAG,IAAAH,kBAAM,EAACI,kBAAM,CAAC,kGACjB,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACS,gCAAgC;AAAA,EAC/D;;AAED;AACA;AACA;AACA,IAAMC,qBAAqB,gBAAG,IAAAC,iBAAU,EAGtC,gBAA0DC,GAAG,EAAK;EAAA,uBAA/DC,MAAM;IAANA,MAAM,4BAAGC,yBAAa;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAAKC,IAAI;EACtD,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCnB,OAAO;IAAEoB,UAAU;EAC1B,gBAAkB,IAAAC,iBAAQ,GAAE;IAApBnB,KAAK,aAALA,KAAK;EACb,IAAMoB,OAAO,GAAG,IAAAC,kBAAW,EAACvB,OAAO,EAAEE,KAAK,CAACC,eAAe,CAAC;EAC3D,kBAA0B,IAAAqB,iBAAU,EAACC,yBAAa,CAAC;IAA3CC,aAAa,eAAbA,aAAa;EAErB,oBACE,+EACE,gCAAC,kBAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE;MAAA,OAAMN,UAAU,CAAC,IAAI,CAAC;IAAA,CAAC;IAChC,cAAYL,MAAM,CAACY;EAAY,gBAE/B,gCAAC,aAAM,OAAG,CACH,EAERL,OAAO,iBACN,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAACM,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAED,CAAC,CAACE;MAC7B,CAAC;IAAA;EAAE,gBAEH,gCAAC,SAAS;IACR,OAAO,EAAE9B,OAAQ;IACjB,kBAAkB;IAClB,mBAAmB,EAAE0B;EAAc,gBAEnC,gCAAC,uBAAW;IAAC,SAAS;IAAC,MAAM,EAAEX;EAAO,GAAKG,IAAI;IAAE,GAAG,EAAEJ;EAAI,GAAG,eAC7D,gCAAC,WAAW;IACV,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE,mBAAM;MACbM,UAAU,CAAC,KAAK,CAAC;MACjBH,OAAO,EAAE;IACX,CAAE;IACF,cAAYF,MAAM,CAACgB;EAAW,gBAE9B,gCAAC,YAAK,OAAG,CACG,CACJ,CAEf,CACA;AAEP,CAAC,CAAC;AAEFnB,qBAAqB,CAACoB,WAAW,GAAG,uBAAuB;AAAC,eAE7CpB,qBAAqB;AAAA"}

package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js

@@ -4,22 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _defaultLocale = _interopRequireDefault(require("../../InputSearch/utils/defaultLocale"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var defaultLocale = _objectSpread(_objectSpread({}, _defaultLocale["default"]), {}, {
   searchLabel: 'Search',
   closeLabel: 'Close search'
 });
-
 var _default = defaultLocale;
 exports["default"] = _default;
 //# sourceMappingURL=defaultLocale.js.map

package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","inputSearchDefaultLocale","searchLabel","closeLabel"],"sources":["../../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"sourcesContent":["import inputSearchDefaultLocale, {\n  InputSearchLocale,\n} from '../../InputSearch/utils/defaultLocale';\n\nexport interface PageHeaderInputSearchLocale extends InputSearchLocale {\n  searchLabel: string;\n  closeLabel: string;\n}\n\nconst defaultLocale: PageHeaderInputSearchLocale = {\n  ...inputSearchDefaultLocale,\n  searchLabel: 'Search',\n  closeLabel: 'Close search',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;;AAAA;;;;;;;;;;AASA,IAAMA,aAA0C,mCAC3CC,yBAD2C;EAE9CC,WAAW,EAAE,QAFiC;EAG9CC,UAAU,EAAE;AAHkC,EAAhD;;eAMeH,a"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","inputSearchDefaultLocale","searchLabel","closeLabel"],"sources":["../../../../src/PageHeaderInputSearch/utils/defaultLocale.ts"],"sourcesContent":["import inputSearchDefaultLocale, {\n  InputSearchLocale,\n} from '../../InputSearch/utils/defaultLocale';\n\nexport interface PageHeaderInputSearchLocale extends InputSearchLocale {\n  searchLabel: string;\n  closeLabel: string;\n}\n\nconst defaultLocale: PageHeaderInputSearchLocale = {\n  ...inputSearchDefaultLocale,\n  searchLabel: 'Search',\n  closeLabel: 'Close search',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAAA;AAE+C;AAAA;AAAA;AAAA;AAO/C,IAAMA,aAA0C,mCAC3CC,yBAAwB;EAC3BC,WAAW,EAAE,QAAQ;EACrBC,UAAU,EAAE;AAAc,EAC3B;AAAC,eAEaH,aAAa;AAAA"}

package/dist/cjs/PageHeaderSkeleton/index.js

@@ -1,46 +1,31 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _PageHeader = require("../PageHeader");
-
 var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
-
 var _excluded = ["width"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 /**
  * Provides a page header placeholder while a user waits for
  * the content to load.
  */
 var PageHeaderSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '30%' : _ref$width,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    width = _ref$width === void 0 ? '30%' : _ref$width,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_LayoutContext["default"]),
-      hasNavigation = _useContext.hasNavigation;
-
+    hasNavigation = _useContext.hasNavigation;
   return /*#__PURE__*/_react["default"].createElement(_PageHeader.PageHeaderContainer, _extends({
     hasNavigationIndent: hasNavigation
   }, rest, {

package/dist/cjs/PageHeaderSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PageHeaderSkeleton","forwardRef","ref","width","rest","useContext","LayoutContext","hasNavigation","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport type PageHeaderSkeletonProps = SkeletonProps & WithSize;\n\n/**\n * Provides a page header placeholder while a user waits for\n * the content to load.\n */\nconst PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(\n  ({ width = '30%', ...rest }, ref) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <PageHeaderContainer\n        hasNavigationIndent={hasNavigation}\n        {...rest}\n        ref={ref}\n      >\n        <Skeleton width={width} />\n      </PageHeaderContainer>\n    );\n  }\n);\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nexport default PageHeaderSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAA,EACzB,gBAA6BC,GAA7B,EAAqC;EAAA,sBAAlCC,KAAkC;EAAA,IAAlCA,KAAkC,2BAA1B,KAA0B;EAAA,IAAhBC,IAAgB;;EACnC,kBAA0B,IAAAC,iBAAA,EAAWC,yBAAX,CAA1B;EAAA,IAAQC,aAAR,eAAQA,aAAR;;EAEA,oBACE,gCAAC,+BAAD;IACE,mBAAmB,EAAEA;EADvB,GAEMH,IAFN;IAGE,GAAG,EAAEF;EAHP,iBAKE,gCAAC,oBAAD;IAAU,KAAK,EAAEC;EAAjB,EALF,CADF;AASD,CAbwB,CAA3B;AAgBAH,kBAAkB,CAACQ,WAAnB,GAAiC,oBAAjC;eAEeR,kB"}
+{"version":3,"file":"index.js","names":["PageHeaderSkeleton","forwardRef","ref","width","rest","useContext","LayoutContext","hasNavigation","displayName"],"sources":["../../../src/PageHeaderSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\nimport { PageHeaderContainer } from '../PageHeader';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport type PageHeaderSkeletonProps = SkeletonProps & WithSize;\n\n/**\n * Provides a page header placeholder while a user waits for\n * the content to load.\n */\nconst PageHeaderSkeleton = forwardRef<HTMLDivElement, PageHeaderSkeletonProps>(\n  ({ width = '30%', ...rest }, ref) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <PageHeaderContainer\n        hasNavigationIndent={hasNavigation}\n        {...rest}\n        ref={ref}\n      >\n        <Skeleton width={width} />\n      </PageHeaderContainer>\n    );\n  }\n);\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nexport default PageHeaderSkeleton;\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIpD;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAU,EACnC,gBAA6BC,GAAG,EAAK;EAAA,sBAAlCC,KAAK;IAALA,KAAK,2BAAG,KAAK;IAAKC,IAAI;EACvB,kBAA0B,IAAAC,iBAAU,EAACC,yBAAa,CAAC;IAA3CC,aAAa,eAAbA,aAAa;EAErB,oBACE,gCAAC,+BAAmB;IAClB,mBAAmB,EAAEA;EAAc,GAC/BH,IAAI;IACR,GAAG,EAAEF;EAAI,iBAET,gCAAC,oBAAQ;IAAC,KAAK,EAAEC;EAAM,EAAG,CACN;AAE1B,CAAC,CACF;AAEDH,kBAAkB,CAACQ,WAAW,GAAG,oBAAoB;AAAC,eAEvCR,kBAAkB;AAAA"}

package/dist/cjs/ParagraphSkeleton/index.js

@@ -1,61 +1,43 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _utils = require("@os-design/utils");
-
 var _react2 = require("@emotion/react");
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _excluded = ["rows", "width", "hasMargin"];
-
 var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var hasMarginStyles = function hasMarginStyles(p) {
   return p.hasMargin && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-bottom: ", "em;\n  "])), p.theme.paragraphMarginBottom + (p.theme.lineHeight - 1));
 };
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasMargin'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > *:not(:last-of-type) {\n    margin-bottom: ", "em;\n  }\n  ", ";\n"])), function (p) {
   return p.theme.lineHeight - 1;
 }, hasMarginStyles);
 var key = 0;
+
 /**
  * Provides a paragraph placeholder while a user waits for the content to load.
  */
-
 var ParagraphSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$rows = _ref.rows,
-      rows = _ref$rows === void 0 ? 4 : _ref$rows,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '70%' : _ref$width,
-      _ref$hasMargin = _ref.hasMargin,
-      hasMargin = _ref$hasMargin === void 0 ? false : _ref$hasMargin,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rows = _ref$rows === void 0 ? 4 : _ref$rows,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '70%' : _ref$width,
+    _ref$hasMargin = _ref.hasMargin,
+    hasMargin = _ref$hasMargin === void 0 ? false : _ref$hasMargin,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     hasMargin: hasMargin
   }, rest, {

package/dist/cjs/ParagraphSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["hasMarginStyles","p","hasMargin","css","theme","paragraphMarginBottom","lineHeight","Container","styled","omitEmotionProps","key","ParagraphSkeleton","forwardRef","ref","rows","width","rest","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface ParagraphSkeletonProps extends SkeletonProps {\n  /**\n   * The number of rows.\n   * @default 4\n   */\n  rows?: number;\n  /**\n   * The width of the last row.\n   * @default 70%\n   */\n  width?: string;\n  /**\n   * Whether the paragraph has a bottom margin.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin-bottom: ${p.theme.paragraphMarginBottom +\n    (p.theme.lineHeight - 1)}em;\n  `;\n\ntype ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;\nconst Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`\n  & > *:not(:last-of-type) {\n    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;\n  }\n  ${hasMarginStyles};\n`;\n\nlet key = 0;\n\n/**\n * Provides a paragraph placeholder while a user waits for the content to load.\n */\nconst ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(\n  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (\n    <Container hasMargin={hasMargin} {...rest} ref={ref}>\n      {Array(rows)\n        .fill({})\n        .map((_, index) => {\n          key += 1;\n          return (\n            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />\n          );\n        })}\n    </Container>\n  )\n);\n\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\n\nexport default ParagraphSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;EAAA,OACtBA,CAAC,CAACC,SAAF,QACAC,WADA,uGAEmBF,CAAC,CAACG,KAAF,CAAQC,qBAAR,IAChBJ,CAAC,CAACG,KAAF,CAAQE,UAAR,GAAqB,CADL,CAFnB,CADsB;AAAA,CAAxB;;AAQA,IAAMC,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,WAAjB,CAAd,CAAH,kJAEM,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQE,UAAR,GAAqB,CAA5B;AAAA,CAFN,EAIXN,eAJW,CAAf;AAOA,IAAIU,GAAG,GAAG,CAAV;AAEA;AACA;AACA;;AACA,IAAMC,iBAAiB,gBAAG,IAAAC,iBAAA,EACxB,gBAA0DC,GAA1D;EAAA,qBAAGC,IAAH;EAAA,IAAGA,IAAH,0BAAU,CAAV;EAAA,sBAAaC,KAAb;EAAA,IAAaA,KAAb,2BAAqB,KAArB;EAAA,0BAA4Bb,SAA5B;EAAA,IAA4BA,SAA5B,+BAAwC,KAAxC;EAAA,IAAkDc,IAAlD;;EAAA,oBACE,gCAAC,SAAD;IAAW,SAAS,EAAEd;EAAtB,GAAqCc,IAArC;IAA2C,GAAG,EAAEH;EAAhD,IACGI,KAAK,CAACH,IAAD,CAAL,CACEI,IADF,CACO,EADP,EAEEC,GAFF,CAEM,UAACC,CAAD,EAAIC,KAAJ,EAAc;IACjBX,GAAG,IAAI,CAAP;IACA,oBACE,gCAAC,oBAAD;MAAU,GAAG,EAAEA,GAAf;MAAoB,KAAK,EAAEW,KAAK,GAAGP,IAAI,GAAG,CAAf,GAAmB,MAAnB,GAA4BC;IAAvD,EADF;EAGD,CAPF,CADH,CADF;AAAA,CADwB,CAA1B;AAeAJ,iBAAiB,CAACW,WAAlB,GAAgC,mBAAhC;eAEeX,iB"}
+{"version":3,"file":"index.js","names":["hasMarginStyles","p","hasMargin","css","theme","paragraphMarginBottom","lineHeight","Container","styled","omitEmotionProps","key","ParagraphSkeleton","forwardRef","ref","rows","width","rest","Array","fill","map","_","index","displayName"],"sources":["../../../src/ParagraphSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface ParagraphSkeletonProps extends SkeletonProps {\n  /**\n   * The number of rows.\n   * @default 4\n   */\n  rows?: number;\n  /**\n   * The width of the last row.\n   * @default 70%\n   */\n  width?: string;\n  /**\n   * Whether the paragraph has a bottom margin.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin-bottom: ${p.theme.paragraphMarginBottom +\n    (p.theme.lineHeight - 1)}em;\n  `;\n\ntype ContainerProps = Pick<ParagraphSkeletonProps, 'hasMargin'>;\nconst Container = styled('div', omitEmotionProps('hasMargin'))<ContainerProps>`\n  & > *:not(:last-of-type) {\n    margin-bottom: ${(p) => p.theme.lineHeight - 1}em;\n  }\n  ${hasMarginStyles};\n`;\n\nlet key = 0;\n\n/**\n * Provides a paragraph placeholder while a user waits for the content to load.\n */\nconst ParagraphSkeleton = forwardRef<HTMLDivElement, ParagraphSkeletonProps>(\n  ({ rows = 4, width = '70%', hasMargin = false, ...rest }, ref) => (\n    <Container hasMargin={hasMargin} {...rest} ref={ref}>\n      {Array(rows)\n        .fill({})\n        .map((_, index) => {\n          key += 1;\n          return (\n            <Skeleton key={key} width={index < rows - 1 ? '100%' : width} />\n          );\n        })}\n    </Container>\n  )\n);\n\nParagraphSkeleton.displayName = 'ParagraphSkeleton';\n\nexport default ParagraphSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBtD,IAAMA,eAAe,GAAG,SAAlBA,eAAe,CAAIC,CAAC;EAAA,OACxBA,CAAC,CAACC,SAAS,QACXC,WAAG,uGACgBF,CAAC,CAACG,KAAK,CAACC,qBAAqB,IAC7CJ,CAAC,CAACG,KAAK,CAACE,UAAU,GAAG,CAAC,CAAC,CACzB;AAAA;AAGH,IAAMC,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,WAAW,CAAC,CAAC,kJAEzC,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACE,UAAU,GAAG,CAAC;AAAA,GAE9CN,eAAe,CAClB;AAED,IAAIU,GAAG,GAAG,CAAC;;AAEX;AACA;AACA;AACA,IAAMC,iBAAiB,gBAAG,IAAAC,iBAAU,EAClC,gBAA0DC,GAAG;EAAA,qBAA1DC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,KAAK;IAAA,sBAAEb,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAKc,IAAI;EAAA,oBACpD,gCAAC,SAAS;IAAC,SAAS,EAAEd;EAAU,GAAKc,IAAI;IAAE,GAAG,EAAEH;EAAI,IACjDI,KAAK,CAACH,IAAI,CAAC,CACTI,IAAI,CAAC,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,UAACC,CAAC,EAAEC,KAAK,EAAK;IACjBX,GAAG,IAAI,CAAC;IACR,oBACE,gCAAC,oBAAQ;MAAC,GAAG,EAAEA,GAAI;MAAC,KAAK,EAAEW,KAAK,GAAGP,IAAI,GAAG,CAAC,GAAG,MAAM,GAAGC;IAAM,EAAG;EAEpE,CAAC,CAAC,CACM;AAAA,CACb,CACF;AAEDJ,iBAAiB,CAACW,WAAW,GAAG,mBAAmB;AAAC,eAErCX,iBAAiB;AAAA"}

package/dist/cjs/Popover/index.js

@@ -1,69 +1,41 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _portal = _interopRequireDefault(require("@os-design/portal"));
-
 var _usePopoverPosition2 = _interopRequireDefault(require("./utils/usePopoverPosition"));
-
 var _excluded = ["trigger", "placement", "gap", "flip", "visible", "onClose", "id", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var fadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
 var fadeOut = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
-
 var visibleStyles = function visibleStyles(p) {
   return p.visible && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), fadeIn, p.theme.transitionDelay);
 };
-
 var invisibleStyles = function invisibleStyles(p) {
   return !p.visible && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), fadeOut, p.theme.transitionDelay);
 };
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('top', 'left', 'visible', 'size'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n\n  border-radius: ", "em;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0 0.15em 0.8em ", ";\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return p.top;
 }, function (p) {
@@ -85,46 +57,42 @@ var emptyRect = {
   width: 0,
   height: 0
 };
+
 /**
  * The pop-up window located next to the element.
  */
-
 var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var trigger = _ref.trigger,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-      _ref$gap = _ref.gap,
-      gap = _ref$gap === void 0 ? 0.2 : _ref$gap,
-      _ref$flip = _ref.flip,
-      flip = _ref$flip === void 0 ? true : _ref$flip,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? false : _ref$visible,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      id = _ref.id,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0.2 : _ref$gap,
+    _ref$flip = _ref.flip,
+    flip = _ref$flip === void 0 ? true : _ref$flip,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    id = _ref.id,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
-      _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
-      popoverRef = _useForwardedRef2[0],
-      mergedPopoverRef = _useForwardedRef2[1];
-
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    popoverRef = _useForwardedRef2[0],
+    mergedPopoverRef = _useForwardedRef2[1];
   var _useState = (0, _react.useState)(emptyRect),
-      _useState2 = _slicedToArray(_useState, 2),
-      popoverRect = _useState2[0],
-      setPopoverRect = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    popoverRect = _useState2[0],
+    setPopoverRect = _useState2[1];
   var _useState3 = (0, _react.useState)(emptyRect),
-      _useState4 = _slicedToArray(_useState3, 2),
-      triggerRect = _useState4[0],
-      setTriggerRect = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    triggerRect = _useState4[0],
+    setTriggerRect = _useState4[1];
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
-  var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay); // Init the rect of the popover and update it when the popover size changes
+    theme = _useTheme.theme;
+  var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
 
+  // Init the rect of the popover and update it when the popover size changes
   var popoverResizeListener = (0, _react.useCallback)(function () {
     if (!popoverRef.current) return;
     setPopoverRect(popoverRef.current.getBoundingClientRect());
@@ -134,14 +102,15 @@ var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (node === null) return;
     setPopoverRect(node.getBoundingClientRect());
     mergedPopoverRef(node);
-  }, [mergedPopoverRef]); // Init the rect of the trigger and update it when the window was resized
-  // or scrolled
+  }, [mergedPopoverRef]);
 
+  // Init the rect of the trigger and update it when the window was resized
+  // or scrolled
   var triggerResizeListener = (0, _react.useCallback)(function () {
     window.requestAnimationFrame(function () {
       if (!trigger) return;
       var _ref2 = trigger,
-          current = _ref2.current;
+        current = _ref2.current;
       if (!current) return;
       setTriggerRect(current.getBoundingClientRect());
     });
@@ -159,39 +128,39 @@ var Popover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, [trigger]);
   var popoverId = (0, _react.useMemo)(function () {
     return id || "popover-".concat(Math.random().toString(36).slice(2, 11));
-  }, [id]); // Set the aria tags to support accessibility features
+  }, [id]);
 
+  // Set the aria tags to support accessibility features
   (0, _utils.useBrowserLayoutEffect)(function () {
     if (!trigger) return;
     var _ref3 = trigger,
-        current = _ref3.current;
+      current = _ref3.current;
     if (!current) return;
-
     if (current.getAttribute('aria-haspopup') === null) {
       current.setAttribute('aria-haspopup', 'dialog');
     }
-
     current.setAttribute('aria-controls', popoverId);
   }, []);
   (0, _utils.useBrowserLayoutEffect)(function () {
     if (!trigger) return;
     var _ref4 = trigger,
-        current = _ref4.current;
+      current = _ref4.current;
     if (!current) return;
     current.setAttribute('aria-expanded', visible.toString());
-  }, [visible]); // Get the popover coordinates
+  }, [visible]);
 
+  // Get the popover coordinates
   var _usePopoverPosition = (0, _usePopoverPosition2["default"])({
-    elementRect: triggerRect,
-    popoverRect: popoverRect,
-    placement: placement,
-    gap: gap,
-    flip: flip
-  }),
-      top = _usePopoverPosition.top,
-      left = _usePopoverPosition.left; // Close the popover when the user clicks outside of it
-
-
+      elementRect: triggerRect,
+      popoverRect: popoverRect,
+      placement: placement,
+      gap: gap,
+      flip: flip
+    }),
+    top = _usePopoverPosition.top,
+    left = _usePopoverPosition.left;
+
+  // Close the popover when the user clicks outside of it
   (0, _utils.useClickOutside)(popoverRef, onClose);
   if (!mounted) return null;
   return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(Container, _extends({

package/dist/cjs/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","omitEmotionProps","top","left","borderRadius","clr","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","sizeStyles","emptyRect","width","height","Popover","forwardRef","ref","trigger","placement","gap","flip","onClose","id","children","rest","useForwardedRef","popoverRef","mergedPopoverRef","useState","popoverRect","setPopoverRect","triggerRect","setTriggerRect","useTheme","mounted","useClosable","popoverResizeListener","useCallback","current","getBoundingClientRect","useResizeObserver","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","useBrowserLayoutEffect","useEvent","document","useEffect","undefined","popoverId","useMemo","Math","random","toString","slice","getAttribute","setAttribute","usePopoverPosition","elementRect","useClickOutside","displayName"],"sources":["../../../src/Popover/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useClickOutside,\n  useClosable,\n  useEvent,\n  useForwardedRef,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport usePopoverPosition, {\n  Placement,\n  Rect,\n} from './utils/usePopoverPosition';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PopoverProps extends JsxDivProps, WithSize {\n  /**\n   * The element next to which the popover appears.\n   * @default undefined\n   */\n  trigger?: RefObject<Element> | Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.2\n   */\n  gap?: number;\n  /**\n   * Whether the popover to flip if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n  /**\n   * Whether the popover is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {\n  top: number;\n  left: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('top', 'left', 'visible', 'size')\n)<ContainerProps>`\n  position: absolute;\n  top: ${(p) => p.top}px;\n  left: ${(p) => p.left}px;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  background-color: ${(p) => clr(p.theme.popoverColorBg)};\n  color: ${(p) => clr(p.theme.popoverColorText)};\n  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ${visibleStyles};\n  ${invisibleStyles};\n  ${sizeStyles};\n`;\n\nconst emptyRect: Rect = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * The pop-up window located next to the element.\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      trigger,\n      placement = 'top',\n      gap = 0.2,\n      flip = true,\n      visible = false,\n      onClose = () => {},\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);\n    const [popoverRect, setPopoverRect] = useState(emptyRect);\n    const [triggerRect, setTriggerRect] = useState(emptyRect);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Init the rect of the popover and update it when the popover size changes\n    const popoverResizeListener = useCallback(() => {\n      if (!popoverRef.current) return;\n      setPopoverRect(popoverRef.current.getBoundingClientRect());\n    }, [popoverRef]);\n    useResizeObserver(\n      popoverRef.current as HTMLDivElement,\n      popoverResizeListener\n    );\n\n    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(\n      (node) => {\n        if (node === null) return;\n        setPopoverRect(node.getBoundingClientRect());\n        mergedPopoverRef(node);\n      },\n      [mergedPopoverRef]\n    );\n\n    // Init the rect of the trigger and update it when the window was resized\n    // or scrolled\n    const triggerResizeListener = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!trigger) return;\n        const { current } = trigger as RefObject<Element>;\n        if (!current) return;\n        setTriggerRect(current.getBoundingClientRect());\n      });\n    }, [trigger]);\n    useBrowserLayoutEffect(() => {\n      if (!visible) return;\n      triggerResizeListener();\n    }, [triggerResizeListener, visible]);\n    useResizeObserver(trigger as never, triggerResizeListener);\n    useEvent(\n      (typeof window === 'undefined' ? null : window) as never,\n      'resize',\n      triggerResizeListener\n    );\n    useEvent(document, 'scroll', triggerResizeListener);\n\n    useEffect(() => {\n      if (!trigger || (trigger as RefObject<Element>).current !== undefined)\n        return;\n      setTriggerRect(trigger as Rect);\n    }, [trigger]);\n\n    const popoverId = useMemo(\n      () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Set the aria tags to support accessibility features\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      if (current.getAttribute('aria-haspopup') === null) {\n        current.setAttribute('aria-haspopup', 'dialog');\n      }\n      current.setAttribute('aria-controls', popoverId);\n    }, []);\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-expanded', visible.toString());\n    }, [visible]);\n\n    // Get the popover coordinates\n    const { top, left } = usePopoverPosition({\n      elementRect: triggerRect,\n      popoverRect,\n      placement,\n      gap,\n      flip,\n    });\n\n    // Close the popover when the user clicks outside of it\n    useClickOutside(popoverRef, onClose);\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <Container\n          top={top}\n          left={left}\n          visible={visible}\n          id={popoverId}\n          role='dialog'\n          {...rest}\n          ref={measuredPopoverRef}\n        >\n          {children}\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","omitEmotionProps","top","left","borderRadius","clr","popoverColorBg","popoverColorText","popoverColorBorder","popoverColorBoxShadow","sizeStyles","emptyRect","width","height","Popover","forwardRef","ref","trigger","placement","gap","flip","onClose","id","children","rest","useForwardedRef","popoverRef","mergedPopoverRef","useState","popoverRect","setPopoverRect","triggerRect","setTriggerRect","useTheme","mounted","useClosable","popoverResizeListener","useCallback","current","getBoundingClientRect","useResizeObserver","measuredPopoverRef","node","triggerResizeListener","window","requestAnimationFrame","useBrowserLayoutEffect","useEvent","document","useEffect","undefined","popoverId","useMemo","Math","random","toString","slice","getAttribute","setAttribute","usePopoverPosition","elementRect","useClickOutside","displayName"],"sources":["../../../src/Popover/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  RefCallback,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useClickOutside,\n  useClosable,\n  useEvent,\n  useForwardedRef,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport usePopoverPosition, {\n  Placement,\n  Rect,\n} from './utils/usePopoverPosition';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PopoverProps extends JsxDivProps, WithSize {\n  /**\n   * The element next to which the popover appears.\n   * @default undefined\n   */\n  trigger?: RefObject<Element> | Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.2\n   */\n  gap?: number;\n  /**\n   * Whether the popover to flip if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n  /**\n   * Whether the popover is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The close event handler.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {\n  top: number;\n  left: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('top', 'left', 'visible', 'size')\n)<ContainerProps>`\n  position: absolute;\n  top: ${(p) => p.top}px;\n  left: ${(p) => p.left}px;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  background-color: ${(p) => clr(p.theme.popoverColorBg)};\n  color: ${(p) => clr(p.theme.popoverColorText)};\n  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};\n  z-index: 1000; // Greater than the z-index of the Drawer\n\n  ${visibleStyles};\n  ${invisibleStyles};\n  ${sizeStyles};\n`;\n\nconst emptyRect: Rect = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n/**\n * The pop-up window located next to the element.\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      trigger,\n      placement = 'top',\n      gap = 0.2,\n      flip = true,\n      visible = false,\n      onClose = () => {},\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);\n    const [popoverRect, setPopoverRect] = useState(emptyRect);\n    const [triggerRect, setTriggerRect] = useState(emptyRect);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Init the rect of the popover and update it when the popover size changes\n    const popoverResizeListener = useCallback(() => {\n      if (!popoverRef.current) return;\n      setPopoverRect(popoverRef.current.getBoundingClientRect());\n    }, [popoverRef]);\n    useResizeObserver(\n      popoverRef.current as HTMLDivElement,\n      popoverResizeListener\n    );\n\n    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(\n      (node) => {\n        if (node === null) return;\n        setPopoverRect(node.getBoundingClientRect());\n        mergedPopoverRef(node);\n      },\n      [mergedPopoverRef]\n    );\n\n    // Init the rect of the trigger and update it when the window was resized\n    // or scrolled\n    const triggerResizeListener = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!trigger) return;\n        const { current } = trigger as RefObject<Element>;\n        if (!current) return;\n        setTriggerRect(current.getBoundingClientRect());\n      });\n    }, [trigger]);\n    useBrowserLayoutEffect(() => {\n      if (!visible) return;\n      triggerResizeListener();\n    }, [triggerResizeListener, visible]);\n    useResizeObserver(trigger as never, triggerResizeListener);\n    useEvent(\n      (typeof window === 'undefined' ? null : window) as never,\n      'resize',\n      triggerResizeListener\n    );\n    useEvent(document, 'scroll', triggerResizeListener);\n\n    useEffect(() => {\n      if (!trigger || (trigger as RefObject<Element>).current !== undefined)\n        return;\n      setTriggerRect(trigger as Rect);\n    }, [trigger]);\n\n    const popoverId = useMemo(\n      () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Set the aria tags to support accessibility features\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      if (current.getAttribute('aria-haspopup') === null) {\n        current.setAttribute('aria-haspopup', 'dialog');\n      }\n      current.setAttribute('aria-controls', popoverId);\n    }, []);\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-expanded', visible.toString());\n    }, [visible]);\n\n    // Get the popover coordinates\n    const { top, left } = usePopoverPosition({\n      elementRect: triggerRect,\n      popoverRect,\n      placement,\n      gap,\n      flip,\n    });\n\n    // Close the popover when the user clicks outside of it\n    useClickOutside(popoverRef, onClose);\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <Container\n          top={top}\n          left={left}\n          visible={visible}\n          id={popoverId}\n          role='dialog'\n          {...rest}\n          ref={measuredPopoverRef}\n        >\n          {children}\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"mappings":";;;;;;;AAAA;AASA;AACA;AASA;AACA;AACA;AACA;AACA;AAGoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCpC,IAAMA,MAAM,OAAGC,iBAAS,sHAGvB;AAED,IAAMC,OAAO,OAAGD,iBAAS,wHAGxB;AAED,IAAME,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAC;EAAA,OACtBA,CAAC,CAACC,OAAO,QACTC,WAAG,mHACYN,MAAM,EAAII,CAAC,CAACG,KAAK,CAACC,eAAe,CAC/C;AAAA;AAEH,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIL,CAAC;EAAA,OACxB,CAACA,CAAC,CAACC,OAAO,QACVC,WAAG,mHACYJ,OAAO,EAAIE,CAAC,CAACG,KAAK,CAACC,eAAe,CAChD;AAAA;AAMH,IAAME,SAAS,GAAG,IAAAC,kBAAM,EACtB,KAAK,EACL,IAAAC,uBAAgB,EAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CACnD,iWAEQ,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACS,GAAG;AAAA,GACX,UAACT,CAAC;EAAA,OAAKA,CAAC,CAACU,IAAI;AAAA,GAEJ,UAACV,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACQ,YAAY;AAAA,GACxB,UAACX,CAAC;EAAA,OAAK,IAAAY,YAAG,EAACZ,CAAC,CAACG,KAAK,CAACU,cAAc,CAAC;AAAA,GAC7C,UAACb,CAAC;EAAA,OAAK,IAAAY,YAAG,EAACZ,CAAC,CAACG,KAAK,CAACW,gBAAgB,CAAC;AAAA,GACzB,UAACd,CAAC;EAAA,OAAK,IAAAY,YAAG,EAACZ,CAAC,CAACG,KAAK,CAACY,kBAAkB,CAAC;AAAA,GAC7B,UAACf,CAAC;EAAA,OAAK,IAAAY,YAAG,EAACZ,CAAC,CAACG,KAAK,CAACa,qBAAqB,CAAC;AAAA,GAGpEjB,aAAa,EACbM,eAAe,EACfY,kBAAU,CACb;AAED,IAAMC,SAAe,GAAG;EACtBT,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE,CAAC;EACPS,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACV,CAAC;;AAED;AACA;AACA;AACA,IAAMC,OAAO,gBAAG,IAAAC,iBAAU,EACxB,gBAYEC,GAAG,EACA;EAAA,IAXDC,OAAO,QAAPA,OAAO;IAAA,sBACPC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,gBACjBC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IAAA,oBACX1B,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACf2B,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAClBC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAIT,uBAAuC,IAAAC,sBAAe,EAACT,GAAG,CAAC;IAAA;IAApDU,UAAU;IAAEC,gBAAgB;EACnC,gBAAsC,IAAAC,eAAQ,EAACjB,SAAS,CAAC;IAAA;IAAlDkB,WAAW;IAAEC,cAAc;EAClC,iBAAsC,IAAAF,eAAQ,EAACjB,SAAS,CAAC;IAAA;IAAlDoB,WAAW;IAAEC,cAAc;EAClC,gBAAkB,IAAAC,iBAAQ,GAAE;IAApBrC,KAAK,aAALA,KAAK;EACb,IAAMsC,OAAO,GAAG,IAAAC,kBAAW,EAACzC,OAAO,EAAEE,KAAK,CAACC,eAAe,CAAC;;EAE3D;EACA,IAAMuC,qBAAqB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAC9C,IAAI,CAACX,UAAU,CAACY,OAAO,EAAE;IACzBR,cAAc,CAACJ,UAAU,CAACY,OAAO,CAACC,qBAAqB,EAAE,CAAC;EAC5D,CAAC,EAAE,CAACb,UAAU,CAAC,CAAC;EAChB,IAAAc,wBAAiB,EACfd,UAAU,CAACY,OAAO,EAClBF,qBAAqB,CACtB;EAED,IAAMK,kBAAkB,GAAG,IAAAJ,kBAAW,EACpC,UAACK,IAAI,EAAK;IACR,IAAIA,IAAI,KAAK,IAAI,EAAE;IACnBZ,cAAc,CAACY,IAAI,CAACH,qBAAqB,EAAE,CAAC;IAC5CZ,gBAAgB,CAACe,IAAI,CAAC;EACxB,CAAC,EACD,CAACf,gBAAgB,CAAC,CACnB;;EAED;EACA;EACA,IAAMgB,qBAAqB,GAAG,IAAAN,kBAAW,EAAC,YAAM;IAC9CO,MAAM,CAACC,qBAAqB,CAAC,YAAM;MACjC,IAAI,CAAC5B,OAAO,EAAE;MACd,YAAoBA,OAAO;QAAnBqB,OAAO,SAAPA,OAAO;MACf,IAAI,CAACA,OAAO,EAAE;MACdN,cAAc,CAACM,OAAO,CAACC,qBAAqB,EAAE,CAAC;IACjD,CAAC,CAAC;EACJ,CAAC,EAAE,CAACtB,OAAO,CAAC,CAAC;EACb,IAAA6B,6BAAsB,EAAC,YAAM;IAC3B,IAAI,CAACpD,OAAO,EAAE;IACdiD,qBAAqB,EAAE;EACzB,CAAC,EAAE,CAACA,qBAAqB,EAAEjD,OAAO,CAAC,CAAC;EACpC,IAAA8C,wBAAiB,EAACvB,OAAO,EAAW0B,qBAAqB,CAAC;EAC1D,IAAAI,eAAQ,EACL,OAAOH,MAAM,KAAK,WAAW,GAAG,IAAI,GAAGA,MAAM,EAC9C,QAAQ,EACRD,qBAAqB,CACtB;EACD,IAAAI,eAAQ,EAACC,QAAQ,EAAE,QAAQ,EAAEL,qBAAqB,CAAC;EAEnD,IAAAM,gBAAS,EAAC,YAAM;IACd,IAAI,CAAChC,OAAO,IAAKA,OAAO,CAAwBqB,OAAO,KAAKY,SAAS,EACnE;IACFlB,cAAc,CAACf,OAAO,CAAS;EACjC,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAMkC,SAAS,GAAG,IAAAC,cAAO,EACvB;IAAA,OAAM9B,EAAE,sBAAe+B,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAE;EAAA,GAChE,CAAClC,EAAE,CAAC,CACL;;EAED;EACA,IAAAwB,6BAAsB,EAAC,YAAM;IAC3B,IAAI,CAAC7B,OAAO,EAAE;IACd,YAAoBA,OAAO;MAAnBqB,OAAO,SAAPA,OAAO;IACf,IAAI,CAACA,OAAO,EAAE;IACd,IAAIA,OAAO,CAACmB,YAAY,CAAC,eAAe,CAAC,KAAK,IAAI,EAAE;MAClDnB,OAAO,CAACoB,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjD;IACApB,OAAO,CAACoB,YAAY,CAAC,eAAe,EAAEP,SAAS,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EACN,IAAAL,6BAAsB,EAAC,YAAM;IAC3B,IAAI,CAAC7B,OAAO,EAAE;IACd,YAAoBA,OAAO;MAAnBqB,OAAO,SAAPA,OAAO;IACf,IAAI,CAACA,OAAO,EAAE;IACdA,OAAO,CAACoB,YAAY,CAAC,eAAe,EAAEhE,OAAO,CAAC6D,QAAQ,EAAE,CAAC;EAC3D,CAAC,EAAE,CAAC7D,OAAO,CAAC,CAAC;;EAEb;EACA,0BAAsB,IAAAiE,+BAAkB,EAAC;MACvCC,WAAW,EAAE7B,WAAW;MACxBF,WAAW,EAAXA,WAAW;MACXX,SAAS,EAATA,SAAS;MACTC,GAAG,EAAHA,GAAG;MACHC,IAAI,EAAJA;IACF,CAAC,CAAC;IANMlB,GAAG,uBAAHA,GAAG;IAAEC,IAAI,uBAAJA,IAAI;;EAQjB;EACA,IAAA0D,sBAAe,EAACnC,UAAU,EAAEL,OAAO,CAAC;EAEpC,IAAI,CAACa,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACE,gCAAC,kBAAM,qBACL,gCAAC,SAAS;IACR,GAAG,EAAEhC,GAAI;IACT,IAAI,EAAEC,IAAK;IACX,OAAO,EAAET,OAAQ;IACjB,EAAE,EAAEyD,SAAU;IACd,IAAI,EAAC;EAAQ,GACT3B,IAAI;IACR,GAAG,EAAEiB;EAAmB,IAEvBlB,QAAQ,CACC,CACL;AAEb,CAAC,CACF;AAEDT,OAAO,CAACgD,WAAW,GAAG,SAAS;AAAC,eAEjBhD,OAAO;AAAA"}