@os-design/core 1.0.156 → 1.0.158

package/dist/esm/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","useBrowserLayoutEffect","useForwardedRef","useKeyPress","useIsMinWidth","enableScrollingStyles","MenuContext","Popover","Modal","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,sBADF,EAEEC,eAFF,EAGEC,WAHF,QAIO,kBAJP;AAKA,SAASC,aAAT,QAA8B,kBAA9B;AACA,SAASC,qBAAT,QAAsC,mBAAtC;AACA,SAASC,WAAT,QAA4B,uBAA5B;AACA,OAAOC,OAAP,MAAsC,YAAtC;AACA,OAAOC,KAAP,MAAkB,UAAlB;AACA,OAAOC,kBAAP,MAA+B,4BAA/B;AAeA,MAAMC,aAAa,GAAGV,MAAM,CAACO,OAAD,CAAU;AACtC,aAAcI,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAoB;AAChD,eAAgBF,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,YAAa;AAC3C,gBAAiBH,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,aAAc;AAC7C;AACA,IAAIV,qBAAqB,CAAC,GAAD,CAAM;AAC/B,CANA;AAQA,MAAMW,WAAW,GAAGhB,MAAM,CAACQ,KAAD,CAAQ;AAClC;AACA;AACA,CAHA;AAKA;AACA;AACA;;AACA,MAAMS,IAAI,gBAAGnB,UAAU,CACrB,CACE;EACEoB,aAAa,GAAG,IADlB;EAEEC,UAFF;EAGEC,OAHF;EAIEC,SAAS,GAAG,cAJd;EAKEC,OALF;EAMEC,OAAO,GAAG,MAAM,CAAE,CANpB;EAOEC,IAPF;EAQEC,SARF;EASEC,EATF;EAUEC,QAVF;EAWE,GAAGC;AAXL,CADF,EAcEC,GAdF,KAeK;EACH,MAAM,CAACC,YAAD,EAAeC,kBAAf,IAAqC7B,eAAe,CAAC2B,GAAD,CAA1D;EACApB,kBAAkB,CAACqB,YAAD,CAAlB;EACA3B,WAAW,CACR,OAAO6B,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SADjC,EAET,QAFS,EAGTV,OAHS,CAAX;EAKA,MAAMW,OAAO,GAAG9B,aAAa,CAAC,IAAD,CAA7B;EAEA,MAAM+B,MAAM,GAAGpC,OAAO,CACpB,MAAM2B,EAAE,IAAK,QAAOU,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EADxC,EAEpB,CAACb,EAAD,CAFoB,CAAtB,CAVG,CAeH;;EACAzB,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAACmB,OAAL,EAAc;IACd,MAAM;MAAEoB;IAAF,IAAcpB,OAApB;IACA,IAAI,CAACoB,OAAL,EAAc;IACdA,OAAO,CAACC,YAAR,CAAqB,eAArB,EAAsC,MAAtC;IACAD,OAAO,CAACC,YAAR,CAAqB,eAArB,EAAsCN,MAAtC;EACD,CANqB,EAMnB,CAACA,MAAD,CANmB,CAAtB;EAQA,MAAMO,YAAY,GAAG3C,OAAO,CAC1B,OAAO;IAAEmB,aAAF;IAAiBK;EAAjB,CAAP,CAD0B,EAE1B,CAACL,aAAD,EAAgBK,OAAhB,CAF0B,CAA5B;EAKA,oBACE,oBAAC,WAAD,CAAa,QAAb;IAAsB,KAAK,EAAEmB;EAA7B,GACGR,OAAO,gBACN,oBAAC,aAAD;IACE,OAAO,EAAEd,OADX;IAEE,SAAS,EAAEC,SAFb;IAGE,OAAO,EAAEC,OAHX;IAIE,OAAO,EAAEC,OAJX;IAKE,IAAI,EAAEC,IALR;IAME,SAAS,EAAEC,SANb;IAOE,EAAE,EAAEU,MAPN;IAQE,IAAI,EAAC;EARP,GASMP,IATN;IAUE,GAAG,EAAEG;EAVP,IAYGJ,QAZH,CADM,gBAgBN,oBAAC,WAAD;IACE,KAAK,EAAER,UADT;IAEE,MAAM,EAAE,IAFV;IAGE,OAAO,EAAEG,OAHX;IAIE,OAAO,EAAEC,OAJX;IAKE,IAAI,EAAEC,IALR;IAME,SAAS,EAAEC,SANb;IAOE,EAAE,EAAEU,MAPN;IAQE,IAAI,EAAC,MARP;IASE,GAAG,EAAEJ;EATP,GAWGJ,QAXH,CAjBJ,CADF;AAkCD,CA/EoB,CAAvB;AAkFAV,IAAI,CAAC0B,WAAL,GAAmB,MAAnB;AAEA,eAAe1B,IAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","useBrowserLayoutEffect","useForwardedRef","useKeyPress","useIsMinWidth","enableScrollingStyles","MenuContext","Popover","Modal","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC7D,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,sBAAsB,EACtBC,eAAe,EACfC,WAAW,QACN,kBAAkB;AACzB,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SAASC,WAAW,QAAQ,uBAAuB;AACnD,OAAOC,OAAO,MAAwB,YAAY;AAClD,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,kBAAkB,MAAM,4BAA4B;AAe3D,MAAMC,aAAa,GAAGV,MAAM,CAACO,OAAO,CAAE;AACtC,aAAcI,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,mBAAoB;AAChD,eAAgBF,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACE,YAAa;AAC3C,gBAAiBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,aAAc;AAC7C;AACA,IAAIV,qBAAqB,CAAC,GAAG,CAAE;AAC/B,CAAC;AAED,MAAMW,WAAW,GAAGhB,MAAM,CAACQ,KAAK,CAAE;AAClC;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMS,IAAI,gBAAGnB,UAAU,CACrB,CACE;EACEoB,aAAa,GAAG,IAAI;EACpBC,UAAU;EACVC,OAAO;EACPC,SAAS,GAAG,cAAc;EAC1BC,OAAO;EACPC,OAAO,GAAG,MAAM,CAAC,CAAC;EAClBC,IAAI;EACJC,SAAS;EACTC,EAAE;EACFC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,YAAY,EAAEC,kBAAkB,CAAC,GAAG7B,eAAe,CAAC2B,GAAG,CAAC;EAC/DpB,kBAAkB,CAACqB,YAAY,CAAC;EAChC3B,WAAW,CACR,OAAO6B,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRV,OAAO,CACR;EACD,MAAMW,OAAO,GAAG9B,aAAa,CAAC,IAAI,CAAC;EAEnC,MAAM+B,MAAM,GAAGpC,OAAO,CACpB,MAAM2B,EAAE,IAAK,QAAOU,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAE,EAAC,EAC7D,CAACb,EAAE,CAAC,CACL;;EAED;EACAzB,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAACmB,OAAO,EAAE;IACd,MAAM;MAAEoB;IAAQ,CAAC,GAAGpB,OAA6B;IACjD,IAAI,CAACoB,OAAO,EAAE;IACdA,OAAO,CAACC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;IAC7CD,OAAO,CAACC,YAAY,CAAC,eAAe,EAAEN,MAAM,CAAC;EAC/C,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMO,YAAY,GAAG3C,OAAO,CAC1B,OAAO;IAAEmB,aAAa;IAAEK;EAAQ,CAAC,CAAC,EAClC,CAACL,aAAa,EAAEK,OAAO,CAAC,CACzB;EAED,oBACE,oBAAC,WAAW,CAAC,QAAQ;IAAC,KAAK,EAAEmB;EAAa,GACvCR,OAAO,gBACN,oBAAC,aAAa;IACZ,OAAO,EAAEd,OAAQ;IACjB,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEC,OAAQ;IACjB,OAAO,EAAEC,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEC,SAAU;IACrB,EAAE,EAAEU,MAAO;IACX,IAAI,EAAC;EAAM,GACPP,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBJ,QAAQ,CACK,gBAEhB,oBAAC,WAAW;IACV,KAAK,EAAER,UAAW;IAClB,MAAM,EAAE,IAAK;IACb,OAAO,EAAEG,OAAQ;IACjB,OAAO,EAAEC,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEC,SAAU;IACrB,EAAE,EAAEU,MAAO;IACX,IAAI,EAAC,MAAM;IACX,GAAG,EAAEJ;EAAmB,GAEvBJ,QAAQ,CAEZ,CACoB;AAE3B,CAAC,CACF;AAEDV,IAAI,CAAC0B,WAAW,GAAG,MAAM;AAEzB,eAAe1B,IAAI"}

