@os-design/core 1.0.135 → 1.0.136

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/index.tsx"],"names":["List","ref","itemCount","itemHeight","threshold","overscanCount","heightProp","height","paddingTop","paddingBottom","style","empty","onLoadNext","itemRenderer","rest","listRef","mergedListRef","size","fontSize","document","body","LayoutContext","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerElementRef","innerStyle","innerRest","parseFloat","displayName","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","renderList","scrollOffset","undefined"],"mappings":"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","sourcesContent":["import React, {\n  CSSProperties,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react';\nimport {\n  FixedSizeList,\n  ListChildComponentProps,\n  ListProps as RWListProps,\n} from 'react-window';\nimport {\n  useFontSize,\n  useForwardedRef,\n  useSafeAreaInset,\n  useSize,\n} from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport interface ListProps extends Partial<RWListProps> {\n  /**\n   * Total number of items in the list.\n   */\n  itemCount: number;\n  /**\n   * The item height in em.\n   * @default 4\n   */\n  itemHeight?: number;\n  /**\n   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n   * @default 10\n   */\n  threshold?: number;\n  /**\n   * Defines how many items outside of the visible \"window\" to render at all times.\n   * @default 10\n   */\n  overscanCount?: number;\n  /**\n   * The height of the list in px.\n   * @default undefined\n   */\n  height?: number;\n  /**\n   * The top padding in em.\n   * @default 0\n   */\n  paddingTop?: number;\n  /**\n   * The bottom padding in em.\n   * @default 0\n   */\n  paddingBottom?: number;\n  /**\n   * The inline css style.\n   * @default undefined\n   */\n  style?: CSSProperties;\n  /**\n   * The component that renders if the list is empty.\n   * @default undefined\n   */\n  empty?: React.ReactNode;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n  /**\n   * The callback to render items.\n   * @default () => null\n   */\n  itemRenderer?: React.FC<ListChildComponentProps>;\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      height: heightProp,\n      paddingTop = 0,\n      paddingBottom = 0,\n      style = {},\n      empty,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      ...rest\n    },\n    ref\n  ) => {\n    const [listRef, mergedListRef] = useForwardedRef(ref);\n    const size = useSize();\n    const fontSize = useFontSize(document.body);\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n    const { theme } = useTheme();\n    const isMinMd = useIsMinWidth('md');\n    const safeAreaInset = useSafeAreaInset();\n\n    const itemSize = useMemo(\n      () => itemHeight * fontSize,\n      [itemHeight, fontSize]\n    );\n\n    const paddingTopSize = useMemo(\n      () =>\n        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n          paddingTop) *\n        fontSize,\n      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n    );\n\n    const paddingBottomSize = useMemo(\n      () =>\n        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n          paddingBottom) *\n          fontSize +\n        safeAreaInset.bottom,\n      [\n        hasNavigation,\n        theme.navigationTabHeight,\n        isMinMd,\n        paddingBottom,\n        fontSize,\n        safeAreaInset.bottom,\n      ]\n    );\n\n    const height = useMemo(\n      () => heightProp || size.height,\n      [heightProp, size.height]\n    );\n\n    const loadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height,\n      onLoadNext,\n    });\n\n    const windowScrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        loadNextHandler(top);\n      },\n      [listRef, loadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = forwardRef<HTMLDivElement, any>(\n      ({ style: innerStyle, ...innerRest }, innerElementRef) => (\n        <div\n          ref={innerElementRef}\n          style={{\n            ...innerStyle,\n            height: `${\n              parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...innerRest}\n        />\n      )\n    );\n    InnerElement.displayName = 'InnerElement';\n\n    const listChildren = useCallback<RWListProps['children']>(\n      ({ style: childrenStyle, ...childrenRest }) =>\n        itemRenderer({\n          style: {\n            ...childrenStyle,\n            top: `${\n              parseFloat(\n                childrenStyle.top ? childrenStyle.top.toString() : '0'\n              ) + paddingTopSize\n            }px`,\n          },\n          ...childrenRest,\n        }),\n      [itemRenderer, paddingTopSize]\n    );\n\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    const EmptyComponent = useCallback(() => <>{empty}</>, [empty]);\n\n    const renderList = useCallback(\n      () => (\n        <FixedSizeList\n          ref={mergedListRef}\n          itemCount={itemCount}\n          width='100%'\n          height={height}\n          itemSize={itemSize}\n          style={heightProp ? style : { ...style, height: '100% important!' }}\n          overscanCount={overscanCount}\n          onScroll={\n            heightProp\n              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n              : undefined\n          }\n          innerElementType={itemCount > 0 ? InnerElement : EmptyComponent}\n          {...rest}\n        >\n          {listChildren}\n        </FixedSizeList>\n      ),\n      [\n        EmptyComponent,\n        InnerElement,\n        height,\n        heightProp,\n        itemCount,\n        itemSize,\n        listChildren,\n        loadNextHandler,\n        mergedListRef,\n        overscanCount,\n        rest,\n        style,\n      ]\n    );\n\n    if (heightProp) {\n      return renderList();\n    }\n\n    return (\n      <WindowScroller onScroll={windowScrollHandler}>\n        {renderList()}\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["List","forwardRef","ref","itemCount","itemHeight","threshold","overscanCount","heightProp","height","paddingTop","paddingBottom","style","empty","onLoadNext","itemRenderer","rest","useForwardedRef","listRef","mergedListRef","size","useSize","fontSize","useFontSize","document","body","useContext","LayoutContext","hasNavigation","hasPageHeader","useTheme","theme","isMinMd","useIsMinWidth","safeAreaInset","useSafeAreaInset","itemSize","useMemo","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","useRWLoadNext","windowScrollHandler","useCallback","top","current","scrollTo","InnerElement","innerElementRef","innerStyle","innerRest","parseFloat","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","renderList","scrollOffset","undefined","displayName"],"sources":["../../../src/List/index.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react';\nimport {\n  FixedSizeList,\n  ListChildComponentProps,\n  ListProps as RWListProps,\n} from 'react-window';\nimport {\n  useFontSize,\n  useForwardedRef,\n  useSafeAreaInset,\n  useSize,\n} from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport interface ListProps extends Partial<RWListProps> {\n  /**\n   * Total number of items in the list.\n   */\n  itemCount: number;\n  /**\n   * The item height in em.\n   * @default 4\n   */\n  itemHeight?: number;\n  /**\n   * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n   * @default 10\n   */\n  threshold?: number;\n  /**\n   * Defines how many items outside of the visible \"window\" to render at all times.\n   * @default 10\n   */\n  overscanCount?: number;\n  /**\n   * The height of the list in px.\n   * @default undefined\n   */\n  height?: number;\n  /**\n   * The top padding in em.\n   * @default 0\n   */\n  paddingTop?: number;\n  /**\n   * The bottom padding in em.\n   * @default 0\n   */\n  paddingBottom?: number;\n  /**\n   * The inline css style.\n   * @default undefined\n   */\n  style?: CSSProperties;\n  /**\n   * The component that renders if the list is empty.\n   * @default undefined\n   */\n  empty?: React.ReactNode;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n  /**\n   * The callback to render items.\n   * @default () => null\n   */\n  itemRenderer?: React.FC<ListChildComponentProps>;\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      height: heightProp,\n      paddingTop = 0,\n      paddingBottom = 0,\n      style = {},\n      empty,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      ...rest\n    },\n    ref\n  ) => {\n    const [listRef, mergedListRef] = useForwardedRef(ref);\n    const size = useSize();\n    const fontSize = useFontSize(document.body);\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n    const { theme } = useTheme();\n    const isMinMd = useIsMinWidth('md');\n    const safeAreaInset = useSafeAreaInset();\n\n    const itemSize = useMemo(\n      () => itemHeight * fontSize,\n      [itemHeight, fontSize]\n    );\n\n    const paddingTopSize = useMemo(\n      () =>\n        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n          paddingTop) *\n        fontSize,\n      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n    );\n\n    const paddingBottomSize = useMemo(\n      () =>\n        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n          paddingBottom) *\n          fontSize +\n        safeAreaInset.bottom,\n      [\n        hasNavigation,\n        theme.navigationTabHeight,\n        isMinMd,\n        paddingBottom,\n        fontSize,\n        safeAreaInset.bottom,\n      ]\n    );\n\n    const height = useMemo(\n      () => heightProp || size.height,\n      [heightProp, size.height]\n    );\n\n    const loadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height,\n      onLoadNext,\n    });\n\n    const windowScrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        loadNextHandler(top);\n      },\n      [listRef, loadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = useCallback(\n      ({ style: innerStyle, ...innerRest }, innerElementRef) => (\n        <div\n          ref={innerElementRef}\n          style={{\n            ...innerStyle,\n            height: `${\n              parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...innerRest}\n        />\n      ),\n      [paddingBottomSize, paddingTopSize]\n    );\n\n    const listChildren = useCallback<RWListProps['children']>(\n      ({ style: childrenStyle, ...childrenRest }) =>\n        itemRenderer({\n          style: {\n            ...childrenStyle,\n            top: `${\n              parseFloat(\n                childrenStyle.top ? childrenStyle.top.toString() : '0'\n              ) + paddingTopSize\n            }px`,\n          },\n          ...childrenRest,\n        }),\n      [itemRenderer, paddingTopSize]\n    );\n\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    const EmptyComponent = useCallback(() => <>{empty}</>, [empty]);\n\n    const renderList = useCallback(\n      () => (\n        <FixedSizeList\n          ref={mergedListRef}\n          itemCount={itemCount}\n          width='100%'\n          height={height}\n          itemSize={itemSize}\n          style={heightProp ? style : { ...style, height: '100% important!' }}\n          overscanCount={overscanCount}\n          onScroll={\n            heightProp\n              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n              : undefined\n          }\n          innerElementType={itemCount > 0 ? InnerElement : EmptyComponent}\n          {...rest}\n        >\n          {listChildren}\n        </FixedSizeList>\n      ),\n      [\n        EmptyComponent,\n        InnerElement,\n        height,\n        heightProp,\n        itemCount,\n        itemSize,\n        listChildren,\n        loadNextHandler,\n        mergedListRef,\n        overscanCount,\n        rest,\n        style,\n      ]\n    );\n\n    if (heightProp) {\n      return renderList();\n    }\n\n    return (\n      <WindowScroller onScroll={windowScrollHandler}>\n        {renderList()}\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"mappings":"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"}

package/dist/cjs/List/utils/bodyPointerEvents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/List/utils/bodyPointerEvents.ts"],"names":["originalBodyPointerEvents","timeoutId","disableBodyPointerEvents","document","body","style","pointerEvents","enableBodyPointerEvents","enableBodyPointerEventsAfterDelay","delay"],"mappings":";;;;;;;AAAA;;AAEA,IAAIA,yBAAwC,GAAG,IAA/C;AACA,IAAIC,SAAuB,GAAG,IAA9B;;AAEO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,GAAY;AAClD,MAAIF,yBAAyB,KAAK,IAAlC,EAAwC;AACtCA,IAAAA,yBAAyB,GAAGG,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,aAAhD;AACAH,IAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,aAApB,GAAoC,MAApC;AACD;AACF,CALM;;;;AAOA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,GAAY;AACjDN,EAAAA,SAAS,GAAG,IAAZ;;AACA,MAAID,yBAAyB,KAAK,IAAlC,EAAwC;AACtCG,IAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,aAApB,GAAoCN,yBAApC;AACAA,IAAAA,yBAAyB,GAAG,IAA5B;AACD;AACF,CANM;;;;AAQA,IAAMQ,iCAAiC,GAAG,SAApCA,iCAAoC,CAACC,KAAD,EAAyB;AACxE,MAAIR,SAAJ,EAAe,qCAAkBA,SAAlB;AACfA,EAAAA,SAAS,GAAG,mCAAgBM,uBAAhB,EAAyCE,KAAzC,CAAZ;AACD,CAHM","sourcesContent":["import { clearFrameTimeout, Frame, setFrameTimeout } from './frameTimeout';\n\nlet originalBodyPointerEvents: string | null = null;\nlet timeoutId: Frame | null = null;\n\nexport const disableBodyPointerEvents = (): void => {\n  if (originalBodyPointerEvents === null) {\n    originalBodyPointerEvents = document.body.style.pointerEvents;\n    document.body.style.pointerEvents = 'none';\n  }\n};\n\nexport const enableBodyPointerEvents = (): void => {\n  timeoutId = null;\n  if (originalBodyPointerEvents !== null) {\n    document.body.style.pointerEvents = originalBodyPointerEvents;\n    originalBodyPointerEvents = null;\n  }\n};\n\nexport const enableBodyPointerEventsAfterDelay = (delay: number): void => {\n  if (timeoutId) clearFrameTimeout(timeoutId);\n  timeoutId = setFrameTimeout(enableBodyPointerEvents, delay);\n};\n"],"file":"bodyPointerEvents.js"}
+{"version":3,"file":"bodyPointerEvents.js","names":["originalBodyPointerEvents","timeoutId","disableBodyPointerEvents","document","body","style","pointerEvents","enableBodyPointerEvents","enableBodyPointerEventsAfterDelay","delay","clearFrameTimeout","setFrameTimeout"],"sources":["../../../../src/List/utils/bodyPointerEvents.ts"],"sourcesContent":["import { clearFrameTimeout, Frame, setFrameTimeout } from './frameTimeout';\n\nlet originalBodyPointerEvents: string | null = null;\nlet timeoutId: Frame | null = null;\n\nexport const disableBodyPointerEvents = (): void => {\n  if (originalBodyPointerEvents === null) {\n    originalBodyPointerEvents = document.body.style.pointerEvents;\n    document.body.style.pointerEvents = 'none';\n  }\n};\n\nexport const enableBodyPointerEvents = (): void => {\n  timeoutId = null;\n  if (originalBodyPointerEvents !== null) {\n    document.body.style.pointerEvents = originalBodyPointerEvents;\n    originalBodyPointerEvents = null;\n  }\n};\n\nexport const enableBodyPointerEventsAfterDelay = (delay: number): void => {\n  if (timeoutId) clearFrameTimeout(timeoutId);\n  timeoutId = setFrameTimeout(enableBodyPointerEvents, delay);\n};\n"],"mappings":";;;;;;;AAAA;;AAEA,IAAIA,yBAAwC,GAAG,IAA/C;AACA,IAAIC,SAAuB,GAAG,IAA9B;;AAEO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,GAAY;EAClD,IAAIF,yBAAyB,KAAK,IAAlC,EAAwC;IACtCA,yBAAyB,GAAGG,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,aAAhD;IACAH,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,aAApB,GAAoC,MAApC;EACD;AACF,CALM;;;;AAOA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,GAAY;EACjDN,SAAS,GAAG,IAAZ;;EACA,IAAID,yBAAyB,KAAK,IAAlC,EAAwC;IACtCG,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,aAApB,GAAoCN,yBAApC;IACAA,yBAAyB,GAAG,IAA5B;EACD;AACF,CANM;;;;AAQA,IAAMQ,iCAAiC,GAAG,SAApCA,iCAAoC,CAACC,KAAD,EAAyB;EACxE,IAAIR,SAAJ,EAAe,IAAAS,+BAAA,EAAkBT,SAAlB;EACfA,SAAS,GAAG,IAAAU,6BAAA,EAAgBJ,uBAAhB,EAAyCE,KAAzC,CAAZ;AACD,CAHM"}

package/dist/cjs/List/utils/frameTimeout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/List/utils/frameTimeout.ts"],"names":["clearFrameTimeout","frame","window","cancelAnimationFrame","id","setFrameTimeout","handler","timeout","start","frameRequestCallback","timestamp","timePassed","requestAnimationFrame"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAwB;AACvDC,EAAAA,MAAM,CAACC,oBAAP,CAA4BF,KAAK,CAACG,EAAlC;AACD,CAFM;AAIP;AACA;AACA;;;;;AACO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAC7BC,OAD6B,EAE7BC,OAF6B,EAGnB;AACV,MAAIC,KAAK,GAAG,CAAZ;AACA,MAAMP,KAAK,GAAG;AAAEG,IAAAA,EAAE,EAAE;AAAN,GAAd;;AAEA,MAAMK,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,SAAD,EAAuB;AAClD,QAAI,CAACF,KAAL,EAAYA,KAAK,GAAGE,SAAR;AACZ,QAAMC,UAAU,GAAGD,SAAS,GAAGF,KAA/B;;AAEA,QAAIG,UAAU,IAAIJ,OAAlB,EAA2B;AACzBP,MAAAA,iBAAiB,CAACC,KAAD,CAAjB;AACAK,MAAAA,OAAO;AACR,KAHD,MAGO;AACLL,MAAAA,KAAK,CAACG,EAAN,GAAWF,MAAM,CAACU,qBAAP,CAA6BH,oBAA7B,CAAX;AACD;AACF,GAVD;;AAYAR,EAAAA,KAAK,CAACG,EAAN,GAAWF,MAAM,CAACU,qBAAP,CAA6BH,oBAA7B,CAAX;AACA,SAAOR,KAAP;AACD,CArBM","sourcesContent":["export interface Frame {\n  id: number;\n}\n\n/**\n * Cancels a timeout previously created by setFrameTimeout.\n */\nexport const clearFrameTimeout = (frame: Frame): void => {\n  window.cancelAnimationFrame(frame.id);\n};\n\n/**\n * Sets a timeout using requestAnimationFrame.\n */\nexport const setFrameTimeout = (\n  handler: () => void,\n  timeout: number\n): Frame => {\n  let start = 0;\n  const frame = { id: 0 };\n\n  const frameRequestCallback = (timestamp: number) => {\n    if (!start) start = timestamp;\n    const timePassed = timestamp - start;\n\n    if (timePassed >= timeout) {\n      clearFrameTimeout(frame);\n      handler();\n    } else {\n      frame.id = window.requestAnimationFrame(frameRequestCallback);\n    }\n  };\n\n  frame.id = window.requestAnimationFrame(frameRequestCallback);\n  return frame;\n};\n"],"file":"frameTimeout.js"}
+{"version":3,"file":"frameTimeout.js","names":["clearFrameTimeout","frame","window","cancelAnimationFrame","id","setFrameTimeout","handler","timeout","start","frameRequestCallback","timestamp","timePassed","requestAnimationFrame"],"sources":["../../../../src/List/utils/frameTimeout.ts"],"sourcesContent":["export interface Frame {\n  id: number;\n}\n\n/**\n * Cancels a timeout previously created by setFrameTimeout.\n */\nexport const clearFrameTimeout = (frame: Frame): void => {\n  window.cancelAnimationFrame(frame.id);\n};\n\n/**\n * Sets a timeout using requestAnimationFrame.\n */\nexport const setFrameTimeout = (\n  handler: () => void,\n  timeout: number\n): Frame => {\n  let start = 0;\n  const frame = { id: 0 };\n\n  const frameRequestCallback = (timestamp: number) => {\n    if (!start) start = timestamp;\n    const timePassed = timestamp - start;\n\n    if (timePassed >= timeout) {\n      clearFrameTimeout(frame);\n      handler();\n    } else {\n      frame.id = window.requestAnimationFrame(frameRequestCallback);\n    }\n  };\n\n  frame.id = window.requestAnimationFrame(frameRequestCallback);\n  return frame;\n};\n"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAwB;EACvDC,MAAM,CAACC,oBAAP,CAA4BF,KAAK,CAACG,EAAlC;AACD,CAFM;AAIP;AACA;AACA;;;;;AACO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAC7BC,OAD6B,EAE7BC,OAF6B,EAGnB;EACV,IAAIC,KAAK,GAAG,CAAZ;EACA,IAAMP,KAAK,GAAG;IAAEG,EAAE,EAAE;EAAN,CAAd;;EAEA,IAAMK,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,SAAD,EAAuB;IAClD,IAAI,CAACF,KAAL,EAAYA,KAAK,GAAGE,SAAR;IACZ,IAAMC,UAAU,GAAGD,SAAS,GAAGF,KAA/B;;IAEA,IAAIG,UAAU,IAAIJ,OAAlB,EAA2B;MACzBP,iBAAiB,CAACC,KAAD,CAAjB;MACAK,OAAO;IACR,CAHD,MAGO;MACLL,KAAK,CAACG,EAAN,GAAWF,MAAM,CAACU,qBAAP,CAA6BH,oBAA7B,CAAX;IACD;EACF,CAVD;;EAYAR,KAAK,CAACG,EAAN,GAAWF,MAAM,CAACU,qBAAP,CAA6BH,oBAA7B,CAAX;EACA,OAAOR,KAAP;AACD,CArBM"}

package/dist/cjs/List/utils/useRWLoadNext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/List/utils/useRWLoadNext.ts"],"names":["useRWLoadNext","props","propsRef","current","scrollOffset","itemCount","threshold","itemSize","paddingTop","height","onLoadNext","maxItemBeforeLoad","maxScrollOffsetBeforeLoad"],"mappings":";;;;;;;AAAA;;AAaA;AACA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAyC;AAC7D,MAAMC,QAAQ,GAAG,mBAAOD,KAAP,CAAjB;AAEA,wBAAU,YAAM;AACdC,IAAAA,QAAQ,CAACC,OAAT,GAAmBF,KAAnB;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;AAIA,SAAO,wBAAsB,UAACG,YAAD,EAAkB;AAC7C,4BACEF,QAAQ,CAACC,OADX;AAAA,QAAQE,SAAR,qBAAQA,SAAR;AAAA,QAAmBC,SAAnB,qBAAmBA,SAAnB;AAAA,QAA8BC,QAA9B,qBAA8BA,QAA9B;AAAA,QAAwCC,UAAxC,qBAAwCA,UAAxC;AAAA,QAAoDC,MAApD,qBAAoDA,MAApD;AAAA,QAA4DC,UAA5D,qBAA4DA,UAA5D;AAGA,QAAMC,iBAAiB,GAAGN,SAAS,GAAGC,SAAtC;AACA,QAAMM,yBAAyB,GAC7BD,iBAAiB,GAAGJ,QAApB,GAA+BC,UAA/B,GAA4CC,MAD9C;AAGA,QAAIL,YAAY,GAAGQ,yBAAnB,EAA8C;AAC9CF,IAAAA,UAAU;AACX,GAVM,EAUJ,EAVI,CAAP;AAWD,CAlBD;;eAoBeV,a","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseRWLoadNextProps {\n  itemCount: number;\n  threshold: number;\n  itemSize: number;\n  paddingTop: number;\n  height: number;\n  onLoadNext: () => void;\n}\n\ntype OnScroll = (scrollOffset: number) => void;\n\n/**\n * Creates the onScroll callback for react-window to implement\n * the onLoadNext function.\n */\nconst useRWLoadNext = (props: UseRWLoadNextProps): OnScroll => {\n  const propsRef = useRef(props);\n\n  useEffect(() => {\n    propsRef.current = props;\n  }, [props]);\n\n  return useCallback<OnScroll>((scrollOffset) => {\n    const { itemCount, threshold, itemSize, paddingTop, height, onLoadNext } =\n      propsRef.current;\n\n    const maxItemBeforeLoad = itemCount - threshold;\n    const maxScrollOffsetBeforeLoad =\n      maxItemBeforeLoad * itemSize + paddingTop - height;\n\n    if (scrollOffset < maxScrollOffsetBeforeLoad) return;\n    onLoadNext();\n  }, []);\n};\n\nexport default useRWLoadNext;\n"],"file":"useRWLoadNext.js"}
+{"version":3,"file":"useRWLoadNext.js","names":["useRWLoadNext","props","propsRef","useRef","useEffect","current","useCallback","scrollOffset","itemCount","threshold","itemSize","paddingTop","height","onLoadNext","maxItemBeforeLoad","maxScrollOffsetBeforeLoad"],"sources":["../../../../src/List/utils/useRWLoadNext.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseRWLoadNextProps {\n  itemCount: number;\n  threshold: number;\n  itemSize: number;\n  paddingTop: number;\n  height: number;\n  onLoadNext: () => void;\n}\n\ntype OnScroll = (scrollOffset: number) => void;\n\n/**\n * Creates the onScroll callback for react-window to implement\n * the onLoadNext function.\n */\nconst useRWLoadNext = (props: UseRWLoadNextProps): OnScroll => {\n  const propsRef = useRef(props);\n\n  useEffect(() => {\n    propsRef.current = props;\n  }, [props]);\n\n  return useCallback<OnScroll>((scrollOffset) => {\n    const { itemCount, threshold, itemSize, paddingTop, height, onLoadNext } =\n      propsRef.current;\n\n    const maxItemBeforeLoad = itemCount - threshold;\n    const maxScrollOffsetBeforeLoad =\n      maxItemBeforeLoad * itemSize + paddingTop - height;\n\n    if (scrollOffset < maxScrollOffsetBeforeLoad) return;\n    onLoadNext();\n  }, []);\n};\n\nexport default useRWLoadNext;\n"],"mappings":";;;;;;;AAAA;;AAaA;AACA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAyC;EAC7D,IAAMC,QAAQ,GAAG,IAAAC,aAAA,EAAOF,KAAP,CAAjB;EAEA,IAAAG,gBAAA,EAAU,YAAM;IACdF,QAAQ,CAACG,OAAT,GAAmBJ,KAAnB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,OAAO,IAAAK,kBAAA,EAAsB,UAACC,YAAD,EAAkB;IAC7C,wBACEL,QAAQ,CAACG,OADX;IAAA,IAAQG,SAAR,qBAAQA,SAAR;IAAA,IAAmBC,SAAnB,qBAAmBA,SAAnB;IAAA,IAA8BC,QAA9B,qBAA8BA,QAA9B;IAAA,IAAwCC,UAAxC,qBAAwCA,UAAxC;IAAA,IAAoDC,MAApD,qBAAoDA,MAApD;IAAA,IAA4DC,UAA5D,qBAA4DA,UAA5D;IAGA,IAAMC,iBAAiB,GAAGN,SAAS,GAAGC,SAAtC;IACA,IAAMM,yBAAyB,GAC7BD,iBAAiB,GAAGJ,QAApB,GAA+BC,UAA/B,GAA4CC,MAD9C;IAGA,IAAIL,YAAY,GAAGQ,yBAAnB,EAA8C;IAC9CF,UAAU;EACX,CAVM,EAUJ,EAVI,CAAP;AAWD,CAlBD;;eAoBeb,a"}

package/dist/cjs/ListItem/ListItemContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItem/ListItemContent.tsx"],"names":["Content","styled","div","Title","p","theme","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","css","openedStyles","opened","Actions","listItemActionsPaddingLeft","colorBg","slice","actionIndex","ListItemContent","title","description","left","right","actions","length","map","icon","onClick","actionRest","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  ellipsisStyles,\n  horizontalPaddingStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction\n  extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'wide'> {\n  icon: React.ReactElement;\n}\n\nexport interface ListItemContentProps {\n  /**\n   * The title of the item.\n   */\n  title: string;\n  /**\n   * The description of the item.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The component located on the left side.\n   * For example, avatar, button, checkbox.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * For example, date.\n   */\n  right?: React.ReactNode;\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n\n  hasSwipe: boolean;\n  opened: boolean;\n}\n\nconst Content = styled.div`\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.listItemColorDescription)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst hasSwipeStyles = (p) =>\n  p.hasSwipe &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps {\n  hasSwipe: boolean;\n  opened: boolean;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('hasSwipe', 'opened')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${hasSwipeStyles};\n  ${openedStyles};\n  ${horizontalPaddingStyles('right')};\n`;\n\nlet actionIndex = 0;\n\n// Used by ListItem, ListItemLink\nconst ListItemContent: React.FC<ListItemContentProps> = ({\n  title,\n  description,\n  left,\n  right,\n  actions = [],\n  hasSwipe,\n  opened,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n\n    <Content>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n    </Content>\n\n    {right && <RightAddon>{right}</RightAddon>}\n\n    {actions.length > 0 && (\n      <Actions hasSwipe={hasSwipe} opened={opened}>\n        {actions.map(({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              key={actionIndex}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        })}\n      </Actions>\n    )}\n  </>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"file":"ListItemContent.js"}
+{"version":3,"file":"ListItemContent.js","names":["Content","styled","div","Title","p","clr","theme","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","listItemActionsPaddingLeft","colorBg","slice","horizontalPaddingStyles","actionIndex","ListItemContent","title","description","left","right","actions","length","map","icon","onClick","actionRest","e","preventDefault","displayName"],"sources":["../../../src/ListItem/ListItemContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  ellipsisStyles,\n  horizontalPaddingStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction\n  extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'wide'> {\n  icon: React.ReactElement;\n}\n\nexport interface ListItemContentProps {\n  /**\n   * The title of the item.\n   */\n  title: string;\n  /**\n   * The description of the item.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The component located on the left side.\n   * For example, avatar, button, checkbox.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * For example, date.\n   */\n  right?: React.ReactNode;\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n\n  hasSwipe: boolean;\n  opened: boolean;\n}\n\nconst Content = styled.div`\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.listItemColorDescription)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  ${ellipsisStyles};\n`;\n\nexport const LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nexport const RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst hasSwipeStyles = (p) =>\n  p.hasSwipe &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps {\n  hasSwipe: boolean;\n  opened: boolean;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('hasSwipe', 'opened')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${hasSwipeStyles};\n  ${openedStyles};\n  ${horizontalPaddingStyles('right')};\n`;\n\nlet actionIndex = 0;\n\n// Used by ListItem, ListItemLink\nconst ListItemContent: React.FC<ListItemContentProps> = ({\n  title,\n  description,\n  left,\n  right,\n  actions = [],\n  hasSwipe,\n  opened,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n\n    <Content>\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n    </Content>\n\n    {right && <RightAddon>{right}</RightAddon>}\n\n    {actions.length > 0 && (\n      <Actions hasSwipe={hasSwipe} opened={opened}>\n        {actions.map(({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              key={actionIndex}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        })}\n      </Actions>\n    )}\n  </>\n);\n\nListItemContent.displayName = 'ListItemContent';\n\nexport default ListItemContent;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","opened","handlers","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,iBAAiB,GAAGC,mBAAOC,GAAV,2hBAUC,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,sCA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAYEC,GAZF,EAaK;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,MAVDC,WAUC,QAVDA,WAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,KAQC,QARDA,KAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,EAOT;AAAA,+BANDC,YAMC;AAAA,MANDA,aAMC,kCANc,YAAM,CAAE,CAMtB;AAAA,8BALDC,WAKC;AAAA,MALDA,YAKC,iCALa,YAAM,CAAE,CAKrB;AAAA,6BAJDC,UAIC;AAAA,MAJDA,WAIC,gCAJY,YAAM,CAAE,CAIpB;AAAA,MAHEC,IAGF;;AACH,MAAMC,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQC,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,iBAAD,eACMH,IADN;AAEE,IAAA,YAAY,EAAE,sBAACI,CAAD,EAAO;AACnBD,MAAAA,QAAQ,CAACN,YAAT,CAAsBO,CAAtB;;AACAP,MAAAA,aAAY,CAACO,CAAD,CAAZ;AACD,KALH;AAME,IAAA,WAAW,EAAE,qBAACA,CAAD,EAAO;AAClBD,MAAAA,QAAQ,CAACL,WAAT,CAAqBM,CAArB;;AACAN,MAAAA,YAAW,CAACM,CAAD,CAAX;AACD,KATH;AAUE,IAAA,UAAU,EAAE,oBAACA,CAAD,EAAO;AACjBD,MAAAA,QAAQ,CAACJ,UAAT,CAAoBK,CAApB;;AACAL,MAAAA,WAAU,CAACK,CAAD,CAAV;AACD,KAbH;AAcE,IAAA,GAAG,EAAEb;AAdP,mBAgBE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEK,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IAhBF,CADF;AA4BD,CA9Cc,CAAjB;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;eAEef,Q","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["ListItemContainer","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","ListItem","forwardRef","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","useMemo","isTouchDevice","useSwipe","opened","handlers","e","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,iBAAiB,GAAGC,kBAAA,CAAOC,GAAV,2hBAUC,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,IAAAC,+BAAA,GA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAYEC,GAZF,EAaK;EAAA,IAXDC,KAWC,QAXDA,KAWC;EAAA,IAVDC,WAUC,QAVDA,WAUC;EAAA,IATDC,IASC,QATDA,IASC;EAAA,IARDC,KAQC,QARDA,KAQC;EAAA,wBAPDC,OAOC;EAAA,IAPDA,OAOC,6BAPS,EAOT;EAAA,6BANDC,YAMC;EAAA,IANDA,aAMC,kCANc,YAAM,CAAE,CAMtB;EAAA,4BALDC,WAKC;EAAA,IALDA,YAKC,iCALa,YAAM,CAAE,CAKrB;EAAA,2BAJDC,UAIC;EAAA,IAJDA,WAIC,gCAJY,YAAM,CAAE,CAIpB;EAAA,IAHEC,IAGF;;EACH,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAAQ;IAAA,OAAM,IAAAC,oBAAA,GAAN;EAAA,CAAR,EAA+B,EAA/B,CAApB;;EACA,gBAA6B,IAAAC,eAAA,GAA7B;EAAA,IAAQC,MAAR,aAAQA,MAAR;EAAA,IAAgBC,QAAhB,aAAgBA,QAAhB;;EAEA,oBACE,gCAAC,iBAAD,eACMN,IADN;IAEE,YAAY,EAAE,sBAACO,CAAD,EAAO;MACnBD,QAAQ,CAACT,YAAT,CAAsBU,CAAtB;;MACAV,aAAY,CAACU,CAAD,CAAZ;IACD,CALH;IAME,WAAW,EAAE,qBAACA,CAAD,EAAO;MAClBD,QAAQ,CAACR,WAAT,CAAqBS,CAArB;;MACAT,YAAW,CAACS,CAAD,CAAX;IACD,CATH;IAUE,UAAU,EAAE,oBAACA,CAAD,EAAO;MACjBD,QAAQ,CAACP,UAAT,CAAoBQ,CAApB;;MACAR,WAAU,CAACQ,CAAD,CAAV;IACD,CAbH;IAcE,GAAG,EAAEhB;EAdP,iBAgBE,gCAAC,2BAAD;IACE,KAAK,EAAEC,KADT;IAEE,WAAW,EAAEC,WAFf;IAGE,IAAI,EAAEC,IAHR;IAIE,KAAK,EAAEC,KAJT;IAKE,OAAO,EAAEC,OALX;IAME,QAAQ,EAAEK,WANZ;IAOE,MAAM,EAAEI;EAPV,EAhBF,CADF;AA4BD,CA9Cc,CAAjB;AAiDAhB,QAAQ,CAACmB,WAAT,GAAuB,UAAvB;eAEenB,Q"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","opened","handlers","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["actionsBgStyles","p","touchDevice","css","clr","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","styled","ListItemContainer","withComponent","omitEmotionProps","resetFocusStyles","ListItemLink","forwardRef","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","useMemo","isTouchDevice","useSwipe","opened","handlers","e","preventDefault","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListSkeleton/index.tsx"],"names":["ListItem","styled","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","Skeleton","sizes","small","ListSkeleton","ref","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","itemRenderer","style","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AA2BA,IAAMA,QAAQ,GAAGC,mBAAOC,GAAV,gQASiB,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CATjB,EAYV,sCAZU,CAAd;;AAeA,IAAMC,OAAO,GAAGL,mBAAOC,GAAV,yFAAb;;AAIA,IAAMK,mBAAmB,GAAG,wBAAOC,oBAAP,CAAH,mHACb,UAACL,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQK,KAAR,CAAcC,KAArB;AAAA,CADa,CAAzB;AAKA;AACA;AACA;;AACA,IAAMC,YAAY,gBAAG,uBACnB,gBAUEC,GAVF,EAWK;AAAA,iCATDC,cASC;AAAA,MATDA,cASC,oCATgB,KAShB;AAAA,6BARDC,UAQC;AAAA,MARDA,UAQC,gCARY,KAQZ;AAAA,mCAPDC,gBAOC;AAAA,MAPDA,gBAOC,sCAPkB,KAOlB;AAAA,4BANDC,SAMC;AAAA,MANDA,SAMC,+BANW,EAMX;AAAA,MALDC,IAKC,QALDA,IAKC;AAAA,MAJDC,KAIC,QAJDA,KAIC;AAAA,MAHEC,IAGF;;AACH,MAAMC,YAAY,GAAG,wBACnB;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,wBACE,gCAAC,QAAD;AAAU,MAAA,KAAK,EAAEA;AAAjB,OACGJ,IAAI,iBAAI,gCAAC,0BAAD,QAAYA,IAAZ,CADX,eAGE,gCAAC,OAAD,qBACE,gCAAC,oBAAD;AAAU,MAAA,KAAK,EAAEH;AAAjB,MADF,EAEGD,cAAc,iBAAI,gCAAC,mBAAD;AAAqB,MAAA,KAAK,EAAEE;AAA5B,MAFrB,CAHF,EAQGG,KAAK,iBAAI,gCAAC,2BAAD,QAAaA,KAAb,CARZ,CADF;AAAA,GADmB,EAanB,CAACH,gBAAD,EAAmBF,cAAnB,EAAmCI,IAAnC,EAAyCC,KAAzC,EAAgDJ,UAAhD,CAbmB,CAArB;AAgBA,sBACE,gCAAC,gBAAD;AACE,IAAA,SAAS,EAAEE,SADb;AAEE,IAAA,YAAY,EAAEI;AAFhB,KAGMD,IAHN;AAIE,IAAA,GAAG,EAAEP;AAJP,KADF;AAQD,CArCkB,CAArB;AAwCAD,YAAY,CAACW,WAAb,GAA2B,cAA3B;eAEeX,Y","sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { FixedSizeList } from 'react-window';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport { LeftAddon, RightAddon } from '../ListItem/ListItemContent';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["ListItem","styled","div","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","DescriptionSkeleton","Skeleton","sizes","small","ListSkeleton","forwardRef","ref","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","itemRenderer","useCallback","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { FixedSizeList } from 'react-window';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport { LeftAddon, RightAddon } from '../ListItem/ListItemContent';\n\nexport interface ListSkeletonProps\n  extends Omit<ListProps, 'itemCount' | 'itemRenderer'>,\n    Pick<ListItemProps, 'left' | 'right'> {\n  /**\n   * The description placeholder.\n   * @default false\n   */\n  hasDescription?: boolean;\n  /**\n   * The width of the title.\n   * @default 30%\n   */\n  titleWidth?: string;\n  /**\n   * The width of the description.\n   * @default 40%\n   */\n  descriptionWidth?: string;\n  /**\n   * Total count of items.\n   * @default 10\n   */\n  itemCount?: number;\n}\n\nconst ListItem = styled.div`\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n  width: 100%;\n`;\n\nconst DescriptionSkeleton = styled(Skeleton)`\n  height: ${(p) => p.theme.sizes.small}em;\n  margin-top: 0.3em;\n`;\n\n/**\n * Provides a list placeholder while a user waits for the content to load.\n */\nconst ListSkeleton = forwardRef<FixedSizeList, ListSkeletonProps>(\n  (\n    {\n      hasDescription = false,\n      titleWidth = '30%',\n      descriptionWidth = '40%',\n      itemCount = 10,\n      left,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const itemRenderer = useCallback(\n      ({ style }) => (\n        <ListItem style={style}>\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Skeleton width={titleWidth} />\n            {hasDescription && <DescriptionSkeleton width={descriptionWidth} />}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </ListItem>\n      ),\n      [descriptionWidth, hasDescription, left, right, titleWidth]\n    );\n\n    return (\n      <List\n        itemCount={itemCount}\n        itemRenderer={itemRenderer}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nListSkeleton.displayName = 'ListSkeleton';\n\nexport default ListSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AA2BA,IAAMA,QAAQ,GAAGC,kBAAA,CAAOC,GAAV,gQASiB,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CATjB,EAYV,IAAAC,+BAAA,GAZU,CAAd;;AAeA,IAAMC,OAAO,GAAGP,kBAAA,CAAOC,GAAV,yFAAb;;AAIA,IAAMO,mBAAmB,GAAG,IAAAR,kBAAA,EAAOS,oBAAP,CAAH,mHACb,UAACP,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQM,KAAR,CAAcC,KAArB;AAAA,CADa,CAAzB;AAKA;AACA;AACA;;AACA,IAAMC,YAAY,gBAAG,IAAAC,iBAAA,EACnB,gBAUEC,GAVF,EAWK;EAAA,+BATDC,cASC;EAAA,IATDA,cASC,oCATgB,KAShB;EAAA,2BARDC,UAQC;EAAA,IARDA,UAQC,gCARY,KAQZ;EAAA,iCAPDC,gBAOC;EAAA,IAPDA,gBAOC,sCAPkB,KAOlB;EAAA,0BANDC,SAMC;EAAA,IANDA,SAMC,+BANW,EAMX;EAAA,IALDC,IAKC,QALDA,IAKC;EAAA,IAJDC,KAIC,QAJDA,KAIC;EAAA,IAHEC,IAGF;;EACH,IAAMC,YAAY,GAAG,IAAAC,kBAAA,EACnB;IAAA,IAAGC,KAAH,SAAGA,KAAH;IAAA,oBACE,gCAAC,QAAD;MAAU,KAAK,EAAEA;IAAjB,GACGL,IAAI,iBAAI,gCAAC,0BAAD,QAAYA,IAAZ,CADX,eAGE,gCAAC,OAAD,qBACE,gCAAC,oBAAD;MAAU,KAAK,EAAEH;IAAjB,EADF,EAEGD,cAAc,iBAAI,gCAAC,mBAAD;MAAqB,KAAK,EAAEE;IAA5B,EAFrB,CAHF,EAQGG,KAAK,iBAAI,gCAAC,2BAAD,QAAaA,KAAb,CARZ,CADF;EAAA,CADmB,EAanB,CAACH,gBAAD,EAAmBF,cAAnB,EAAmCI,IAAnC,EAAyCC,KAAzC,EAAgDJ,UAAhD,CAbmB,CAArB;EAgBA,oBACE,gCAAC,gBAAD;IACE,SAAS,EAAEE,SADb;IAEE,YAAY,EAAEI;EAFhB,GAGMD,IAHN;IAIE,GAAG,EAAEP;EAJP,GADF;AAQD,CArCkB,CAArB;AAwCAF,YAAY,CAACa,WAAb,GAA2B,cAA3B;eAEeb,Y"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LogoLink/index.tsx"],"names":["darkStyles","p","dark","css","StyledLogoLink","resetFocusStyles","sizeStyles","LogoLink","ref","src","as","onMouseDown","rest","activeTheme","ariaLabel","e","preventDefault","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD;AAAA,SACjBA,CAAC,CAACC,IAAF,QACAC,WADA,2JADiB;AAAA,CAAnB;;AAWA,IAAMC,cAAc,GAAG,wBACrB,GADqB,EAErB,6BAAiB,MAAjB,EAAyB,MAAzB,EAAiC,IAAjC,CAFqB,CAAH,yYAIhBC,wBAJgB,EAuBhBL,UAvBgB,EAwBhBM,kBAxBgB,EAyBhB,8BAAiB,SAAjB,CAzBgB,CAApB;AA4BA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAA+CC,GAA/C,EAAuD;AAAA,MAApDC,GAAoD,QAApDA,GAAoD;AAAA,MAA/CC,EAA+C,QAA/CA,EAA+C;AAAA,8BAA3CC,WAA2C;AAAA,MAA3CA,YAA2C,iCAA7B,YAAM,CAAE,CAAqB;AAAA,MAAhBC,IAAgB;;AACrD,kBAAwB,wBAAxB;AAAA,MAAQC,WAAR,aAAQA,WAAR;;AACA,MAAMC,SAAS,GAAGF,IAAI,CAAC,YAAD,CAAJ,IAAsB,MAAxC;AAEA,sBACE,gCAAC,cAAD;AACE,IAAA,IAAI,EAAEC,WAAW,KAAK,MADxB;AAEE,kBAAYC,SAFd;AAGE,IAAA,EAAE,EAAEJ,EAHN;AAIE,IAAA,WAAW,EAAE,qBAACK,CAAD,EAAO;AAClBJ,MAAAA,YAAW,CAACI,CAAD,CAAX;;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD;AAPH,KAQMJ,IARN;AASE,IAAA,GAAG,EAAEJ;AATP,mBAWE;AAAK,IAAA,GAAG,EAAEC,GAAV;AAAe,IAAA,GAAG,EAAEK;AAApB,IAXF,CADF;AAeD,CApBc,CAAjB;AAuBAP,QAAQ,CAACU,WAAT,GAAuB,UAAvB;eAEeV,Q","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { css } from '@emotion/react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LogoLinkProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'>,\n    WithSize {\n  /**\n   * The source of the logo image.\n   */\n  src?: string;\n}\n\nconst darkStyles = (p) =>\n  p.dark &&\n  css`\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  `;\n\ninterface StyledLogoLinkProps extends WithSize {\n  dark: boolean;\n}\nconst StyledLogoLink = styled(\n  'a',\n  omitEmotionProps('dark', 'size', 'as')\n)<StyledLogoLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ${darkStyles};\n  ${sizeStyles};\n  ${transitionStyles('opacity')};\n`;\n\n/**\n * Logo with a link.\n */\nconst LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(\n  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {\n    const { activeTheme } = useTheme();\n    const ariaLabel = rest['aria-label'] || 'Logo';\n\n    return (\n      <StyledLogoLink\n        dark={activeTheme === 'dark'}\n        aria-label={ariaLabel}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <img src={src} alt={ariaLabel} />\n      </StyledLogoLink>\n    );\n  }\n);\n\nLogoLink.displayName = 'LogoLink';\n\nexport default LogoLink;\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["darkStyles","p","dark","css","StyledLogoLink","styled","omitEmotionProps","resetFocusStyles","sizeStyles","transitionStyles","LogoLink","forwardRef","ref","src","as","onMouseDown","rest","useTheme","activeTheme","ariaLabel","e","preventDefault","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { css } from '@emotion/react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LogoLinkProps\n  extends JsxAProps,\n    ReactRouterLinkProps,\n    Pick<LinkProps, 'as'>,\n    WithSize {\n  /**\n   * The source of the logo image.\n   */\n  src?: string;\n}\n\nconst darkStyles = (p) =>\n  p.dark &&\n  css`\n    img {\n      filter: brightness(0) invert(1); // Make the logo white\n    }\n  `;\n\ninterface StyledLogoLinkProps extends WithSize {\n  dark: boolean;\n}\nconst StyledLogoLink = styled(\n  'a',\n  omitEmotionProps('dark', 'size', 'as')\n)<StyledLogoLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n  display: block;\n  height: 1.5em;\n\n  img {\n    display: block;\n    height: 100%;\n    transform: rotate(0); // Fixes moves on hover\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      opacity: 0.7;\n    }\n  }\n\n  ${darkStyles};\n  ${sizeStyles};\n  ${transitionStyles('opacity')};\n`;\n\n/**\n * Logo with a link.\n */\nconst LogoLink = forwardRef<HTMLAnchorElement, LogoLinkProps>(\n  ({ src, as, onMouseDown = () => {}, ...rest }, ref) => {\n    const { activeTheme } = useTheme();\n    const ariaLabel = rest['aria-label'] || 'Logo';\n\n    return (\n      <StyledLogoLink\n        dark={activeTheme === 'dark'}\n        aria-label={ariaLabel}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <img src={src} alt={ariaLabel} />\n      </StyledLogoLink>\n    );\n  }\n);\n\nLogoLink.displayName = 'LogoLink';\n\nexport default LogoLink;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD;EAAA,OACjBA,CAAC,CAACC,IAAF,QACAC,WADA,2JADiB;AAAA,CAAnB;;AAWA,IAAMC,cAAc,GAAG,IAAAC,kBAAA,EACrB,GADqB,EAErB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,MAAzB,EAAiC,IAAjC,CAFqB,CAAH,yYAIhBC,wBAJgB,EAuBhBP,UAvBgB,EAwBhBQ,kBAxBgB,EAyBhB,IAAAC,wBAAA,EAAiB,SAAjB,CAzBgB,CAApB;AA4BA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAA+CC,GAA/C,EAAuD;EAAA,IAApDC,GAAoD,QAApDA,GAAoD;EAAA,IAA/CC,EAA+C,QAA/CA,EAA+C;EAAA,4BAA3CC,WAA2C;EAAA,IAA3CA,YAA2C,iCAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EACrD,gBAAwB,IAAAC,iBAAA,GAAxB;EAAA,IAAQC,WAAR,aAAQA,WAAR;;EACA,IAAMC,SAAS,GAAGH,IAAI,CAAC,YAAD,CAAJ,IAAsB,MAAxC;EAEA,oBACE,gCAAC,cAAD;IACE,IAAI,EAAEE,WAAW,KAAK,MADxB;IAEE,cAAYC,SAFd;IAGE,EAAE,EAAEL,EAHN;IAIE,WAAW,EAAE,qBAACM,CAAD,EAAO;MAClBL,YAAW,CAACK,CAAD,CAAX;;MACAA,CAAC,CAACC,cAAF;IACD;EAPH,GAQML,IARN;IASE,GAAG,EAAEJ;EATP,iBAWE;IAAK,GAAG,EAAEC,GAAV;IAAe,GAAG,EAAEM;EAApB,EAXF,CADF;AAeD,CApBc,CAAjB;AAuBAT,QAAQ,CAACY,WAAT,GAAuB,UAAvB;eAEeZ,Q"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/index.tsx"],"names":["StyledPopover","Popover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Modal","Menu","ref","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,aAAa,GAAG,wBAAOC,mBAAP,CAAH,yKACN,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAf;AAAA,CADM,EAEJ,UAACF,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQE,YAAf;AAAA,CAFI,EAGH,UAACH,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQG,aAAf;AAAA,CAHG,EAKf,mCAAsB,GAAtB,CALe,CAAnB;AAQA,IAAMC,WAAW,GAAG,wBAAOC,iBAAP,CAAH,kHAAjB;AAKA;AACA;AACA;;AACA,IAAMC,IAAI,gBAAG,uBACX,gBAcEC,GAdF,EAeK;AAAA,gCAbDC,aAaC;AAAA,MAbDA,aAaC,mCAbe,IAaf;AAAA,MAZDC,UAYC,QAZDA,UAYC;AAAA,MAXDC,OAWC,QAXDA,OAWC;AAAA,4BAVDC,SAUC;AAAA,MAVDA,SAUC,+BAVW,cAUX;AAAA,MATDC,OASC,QATDA,OASC;AAAA,0BARDC,OAQC;AAAA,MARDA,OAQC,6BARS,YAAM,CAAE,CAQjB;AAAA,MAPDC,IAOC,QAPDA,IAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,EAKC,QALDA,EAKC;AAAA,MAJDC,QAIC,QAJDA,QAIC;AAAA,MAHEC,IAGF;;AACH,yBAA2C,4BAAgBX,GAAhB,CAA3C;AAAA;AAAA,MAAOY,YAAP;AAAA,MAAqBC,kBAArB;;AACA,sCAAmBD,YAAnB;AACA,0BACG,OAAOE,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SAD5C,EAEE,QAFF,EAGET,OAHF;AAKA,MAAMU,OAAO,GAAG,0BAAc,IAAd,CAAhB;AAEA,MAAMC,MAAM,GAAG,oBACb;AAAA,WAAMR,EAAE,mBAAYS,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAZ,CAAR;AAAA,GADa,EAEb,CAACZ,EAAD,CAFa,CAAf,CAVG,CAeH;;AACA,qCAAuB,YAAM;AAC3B,QAAI,CAACN,OAAL,EAAc;AACd,gBAAoBA,OAApB;AAAA,QAAQmB,OAAR,SAAQA,OAAR;AACA,QAAI,CAACA,OAAL,EAAc;AACdA,IAAAA,OAAO,CAACC,YAAR,CAAqB,eAArB,EAAsC,MAAtC;AACAD,IAAAA,OAAO,CAACC,YAAR,CAAqB,eAArB,EAAsCN,MAAtC;AACD,GAND,EAMG,CAACA,MAAD,CANH;AAQA,MAAMO,YAAY,GAAG,oBACnB;AAAA,WAAO;AAAEvB,MAAAA,aAAa,EAAbA,aAAF;AAAiBK,MAAAA,OAAO,EAAPA;AAAjB,KAAP;AAAA,GADmB,EAEnB,CAACL,aAAD,EAAgBK,OAAhB,CAFmB,CAArB;AAKA,sBACE,gCAAC,sBAAD,CAAa,QAAb;AAAsB,IAAA,KAAK,EAAEkB;AAA7B,KACGR,OAAO,gBACN,gCAAC,aAAD;AACE,IAAA,OAAO,EAAEb,OADX;AAEE,IAAA,SAAS,EAAEC,SAFb;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,OAAO,EAAEC,OAJX;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,SAAS,EAAEC,SANb;AAOE,IAAA,EAAE,EAAES,MAPN;AAQE,IAAA,IAAI,EAAC;AARP,KASMN,IATN;AAUE,IAAA,GAAG,EAAEE;AAVP,MAYGH,QAZH,CADM,gBAgBN,gCAAC,WAAD;AACE,IAAA,KAAK,EAAER,UADT;AAEE,IAAA,MAAM,EAAE,IAFV;AAGE,IAAA,OAAO,EAAEG,OAHX;AAIE,IAAA,OAAO,EAAEC,OAJX;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,SAAS,EAAEC,SANb;AAOE,IAAA,EAAE,EAAES,MAPN;AAQE,IAAA,IAAI,EAAC,MARP;AASE,IAAA,GAAG,EAAEJ;AATP,KAWGH,QAXH,CAjBJ,CADF;AAkCD,CA/EU,CAAb;AAkFAX,IAAI,CAAC0B,WAAL,GAAmB,MAAnB;eAEe1B,I","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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","enableScrollingStyles","StyledModal","Modal","Menu","forwardRef","ref","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","useForwardedRef","containerRef","mergedContainerRef","useFocusWithArrows","useKeyPress","window","undefined","isMinXs","useIsMinWidth","menuId","useMemo","Math","random","toString","slice","useBrowserLayoutEffect","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":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"names":["useFocusWithArrows","ref","arrowKeyPressListener","e","current","focusableListItems","querySelectorAll","document","activeElement","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","window"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAAmC;AAC5D,MAAMC,qBAAqB,GAAG,wBAC5B,UAACC,CAAD,EAAO;AACL,QAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;AAClB,QAAMC,kBAAkB,GAAGJ,GAAG,CAACG,OAAJ,CAAYE,gBAAZ,CACzB,wBADyB,CAA3B;AAGA,oBAA0BC,QAA1B;AAAA,QAAQC,aAAR,aAAQA,aAAR;AACA,QAAMC,eAAe,GAAGD,aAAa,GACjC,mBAAKH,kBAAL,EAAuCK,OAAvC,CAA+CF,aAA/C,CADiC,GAEjC,CAAC,CAFL;AAIA,QAAIG,gBAAJ;;AACA,QAAIF,eAAe,KAAK,CAAC,CAArB,IAA0BN,CAAC,CAACS,GAAF,KAAU,SAAxC,EAAmD;AACjDD,MAAAA,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAnB,GAA4B,CAA/C;AACD,KAFD,MAEO,IAAIJ,eAAe,KAAK,CAAC,CAArB,IAA0BN,CAAC,CAACS,GAAF,KAAU,WAAxC,EAAqD;AAC1DD,MAAAA,gBAAgB,GAAG,CAAnB;AACD,KAFM,MAEA,IAAIF,eAAe,GAAG,CAAC,CAAnB,IAAwBN,CAAC,CAACS,GAAF,KAAU,SAAtC,EAAiD;AACtDD,MAAAA,gBAAgB,GACdF,eAAe,GAAG,CAAlB,GACIA,eAAe,GAAG,CADtB,GAEIJ,kBAAkB,CAACQ,MAAnB,GAA4B,CAHlC;AAID,KALM,MAKA,IAAIJ,eAAe,GAAG,CAAC,CAAnB,IAAwBN,CAAC,CAACS,GAAF,KAAU,WAAtC,EAAmD;AACxDD,MAAAA,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAnB,GAA4B,CAA9C,GACIJ,eAAe,GAAG,CADtB,GAEI,CAHN;AAID;;AAED,QAAIE,gBAAgB,KAAKG,SAAzB,EAAoC;AACpC,QAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAnB,CAAwBL,gBAAxB,CAA5B;AACA,QAAI,CAACI,mBAAL,EAA0B;AAE1BA,IAAAA,mBAAmB,CAACE,KAApB;AACAd,IAAAA,CAAC,CAACe,cAAF;AACD,GAlC2B,EAmC5B,CAACjB,GAAD,CAnC4B,CAA9B;AAsCA,0BACG,OAAOkB,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCL,SAD5C,EAEE,CAAC,SAAD,EAAY,WAAZ,CAFF,EAGEZ,qBAHF;AAKD,CA5CD;;eA8CeF,kB","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"],"file":"useFocusWithArrows.js"}
+{"version":3,"file":"useFocusWithArrows.js","names":["useFocusWithArrows","ref","arrowKeyPressListener","useCallback","e","current","focusableListItems","querySelectorAll","document","activeElement","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","useKeyPress","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;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,GAAD,EAAmC;EAC5D,IAAMC,qBAAqB,GAAG,IAAAC,kBAAA,EAC5B,UAACC,CAAD,EAAO;IACL,IAAI,CAACH,GAAG,CAACI,OAAT,EAAkB;IAClB,IAAMC,kBAAkB,GAAGL,GAAG,CAACI,OAAJ,CAAYE,gBAAZ,CACzB,wBADyB,CAA3B;IAGA,gBAA0BC,QAA1B;IAAA,IAAQC,aAAR,aAAQA,aAAR;IACA,IAAMC,eAAe,GAAGD,aAAa,GACjC,mBAAKH,kBAAL,EAAuCK,OAAvC,CAA+CF,aAA/C,CADiC,GAEjC,CAAC,CAFL;IAIA,IAAIG,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,IAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAnB,CAAwBL,gBAAxB,CAA5B;IACA,IAAI,CAACI,mBAAL,EAA0B;IAE1BA,mBAAmB,CAACE,KAApB;IACAd,CAAC,CAACe,cAAF;EACD,CAlC2B,EAmC5B,CAAClB,GAAD,CAnC4B,CAA9B;EAsCA,IAAAmB,kBAAA,EACG,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCN,SAD5C,EAEE,CAAC,SAAD,EAAY,WAAZ,CAFF,EAGEb,qBAHF;AAKD,CA5CD;;eA8CeF,kB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/MenuDivider/index.tsx"],"names":["Container","styled","div","p","theme","menuDividerColor","MenuDivider","props","ref","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,SAAS,GAAGC,mBAAOC,GAAV,0JAEc,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,gBAAZ,CAAP;AAAA,CAFd,CAAf;AAMA;AACA;AACA;;;AACA,IAAMC,WAAW,gBAAG,uBAClB,UAACC,KAAD,EAAQC,GAAR;AAAA,sBAAgB,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAC;AAAhB,KAAgCD,KAAhC;AAAuC,IAAA,GAAG,EAAEC;AAA5C,KAAhB;AAAA,CADkB,CAApB;AAIAF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;eAEeH,W","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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["Container","styled","div","p","clr","theme","menuDividerColor","MenuDivider","forwardRef","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;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,GAAV,0JAEc,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,gBAAZ,CAAP;AAAA,CAFd,CAAf;AAMA;AACA;AACA;;;AACA,IAAMC,WAAW,gBAAG,IAAAC,iBAAA,EAClB,UAACC,KAAD,EAAQC,GAAR;EAAA,oBAAgB,gCAAC,SAAD;IAAW,IAAI,EAAC;EAAhB,GAAgCD,KAAhC;IAAuC,GAAG,EAAEC;EAA5C,GAAhB;AAAA,CADkB,CAApB;AAIAH,WAAW,CAACI,WAAZ,GAA0B,aAA1B;eAEeJ,W"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/MenuGroup/index.tsx"],"names":["Title","styled","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","MenuContext","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"mappings":"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","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(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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","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(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/cjs/MenuItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/MenuItem/index.tsx"],"names":["selectedStyles","p","selected","css","theme","menuItemSelectedColorBg","StyledButton","Button","menuItemHeight","menuItemPaddingHorizontal","m","min","xs","SelectedIcon","Check","menuItemSelectedColorIcon","MenuItem","ref","value","right","onClick","rest","MenuContext","closeOnSelect","onClose","onClickRef","current","clickHandler","e","buttonGhostColorText","colorText","displayName"],"mappings":";;;;;;;;;AAAA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;AAAA,SACrBA,CAAC,CAACC,QAAF,QACAC,WADA,wGAEsB,kBAAIF,CAAC,CAACG,KAAF,CAAQC,uBAAZ,CAFtB,CADqB;AAAA,CAAvB;;AAOA,IAAMC,YAAY,GAAG,wBACnBC,kBADmB,EAEnB,6BAAiB,UAAjB,CAFmB,CAAH,8UAON,UAACN,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQI,cAAf;AAAA,CAPM,EAgBH,UAACP,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQK,yBAAR,CAAkC,CAAlC,CAAP;AAAA,CAhBG,EAiBdC,SAAEC,GAAF,CAAMC,EAjBQ,EAkBD,UAACX,CAAD;AAAA,SAAOA,CAAC,CAACG,KAAF,CAAQK,yBAAR,CAAkC,CAAlC,CAAP;AAAA,CAlBC,EAqBdT,cArBc,CAAlB;AAwBA,IAAMa,YAAY,GAAG,wBAAOC,YAAP,CAAH,0FACP,UAACb,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQW,yBAAZ,CAAP;AAAA,CADO,CAAlB;AAIA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAAkEC,GAAlE,EAA0E;AAAA,2BAAvEf,QAAuE;AAAA,MAAvEA,QAAuE,8BAA5D,KAA4D;AAAA,MAArDgB,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,KAA8C,QAA9CA,KAA8C;AAAA,0BAAvCC,OAAuC;AAAA,MAAvCA,OAAuC,6BAA7B,YAAM,CAAE,CAAqB;AAAA,MAAhBC,IAAgB;;AACxE,oBAAmC,uBAAWC,sBAAX,CAAnC;AAAA,MAAQC,aAAR,eAAQA,aAAR;AAAA,MAAuBC,OAAvB,eAAuBA,OAAvB;;AACA,MAAMC,UAAU,GAAG,oBAAnB;AAEA,wBAAU,YAAM;AACdA,IAAAA,UAAU,CAACC,OAAX,GAAqBN,OAArB;AACD,GAFD,EAEG,CAACA,OAAD,CAFH;AAIA,MAAMO,YAAY,GAAG,wBACnB,UAACC,CAAD,EAAO;AACL,QAAIH,UAAU,CAACC,OAAf,EAAwBD,UAAU,CAACC,OAAX,CAAmBE,CAAnB;AACxB,QAAIL,aAAJ,EAAmBC,OAAO;AAC3B,GAJkB,EAKnB,CAACD,aAAD,EAAgBC,OAAhB,CALmB,CAArB;AAQA,sBACE,gCAAC,uBAAD;AACE,IAAA,SAAS,EAAE,mBAACpB,KAAD;AAAA,aAAY;AAAEyB,QAAAA,oBAAoB,EAAEzB,KAAK,CAAC0B;AAA9B,OAAZ;AAAA;AADb,kBAGE,gCAAC,YAAD;AACE,IAAA,QAAQ,EAAE5B,QADZ;AAEE,IAAA,KAAK,EAAEA,QAAQ,gBAAG,gCAAC,YAAD,OAAH,GAAsBiB,KAFvC;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,IAAI,EAAC,QAJP;AAKE,IAAA,OAAO,EAAEQ,YALX;AAME,IAAA,IAAI,EAAC;AANP,KAOMN,IAPN;AAQE,IAAA,GAAG,EAAEJ;AARP,KAHF,CADF;AAgBD,CAjCc,CAAjB;AAoCAD,QAAQ,CAACe,WAAT,GAAuB,UAAvB;eAEef,Q","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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["selectedStyles","p","selected","css","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","omitEmotionProps","menuItemHeight","menuItemPaddingHorizontal","m","min","xs","SelectedIcon","Check","menuItemSelectedColorIcon","MenuItem","forwardRef","ref","value","right","onClick","rest","useContext","MenuContext","closeOnSelect","onClose","onClickRef","useRef","useEffect","current","clickHandler","useCallback","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;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAgBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;EAAA,OACrBA,CAAC,CAACC,QAAF,QACAC,WADA,wGAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQC,uBAAZ,CAFtB,CADqB;AAAA,CAAvB;;AAOA,IAAMC,YAAY,GAAG,IAAAC,kBAAA,EACnBC,kBADmB,EAEnB,IAAAC,uBAAA,EAAiB,UAAjB,CAFmB,CAAH,8UAON,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQM,cAAf;AAAA,CAPM,EAgBH,UAACV,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQO,yBAAR,CAAkC,CAAlC,CAAP;AAAA,CAhBG,EAiBdC,QAAA,CAAEC,GAAF,CAAMC,EAjBQ,EAkBD,UAACd,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQO,yBAAR,CAAkC,CAAlC,CAAP;AAAA,CAlBC,EAqBdZ,cArBc,CAAlB;AAwBA,IAAMgB,YAAY,GAAG,IAAAR,kBAAA,EAAOS,YAAP,CAAH,0FACP,UAAChB,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQa,yBAAZ,CAAP;AAAA,CADO,CAAlB;AAIA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAAkEC,GAAlE,EAA0E;EAAA,yBAAvEnB,QAAuE;EAAA,IAAvEA,QAAuE,8BAA5D,KAA4D;EAAA,IAArDoB,KAAqD,QAArDA,KAAqD;EAAA,IAA9CC,KAA8C,QAA9CA,KAA8C;EAAA,wBAAvCC,OAAuC;EAAA,IAAvCA,OAAuC,6BAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EACxE,kBAAmC,IAAAC,iBAAA,EAAWC,sBAAX,CAAnC;EAAA,IAAQC,aAAR,eAAQA,aAAR;EAAA,IAAuBC,OAAvB,eAAuBA,OAAvB;;EACA,IAAMC,UAAU,GAAG,IAAAC,aAAA,GAAnB;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACdF,UAAU,CAACG,OAAX,GAAqBT,OAArB;EACD,CAFD,EAEG,CAACA,OAAD,CAFH;EAIA,IAAMU,YAAY,GAAG,IAAAC,kBAAA,EACnB,UAACC,CAAD,EAAO;IACL,IAAIN,UAAU,CAACG,OAAf,EAAwBH,UAAU,CAACG,OAAX,CAAmBG,CAAnB;IACxB,IAAIR,aAAJ,EAAmBC,OAAO;EAC3B,CAJkB,EAKnB,CAACD,aAAD,EAAgBC,OAAhB,CALmB,CAArB;EAQA,oBACE,gCAAC,uBAAD;IACE,SAAS,EAAE,mBAACxB,KAAD;MAAA,OAAY;QAAEgC,oBAAoB,EAAEhC,KAAK,CAACiC;MAA9B,CAAZ;IAAA;EADb,gBAGE,gCAAC,YAAD;IACE,QAAQ,EAAEpC,QADZ;IAEE,KAAK,EAAEA,QAAQ,gBAAG,gCAAC,YAAD,OAAH,GAAsBqB,KAFvC;IAGE,IAAI,EAAC,OAHP;IAIE,IAAI,EAAC,QAJP;IAKE,OAAO,EAAEW,YALX;IAME,IAAI,EAAC;EANP,GAOMT,IAPN;IAQE,GAAG,EAAEJ;EARP,GAHF,CADF;AAgBD,CAjCc,CAAjB;AAoCAF,QAAQ,CAACoB,WAAT,GAAuB,UAAvB;eAEepB,Q"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/index.tsx"],"names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","modalMaskColorBg","Container","styled","div","m","min","xs","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","mounted","window","undefined","titleId","random","toString","slice","bodyId","e","stopPropagation","t","modalCloseButtonPaddingHorizontal","closeLabel","displayName"],"mappings":"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","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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["MODAL_CONTAINER_Z_INDEX","MODAL_BOX_SHADOW_SIZE_EM","maskFadeIn","keyframes","maskFadeOut","maskVisibleStyles","p","visible","css","theme","transitionDelay","maskInvisibleStyles","ModalMask","styled","omitEmotionProps","clr","modalMaskColorBg","Container","div","m","min","xs","enableScrollingStyles","contentFadeIn","contentFadeOut","contentFadeInXs","contentFadeOutXs","contentVisibleStyles","contentInvisibleStyles","Content","colorBg","colorText","modalColorBoxShadow","borderRadius","modalWidth","sizeStyles","Header","modalHeaderHeight","modalHeaderColorBorderBottom","modalBodyPaddingHorizontal","Math","max","buttonPaddingHorizontal","Title","sizes","large","ellipsisStyles","Body","modalBodyPaddingVertical","Footer","Modal","forwardRef","ref","title","okText","okDanger","okLoading","okDisabled","header","footer","locale","defaultLocale","onClose","onOk","size","id","onClick","children","rest","contentRef","useRef","useTheme","mounted","useClosable","useBodyScroll","useKeyPress","window","undefined","titleId","useMemo","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/cjs/Modal/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Modal/utils/defaultLocale.ts"],"names":["defaultLocale","closeLabel"],"mappings":";;;;;;AAIA,IAAMA,aAA0B,GAAG;AACjCC,EAAAA,UAAU,EAAE;AADqB,CAAnC;eAIeD,a","sourcesContent":["export interface ModalLocale {\n  closeLabel: string;\n}\n\nconst defaultLocale: ModalLocale = {\n  closeLabel: 'Close',\n};\n\nexport default defaultLocale;\n"],"file":"defaultLocale.js"}
+{"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,IAAMA,aAA0B,GAAG;EACjCC,UAAU,EAAE;AADqB,CAAnC;eAIeD,a"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Navigation/index.tsx"],"names":["Container","styled","div","p","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","m","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","css","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","Addon","BottomAddon","Navigation","ref","sideTop","sideBottom","children","rest","contentRef","displayName"],"mappings":"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","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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["Container","styled","div","p","clr","theme","navigationColorBg","navigationColorText","navigationTabHeight","navigationColorBorder","m","min","md","navigationSideWidth","notHasSideTopStyles","hasSideTop","css","pageHeaderHeight","hasPrevStyles","hasPrev","hasNext","navigationMaskImageSize","hasNextStyles","hasPrevNextStyles","Content","omitEmotionProps","enableScrollingStyles","Addon","BottomAddon","Navigation","forwardRef","ref","sideTop","sideBottom","children","rest","contentRef","useRef","useScrollFlags","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/cjs/Navigation/utils/useScrollFlags.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Navigation/utils/useScrollFlags.ts"],"names":["useScrollFlags","ref","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","scrollHandler","current","window","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAOA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,GAAD,EAAgD;AACrE,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,MAAMC,OAAO,GAAG,0BAAc,IAAd,CAAhB;AAEA,MAAMC,aAAa,GAAG,wBAAY,YAAM;AACtC,QAAQC,OAAR,GAAoBP,GAApB,CAAQO,OAAR;AACA,QAAI,CAACA,OAAL,EAAc;AAEdL,IAAAA,UAAU,CAACK,OAAO,CAACF,OAAO,GAAG,WAAH,GAAiB,YAAzB,CAAP,GAAgD,CAAjD,CAAV;AACAD,IAAAA,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;AAMD,GAXqB,EAWnB,CAACL,GAAD,EAAMK,OAAN,CAXmB,CAAtB;AAaA,qCAAuB;AAAA,WAAMC,aAAa,EAAnB;AAAA,GAAvB,EAA8C,CAACA,aAAD,CAA9C;AACA,uBAASN,GAAT,EAAc,QAAd,EAAwBM,aAAxB;AACA,uBACG,OAAOE,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SAD5C,EAEE,QAFF,EAGEH,aAHF;AAMA,SAAO;AAAEL,IAAAA,OAAO,EAAPA,OAAF;AAAWE,IAAAA,OAAO,EAAPA;AAAX,GAAP;AACD,CA3BD;;eA6BeJ,c","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"],"file":"useScrollFlags.js"}
+{"version":3,"file":"useScrollFlags.js","names":["useScrollFlags","ref","useState","hasPrev","setHasPrev","hasNext","setHasNext","isMinMd","useIsMinWidth","scrollHandler","useCallback","current","useBrowserLayoutEffect","useEvent","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;;AACA;;AACA;;;;;;;;;;;;;;AAOA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,GAAD,EAAgD;EACrE,gBAA8B,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACA,iBAA8B,IAAAF,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOG,OAAP;EAAA,IAAgBC,UAAhB;;EACA,IAAMC,OAAO,GAAG,IAAAC,oBAAA,EAAc,IAAd,CAAhB;EAEA,IAAMC,aAAa,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACtC,IAAQC,OAAR,GAAoBV,GAApB,CAAQU,OAAR;IACA,IAAI,CAACA,OAAL,EAAc;IAEdP,UAAU,CAACO,OAAO,CAACJ,OAAO,GAAG,WAAH,GAAiB,YAAzB,CAAP,GAAgD,CAAjD,CAAV;IACAD,UAAU,CACRK,OAAO,CAACJ,OAAO,GAAG,cAAH,GAAoB,aAA5B,CAAP,GACEI,OAAO,CAACJ,OAAO,GAAG,WAAH,GAAiB,YAAzB,CADT,GAEEI,OAAO,CAACJ,OAAO,GAAG,cAAH,GAAoB,aAA5B,CAFT,GAGE,CAJM,CAAV;EAMD,CAXqB,EAWnB,CAACN,GAAD,EAAMM,OAAN,CAXmB,CAAtB;EAaA,IAAAK,6BAAA,EAAuB;IAAA,OAAMH,aAAa,EAAnB;EAAA,CAAvB,EAA8C,CAACA,aAAD,CAA9C;EACA,IAAAI,eAAA,EAASZ,GAAT,EAAc,QAAd,EAAwBQ,aAAxB;EACA,IAAAI,eAAA,EACG,OAAOC,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCC,SAD5C,EAEE,QAFF,EAGEN,aAHF;EAMA,OAAO;IAAEN,OAAO,EAAPA,OAAF;IAAWE,OAAO,EAAPA;EAAX,CAAP;AACD,CA3BD;;eA6BeL,c"}