@os-design/core 1.0.156 → 1.0.158

package/dist/esm/List/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useFontSize, useForwardedRef, useSafeAreaInset, useSize } from '@os-design/utils';
@@ -8,7 +7,6 @@ import { useIsMinWidth } from '@os-design/media';
 import WindowScroller from './WindowScroller';
 import useRWLoadNext from './utils/useRWLoadNext';
 import LayoutContext from '../Layout/LayoutContext';
-
 /**
  * Virtualized list.
  * Used the react-window library.
@@ -57,13 +55,15 @@ const List = /*#__PURE__*/forwardRef(({
     // Set the scroll position to the list
     if (listRef.current) listRef.current.scrollTo(top);
     loadNextHandler(top);
-  }, [listRef, loadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, [listRef, loadNextHandler]);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const InnerElement = useCallback(({
     style: innerStyle,
     ...innerRest
   }) => /*#__PURE__*/React.createElement("div", _extends({
-    style: { ...innerStyle,
+    style: {
+      ...innerStyle,
       height: `${parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize}px`
     }
   }, innerRest)), [paddingBottomSize, paddingTopSize]);
@@ -71,12 +71,14 @@ const List = /*#__PURE__*/forwardRef(({
     style: childrenStyle,
     ...childrenRest
   }) => itemRenderer({
-    style: { ...childrenStyle,
+    style: {
+      ...childrenStyle,
       top: `${parseFloat(childrenStyle.top ? childrenStyle.top.toString() : '0') + paddingTopSize}px`
     },
     ...childrenRest
-  }), [itemRenderer, paddingTopSize]); // eslint-disable-next-line react/jsx-no-useless-fragment
+  }), [itemRenderer, paddingTopSize]);
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   const EmptyComponent = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, empty), [empty]);
   const renderList = useCallback(() => /*#__PURE__*/React.createElement(FixedSizeList, _extends({
     ref: mergedListRef,
@@ -84,7 +86,8 @@ const List = /*#__PURE__*/forwardRef(({
     width: "100%",
     height: height,
     itemSize: itemSize,
-    style: heightProp ? style : { ...style,
+    style: heightProp ? style : {
+      ...style,
       height: '100% important!'
     },
     overscanCount: overscanCount,
@@ -93,11 +96,9 @@ const List = /*#__PURE__*/forwardRef(({
     }) => loadNextHandler(scrollOffset) : undefined,
     innerElementType: itemCount > 0 ? InnerElement : EmptyComponent
   }, rest), listChildren), [EmptyComponent, InnerElement, height, heightProp, itemCount, itemSize, listChildren, loadNextHandler, mergedListRef, overscanCount, rest, style]);
-
   if (heightProp) {
     return renderList();
   }
-
   return /*#__PURE__*/React.createElement(WindowScroller, {
     onScroll: windowScrollHandler
   }, renderList());

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","useFontSize","useForwardedRef","useSafeAreaInset","useSize","useTheme","useIsMinWidth","WindowScroller","useRWLoadNext","LayoutContext","List","itemCount","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","style","empty","onLoadNext","itemRenderer","rest","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerStyle","innerRest","parseFloat","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","renderList","scrollOffset","undefined","displayName","default"],"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 }) => (\n        <div\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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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","useFontSize","useForwardedRef","useSafeAreaInset","useSize","useTheme","useIsMinWidth","WindowScroller","useRWLoadNext","LayoutContext","List","itemCount","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","style","empty","onLoadNext","itemRenderer","rest","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerStyle","innerRest","parseFloat","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","renderList","scrollOffset","undefined","displayName","default"],"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 }) => (\n        <div\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/esm/List/utils/bodyPointerEvents.js

@@ -9,7 +9,6 @@ export const disableBodyPointerEvents = () => {
 };
 export const enableBodyPointerEvents = () => {
   timeoutId = null;
-
   if (originalBodyPointerEvents !== null) {
     document.body.style.pointerEvents = originalBodyPointerEvents;
     originalBodyPointerEvents = null;

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

@@ -1 +1 @@
-{"version":3,"file":"bodyPointerEvents.js","names":["clearFrameTimeout","setFrameTimeout","originalBodyPointerEvents","timeoutId","disableBodyPointerEvents","document","body","style","pointerEvents","enableBodyPointerEvents","enableBodyPointerEventsAfterDelay","delay"],"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,SAASA,iBAAT,EAAmCC,eAAnC,QAA0D,gBAA1D;AAEA,IAAIC,yBAAwC,GAAG,IAA/C;AACA,IAAIC,SAAuB,GAAG,IAA9B;AAEA,OAAO,MAAMC,wBAAwB,GAAG,MAAY;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;AAOP,OAAO,MAAMC,uBAAuB,GAAG,MAAY;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;AAQP,OAAO,MAAMQ,iCAAiC,GAAIC,KAAD,IAAyB;EACxE,IAAIR,SAAJ,EAAeH,iBAAiB,CAACG,SAAD,CAAjB;EACfA,SAAS,GAAGF,eAAe,CAACQ,uBAAD,EAA0BE,KAA1B,CAA3B;AACD,CAHM"}
+{"version":3,"file":"bodyPointerEvents.js","names":["clearFrameTimeout","setFrameTimeout","originalBodyPointerEvents","timeoutId","disableBodyPointerEvents","document","body","style","pointerEvents","enableBodyPointerEvents","enableBodyPointerEventsAfterDelay","delay"],"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,SAASA,iBAAiB,EAASC,eAAe,QAAQ,gBAAgB;AAE1E,IAAIC,yBAAwC,GAAG,IAAI;AACnD,IAAIC,SAAuB,GAAG,IAAI;AAElC,OAAO,MAAMC,wBAAwB,GAAG,MAAY;EAClD,IAAIF,yBAAyB,KAAK,IAAI,EAAE;IACtCA,yBAAyB,GAAGG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,aAAa;IAC7DH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,aAAa,GAAG,MAAM;EAC5C;AACF,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAG,MAAY;EACjDN,SAAS,GAAG,IAAI;EAChB,IAAID,yBAAyB,KAAK,IAAI,EAAE;IACtCG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,aAAa,GAAGN,yBAAyB;IAC7DA,yBAAyB,GAAG,IAAI;EAClC;AACF,CAAC;AAED,OAAO,MAAMQ,iCAAiC,GAAIC,KAAa,IAAW;EACxE,IAAIR,SAAS,EAAEH,iBAAiB,CAACG,SAAS,CAAC;EAC3CA,SAAS,GAAGF,eAAe,CAACQ,uBAAuB,EAAEE,KAAK,CAAC;AAC7D,CAAC"}

package/dist/esm/List/utils/frameTimeout.js

@@ -4,20 +4,18 @@
 export const clearFrameTimeout = frame => {
   window.cancelAnimationFrame(frame.id);
 };
+
 /**
  * Sets a timeout using requestAnimationFrame.
  */
-
 export const setFrameTimeout = (handler, timeout) => {
   let start = 0;
   const frame = {
     id: 0
   };
-
   const frameRequestCallback = timestamp => {
     if (!start) start = timestamp;
     const timePassed = timestamp - start;
-
     if (timePassed >= timeout) {
       clearFrameTimeout(frame);
       handler();
@@ -25,7 +23,6 @@ export const setFrameTimeout = (handler, timeout) => {
       frame.id = window.requestAnimationFrame(frameRequestCallback);
     }
   };
-
   frame.id = window.requestAnimationFrame(frameRequestCallback);
   return frame;
 };

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

@@ -1 +1 @@
-{"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;AACA,OAAO,MAAMA,iBAAiB,GAAIC,KAAD,IAAwB;EACvDC,MAAM,CAACC,oBAAP,CAA4BF,KAAK,CAACG,EAAlC;AACD,CAFM;AAIP;AACA;AACA;;AACA,OAAO,MAAMC,eAAe,GAAG,CAC7BC,OAD6B,EAE7BC,OAF6B,KAGnB;EACV,IAAIC,KAAK,GAAG,CAAZ;EACA,MAAMP,KAAK,GAAG;IAAEG,EAAE,EAAE;EAAN,CAAd;;EAEA,MAAMK,oBAAoB,GAAIC,SAAD,IAAuB;IAClD,IAAI,CAACF,KAAL,EAAYA,KAAK,GAAGE,SAAR;IACZ,MAAMC,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"}
+{"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;AACA,OAAO,MAAMA,iBAAiB,GAAIC,KAAY,IAAW;EACvDC,MAAM,CAACC,oBAAoB,CAACF,KAAK,CAACG,EAAE,CAAC;AACvC,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAG,CAC7BC,OAAmB,EACnBC,OAAe,KACL;EACV,IAAIC,KAAK,GAAG,CAAC;EACb,MAAMP,KAAK,GAAG;IAAEG,EAAE,EAAE;EAAE,CAAC;EAEvB,MAAMK,oBAAoB,GAAIC,SAAiB,IAAK;IAClD,IAAI,CAACF,KAAK,EAAEA,KAAK,GAAGE,SAAS;IAC7B,MAAMC,UAAU,GAAGD,SAAS,GAAGF,KAAK;IAEpC,IAAIG,UAAU,IAAIJ,OAAO,EAAE;MACzBP,iBAAiB,CAACC,KAAK,CAAC;MACxBK,OAAO,EAAE;IACX,CAAC,MAAM;MACLL,KAAK,CAACG,EAAE,GAAGF,MAAM,CAACU,qBAAqB,CAACH,oBAAoB,CAAC;IAC/D;EACF,CAAC;EAEDR,KAAK,CAACG,EAAE,GAAGF,MAAM,CAACU,qBAAqB,CAACH,oBAAoB,CAAC;EAC7D,OAAOR,KAAK;AACd,CAAC"}

package/dist/esm/List/utils/useRWLoadNext.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef } from 'react';
-
 /**
  * Creates the onScroll callback for react-window to implement
  * the onLoadNext function.
@@ -24,6 +23,5 @@ const useRWLoadNext = props => {
     onLoadNext();
   }, []);
 };
-
 export default useRWLoadNext;
 //# sourceMappingURL=useRWLoadNext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRWLoadNext.js","names":["useCallback","useEffect","useRef","useRWLoadNext","props","propsRef","current","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,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,OAA/C;;AAaA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,KAAD,IAAyC;EAC7D,MAAMC,QAAQ,GAAGH,MAAM,CAACE,KAAD,CAAvB;EAEAH,SAAS,CAAC,MAAM;IACdI,QAAQ,CAACC,OAAT,GAAmBF,KAAnB;EACD,CAFQ,EAEN,CAACA,KAAD,CAFM,CAAT;EAIA,OAAOJ,WAAW,CAAYO,YAAD,IAAkB;IAC7C,MAAM;MAAEC,SAAF;MAAaC,SAAb;MAAwBC,QAAxB;MAAkCC,UAAlC;MAA8CC,MAA9C;MAAsDC;IAAtD,IACJR,QAAQ,CAACC,OADX;IAGA,MAAMQ,iBAAiB,GAAGN,SAAS,GAAGC,SAAtC;IACA,MAAMM,yBAAyB,GAC7BD,iBAAiB,GAAGJ,QAApB,GAA+BC,UAA/B,GAA4CC,MAD9C;IAGA,IAAIL,YAAY,GAAGQ,yBAAnB,EAA8C;IAC9CF,UAAU;EACX,CAViB,EAUf,EAVe,CAAlB;AAWD,CAlBD;;AAoBA,eAAeV,aAAf"}
+{"version":3,"file":"useRWLoadNext.js","names":["useCallback","useEffect","useRef","useRWLoadNext","props","propsRef","current","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,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAatD;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAIC,KAAyB,IAAe;EAC7D,MAAMC,QAAQ,GAAGH,MAAM,CAACE,KAAK,CAAC;EAE9BH,SAAS,CAAC,MAAM;IACdI,QAAQ,CAACC,OAAO,GAAGF,KAAK;EAC1B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,OAAOJ,WAAW,CAAYO,YAAY,IAAK;IAC7C,MAAM;MAAEC,SAAS;MAAEC,SAAS;MAAEC,QAAQ;MAAEC,UAAU;MAAEC,MAAM;MAAEC;IAAW,CAAC,GACtER,QAAQ,CAACC,OAAO;IAElB,MAAMQ,iBAAiB,GAAGN,SAAS,GAAGC,SAAS;IAC/C,MAAMM,yBAAyB,GAC7BD,iBAAiB,GAAGJ,QAAQ,GAAGC,UAAU,GAAGC,MAAM;IAEpD,IAAIL,YAAY,GAAGQ,yBAAyB,EAAE;IAC9CF,UAAU,EAAE;EACd,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAED,eAAeV,aAAa"}

package/dist/esm/ListItem/ListItemContent.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
@@ -29,16 +28,13 @@ export const RightAddon = styled.div`
   margin-left: auto;
   padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
 `;
-
 const hasSwipeStyles = p => p.hasSwipe && css`
     transform: translateX(100%);
     ${transitionStyles('transform')(p)};
   `;
-
 const openedStyles = p => p.opened && css`
     transform: translateX(0);
   `;
-
 const Actions = styled('nav', omitEmotionProps('hasSwipe', 'opened'))`
   position: absolute;
   top: 0;
@@ -60,8 +56,9 @@ const Actions = styled('nav', omitEmotionProps('hasSwipe', 'opened'))`
   ${openedStyles};
   ${horizontalPaddingStyles('right')};
 `;
-let actionIndex = 0; // Used by ListItem, ListItemLink
+let actionIndex = 0;
 
+// Used by ListItem, ListItemLink
 const ListItemContent = ({
   title,
   description,
@@ -90,7 +87,6 @@ const ListItemContent = ({
     }
   }, actionRest), icon);
 })));
-
 ListItemContent.displayName = 'ListItemContent';
 export default ListItemContent;
 //# sourceMappingURL=ListItemContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemContent.js","names":["React","styled","clr","ellipsisStyles","horizontalPaddingStyles","transitionStyles","omitEmotionProps","css","Button","Content","div","Title","p","theme","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","openedStyles","opened","Actions","listItemActionsPaddingLeft","colorBg","slice","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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"}
+{"version":3,"file":"ListItemContent.js","names":["React","styled","clr","ellipsisStyles","horizontalPaddingStyles","transitionStyles","omitEmotionProps","css","Button","Content","div","Title","p","theme","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","hasSwipeStyles","hasSwipe","openedStyles","opened","Actions","listItemActionsPaddingLeft","colorBg","slice","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/esm/ListItem/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { horizontalPaddingStyles } from '@os-design/styles';
@@ -36,10 +35,10 @@ export const ListItemContainer = styled.div`
 
   ${horizontalPaddingStyles()};
 `;
+
 /**
  * The base list item.
  */
-
 const ListItem = /*#__PURE__*/forwardRef(({
   title,
   description,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","ref","touchDevice","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,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,aAAT,EAAwBC,QAAxB,QAAwC,kBAAxC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,eAAP,MAAsD,mBAAtD;AAOA,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAD,IAAOJ,GAAG,CAACI,CAAC,CAACC,KAAF,CAAQC,mBAAT,CAA8B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CA7BO;AA+BP;AACA;AACA;;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CACE;EACEc,KADF;EAEEC,WAFF;EAGEC,IAHF;EAIEC,KAJF;EAKEC,OAAO,GAAG,EALZ;EAMEC,YAAY,GAAG,MAAM,CAAE,CANzB;EAOEC,WAAW,GAAG,MAAM,CAAE,CAPxB;EAQEC,UAAU,GAAG,MAAM,CAAE,CARvB;EASE,GAAGC;AATL,CADF,EAYEC,GAZF,KAaK;EACH,MAAMC,WAAW,GAAGvB,OAAO,CAAC,MAAMG,aAAa,EAApB,EAAwB,EAAxB,CAA3B;EACA,MAAM;IAAEqB,MAAF;IAAUC;EAAV,IAAuBrB,QAAQ,EAArC;EAEA,oBACE,oBAAC,iBAAD,eACMiB,IADN;IAEE,YAAY,EAAGK,CAAD,IAAO;MACnBD,QAAQ,CAACP,YAAT,CAAsBQ,CAAtB;MACAR,YAAY,CAACQ,CAAD,CAAZ;IACD,CALH;IAME,WAAW,EAAGA,CAAD,IAAO;MAClBD,QAAQ,CAACN,WAAT,CAAqBO,CAArB;MACAP,WAAW,CAACO,CAAD,CAAX;IACD,CATH;IAUE,UAAU,EAAGA,CAAD,IAAO;MACjBD,QAAQ,CAACL,UAAT,CAAoBM,CAApB;MACAN,UAAU,CAACM,CAAD,CAAV;IACD,CAbH;IAcE,GAAG,EAAEJ;EAdP,iBAgBE,oBAAC,eAAD;IACE,KAAK,EAAET,KADT;IAEE,WAAW,EAAEC,WAFf;IAGE,IAAI,EAAEC,IAHR;IAIE,KAAK,EAAEC,KAJT;IAKE,OAAO,EAAEC,OALX;IAME,QAAQ,EAAEM,WANZ;IAOE,MAAM,EAAEC;EAPV,EAhBF,CADF;AA4BD,CA9CwB,CAA3B;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;AAEA,eAAef,QAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","ref","touchDevice","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,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,aAAa,EAAEC,QAAQ,QAAQ,kBAAkB;AAC1D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,eAAe,MAAgC,mBAAmB;AAOzE,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKJ,GAAG,CAACI,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CAAC;;AAED;AACA;AACA;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CACE;EACEc,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,EAAE;EACZC,YAAY,GAAG,MAAM,CAAC,CAAC;EACvBC,WAAW,GAAG,MAAM,CAAC,CAAC;EACtBC,UAAU,GAAG,MAAM,CAAC,CAAC;EACrB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,WAAW,GAAGvB,OAAO,CAAC,MAAMG,aAAa,EAAE,EAAE,EAAE,CAAC;EACtD,MAAM;IAAEqB,MAAM;IAAEC;EAAS,CAAC,GAAGrB,QAAQ,EAAE;EAEvC,oBACE,oBAAC,iBAAiB,eACZiB,IAAI;IACR,YAAY,EAAGK,CAAC,IAAK;MACnBD,QAAQ,CAACP,YAAY,CAACQ,CAAC,CAAC;MACxBR,YAAY,CAACQ,CAAC,CAAC;IACjB,CAAE;IACF,WAAW,EAAGA,CAAC,IAAK;MAClBD,QAAQ,CAACN,WAAW,CAACO,CAAC,CAAC;MACvBP,WAAW,CAACO,CAAC,CAAC;IAChB,CAAE;IACF,UAAU,EAAGA,CAAC,IAAK;MACjBD,QAAQ,CAACL,UAAU,CAACM,CAAC,CAAC;MACtBN,UAAU,CAACM,CAAC,CAAC;IACf,CAAE;IACF,GAAG,EAAEJ;EAAI,iBAET,oBAAC,eAAe;IACd,KAAK,EAAET,KAAM;IACb,WAAW,EAAEC,WAAY;IACzB,IAAI,EAAEC,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEC,OAAQ;IACjB,QAAQ,EAAEM,WAAY;IACtB,MAAM,EAAEC;EAAO,EACf,CACgB;AAExB,CAAC,CACF;AAEDZ,QAAQ,CAACe,WAAW,GAAG,UAAU;AAEjC,eAAef,QAAQ"}

package/dist/esm/ListItemLink/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';
@@ -8,7 +7,6 @@ import { resetFocusStyles } from '@os-design/styles';
 import { css } from '@emotion/react';
 import { ListItemContainer } from '../ListItem';
 import ListItemContent from '../ListItem/ListItemContent';
-
 const actionsBgStyles = p => !p.touchDevice && css`
     & > nav {
       background: linear-gradient(
@@ -19,7 +17,6 @@ const actionsBgStyles = p => !p.touchDevice && css`
       );
     }
   `;
-
 const StyledLink = styled(ListItemContainer.withComponent('a'), omitEmotionProps('touchDevice', 'as'))`
   ${resetFocusStyles};
   cursor: pointer;
@@ -34,10 +31,10 @@ const StyledLink = styled(ListItemContainer.withComponent('a'), omitEmotionProps
 
   ${actionsBgStyles};
 `;
+
 /**
  * The list item with a link.
  */
-
 const ListItemLink = /*#__PURE__*/forwardRef(({
   title,
   description,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","ref","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":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,EAA0CC,QAA1C,QAA0D,kBAA1D;AACA,SAASC,GAAT,QAA2B,oBAA3B;AACA,SAASC,gBAAT,QAAiC,mBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,iBAAT,QAAkC,aAAlC;AACA,OAAOC,eAAP,MAEO,6BAFP;;AAWA,MAAMC,eAAe,GAAIC,CAAD,IACtB,CAACA,CAAC,CAACC,WAAH,IACAL,GAAI;AACN;AACA;AACA;AACA,UAAUF,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACE,KAAF,CAAQC,oBAAR,CAA6BC,KAA7B,CAAmC,CAAnC,EAAsC,CAAtC,CAAJ,EAA8C,CAA9C,CAAD,CAA4D;AACzE,UAAUV,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,oBAAT,CAA+B;AAC5C,YAAYH,CAAC,CAACE,KAAF,CAAQG,0BAA2B;AAC/C;AACA;AACA,GAXA;;AAgBA,MAAMC,UAAU,GAAGhB,MAAM,CACvBO,iBAAiB,CAACU,aAAlB,CAAgC,GAAhC,CADuB,EAEvBf,gBAAgB,CAAC,aAAD,EAAgB,IAAhB,CAFO,CAGN;AACnB,IAAIG,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,0BAA2BK,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,oBAAT,CAA+B;AACnE;AACA;AACA;AACA,IAAIJ,eAAgB;AACpB,CAhBA;AAkBA;AACA;AACA;;AACA,MAAMS,YAAY,gBAAGpB,UAAU,CAC7B,CACE;EACEqB,KADF;EAEEC,WAFF;EAGEC,IAHF;EAIEC,KAJF;EAKEC,OAAO,GAAG,EALZ;EAMEC,EANF;EAOEC,WAAW,GAAG,MAAM,CAAE,CAPxB;EAQEC,YAAY,GAAG,MAAM,CAAE,CARzB;EASEC,WAAW,GAAG,MAAM,CAAE,CATxB;EAUEC,UAAU,GAAG,MAAM,CAAE,CAVvB;EAWE,GAAGC;AAXL,CADF,EAcEC,GAdF,KAeK;EACH,MAAMnB,WAAW,GAAGZ,OAAO,CAAC,MAAME,aAAa,EAApB,EAAwB,EAAxB,CAA3B;EACA,MAAM;IAAE8B,MAAF;IAAUC;EAAV,IAAuB7B,QAAQ,EAArC;EAEA,oBACE,oBAAC,UAAD;IACE,WAAW,EAAEQ,WADf;IAEE,EAAE,EAAEa;EAFN,GAGMK,IAHN;IAIE,WAAW,EAAGI,CAAD,IAAO;MAClBR,WAAW,CAACQ,CAAD,CAAX;MACAA,CAAC,CAACC,cAAF;IACD,CAPH;IAQE,YAAY,EAAGD,CAAD,IAAO;MACnBD,QAAQ,CAACN,YAAT,CAAsBO,CAAtB;MACAP,YAAY,CAACO,CAAD,CAAZ;IACD,CAXH;IAYE,WAAW,EAAGA,CAAD,IAAO;MAClBD,QAAQ,CAACL,WAAT,CAAqBM,CAArB;MACAN,WAAW,CAACM,CAAD,CAAX;IACD,CAfH;IAgBE,UAAU,EAAGA,CAAD,IAAO;MACjBD,QAAQ,CAACJ,UAAT,CAAoBK,CAApB;MACAL,UAAU,CAACK,CAAD,CAAV;IACD,CAnBH;IAoBE,GAAG,EAAEH;EApBP,iBAsBE,oBAAC,eAAD;IACE,KAAK,EAAEX,KADT;IAEE,WAAW,EAAEC,WAFf;IAGE,IAAI,EAAEC,IAHR;IAIE,KAAK,EAAEC,KAJT;IAKE,OAAO,EAAEC,OALX;IAME,QAAQ,EAAEZ,WANZ;IAOE,MAAM,EAAEoB;EAPV,EAtBF,CADF;AAkCD,CAtD4B,CAA/B;AAyDAb,YAAY,CAACiB,WAAb,GAA2B,cAA3B;AAEA,eAAejB,YAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","ref","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/esm/ListSkeleton/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback } from 'react';
 import styled from '@emotion/styled';
 import { horizontalPaddingStyles } from '@os-design/styles';
@@ -28,10 +27,10 @@ const DescriptionSkeleton = styled(Skeleton)`
   height: ${p => p.theme.sizes.small}em;
   margin-top: 0.3em;
 `;
+
 /**
  * Provides a list placeholder while a user waits for the content to load.
  */
-
 const ListSkeleton = /*#__PURE__*/forwardRef(({
   hasDescription = false,
   titleWidth = '30%',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","styled","horizontalPaddingStyles","clr","Skeleton","List","LeftAddon","RightAddon","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","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,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,WAA5B,QAA+C,OAA/C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AAEA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,IAAP,MAAgC,SAAhC;AAEA,SAASC,SAAT,EAAoBC,UAApB,QAAsC,6BAAtC;AA2BA,MAAMC,QAAQ,GAAGP,MAAM,CAACQ,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAD,IAAOP,GAAG,CAACO,CAAC,CAACC,KAAF,CAAQC,mBAAT,CAA8B;AACvE;AACA;AACA,IAAIV,uBAAuB,EAAG;AAC9B,CAbA;AAeA,MAAMW,OAAO,GAAGZ,MAAM,CAACQ,GAAI;AAC3B;AACA,CAFA;AAIA,MAAMK,mBAAmB,GAAGb,MAAM,CAACG,QAAD,CAAW;AAC7C,YAAaM,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,KAAR,CAAcC,KAAM;AACvC;AACA,CAHA;AAKA;AACA;AACA;;AACA,MAAMC,YAAY,gBAAGlB,UAAU,CAC7B,CACE;EACEmB,cAAc,GAAG,KADnB;EAEEC,UAAU,GAAG,KAFf;EAGEC,gBAAgB,GAAG,KAHrB;EAIEC,SAAS,GAAG,EAJd;EAKEC,IALF;EAMEC,KANF;EAOE,GAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;EACH,MAAMC,YAAY,GAAG1B,WAAW,CAC9B,CAAC;IAAE2B;EAAF,CAAD,kBACE,oBAAC,QAAD;IAAU,KAAK,EAAEA;EAAjB,GACGL,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAGE,oBAAC,OAAD,qBACE,oBAAC,QAAD;IAAU,KAAK,EAAEH;EAAjB,EADF,EAEGD,cAAc,iBAAI,oBAAC,mBAAD;IAAqB,KAAK,EAAEE;EAA5B,EAFrB,CAHF,EAQGG,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CARZ,CAF4B,EAa9B,CAACH,gBAAD,EAAmBF,cAAnB,EAAmCI,IAAnC,EAAyCC,KAAzC,EAAgDJ,UAAhD,CAb8B,CAAhC;EAgBA,oBACE,oBAAC,IAAD;IACE,SAAS,EAAEE,SADb;IAEE,YAAY,EAAEK;EAFhB,GAGMF,IAHN;IAIE,GAAG,EAAEC;EAJP,GADF;AAQD,CArC4B,CAA/B;AAwCAR,YAAY,CAACW,WAAb,GAA2B,cAA3B;AAEA,eAAeX,YAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","styled","horizontalPaddingStyles","clr","Skeleton","List","LeftAddon","RightAddon","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","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,OAAOA,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,IAAI,MAAqB,SAAS;AAEzC,SAASC,SAAS,EAAEC,UAAU,QAAQ,6BAA6B;AA2BnE,MAAMC,QAAQ,GAAGP,MAAM,CAACQ,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIV,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMW,OAAO,GAAGZ,MAAM,CAACQ,GAAI;AAC3B;AACA,CAAC;AAED,MAAMK,mBAAmB,GAAGb,MAAM,CAACG,QAAQ,CAAE;AAC7C,YAAaM,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGlB,UAAU,CAC7B,CACE;EACEmB,cAAc,GAAG,KAAK;EACtBC,UAAU,GAAG,KAAK;EAClBC,gBAAgB,GAAG,KAAK;EACxBC,SAAS,GAAG,EAAE;EACdC,IAAI;EACJC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,YAAY,GAAG1B,WAAW,CAC9B,CAAC;IAAE2B;EAAM,CAAC,kBACR,oBAAC,QAAQ;IAAC,KAAK,EAAEA;EAAM,GACpBL,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,QAAQ;IAAC,KAAK,EAAEH;EAAW,EAAG,EAC9BD,cAAc,iBAAI,oBAAC,mBAAmB;IAAC,KAAK,EAAEE;EAAiB,EAAG,CAC3D,EAETG,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAAC,CAC5D;EAED,oBACE,oBAAC,IAAI;IACH,SAAS,EAAEE,SAAU;IACrB,YAAY,EAAEK;EAAa,GACvBF,IAAI;IACR,GAAG,EAAEC;EAAI,GACT;AAEN,CAAC,CACF;AAEDR,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY"}

package/dist/esm/LogoLink/index.js

@@ -1,18 +1,15 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef } from 'react';
 import { css } from '@emotion/react';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
 import { useTheme } from '@os-design/theming';
-
 const darkStyles = p => p.dark && css`
     img {
       filter: brightness(0) invert(1); // Make the logo white
     }
   `;
-
 const StyledLogoLink = styled('a', omitEmotionProps('dark', 'size', 'as'))`
   ${resetFocusStyles};
   cursor: pointer;
@@ -37,10 +34,10 @@ const StyledLogoLink = styled('a', omitEmotionProps('dark', 'size', 'as'))`
   ${sizeStyles};
   ${transitionStyles('opacity')};
 `;
+
 /**
  * Logo with a link.
  */
-
 const LogoLink = /*#__PURE__*/forwardRef(({
   src,
   as,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","css","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useTheme","darkStyles","p","dark","StyledLogoLink","LogoLink","src","as","onMouseDown","rest","ref","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,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SACEC,gBADF,EAEEC,UAFF,EAGEC,gBAHF,QAKO,mBALP;AAMA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,QAAT,QAAyB,oBAAzB;;AAeA,MAAMC,UAAU,GAAIC,CAAD,IACjBA,CAAC,CAACC,IAAF,IACAR,GAAI;AACN;AACA;AACA;AACA,GANA;;AAWA,MAAMS,cAAc,GAAGZ,MAAM,CAC3B,GAD2B,EAE3BO,gBAAgB,CAAC,MAAD,EAAS,MAAT,EAAiB,IAAjB,CAFW,CAGN;AACvB,IAAIH,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,UAAW;AACf,IAAIJ,UAAW;AACf,IAAIC,gBAAgB,CAAC,SAAD,CAAY;AAChC,CA1BA;AA4BA;AACA;AACA;;AACA,MAAMO,QAAQ,gBAAGX,UAAU,CACzB,CAAC;EAAEY,GAAF;EAAOC,EAAP;EAAWC,WAAW,GAAG,MAAM,CAAE,CAAjC;EAAmC,GAAGC;AAAtC,CAAD,EAA+CC,GAA/C,KAAuD;EACrD,MAAM;IAAEC;EAAF,IAAkBX,QAAQ,EAAhC;EACA,MAAMY,SAAS,GAAGH,IAAI,CAAC,YAAD,CAAJ,IAAsB,MAAxC;EAEA,oBACE,oBAAC,cAAD;IACE,IAAI,EAAEE,WAAW,KAAK,MADxB;IAEE,cAAYC,SAFd;IAGE,EAAE,EAAEL,EAHN;IAIE,WAAW,EAAGM,CAAD,IAAO;MAClBL,WAAW,CAACK,CAAD,CAAX;MACAA,CAAC,CAACC,cAAF;IACD;EAPH,GAQML,IARN;IASE,GAAG,EAAEC;EATP,iBAWE;IAAK,GAAG,EAAEJ,GAAV;IAAe,GAAG,EAAEM;EAApB,EAXF,CADF;AAeD,CApBwB,CAA3B;AAuBAP,QAAQ,CAACU,WAAT,GAAuB,UAAvB;AAEA,eAAeV,QAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","css","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useTheme","darkStyles","p","dark","StyledLogoLink","LogoLink","src","as","onMouseDown","rest","ref","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,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAQ,oBAAoB;AAe7C,MAAMC,UAAU,GAAIC,CAAC,IACnBA,CAAC,CAACC,IAAI,IACNR,GAAI;AACN;AACA;AACA;AACA,GAAG;AAKH,MAAMS,cAAc,GAAGZ,MAAM,CAC3B,GAAG,EACHO,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CACjB;AACvB,IAAIH,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIK,UAAW;AACf,IAAIJ,UAAW;AACf,IAAIC,gBAAgB,CAAC,SAAS,CAAE;AAChC,CAAC;;AAED;AACA;AACA;AACA,MAAMO,QAAQ,gBAAGX,UAAU,CACzB,CAAC;EAAEY,GAAG;EAAEC,EAAE;EAAEC,WAAW,GAAG,MAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACrD,MAAM;IAAEC;EAAY,CAAC,GAAGX,QAAQ,EAAE;EAClC,MAAMY,SAAS,GAAGH,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;EAE9C,oBACE,oBAAC,cAAc;IACb,IAAI,EAAEE,WAAW,KAAK,MAAO;IAC7B,cAAYC,SAAU;IACtB,EAAE,EAAEL,EAAG;IACP,WAAW,EAAGM,CAAC,IAAK;MAClBL,WAAW,CAACK,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,EAAE;IACpB;EAAE,GACEL,IAAI;IACR,GAAG,EAAEC;EAAI,iBAET;IAAK,GAAG,EAAEJ,GAAI;IAAC,GAAG,EAAEM;EAAU,EAAG,CAClB;AAErB,CAAC,CACF;AAEDP,QAAQ,CAACU,WAAW,GAAG,UAAU;AAEjC,eAAeV,QAAQ"}

package/dist/esm/Menu/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useBrowserLayoutEffect, useForwardedRef, useKeyPress } from '@os-design/utils';
@@ -20,10 +19,10 @@ const StyledModal = styled(Modal)`
   padding-left: 0;
   padding-right: 0;
 `;
+
 /**
  * The dropdown menu.
  */
-
 const Menu = /*#__PURE__*/forwardRef(({
   closeOnSelect = true,
   modalTitle,
@@ -41,8 +40,9 @@ const Menu = /*#__PURE__*/forwardRef(({
   useFocusWithArrows(containerRef);
   useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
   const isMinXs = useIsMinWidth('xs');
-  const menuId = useMemo(() => id || `menu-${Math.random().toString(36).slice(2, 11)}`, [id]); // Replace the aria-haspopup attribute from true to menu
+  const menuId = useMemo(() => id || `menu-${Math.random().toString(36).slice(2, 11)}`, [id]);
 
+  // Replace the aria-haspopup attribute from true to menu
   useBrowserLayoutEffect(() => {
     if (!trigger) return;
     const {