package/dist/esm/Menu/utils/useFocusWithArrows.js

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { useKeyPress } from '@os-design/utils';
-
 const useFocusWithArrows = ref => {
   const arrowKeyPressListener = useCallback(e => {
     if (!ref.current) return;
@@ -10,7 +9,6 @@ const useFocusWithArrows = ref => {
     } = document;
     const curFocusedIndex = activeElement ? [...focusableListItems].indexOf(activeElement) : -1;
     let nextFocusedIndex;
-
     if (curFocusedIndex === -1 && e.key === 'ArrowUp') {
       nextFocusedIndex = focusableListItems.length - 1;
     } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {
@@ -20,7 +18,6 @@ const useFocusWithArrows = ref => {
     } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {
       nextFocusedIndex = curFocusedIndex < focusableListItems.length - 1 ? curFocusedIndex + 1 : 0;
     }
-
     if (nextFocusedIndex === undefined) return;
     const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);
     if (!nextFocusedListItem) return;
@@ -29,6 +26,5 @@ const useFocusWithArrows = ref => {
   }, [ref]);
   useKeyPress(typeof window !== 'undefined' ? window : undefined, ['ArrowUp', 'ArrowDown'], arrowKeyPressListener);
 };
-
 export default useFocusWithArrows;
 //# sourceMappingURL=useFocusWithArrows.js.map

package/dist/esm/Menu/utils/useFocusWithArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithArrows.js","names":["useCallback","useKeyPress","useFocusWithArrows","ref","arrowKeyPressListener","e","current","focusableListItems","querySelectorAll","activeElement","document","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { RefObject, useCallback } from 'react';\nimport { KeyPressListener, useKeyPress } from '@os-design/utils';\n\nconst useFocusWithArrows = (ref: RefObject<Element>): void => {\n  const arrowKeyPressListener = useCallback<KeyPressListener>(\n    (e) => {\n      if (!ref.current) return;\n      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(\n        'button:not([disabled])'\n      );\n      const { activeElement } = document;\n      const curFocusedIndex = activeElement\n        ? ([...focusableListItems] as Element[]).indexOf(activeElement)\n        : -1;\n\n      let nextFocusedIndex;\n      if (curFocusedIndex === -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex = focusableListItems.length - 1;\n      } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex = 0;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex =\n          curFocusedIndex > 0\n            ? curFocusedIndex - 1\n            : focusableListItems.length - 1;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex =\n          curFocusedIndex < focusableListItems.length - 1\n            ? curFocusedIndex + 1\n            : 0;\n      }\n\n      if (nextFocusedIndex === undefined) return;\n      const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);\n      if (!nextFocusedListItem) return;\n\n      nextFocusedListItem.focus();\n      e.preventDefault();\n    },\n    [ref]\n  );\n\n  useKeyPress(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    ['ArrowUp', 'ArrowDown'],\n    arrowKeyPressListener\n  );\n};\n\nexport default useFocusWithArrows;\n"],"mappings":"AAAA,SAAoBA,WAApB,QAAuC,OAAvC;AACA,SAA2BC,WAA3B,QAA8C,kBAA9C;;AAEA,MAAMC,kBAAkB,GAAIC,GAAD,IAAmC;EAC5D,MAAMC,qBAAqB,GAAGJ,WAAW,CACtCK,CAAD,IAAO;IACL,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;IAClB,MAAMC,kBAAkB,GAAGJ,GAAG,CAACG,OAAJ,CAAYE,gBAAZ,CACzB,wBADyB,CAA3B;IAGA,MAAM;MAAEC;IAAF,IAAoBC,QAA1B;IACA,MAAMC,eAAe,GAAGF,aAAa,GAChC,CAAC,GAAGF,kBAAJ,CAAD,CAAuCK,OAAvC,CAA+CH,aAA/C,CADiC,GAEjC,CAAC,CAFL;IAIA,IAAII,gBAAJ;;IACA,IAAIF,eAAe,KAAK,CAAC,CAArB,IAA0BN,CAAC,CAACS,GAAF,KAAU,SAAxC,EAAmD;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAnB,GAA4B,CAA/C;IACD,CAFD,MAEO,IAAIJ,eAAe,KAAK,CAAC,CAArB,IAA0BN,CAAC,CAACS,GAAF,KAAU,WAAxC,EAAqD;MAC1DD,gBAAgB,GAAG,CAAnB;IACD,CAFM,MAEA,IAAIF,eAAe,GAAG,CAAC,CAAnB,IAAwBN,CAAC,CAACS,GAAF,KAAU,SAAtC,EAAiD;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAlB,GACIA,eAAe,GAAG,CADtB,GAEIJ,kBAAkB,CAACQ,MAAnB,GAA4B,CAHlC;IAID,CALM,MAKA,IAAIJ,eAAe,GAAG,CAAC,CAAnB,IAAwBN,CAAC,CAACS,GAAF,KAAU,WAAtC,EAAmD;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAnB,GAA4B,CAA9C,GACIJ,eAAe,GAAG,CADtB,GAEI,CAHN;IAID;;IAED,IAAIE,gBAAgB,KAAKG,SAAzB,EAAoC;IACpC,MAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAnB,CAAwBL,gBAAxB,CAA5B;IACA,IAAI,CAACI,mBAAL,EAA0B;IAE1BA,mBAAmB,CAACE,KAApB;IACAd,CAAC,CAACe,cAAF;EACD,CAlCsC,EAmCvC,CAACjB,GAAD,CAnCuC,CAAzC;EAsCAF,WAAW,CACR,OAAOoB,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCL,SADjC,EAET,CAAC,SAAD,EAAY,WAAZ,CAFS,EAGTZ,qBAHS,CAAX;AAKD,CA5CD;;AA8CA,eAAeF,kBAAf"}
+{"version":3,"file":"useFocusWithArrows.js","names":["useCallback","useKeyPress","useFocusWithArrows","ref","arrowKeyPressListener","e","current","focusableListItems","querySelectorAll","activeElement","document","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { RefObject, useCallback } from 'react';\nimport { KeyPressListener, useKeyPress } from '@os-design/utils';\n\nconst useFocusWithArrows = (ref: RefObject<Element>): void => {\n  const arrowKeyPressListener = useCallback<KeyPressListener>(\n    (e) => {\n      if (!ref.current) return;\n      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(\n        'button:not([disabled])'\n      );\n      const { activeElement } = document;\n      const curFocusedIndex = activeElement\n        ? ([...focusableListItems] as Element[]).indexOf(activeElement)\n        : -1;\n\n      let nextFocusedIndex;\n      if (curFocusedIndex === -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex = focusableListItems.length - 1;\n      } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex = 0;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex =\n          curFocusedIndex > 0\n            ? curFocusedIndex - 1\n            : focusableListItems.length - 1;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex =\n          curFocusedIndex < focusableListItems.length - 1\n            ? curFocusedIndex + 1\n            : 0;\n      }\n\n      if (nextFocusedIndex === undefined) return;\n      const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);\n      if (!nextFocusedListItem) return;\n\n      nextFocusedListItem.focus();\n      e.preventDefault();\n    },\n    [ref]\n  );\n\n  useKeyPress(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    ['ArrowUp', 'ArrowDown'],\n    arrowKeyPressListener\n  );\n};\n\nexport default useFocusWithArrows;\n"],"mappings":"AAAA,SAAoBA,WAAW,QAAQ,OAAO;AAC9C,SAA2BC,WAAW,QAAQ,kBAAkB;AAEhE,MAAMC,kBAAkB,GAAIC,GAAuB,IAAW;EAC5D,MAAMC,qBAAqB,GAAGJ,WAAW,CACtCK,CAAC,IAAK;IACL,IAAI,CAACF,GAAG,CAACG,OAAO,EAAE;IAClB,MAAMC,kBAAkB,GAAGJ,GAAG,CAACG,OAAO,CAACE,gBAAgB,CACrD,wBAAwB,CACzB;IACD,MAAM;MAAEC;IAAc,CAAC,GAAGC,QAAQ;IAClC,MAAMC,eAAe,GAAGF,aAAa,GAChC,CAAC,GAAGF,kBAAkB,CAAC,CAAeK,OAAO,CAACH,aAAa,CAAC,GAC7D,CAAC,CAAC;IAEN,IAAII,gBAAgB;IACpB,IAAIF,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IAClD,CAAC,MAAM,IAAIJ,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MAC1DD,gBAAgB,GAAG,CAAC;IACtB,CAAC,MAAM,IAAIF,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAC,GACfA,eAAe,GAAG,CAAC,GACnBJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IACrC,CAAC,MAAM,IAAIJ,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC,GAC3CJ,eAAe,GAAG,CAAC,GACnB,CAAC;IACT;IAEA,IAAIE,gBAAgB,KAAKG,SAAS,EAAE;IACpC,MAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAI,CAACL,gBAAgB,CAAC;IACrE,IAAI,CAACI,mBAAmB,EAAE;IAE1BA,mBAAmB,CAACE,KAAK,EAAE;IAC3Bd,CAAC,CAACe,cAAc,EAAE;EACpB,CAAC,EACD,CAACjB,GAAG,CAAC,CACN;EAEDF,WAAW,CACR,OAAOoB,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGL,SAAS,EACnD,CAAC,SAAS,EAAE,WAAW,CAAC,EACxBZ,qBAAqB,CACtB;AACH,CAAC;AAED,eAAeF,kBAAkB"}

package/dist/esm/MenuDivider/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
@@ -8,10 +7,10 @@ const Container = styled.div`
   border-bottom: 1px solid ${p => clr(p.theme.menuDividerColor)};
   margin-bottom: 0.4em;
 `;
+
 /**
  * The divider of menu items.
  */
-
 const MenuDivider = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(Container, _extends({
   role: "separator"
 }, props, {

package/dist/esm/MenuDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","clr","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,oBAApB;AAIA,MAAMC,SAAS,GAAGF,MAAM,CAACG,GAAI;AAC7B;AACA,6BAA8BC,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQC,gBAAT,CAA2B;AAClE;AACA,CAJA;AAMA;AACA;AACA;;AACA,MAAMC,WAAW,gBAAGR,UAAU,CAC5B,CAACS,KAAD,EAAQC,GAAR,kBAAgB,oBAAC,SAAD;EAAW,IAAI,EAAC;AAAhB,GAAgCD,KAAhC;EAAuC,GAAG,EAAEC;AAA5C,GADY,CAA9B;AAIAF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;AAEA,eAAeH,WAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","clr","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AAIxC,MAAMC,SAAS,GAAGF,MAAM,CAACG,GAAI;AAC7B;AACA,6BAA8BC,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AAClE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGR,UAAU,CAC5B,CAACS,KAAK,EAAEC,GAAG,kBAAK,oBAAC,SAAS;EAAC,IAAI,EAAC;AAAW,GAAKD,KAAK;EAAE,GAAG,EAAEC;AAAI,GAAG,CACpE;AAEDF,WAAW,CAACG,WAAW,GAAG,aAAa;AAEvC,eAAeH,WAAW"}

package/dist/esm/MenuGroup/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef, useContext, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
@@ -33,10 +32,10 @@ const Container = styled.div`
     }
   }
 `;
+
 /**
  * The group of menu items.
  */
-
 const MenuGroup = /*#__PURE__*/forwardRef(({
   title,
   maxSelectedItems = 1,

package/dist/esm/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}

package/dist/esm/MenuItem/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef, useCallback, useContext, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { m } from '@os-design/media';
@@ -9,11 +8,9 @@ import { omitEmotionProps } from '@os-design/utils';
 import { css } from '@emotion/react';
 import { MenuContext } from '@os-design/menu-utils';
 import Button from '../Button';
-
 const selectedStyles = p => p.selected && css`
     background-color: ${clr(p.theme.menuItemSelectedColorBg)};
   `;
-
 const StyledButton = styled(Button, omitEmotionProps('selected'))`
   display: flex;
   font-weight: normal;
@@ -37,10 +34,10 @@ const StyledButton = styled(Button, omitEmotionProps('selected'))`
 const SelectedIcon = styled(Check)`
   color: ${p => clr(p.theme.menuItemSelectedColorIcon)};
 `;
+
 /**
  * The base menu item.
  */
-
 const MenuItem = /*#__PURE__*/forwardRef(({
   selected = false,
   value,

package/dist/esm/MenuItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useEffect","useRef","styled","m","clr","ThemeOverrider","Check","omitEmotionProps","css","MenuContext","Button","selectedStyles","p","selected","theme","menuItemSelectedColorBg","StyledButton","menuItemHeight","menuItemPaddingHorizontal","min","xs","SelectedIcon","menuItemSelectedColorIcon","MenuItem","value","right","onClick","rest","ref","closeOnSelect","onClose","onClickRef","current","clickHandler","e","buttonGhostColorText","colorText","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { Check } from '@os-design/icons';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,UADF,EAEEC,WAFF,EAGEC,UAHF,EAIEC,SAJF,EAKEC,MALF,QAMO,OANP;AAOA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,WAAT,QAA4B,uBAA5B;AACA,OAAOC,MAAP,MAAoC,WAApC;;AAgBA,MAAMC,cAAc,GAAIC,CAAD,IACrBA,CAAC,CAACC,QAAF,IACAL,GAAI;AACN,wBAAwBJ,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQC,uBAAT,CAAkC;AAC7D,GAJA;;AAOA,MAAMC,YAAY,GAAGd,MAAM,CACzBQ,MADyB,EAEzBH,gBAAgB,CAAC,UAAD,CAFS,CAGN;AACrB;AACA;AACA;AACA,YAAaK,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQG,cAAe;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAgBL,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQI,yBAAR,CAAkC,CAAlC,CAAqC;AAC3D,IAAIf,CAAC,CAACgB,GAAF,CAAMC,EAAG;AACb,iBAAkBR,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQI,yBAAR,CAAkC,CAAlC,CAAqC;AAC7D;AACA;AACA,IAAIP,cAAe;AACnB,CAtBA;AAwBA,MAAMU,YAAY,GAAGnB,MAAM,CAACI,KAAD,CAAQ;AACnC,WAAYM,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQQ,yBAAT,CAAoC;AACzD,CAFA;AAIA;AACA;AACA;;AACA,MAAMC,QAAQ,gBAAG1B,UAAU,CACzB,CAAC;EAAEgB,QAAQ,GAAG,KAAb;EAAoBW,KAApB;EAA2BC,KAA3B;EAAkCC,OAAO,GAAG,MAAM,CAAE,CAApD;EAAsD,GAAGC;AAAzD,CAAD,EAAkEC,GAAlE,KAA0E;EACxE,MAAM;IAAEC,aAAF;IAAiBC;EAAjB,IAA6B/B,UAAU,CAACU,WAAD,CAA7C;EACA,MAAMsB,UAAU,GAAG9B,MAAM,EAAzB;EAEAD,SAAS,CAAC,MAAM;IACd+B,UAAU,CAACC,OAAX,GAAqBN,OAArB;EACD,CAFQ,EAEN,CAACA,OAAD,CAFM,CAAT;EAIA,MAAMO,YAAY,GAAGnC,WAAW,CAC7BoC,CAAD,IAAO;IACL,IAAIH,UAAU,CAACC,OAAf,EAAwBD,UAAU,CAACC,OAAX,CAAmBE,CAAnB;IACxB,IAAIL,aAAJ,EAAmBC,OAAO;EAC3B,CAJ6B,EAK9B,CAACD,aAAD,EAAgBC,OAAhB,CAL8B,CAAhC;EAQA,oBACE,oBAAC,cAAD;IACE,SAAS,EAAGhB,KAAD,KAAY;MAAEqB,oBAAoB,EAAErB,KAAK,CAACsB;IAA9B,CAAZ;EADb,gBAGE,oBAAC,YAAD;IACE,QAAQ,EAAEvB,QADZ;IAEE,KAAK,EAAEA,QAAQ,gBAAG,oBAAC,YAAD,OAAH,GAAsBY,KAFvC;IAGE,IAAI,EAAC,OAHP;IAIE,IAAI,EAAC,QAJP;IAKE,OAAO,EAAEQ,YALX;IAME,IAAI,EAAC;EANP,GAOMN,IAPN;IAQE,GAAG,EAAEC;EARP,GAHF,CADF;AAgBD,CAjCwB,CAA3B;AAoCAL,QAAQ,CAACc,WAAT,GAAuB,UAAvB;AAEA,eAAed,QAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useEffect","useRef","styled","m","clr","ThemeOverrider","Check","omitEmotionProps","css","MenuContext","Button","selectedStyles","p","selected","theme","menuItemSelectedColorBg","StyledButton","menuItemHeight","menuItemPaddingHorizontal","min","xs","SelectedIcon","menuItemSelectedColorIcon","MenuItem","value","right","onClick","rest","ref","closeOnSelect","onClose","onClickRef","current","clickHandler","e","buttonGhostColorText","colorText","displayName"],"sources":["../../../src/MenuItem/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { Check } from '@os-design/icons';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface MenuItemProps\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * Whether the menu item is selected.\n   * @default false\n   */\n  selected?: boolean;\n  /**\n   * The value of the menu item.\n   * @default undefined\n   */\n  value?: string;\n}\n\nconst selectedStyles = (p) =>\n  p.selected &&\n  css`\n    background-color: ${clr(p.theme.menuItemSelectedColorBg)};\n  `;\n\ntype StyledButtonProps = Pick<MenuItemProps, 'selected'>;\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('selected')\n)<StyledButtonProps>`\n  display: flex;\n  font-weight: normal;\n  border-radius: 0;\n  height: ${(p) => p.theme.menuItemHeight}em;\n\n  & > span {\n    flex: 1;\n    text-align: left;\n    overflow: hidden;\n    line-height: 1.5;\n  }\n\n  padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 ${(p) => p.theme.menuItemPaddingHorizontal[1]}em;\n  }\n\n  ${selectedStyles};\n`;\n\nconst SelectedIcon = styled(Check)`\n  color: ${(p) => clr(p.theme.menuItemSelectedColorIcon)};\n`;\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(\n  ({ selected = false, value, right, onClick = () => {}, ...rest }, ref) => {\n    const { closeOnSelect, onClose } = useContext(MenuContext);\n    const onClickRef = useRef<MenuItemProps['onClick']>();\n\n    useEffect(() => {\n      onClickRef.current = onClick;\n    }, [onClick]);\n\n    const clickHandler = useCallback(\n      (e) => {\n        if (onClickRef.current) onClickRef.current(e);\n        if (closeOnSelect) onClose();\n      },\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <ThemeOverrider\n        overrides={(theme) => ({ buttonGhostColorText: theme.colorText })}\n      >\n        <StyledButton\n          selected={selected}\n          right={selected ? <SelectedIcon /> : right}\n          type='ghost'\n          wide='always'\n          onClick={clickHandler}\n          role='menuitem'\n          {...rest}\n          ref={ref}\n        />\n      </ThemeOverrider>\n    );\n  }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":";AAAA,OAAOA,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,GAAG,EAAEC,cAAc,QAAQ,oBAAoB;AACxD,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,WAAW,QAAQ,uBAAuB;AACnD,OAAOC,MAAM,MAAuB,WAAW;AAgB/C,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVL,GAAI;AACN,wBAAwBJ,GAAG,CAACQ,CAAC,CAACE,KAAK,CAACC,uBAAuB,CAAE;AAC7D,GAAG;AAGH,MAAMC,YAAY,GAAGd,MAAM,CACzBQ,MAAM,EACNH,gBAAgB,CAAC,UAAU,CAAC,CACT;AACrB;AACA;AACA;AACA,YAAaK,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,cAAe;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAgBL,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACI,yBAAyB,CAAC,CAAC,CAAE;AAC3D,IAAIf,CAAC,CAACgB,GAAG,CAACC,EAAG;AACb,iBAAkBR,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACI,yBAAyB,CAAC,CAAC,CAAE;AAC7D;AACA;AACA,IAAIP,cAAe;AACnB,CAAC;AAED,MAAMU,YAAY,GAAGnB,MAAM,CAACI,KAAK,CAAE;AACnC,WAAYM,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACE,KAAK,CAACQ,yBAAyB,CAAE;AACzD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,QAAQ,gBAAG1B,UAAU,CACzB,CAAC;EAAEgB,QAAQ,GAAG,KAAK;EAAEW,KAAK;EAAEC,KAAK;EAAEC,OAAO,GAAG,MAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,aAAa;IAAEC;EAAQ,CAAC,GAAG/B,UAAU,CAACU,WAAW,CAAC;EAC1D,MAAMsB,UAAU,GAAG9B,MAAM,EAA4B;EAErDD,SAAS,CAAC,MAAM;IACd+B,UAAU,CAACC,OAAO,GAAGN,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMO,YAAY,GAAGnC,WAAW,CAC7BoC,CAAC,IAAK;IACL,IAAIH,UAAU,CAACC,OAAO,EAAED,UAAU,CAACC,OAAO,CAACE,CAAC,CAAC;IAC7C,IAAIL,aAAa,EAAEC,OAAO,EAAE;EAC9B,CAAC,EACD,CAACD,aAAa,EAAEC,OAAO,CAAC,CACzB;EAED,oBACE,oBAAC,cAAc;IACb,SAAS,EAAGhB,KAAK,KAAM;MAAEqB,oBAAoB,EAAErB,KAAK,CAACsB;IAAU,CAAC;EAAE,gBAElE,oBAAC,YAAY;IACX,QAAQ,EAAEvB,QAAS;IACnB,KAAK,EAAEA,QAAQ,gBAAG,oBAAC,YAAY,OAAG,GAAGY,KAAM;IAC3C,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,QAAQ;IACb,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAC;EAAU,GACXN,IAAI;IACR,GAAG,EAAEC;EAAI,GACT,CACa;AAErB,CAAC,CACF;AAEDL,QAAQ,CAACc,WAAW,GAAG,UAAU;AAEjC,eAAed,QAAQ"}

package/dist/esm/Modal/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import styled from '@emotion/styled';
@@ -22,15 +21,12 @@ const maskFadeOut = keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-
 const maskVisibleStyles = p => p.visible && css`
     animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const maskInvisibleStyles = p => !p.visible && css`
     animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
-
 export const ModalMask = styled('div', omitEmotionProps('visible'))`
   position: fixed;
   top: 0;
@@ -70,21 +66,18 @@ const contentFadeOutXs = keyframes`
   from { transform: translateY(6em); }
   to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
 `;
-
 const contentVisibleStyles = p => p.visible && css`
     animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;
     ${m.min.xs} {
       animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;
     }
   `;
-
 const contentInvisibleStyles = p => !p.visible && css`
     animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;
     ${m.min.xs} {
       animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;
     }
   `;
-
 const Content = styled('div', omitEmotionProps('visible', 'size'))`
   position: absolute;
   display: flex;
@@ -163,10 +156,10 @@ const Footer = styled.div`
       ${p => p.theme.modalBodyPaddingVertical[1]}em;
   }
 `;
+
 /**
  * The base pop-up window.
  */
-
 const Modal = /*#__PURE__*/forwardRef(({
   title,
   okText = 'OK',

package/dist/esm/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","useRef","FocusLock","styled","useBodyScroll","useKeyPress","useClosable","omitEmotionProps","ellipsisStyles","enableScrollingStyles","sizeStyles","m","css","keyframes","Close","clr","ThemeOverrider","useTheme","Portal","Button","defaultLocale","MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","maskFadeOut","maskVisibleStyles","p","visible","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","div","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","Body","modalBodyPaddingVertical","Footer","Modal","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","onClose","onOk","size","id","onClick","children","rest","ref","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport styled from '@emotion/styled';\nimport {\n  useBodyScroll,\n  useKeyPress,\n  useClosable,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport {\n  ellipsisStyles,\n  enableScrollingStyles,\n  sizeStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { m } from '@os-design/media';\nimport { css, keyframes } from '@emotion/react';\nimport { Close } from '@os-design/icons';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport Portal from '@os-design/portal';\nimport Button from '../Button';\nimport defaultLocale, { ModalLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ModalProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The text of the OK button.\n   * @default OK\n   */\n  okText?: string;\n  /**\n   * Sets the danger styles to the OK button.\n   * @default false\n   */\n  okDanger?: boolean;\n  /**\n   * Whether the OK button is loading.\n   * @default false\n   */\n  okLoading?: boolean;\n  /**\n   * Whether the OK button is disabled.\n   * @default false\n   */\n  okDisabled?: boolean;\n  /**\n   * The header component.\n   * Set as null if you don't need the default header.\n   * @default undefined\n   */\n  header?: React.ReactNode;\n  /**\n   * The footer component.\n   * Set as null if you don't need the default footer.\n   * @default undefined\n   */\n  footer?: React.ReactNode;\n  /**\n   * Whether the modal is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * The locale of the modal.\n   * @default undefined\n   */\n  locale?: ModalLocale;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask or\n   * the close button. The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n  /**\n   * Specifies a callback that will be called when a user clicks the OK button.\n   * @default undefined\n   */\n  onOk?: () => void;\n}\n\nconst MODAL_CONTAINER_Z_INDEX = 1000;\nconst MODAL_BOX_SHADOW_SIZE_EM = 1;\n\nconst maskFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst maskFadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst maskVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${maskFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst maskInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${maskFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype MaskProps = Pick<ModalProps, 'visible'>;\nexport const ModalMask = styled('div', omitEmotionProps('visible'))<MaskProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-color: ${(p) => clr(p.theme.modalMaskColorBg)};\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n  ${maskVisibleStyles};\n  ${maskInvisibleStyles};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${MODAL_CONTAINER_Z_INDEX};\n\n  ${m.min.xs} {\n    ${enableScrollingStyles('y')};\n  }\n`;\n\nconst contentFadeIn = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n`;\n\nconst contentFadeOut = keyframes`\n  from { transform: translateY(calc(var(--vh, 1vh) * 100 - 100%)); }\n  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentFadeInXs = keyframes`\n  from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateY(6em); }\n`;\n\nconst contentFadeOutXs = keyframes`\n  from { transform: translateY(6em); }\n  to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst contentVisibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeInXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\nconst contentInvisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${contentFadeOut} ${p.theme.transitionDelay}ms forwards;\n    ${m.min.xs} {\n      animation: ${contentFadeOutXs} ${p.theme.transitionDelay}ms forwards;\n    }\n  `;\n\ntype ContentProps = Pick<ModalProps, 'visible' | 'size'>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${MODAL_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.modalColorBoxShadow)};\n\n  width: 100%;\n  max-height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em\n    ${(p) => p.theme.borderRadius}em 0 0;\n\n  ${m.min.xs} {\n    width: ${(p) => p.theme.modalWidth}em;\n    max-height: unset;\n    border-radius: ${(p) => p.theme.borderRadius}em;\n\n    left: 50%;\n    margin-left: ${(p) => -p.theme.modalWidth / 2}em;\n  }\n\n  ${contentVisibleStyles};\n  ${contentInvisibleStyles}\n  ${sizeStyles};\n`;\n\nconst Header = styled.div`\n  flex-shrink: 0;\n  height: ${(p) => p.theme.modalHeaderHeight}em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.modalHeaderColorBorderBottom)};\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  padding-right: ${(p) =>\n    Math.max(\n      p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n      0\n    )}em;\n\n  ${m.min.xs} {\n    padding-left: ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n    padding-right: ${(p) =>\n      Math.max(\n        p.theme.modalBodyPaddingHorizontal[1] - p.theme.buttonPaddingHorizontal,\n        0\n      )}em;\n  }\n`;\n\nconst Title = styled.div`\n  flex: 1;\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Body = styled.div`\n  flex-grow: 1;\n\n  padding: ${(p) => p.theme.modalBodyPaddingVertical[0]}em\n    ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.modalBodyPaddingVertical[1]}em\n      ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em;\n  }\n\n  ${enableScrollingStyles('y')};\n`;\n\nconst Footer = styled.div`\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em\n    ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n\n  ${m.min.xs} {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[1]}em\n      ${(p) => p.theme.modalBodyPaddingVertical[1]}em;\n  }\n`;\n\n/**\n * The base pop-up window.\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      title,\n      okText = 'OK',\n      okDanger = false,\n      okLoading = false,\n      okDisabled = false,\n      header,\n      footer,\n      visible = false,\n      locale = defaultLocale,\n      onClose = () => {},\n      onOk,\n      size,\n      id,\n      onClick = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    const titleId = useMemo(\n      () => `modal-title-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n    const bodyId = useMemo(\n      () => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <ModalMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              aria-labelledby={header === undefined ? titleId : undefined}\n              aria-describedby={bodyId}\n              ref={contentRef}\n            >\n              {header === undefined ? (\n                <ThemeOverrider\n                  overrides={(t) => ({\n                    buttonPaddingHorizontal:\n                      t.modalCloseButtonPaddingHorizontal,\n                  })}\n                >\n                  <Header>\n                    <Title id={titleId}>{title}</Title>\n                    <Button\n                      type='ghost'\n                      wide='never'\n                      onClick={onClose}\n                      aria-label={locale.closeLabel}\n                    >\n                      <Close />\n                    </Button>\n                  </Header>\n                </ThemeOverrider>\n              ) : (\n                header\n              )}\n\n              <Body id={bodyId} {...rest} ref={ref}>\n                {children}\n              </Body>\n\n              {footer === undefined ? (\n                <Footer>\n                  <Button\n                    danger={okDanger}\n                    loading={okLoading}\n                    disabled={okDisabled}\n                    onClick={onOk}\n                  >\n                    {okText}\n                  </Button>\n                </Footer>\n              ) : (\n                footer\n              )}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/esm/Modal/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","closeLabel"],"sources":["../../../../src/Modal/utils/defaultLocale.ts"],"sourcesContent":["export interface ModalLocale {\n  closeLabel: string;\n}\n\nconst defaultLocale: ModalLocale = {\n  closeLabel: 'Close',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAIA,MAAMA,aAA0B,GAAG;EACjCC,UAAU,EAAE;AADqB,CAAnC;AAIA,eAAeD,aAAf"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","closeLabel"],"sources":["../../../../src/Modal/utils/defaultLocale.ts"],"sourcesContent":["export interface ModalLocale {\n  closeLabel: string;\n}\n\nconst defaultLocale: ModalLocale = {\n  closeLabel: 'Close',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAIA,MAAMA,aAA0B,GAAG;EACjCC,UAAU,EAAE;AACd,CAAC;AAED,eAAeD,aAAa"}

package/dist/esm/Navigation/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef, useRef } from 'react';
 import { enableScrollingStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
@@ -39,11 +38,9 @@ const Container = styled.div`
     border-right: 1px solid ${p => clr(p.theme.navigationColorBorder)};
   }
 `;
-
 const notHasSideTopStyles = p => !p.hasSideTop && css`
     padding-top: ${p.theme.pageHeaderHeight[1]}em;
   `;
-
 const hasPrevStyles = p => p.hasPrev && !p.hasNext && css`
     mask-image: linear-gradient(
       to right,
@@ -58,7 +55,6 @@ const hasPrevStyles = p => p.hasPrev && !p.hasNext && css`
       );
     }
   `;
-
 const hasNextStyles = p => !p.hasPrev && p.hasNext && css`
     mask-image: linear-gradient(
       to left,
@@ -73,7 +69,6 @@ const hasNextStyles = p => !p.hasPrev && p.hasNext && css`
       );
     }
   `;
-
 const hasPrevNextStyles = p => p.hasPrev && p.hasNext && css`
     mask-image: linear-gradient(
       to right,
@@ -92,7 +87,6 @@ const hasPrevNextStyles = p => p.hasPrev && p.hasNext && css`
       );
     }
   `;
-
 const Content = styled('div', omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext'))`
   position: absolute;
   top: 0;
@@ -138,10 +132,10 @@ const Addon = styled.div`
 const BottomAddon = styled(Addon)`
   margin-top: auto;
 `;
+
 /**
  * The main navigation.
  */
-
 const Navigation = /*#__PURE__*/forwardRef(({
   sideTop,
   sideBottom,

package/dist/esm/Navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useRef","enableScrollingStyles","omitEmotionProps","styled","clr","m","css","useScrollFlags","Container","div","p","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","Addon","BottomAddon","Navigation","sideTop","sideBottom","children","rest","ref","contentRef","displayName"],"sources":["../../../src/Navigation/index.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport useScrollFlags from './utils/useScrollFlags';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface NavigationProps extends JsxDivProps {\n  /**\n   * The top component in the side navigator.\n   * E.g. the user avatar.\n   * @default undefined\n   */\n  sideTop?: React.ReactNode;\n  /**\n   * The bottom component in the side navigator.\n   * E.g. the current tariff.\n   * @default undefined\n   */\n  sideBottom?: React.ReactNode;\n}\n\nconst Container = styled.div`\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.navigationColorBg)};\n  color: ${(p) => clr(p.theme.navigationColorText)};\n\n  // Tab navigator\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: calc(\n    ${(p) => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n  );\n  border-top: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    right: unset;\n    height: unset;\n    border-top: unset;\n\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: ${(p) => p.theme.navigationSideWidth}em;\n    border-right: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n  }\n`;\n\nconst notHasSideTopStyles = (p) =>\n  !p.hasSideTop &&\n  css`\n    padding-top: ${p.theme.pageHeaderHeight[1]}em;\n  `;\n\nconst hasPrevStyles = (p) =>\n  p.hasPrev &&\n  !p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasNextStyles = (p) =>\n  !p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to left,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to top,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasPrevNextStyles = (p) =>\n  p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em,\n      white calc(100% - ${p.theme.navigationMaskImageSize}em),\n      transparent\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em,\n        white calc(100% - ${p.theme.navigationMaskImageSize}em),\n        transparent\n      );\n    }\n  `;\n\ninterface ContentProps {\n  hasSideTop: boolean;\n  hasPrev: boolean;\n  hasNext: boolean;\n}\nconst Content = styled(\n  'div',\n  omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  &::before,\n  &::after {\n    content: ''; // Insert space before the first item and after the last one\n  }\n\n  overflow-y: hidden;\n  ${enableScrollingStyles('x', false)};\n\n  ${m.min.md} {\n    // Reset tab navigator styles\n    justify-content: unset;\n    align-items: unset;\n\n    flex-direction: column;\n\n    overflow-x: hidden;\n    ${enableScrollingStyles('y', false)};\n\n    ${notHasSideTopStyles};\n  }\n\n  ${hasPrevStyles};\n  ${hasNextStyles};\n  ${hasPrevNextStyles};\n`;\n\nconst Addon = styled.div`\n  display: none;\n  ${m.min.md} {\n    display: block;\n  }\n`;\n\nconst BottomAddon = styled(Addon)`\n  margin-top: auto;\n`;\n\n/**\n * The main navigation.\n */\nconst Navigation = forwardRef<HTMLDivElement, NavigationProps>(\n  ({ sideTop, sideBottom, children, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { hasPrev, hasNext } = useScrollFlags(contentRef);\n\n    return (\n      <Container\n        role='navigation'\n        aria-label='Main navigation'\n        {...rest}\n        ref={ref}\n      >\n        <Content\n          hasSideTop={!!sideTop}\n          hasPrev={hasPrev}\n          hasNext={hasNext}\n          ref={contentRef}\n          role='list'\n        >\n          {sideTop && <Addon>{sideTop}</Addon>}\n          {children}\n          {sideBottom && <BottomAddon>{sideBottom}</BottomAddon>}\n        </Content>\n      </Container>\n    );\n  }\n);\n\nNavigation.displayName = 'Navigation';\n\nexport default Navigation;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useRef","enableScrollingStyles","omitEmotionProps","styled","clr","m","css","useScrollFlags","Container","div","p","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","Addon","BottomAddon","Navigation","sideTop","sideBottom","children","rest","ref","contentRef","displayName"],"sources":["../../../src/Navigation/index.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport useScrollFlags from './utils/useScrollFlags';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface NavigationProps extends JsxDivProps {\n  /**\n   * The top component in the side navigator.\n   * E.g. the user avatar.\n   * @default undefined\n   */\n  sideTop?: React.ReactNode;\n  /**\n   * The bottom component in the side navigator.\n   * E.g. the current tariff.\n   * @default undefined\n   */\n  sideBottom?: React.ReactNode;\n}\n\nconst Container = styled.div`\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.navigationColorBg)};\n  color: ${(p) => clr(p.theme.navigationColorText)};\n\n  // Tab navigator\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: calc(\n    ${(p) => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)\n  );\n  border-top: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n\n  // Side navigator\n  ${m.min.md} {\n    // Reset tab navigator styles\n    right: unset;\n    height: unset;\n    border-top: unset;\n\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: ${(p) => p.theme.navigationSideWidth}em;\n    border-right: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};\n  }\n`;\n\nconst notHasSideTopStyles = (p) =>\n  !p.hasSideTop &&\n  css`\n    padding-top: ${p.theme.pageHeaderHeight[1]}em;\n  `;\n\nconst hasPrevStyles = (p) =>\n  p.hasPrev &&\n  !p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasNextStyles = (p) =>\n  !p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to left,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to top,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em\n      );\n    }\n  `;\n\nconst hasPrevNextStyles = (p) =>\n  p.hasPrev &&\n  p.hasNext &&\n  css`\n    mask-image: linear-gradient(\n      to right,\n      transparent,\n      white ${p.theme.navigationMaskImageSize}em,\n      white calc(100% - ${p.theme.navigationMaskImageSize}em),\n      transparent\n    );\n    ${m.min.md} {\n      mask-image: linear-gradient(\n        to bottom,\n        transparent,\n        white ${p.theme.navigationMaskImageSize}em,\n        white calc(100% - ${p.theme.navigationMaskImageSize}em),\n        transparent\n      );\n    }\n  `;\n\ninterface ContentProps {\n  hasSideTop: boolean;\n  hasPrev: boolean;\n  hasNext: boolean;\n}\nconst Content = styled(\n  'div',\n  omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  &::before,\n  &::after {\n    content: ''; // Insert space before the first item and after the last one\n  }\n\n  overflow-y: hidden;\n  ${enableScrollingStyles('x', false)};\n\n  ${m.min.md} {\n    // Reset tab navigator styles\n    justify-content: unset;\n    align-items: unset;\n\n    flex-direction: column;\n\n    overflow-x: hidden;\n    ${enableScrollingStyles('y', false)};\n\n    ${notHasSideTopStyles};\n  }\n\n  ${hasPrevStyles};\n  ${hasNextStyles};\n  ${hasPrevNextStyles};\n`;\n\nconst Addon = styled.div`\n  display: none;\n  ${m.min.md} {\n    display: block;\n  }\n`;\n\nconst BottomAddon = styled(Addon)`\n  margin-top: auto;\n`;\n\n/**\n * The main navigation.\n */\nconst Navigation = forwardRef<HTMLDivElement, NavigationProps>(\n  ({ sideTop, sideBottom, children, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { hasPrev, hasNext } = useScrollFlags(contentRef);\n\n    return (\n      <Container\n        role='navigation'\n        aria-label='Main navigation'\n        {...rest}\n        ref={ref}\n      >\n        <Content\n          hasSideTop={!!sideTop}\n          hasPrev={hasPrev}\n          hasNext={hasNext}\n          ref={contentRef}\n          role='list'\n        >\n          {sideTop && <Addon>{sideTop}</Addon>}\n          {children}\n          {sideBottom && <BottomAddon>{sideBottom}</BottomAddon>}\n        </Content>\n      </Container>\n    );\n  }\n);\n\nNavigation.displayName = 'Navigation';\n\nexport default Navigation;\n"],"mappings":"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"}

package/dist/esm/Navigation/utils/useScrollFlags.js

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useEvent, useBrowserLayoutEffect } from '@os-design/utils';
 import { useIsMinWidth } from '@os-design/media';
-
 const useScrollFlags = ref => {
   const [hasPrev, setHasPrev] = useState(false);
   const [hasNext, setHasNext] = useState(false);
@@ -22,6 +21,5 @@ const useScrollFlags = ref => {
     hasNext
   };
 };
-
 export default useScrollFlags;
 //# sourceMappingURL=useScrollFlags.js.map

package/dist/esm/Navigation/utils/useScrollFlags.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollFlags.js","names":["useCallback","useState","useEvent","useBrowserLayoutEffect","useIsMinWidth","useScrollFlags","ref","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","scrollHandler","current","window","undefined"],"sources":["../../../../src/Navigation/utils/useScrollFlags.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\n\ninterface UseScrollFlagsRes {\n  hasPrev: boolean;\n  hasNext: boolean;\n}\n\nconst useScrollFlags = (ref: RefObject<Element>): UseScrollFlagsRes => {\n  const [hasPrev, setHasPrev] = useState(false);\n  const [hasNext, setHasNext] = useState(false);\n  const isMinMd = useIsMinWidth('md');\n\n  const scrollHandler = useCallback(() => {\n    const { current } = ref;\n    if (!current) return;\n\n    setHasPrev(current[isMinMd ? 'scrollTop' : 'scrollLeft'] > 0);\n    setHasNext(\n      current[isMinMd ? 'scrollHeight' : 'scrollWidth'] -\n        current[isMinMd ? 'scrollTop' : 'scrollLeft'] -\n        current[isMinMd ? 'clientHeight' : 'clientWidth'] >\n        0\n    );\n  }, [ref, isMinMd]);\n\n  useBrowserLayoutEffect(() => scrollHandler(), [scrollHandler]);\n  useEvent(ref, 'scroll', scrollHandler);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    scrollHandler\n  );\n\n  return { hasPrev, hasNext };\n};\n\nexport default useScrollFlags;\n"],"mappings":"AAAA,SAAoBA,WAApB,EAAiCC,QAAjC,QAAiD,OAAjD;AACA,SAASC,QAAT,EAAmBC,sBAAnB,QAAiD,kBAAjD;AACA,SAASC,aAAT,QAA8B,kBAA9B;;AAOA,MAAMC,cAAc,GAAIC,GAAD,IAAgD;EACrE,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBP,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAM,CAACQ,OAAD,EAAUC,UAAV,IAAwBT,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAMU,OAAO,GAAGP,aAAa,CAAC,IAAD,CAA7B;EAEA,MAAMQ,aAAa,GAAGZ,WAAW,CAAC,MAAM;IACtC,MAAM;MAAEa;IAAF,IAAcP,GAApB;IACA,IAAI,CAACO,OAAL,EAAc;IAEdL,UAAU,CAACK,OAAO,CAACF,OAAO,GAAG,WAAH,GAAiB,YAAzB,CAAP,GAAgD,CAAjD,CAAV;IACAD,UAAU,CACRG,OAAO,CAACF,OAAO,GAAG,cAAH,GAAoB,aAA5B,CAAP,GACEE,OAAO,CAACF,OAAO,GAAG,WAAH,GAAiB,YAAzB,CADT,GAEEE,OAAO,CAACF,OAAO,GAAG,cAAH,GAAoB,aAA5B,CAFT,GAGE,CAJM,CAAV;EAMD,CAXgC,EAW9B,CAACL,GAAD,EAAMK,OAAN,CAX8B,CAAjC;EAaAR,sBAAsB,CAAC,MAAMS,aAAa,EAApB,EAAwB,CAACA,aAAD,CAAxB,CAAtB;EACAV,QAAQ,CAACI,GAAD,EAAM,QAAN,EAAgBM,aAAhB,CAAR;EACAV,QAAQ,CACL,OAAOY,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SADpC,EAEN,QAFM,EAGNH,aAHM,CAAR;EAMA,OAAO;IAAEL,OAAF;IAAWE;EAAX,CAAP;AACD,CA3BD;;AA6BA,eAAeJ,cAAf"}
+{"version":3,"file":"useScrollFlags.js","names":["useCallback","useState","useEvent","useBrowserLayoutEffect","useIsMinWidth","useScrollFlags","ref","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","scrollHandler","current","window","undefined"],"sources":["../../../../src/Navigation/utils/useScrollFlags.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\n\ninterface UseScrollFlagsRes {\n  hasPrev: boolean;\n  hasNext: boolean;\n}\n\nconst useScrollFlags = (ref: RefObject<Element>): UseScrollFlagsRes => {\n  const [hasPrev, setHasPrev] = useState(false);\n  const [hasNext, setHasNext] = useState(false);\n  const isMinMd = useIsMinWidth('md');\n\n  const scrollHandler = useCallback(() => {\n    const { current } = ref;\n    if (!current) return;\n\n    setHasPrev(current[isMinMd ? 'scrollTop' : 'scrollLeft'] > 0);\n    setHasNext(\n      current[isMinMd ? 'scrollHeight' : 'scrollWidth'] -\n        current[isMinMd ? 'scrollTop' : 'scrollLeft'] -\n        current[isMinMd ? 'clientHeight' : 'clientWidth'] >\n        0\n    );\n  }, [ref, isMinMd]);\n\n  useBrowserLayoutEffect(() => scrollHandler(), [scrollHandler]);\n  useEvent(ref, 'scroll', scrollHandler);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    scrollHandler\n  );\n\n  return { hasPrev, hasNext };\n};\n\nexport default useScrollFlags;\n"],"mappings":"AAAA,SAAoBA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,QAAQ,EAAEC,sBAAsB,QAAQ,kBAAkB;AACnE,SAASC,aAAa,QAAQ,kBAAkB;AAOhD,MAAMC,cAAc,GAAIC,GAAuB,IAAwB;EACrE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGP,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMU,OAAO,GAAGP,aAAa,CAAC,IAAI,CAAC;EAEnC,MAAMQ,aAAa,GAAGZ,WAAW,CAAC,MAAM;IACtC,MAAM;MAAEa;IAAQ,CAAC,GAAGP,GAAG;IACvB,IAAI,CAACO,OAAO,EAAE;IAEdL,UAAU,CAACK,OAAO,CAACF,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAC7DD,UAAU,CACRG,OAAO,CAACF,OAAO,GAAG,cAAc,GAAG,aAAa,CAAC,GAC/CE,OAAO,CAACF,OAAO,GAAG,WAAW,GAAG,YAAY,CAAC,GAC7CE,OAAO,CAACF,OAAO,GAAG,cAAc,GAAG,aAAa,CAAC,GACjD,CAAC,CACJ;EACH,CAAC,EAAE,CAACL,GAAG,EAAEK,OAAO,CAAC,CAAC;EAElBR,sBAAsB,CAAC,MAAMS,aAAa,EAAE,EAAE,CAACA,aAAa,CAAC,CAAC;EAC9DV,QAAQ,CAACI,GAAG,EAAE,QAAQ,EAAEM,aAAa,CAAC;EACtCV,QAAQ,CACL,OAAOY,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRH,aAAa,CACd;EAED,OAAO;IAAEL,OAAO;IAAEE;EAAQ,CAAC;AAC7B,CAAC;AAED,eAAeJ,cAAc"}

package/dist/esm/NavigationItem/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { resetFocusStyles, transitionStyles } from '@os-design/styles';
@@ -7,12 +6,10 @@ import { omitEmotionProps } from '@os-design/utils';
 import { clr } from '@os-design/theming';
 import { css } from '@emotion/react';
 import { m } from '@os-design/media';
-
 const currentPageStyles = p => p.currentPage && css`
     background-color: ${clr(p.theme.navigationItemColorBgActive)};
     color: ${clr(p.theme.navigationItemColorTextActive)};
   `;
-
 const NavigationLink = styled('a', omitEmotionProps('currentPage', 'as'))`
   ${resetFocusStyles};
   text-decoration: none;
@@ -72,10 +69,10 @@ const Title = styled.span`
     margin-top: 0.3em;
   }
 `;
+
 /**
  * The item of the navigation.
  */
-
 const NavigationItem = /*#__PURE__*/forwardRef(({
   icon,
   currentPage = false,