@os-design/core 1.0.195 → 1.0.197

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","LayoutContext","Layout","hasNavigation","hasPageHeader","children","contextValue","displayName"],"sources":["../../../src/Layout/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n  /**\n   * Whether there is the navigation in the layout.\n   * @default false\n   */\n  hasNavigation?: boolean;\n  /**\n   * Whether there is the page header in the layout.\n   * @default false\n   */\n  hasPageHeader?: boolean;\n  /**\n   * The children.\n   * @default undefined\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n  hasNavigation = false,\n  hasPageHeader = false,\n  children,\n}) => {\n  const contextValue = useMemo(\n    () => ({ hasNavigation, hasPageHeader }),\n    [hasNavigation, hasPageHeader]\n  );\n\n  return (\n    <LayoutContext.Provider value={contextValue}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,aAAa,MAAM,iBAAiB;AAoB3C;AACA;AACA;AACA,MAAMC,MAA6B,GAAG,CAAC;EACrCC,aAAa,GAAG,KAAK;EACrBC,aAAa,GAAG,KAAK;EACrBC;AACF,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAGN,OAAO,CAC1B,OAAO;IAAEG,aAAa;IAAEC;EAAc,CAAC,CAAC,EACxC,CAACD,aAAa,EAAEC,aAAa,CAAC,CAC/B;EAED,oBACE,oBAAC,aAAa,CAAC,QAAQ;IAAC,KAAK,EAAEE;EAAa,GACzCD,QAAQ,CACc;AAE7B,CAAC;AAEDH,MAAM,CAACK,WAAW,GAAG,QAAQ;AAE7B,eAAeL,MAAM"}
+{"version":3,"file":"index.js","names":["React","useMemo","LayoutContext","Layout","hasNavigation","hasPageHeader","children","contextValue","createElement","Provider","value","displayName"],"sources":["../../../src/Layout/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport LayoutContext from './LayoutContext';\n\nexport interface LayoutProps {\n  /**\n   * Whether there is the navigation in the layout.\n   * @default false\n   */\n  hasNavigation?: boolean;\n  /**\n   * Whether there is the page header in the layout.\n   * @default false\n   */\n  hasPageHeader?: boolean;\n  /**\n   * The children.\n   * @default undefined\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The layout of the page.\n */\nconst Layout: React.FC<LayoutProps> = ({\n  hasNavigation = false,\n  hasPageHeader = false,\n  children,\n}) => {\n  const contextValue = useMemo(\n    () => ({ hasNavigation, hasPageHeader }),\n    [hasNavigation, hasPageHeader]\n  );\n\n  return (\n    <LayoutContext.Provider value={contextValue}>\n      {children}\n    </LayoutContext.Provider>\n  );\n};\n\nLayout.displayName = 'Layout';\n\nexport default Layout;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,aAAa,MAAM,iBAAiB;AAoB3C;AACA;AACA;AACA,MAAMC,MAA6B,GAAGA,CAAC;EACrCC,aAAa,GAAG,KAAK;EACrBC,aAAa,GAAG,KAAK;EACrBC;AACF,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAGN,OAAO,CAC1B,OAAO;IAAEG,aAAa;IAAEC;EAAc,CAAC,CAAC,EACxC,CAACD,aAAa,EAAEC,aAAa,CAC/B,CAAC;EAED,oBACEL,KAAA,CAAAQ,aAAA,CAACN,aAAa,CAACO,QAAQ;IAACC,KAAK,EAAEH;EAAa,GACzCD,QACqB,CAAC;AAE7B,CAAC;AAEDH,MAAM,CAACQ,WAAW,GAAG,QAAQ;AAE7B,eAAeR,MAAM"}

package/dist/esm/Link/index.js

@@ -1,10 +1,10 @@
 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 styled from '@emotion/styled';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
 import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
 /**
  * Sets base underline styles.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","css","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","underlineBaseStyles","p","theme","linkColor","underlineHoverStyles","underline","underlineAlwaysStyles","StyledLink","Link","as","onMouseDown","rest","ref","e","preventDefault","displayName"],"sources":["../../../src/Link/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 { clr } from '@os-design/theming';\n\nexport interface ReactRouterLinkProps {\n  to?: string;\n  replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n  /**\n   * Type of the underline styles.\n   * @default hover\n   */\n  underline?: 'hover' | 'always' | 'never';\n  /**\n   * The custom link component.\n   * For example, the Link from react-router-dom.\n   * @default undefined\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Sets base underline styles.\n */\nconst underlineBaseStyles = (p) => css`\n  position: relative;\n  display: inline-block;\n  padding-bottom: 0.1em;\n\n  &::after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 0.125em;\n    background-color: ${clr(p.theme.linkColor)};\n  }\n`;\n\n/**\n * Sets underline styles on hover.\n */\nconst underlineHoverStyles = (p) =>\n  p.underline === 'hover' &&\n  css`\n    @media (hover: hover) {\n      ${underlineBaseStyles(p)};\n\n      &::after {\n        width: 0;\n        opacity: 0;\n        ${transitionStyles('width', 'opacity')(p)};\n      }\n\n      &:hover::after,\n      &:focus::after {\n        width: 100%;\n        opacity: 1;\n      }\n    }\n  `;\n\n/**\n * Sets underline styles always.\n */\nconst underlineAlwaysStyles = (p) =>\n  p.underline === 'always' &&\n  css`\n    ${underlineBaseStyles(p)};\n\n    &::after {\n      width: 100%;\n      opacity: 1;\n    }\n  `;\n\nconst StyledLink = styled(\n  'a',\n  omitEmotionProps('size', 'underline', 'as')\n)<LinkProps>`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1.2;\n\n  &,\n  &:active,\n  &:focus {\n    color: ${(p) => clr(p.theme.linkColor)};\n  }\n\n  ${underlineHoverStyles};\n  ${underlineAlwaysStyles};\n  ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ underline = 'hover', as, onMouseDown = () => {}, ...rest }, ref) => (\n    <StyledLink\n      underline={underline}\n      as={as}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\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,GAAG,QAAQ,oBAAoB;AAsBxC;AACA;AACA;AACA,MAAMC,mBAAmB,GAAIC,CAAC,IAAKP,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,GAAG,CAACE,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC/C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,oBAAoB,GAAIH,CAAC,IAC7BA,CAAC,CAACI,SAAS,KAAK,OAAO,IACvBX,GAAI;AACN;AACA,QAAQM,mBAAmB,CAACC,CAAC,CAAE;AAC/B;AACA;AACA;AACA;AACA,UAAUJ,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAACI,CAAC,CAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA,MAAMK,qBAAqB,GAAIL,CAAC,IAC9BA,CAAC,CAACI,SAAS,KAAK,QAAQ,IACxBX,GAAI;AACN,MAAMM,mBAAmB,CAACC,CAAC,CAAE;AAC7B;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMM,UAAU,GAAGhB,MAAM,CACvB,GAAG,EACHO,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAChC;AACb,IAAIH,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcM,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC3C;AACA;AACA,IAAIC,oBAAqB;AACzB,IAAIE,qBAAsB;AAC1B,IAAIV,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMY,IAAI,gBAAGf,UAAU,CACrB,CAAC;EAAEY,SAAS,GAAG,OAAO;EAAEI,EAAE;EAAEC,WAAW,GAAG,MAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChE,oBAAC,UAAU;EACT,SAAS,EAAEP,SAAU;EACrB,EAAE,EAAEI,EAAG;EACP,WAAW,EAAGI,CAAC,IAAK;IAClBH,WAAW,CAACG,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,EAAE;EACpB;AAAE,GACEH,IAAI;EACR,GAAG,EAAEC;AAAI,GAEZ,CACF;AAEDJ,IAAI,CAACO,WAAW,GAAG,MAAM;AAEzB,eAAeP,IAAI"}
+{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","underlineBaseStyles","p","theme","linkColor","underlineHoverStyles","underline","underlineAlwaysStyles","StyledLink","Link","as","onMouseDown","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n  to?: string;\n  replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n  /**\n   * Type of the underline styles.\n   * @default hover\n   */\n  underline?: 'hover' | 'always' | 'never';\n  /**\n   * The custom link component.\n   * For example, the Link from react-router-dom.\n   * @default undefined\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Sets base underline styles.\n */\nconst underlineBaseStyles = (p) => css`\n  position: relative;\n  display: inline-block;\n  padding-bottom: 0.1em;\n\n  &::after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 0.125em;\n    background-color: ${clr(p.theme.linkColor)};\n  }\n`;\n\n/**\n * Sets underline styles on hover.\n */\nconst underlineHoverStyles = (p) =>\n  p.underline === 'hover' &&\n  css`\n    @media (hover: hover) {\n      ${underlineBaseStyles(p)};\n\n      &::after {\n        width: 0;\n        opacity: 0;\n        ${transitionStyles('width', 'opacity')(p)};\n      }\n\n      &:hover::after,\n      &:focus::after {\n        width: 100%;\n        opacity: 1;\n      }\n    }\n  `;\n\n/**\n * Sets underline styles always.\n */\nconst underlineAlwaysStyles = (p) =>\n  p.underline === 'always' &&\n  css`\n    ${underlineBaseStyles(p)};\n\n    &::after {\n      width: 100%;\n      opacity: 1;\n    }\n  `;\n\nconst StyledLink = styled(\n  'a',\n  omitEmotionProps('size', 'underline', 'as')\n)<LinkProps>`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1.2;\n\n  &,\n  &:active,\n  &:focus {\n    color: ${(p) => clr(p.theme.linkColor)};\n  }\n\n  ${underlineHoverStyles};\n  ${underlineAlwaysStyles};\n  ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ underline = 'hover', as, onMouseDown = () => {}, ...rest }, ref) => (\n    <StyledLink\n      underline={underline}\n      as={as}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAsBzC;AACA;AACA;AACA,MAAMC,mBAAmB,GAAIC,CAAC,IAAKV,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC/C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,oBAAoB,GAAIH,CAAC,IAC7BA,CAAC,CAACI,SAAS,KAAK,OAAO,IACvBd,GAAI;AACN;AACA,QAAQS,mBAAmB,CAACC,CAAC,CAAE;AAC/B;AACA;AACA;AACA;AACA,UAAUN,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAACM,CAAC,CAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA,MAAMK,qBAAqB,GAAIL,CAAC,IAC9BA,CAAC,CAACI,SAAS,KAAK,QAAQ,IACxBd,GAAI;AACN,MAAMS,mBAAmB,CAACC,CAAC,CAAE;AAC7B;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMM,UAAU,GAAGf,MAAM,CACvB,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAC5C,CAAa;AACb,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcQ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC3C;AACA;AACA,IAAIC,oBAAqB;AACzB,IAAIE,qBAAsB;AAC1B,IAAIZ,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMc,IAAI,gBAAGT,UAAU,CACrB,CAAC;EAAEM,SAAS,GAAG,OAAO;EAAEI,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChEd,KAAA,CAAAe,aAAA,CAACN,UAAU,EAAAO,QAAA;EACTT,SAAS,EAAEA,SAAU;EACrBI,EAAE,EAAEA,EAAG;EACPC,WAAW,EAAGK,CAAC,IAAK;IAClBL,WAAW,CAACK,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,CAAC,CAAC;EACpB;AAAE,GACEL,IAAI;EACRC,GAAG,EAAEA;AAAI,EACV,CAEL,CAAC;AAEDJ,IAAI,CAACS,WAAW,GAAG,MAAM;AAEzB,eAAeT,IAAI"}

package/dist/esm/LinkButton/index.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { omitEmotionProps } from '@os-design/utils';
-import { css } from '@emotion/react';
+import React, { forwardRef } from 'react';
 import { StyledButton } from '../Button';
-import useButtonColors from '../Button/utils/useButtonColors';
 import ButtonContent from '../Button/ButtonContent';
+import useButtonColors from '../Button/utils/useButtonColors';
 const disabledStyles = p => p.disabled && css`
     pointer-events: none;
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","omitEmotionProps","css","StyledButton","useButtonColors","ButtonContent","disabledStyles","p","disabled","StyledLinkButton","withComponent","LinkButton","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/LinkButton/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport ButtonContent from '../Button/ButtonContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type LinkButtonProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ButtonProps;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    pointer-events: none;\n  `;\n\nconst StyledLinkButton = styled(\n  StyledButton.withComponent('a'),\n  omitEmotionProps('as', 'disabled')\n)`\n  text-decoration: none;\n  display: inline-flex;\n  ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as the a tag.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      as,\n      onMouseDown = () => {},\n      onKeyDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledLinkButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown(e);\n          if (disabled || loading) e.preventDefault();\n        }}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledLinkButton>\n    );\n  }\n);\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,eAAe,MAAM,iCAAiC;AAC7D,OAAOC,aAAa,MAAM,yBAAyB;AASnD,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVN,GAAI;AACN;AACA,GAAG;AAEH,MAAMO,gBAAgB,GAAGT,MAAM,CAC7BG,YAAY,CAACO,aAAa,CAAC,GAAG,CAAC,EAC/BT,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAClC;AACF;AACA;AACA,IAAIK,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGZ,UAAU,CAC3B,CACE;EACEa,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAG,MAAM,CAAC,CAAC;EACtBC,SAAS,GAAG,MAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGtB,eAAe,CAAC;IACtDQ,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,oBACE,oBAAC,gBAAgB;IACf,OAAO,EAAEI,IAAK;IACd,MAAM,EAAEa,YAAa;IACrB,IAAI,EAAET,IAAK;IACX,OAAO,EAAEC,OAAQ;IACjB,QAAQ,EAAET,QAAQ,IAAIS,OAAQ;IAC9B,IAAI,EAAEC,IAAK;IACX,EAAE,EAAEC,EAAG;IACP,WAAW,EAAGQ,CAAC,IAAK;MAClBP,WAAW,CAACO,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,EAAE;IACpB,CAAE;IACF,SAAS,EAAGD,CAAC,IAAK;MAChBN,SAAS,CAACM,CAAC,CAAC;MACZ,IAAInB,QAAQ,IAAIS,OAAO,EAAEU,CAAC,CAACC,cAAc,EAAE;IAC7C,CAAE;IACF,iBAAepB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACR,GAAG,EAAEC;EAAI,iBAET,oBAAC,aAAa;IACZ,IAAI,EAAEV,IAAK;IACX,KAAK,EAAEC,KAAM;IACb,OAAO,EAAEE,OAAQ;IACjB,aAAa,EAAES;EAAc,GAE5BJ,QAAQ,CACK,CACC;AAEvB,CAAC,CACF;AAEDX,UAAU,CAACkB,WAAW,GAAG,YAAY;AAErC,eAAelB,UAAU"}
+{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","disabledStyles","p","disabled","StyledLinkButton","withComponent","LinkButton","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/LinkButton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\n\nimport useButtonColors from '../Button/utils/useButtonColors';\n\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type LinkButtonProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ButtonProps;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    pointer-events: none;\n  `;\n\nconst StyledLinkButton = styled(\n  StyledButton.withComponent('a'),\n  omitEmotionProps('as', 'disabled')\n)`\n  text-decoration: none;\n  display: inline-flex;\n  ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as the a tag.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      as,\n      onMouseDown = () => {},\n      onKeyDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledLinkButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown(e);\n          if (disabled || loading) e.preventDefault();\n        }}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledLinkButton>\n    );\n  }\n);\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AAEnD,OAAOC,eAAe,MAAM,iCAAiC;AAU7D,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN;AACA,GAAG;AAEH,MAAMW,gBAAgB,GAAGV,MAAM,CAC7BI,YAAY,CAACO,aAAa,CAAC,GAAG,CAAC,EAC/BV,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIM,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGT,UAAU,CAC3B,CACE;EACEU,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACtDO,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,oBACEP,KAAA,CAAA0B,aAAA,CAAClB,gBAAgB,EAAAmB,QAAA;IACfC,OAAO,EAAEjB,IAAK;IACdkB,MAAM,EAAEL,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGW,CAAC,IAAK;MAClBX,WAAW,CAACW,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFX,SAAS,EAAGU,CAAC,IAAK;MAChBV,SAAS,CAACU,CAAC,CAAC;MACZ,IAAIvB,QAAQ,IAAIS,OAAO,EAAEc,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAexB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETvB,KAAA,CAAA0B,aAAA,CAACvB,aAAa;IACZU,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CAAC;AAEvB,CACF,CAAC;AAEDX,UAAU,CAACsB,WAAW,GAAG,YAAY;AAErC,eAAetB,UAAU"}

package/dist/esm/List/WindowScroller.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react';
 import { useEvent } from '@os-design/utils';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { disableBodyPointerEvents, enableBodyPointerEventsAfterDelay } from './utils/bodyPointerEvents';
 /**
  * Specifies the number of milliseconds during which to disable pointer events while

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

@@ -1 +1 @@
-{"version":3,"file":"WindowScroller.js","names":["React","useCallback","useEffect","useRef","useEvent","disableBodyPointerEvents","enableBodyPointerEventsAfterDelay","DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document"],"sources":["../../../src/List/WindowScroller.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { useEvent } from '@os-design/utils';\nimport {\n  disableBodyPointerEvents,\n  enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n  top: number;\n  left: number;\n}\n\ninterface WindowScrollerProps {\n  onScroll?: (props: ScrollPosition) => void;\n  children?: React.ReactNode;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n  onScroll = () => {},\n  children,\n}) => {\n  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  }, [onScroll]);\n\n  const scrollListener = useCallback(() => {\n    disableBodyPointerEvents();\n    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n    if (!onScrollRef.current) return;\n    onScrollRef.current({\n      top: window.pageYOffset,\n      left: window.pageXOffset,\n    });\n  }, []);\n\n  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n  useEvent(document, 'scroll', scrollListener);\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC7D,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SACEC,wBAAwB,EACxBC,iCAAiC,QAC5B,2BAA2B;AAYlC;AACA;AACA;AACA;AACA,OAAO,MAAMC,mCAAmC,GAAG,GAAG;AAEtD,MAAMC,cAA6C,GAAG,CAAC;EACrDC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnBC;AACF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGR,MAAM,EAAmC;EAE7DD,SAAS,CAAC,MAAM;IACdS,WAAW,CAACC,OAAO,GAAGH,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMI,cAAc,GAAGZ,WAAW,CAAC,MAAM;IACvCI,wBAAwB,EAAE;IAC1BC,iCAAiC,CAACC,mCAAmC,CAAC;IACtE,IAAI,CAACI,WAAW,CAACC,OAAO,EAAE;IAC1BD,WAAW,CAACC,OAAO,CAAC;MAClBE,GAAG,EAAEC,MAAM,CAACC,WAAW;MACvBC,IAAI,EAAEF,MAAM,CAACG;IACf,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAENhB,SAAS,CAAC,MAAM,MAAMI,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAC/DF,QAAQ,CAACe,QAAQ,EAAE,QAAQ,EAAEN,cAAc,CAAC;;EAE5C;EACA,oBAAO,0CAAGH,QAAQ,CAAI;AACxB,CAAC;AAED,eAAeF,cAAc"}
+{"version":3,"file":"WindowScroller.js","names":["useEvent","React","useCallback","useEffect","useRef","disableBodyPointerEvents","enableBodyPointerEventsAfterDelay","DISABLE_BODY_POINTER_EVENTS_TIMEOUT","WindowScroller","onScroll","children","onScrollRef","current","scrollListener","top","window","pageYOffset","left","pageXOffset","document","createElement","Fragment"],"sources":["../../../src/List/WindowScroller.tsx"],"sourcesContent":["import { useEvent } from '@os-design/utils';\n\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport {\n  disableBodyPointerEvents,\n  enableBodyPointerEventsAfterDelay,\n} from './utils/bodyPointerEvents';\n\nexport interface ScrollPosition {\n  top: number;\n  left: number;\n}\n\ninterface WindowScrollerProps {\n  onScroll?: (props: ScrollPosition) => void;\n  children?: React.ReactNode;\n}\n\n/**\n * Specifies the number of milliseconds during which to disable pointer events while\n * a scroll is in progress. This improves performance and makes scrolling smoother.\n */\nexport const DISABLE_BODY_POINTER_EVENTS_TIMEOUT = 150;\n\nconst WindowScroller: React.FC<WindowScrollerProps> = ({\n  onScroll = () => {},\n  children,\n}) => {\n  const onScrollRef = useRef<WindowScrollerProps['onScroll']>();\n\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  }, [onScroll]);\n\n  const scrollListener = useCallback(() => {\n    disableBodyPointerEvents();\n    enableBodyPointerEventsAfterDelay(DISABLE_BODY_POINTER_EVENTS_TIMEOUT);\n    if (!onScrollRef.current) return;\n    onScrollRef.current({\n      top: window.pageYOffset,\n      left: window.pageXOffset,\n    });\n  }, []);\n\n  useEffect(() => () => enableBodyPointerEventsAfterDelay(0), []);\n  useEvent(document, 'scroll', scrollListener);\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nexport default WindowScroller;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,kBAAkB;AAE3C,OAAOC,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAE7D,SACEC,wBAAwB,EACxBC,iCAAiC,QAC5B,2BAA2B;AAYlC;AACA;AACA;AACA;AACA,OAAO,MAAMC,mCAAmC,GAAG,GAAG;AAEtD,MAAMC,cAA6C,GAAGA,CAAC;EACrDC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC;AACF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGP,MAAM,CAAkC,CAAC;EAE7DD,SAAS,CAAC,MAAM;IACdQ,WAAW,CAACC,OAAO,GAAGH,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMI,cAAc,GAAGX,WAAW,CAAC,MAAM;IACvCG,wBAAwB,CAAC,CAAC;IAC1BC,iCAAiC,CAACC,mCAAmC,CAAC;IACtE,IAAI,CAACI,WAAW,CAACC,OAAO,EAAE;IAC1BD,WAAW,CAACC,OAAO,CAAC;MAClBE,GAAG,EAAEC,MAAM,CAACC,WAAW;MACvBC,IAAI,EAAEF,MAAM,CAACG;IACf,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM,MAAMG,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAC/DN,QAAQ,CAACmB,QAAQ,EAAE,QAAQ,EAAEN,cAAc,CAAC;;EAE5C;EACA,oBAAOZ,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,QAAGX,QAAW,CAAC;AACxB,CAAC;AAED,eAAeF,cAAc"}

package/dist/esm/List/index.js

@@ -1,12 +1,12 @@
 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 { useIsMinWidth } from '@os-design/media';
+import { useTheme } from '@os-design/theming';
+import { useFontSize, useForwardedRef, useSafeAreaInset, useSize } from '@os-design/utils';
 import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import { FixedSizeList } from 'react-window';
-import { useFontSize, useForwardedRef, useSafeAreaInset, useSize } from '@os-design/utils';
-import { useTheme } from '@os-design/theming';
-import { useIsMinWidth } from '@os-design/media';
+import LayoutContext from '../Layout/LayoutContext';
 import WindowScroller from './WindowScroller';
 import useRWLoadNext from './utils/useRWLoadNext';
-import LayoutContext from '../Layout/LayoutContext';
 /**
  * Virtualized list.
  * Used the react-window library.

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":["useIsMinWidth","useTheme","useFontSize","useForwardedRef","useSafeAreaInset","useSize","React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","LayoutContext","WindowScroller","useRWLoadNext","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","createElement","_extends","parseFloat","listChildren","childrenStyle","childrenRest","toString","EmptyComponent","Fragment","renderList","width","onScroll","scrollOffset","undefined","innerElementType","displayName","default"],"sources":["../../../src/List/index.tsx"],"sourcesContent":["import { useIsMinWidth } from '@os-design/media';\nimport { useTheme } from '@os-design/theming';\nimport {\n  useFontSize,\n  useForwardedRef,\n  useSafeAreaInset,\n  useSize,\n} from '@os-design/utils';\n\nimport 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 LayoutContext from '../Layout/LayoutContext';\n\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\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.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,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"}
+{"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,GAAGA,CAAA,KAAY;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,GAAGA,CAAA,KAAY;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.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,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"}
+{"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,GAAGA,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,CAAC,CAAC;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.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,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"}
+{"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,CAAC,CAAC;EACd,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAED,eAAeV,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","rest","ref","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\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\nconst Container = styled(ListItemActions)`\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  ${horizontalPaddingStyles()};\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\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\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    </Container>\n  )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChD,oBAAC,SAAS,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,IAC3BH,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eAEtC,oBAAC,OAAO,qBACN,oBAAC,KAAK,QAAEF,KAAK,CAAS,EACrBC,WAAW,iBAAI,oBAAC,WAAW,QAAEA,WAAW,CAAe,CAChD,EAETE,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,CAE7C,CACF;AAEDJ,QAAQ,CAACO,WAAW,GAAG,UAAU;AAEjC,eAAeP,QAAQ"}
+{"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\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\nconst Container = styled(ListItemActions)`\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  ${horizontalPaddingStyles()};\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\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\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    </Container>\n  )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,CAAC,CAAE;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChDxB,KAAA,CAAAyB,aAAA,CAACtB,SAAS,EAAAuB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC3BH,IAAI,iBAAIrB,KAAA,CAAAyB,aAAA,CAACV,SAAS,QAAEM,IAAgB,CAAC,eAEtCrB,KAAA,CAAAyB,aAAA,CAAClB,OAAO,qBACNP,KAAA,CAAAyB,aAAA,CAAChB,KAAK,QAAEU,KAAa,CAAC,EACrBC,WAAW,iBAAIpB,KAAA,CAAAyB,aAAA,CAACd,WAAW,QAAES,WAAyB,CAChD,CAAC,EAETE,KAAK,iBAAItB,KAAA,CAAAyB,aAAA,CAACR,UAAU,QAAEK,KAAkB,CAChC,CAEf,CAAC;AAEDJ,QAAQ,CAACS,WAAW,GAAG,UAAU;AAEjC,eAAeT,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\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\nconst swipeableStyles = (p) =>\n  p.swipeable &&\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 extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\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  padding-right: ${(p) => p.paddingRight}px;\n\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  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","createElement","_extends","key","type","wide","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\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\nconst swipeableStyles = (p) =>\n  p.swipeable &&\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 extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\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  padding-right: ${(p) => p.paddingRight}px;\n\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  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBorder","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","rest","ref","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport ListItem, { ListItemProps } from '../ListItem';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ListItemProps;\n\nconst Link = styled.a`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      & > div {\n        background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n\n        & > nav {\n          background: linear-gradient(\n            to right,\n            ${(p) =>\n              clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n            ${(p) => clr(p.theme.listItemColorBgHover)}\n              ${(p) => p.theme.listItemActionsPaddingLeft}em\n          );\n        }\n      }\n    }\n  }\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  ({ title, description, left, right, actions, ...rest }, ref) => (\n    <Link {...rest} ref={ref}>\n      <ListItem\n        title={title}\n        description={description}\n        left={left}\n        right={right}\n        actions={actions}\n      />\n    </Link>\n  )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,GAAG,QAAe,oBAAoB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAQrD,MAAMC,IAAI,GAAGN,MAAM,CAACO,CAAE;AACtB,IAAIN,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA,+BAAgCO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BF,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACrE;AACA;AACA;AACA;AACA,cAAeH,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAW;AAC7E,cAAeJ,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACvD,gBAAiBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,0BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGV,UAAU,CAC7B,CAAC;EAAEW,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzD,oBAAC,IAAI,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACvB,oBAAC,QAAQ;EACP,KAAK,EAAEN,KAAM;EACb,WAAW,EAAEC,WAAY;EACzB,IAAI,EAAEC,IAAK;EACX,KAAK,EAAEC,KAAM;EACb,OAAO,EAAEC;AAAQ,EACjB,CAEL,CACF;AAEDL,YAAY,CAACQ,WAAW,GAAG,cAAc;AAEzC,eAAeR,YAAY"}
+{"version":3,"file":"index.js","names":["styled","resetFocusStyles","clr","React","forwardRef","ListItem","Link","a","p","theme","listItemColorBorder","listItemColorBgHover","slice","listItemActionsPaddingLeft","ListItemLink","title","description","left","right","actions","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/ListItemLink/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\nimport ListItem, { ListItemProps } from '../ListItem';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ListItemProps;\n\nconst Link = styled.a`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      & > div {\n        background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n\n        & > nav {\n          background: linear-gradient(\n            to right,\n            ${(p) =>\n              clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n            ${(p) => clr(p.theme.listItemColorBgHover)}\n              ${(p) => p.theme.listItemActionsPaddingLeft}em\n          );\n        }\n      }\n    }\n  }\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  ({ title, description, left, right, actions, ...rest }, ref) => (\n    <Link {...rest} ref={ref}>\n      <ListItem\n        title={title}\n        description={description}\n        left={left}\n        right={right}\n        actions={actions}\n      />\n    </Link>\n  )\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,GAAG,QAAe,oBAAoB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,QAAQ,MAAyB,aAAa;AAQrD,MAAMC,IAAI,GAAGN,MAAM,CAACO,CAAE;AACtB,IAAIN,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA,+BAAgCO,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BF,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACrE;AACA;AACA;AACA;AACA,cAAeH,CAAC,IACFN,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAU,CAAE;AAC7E,cAAeJ,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACC,KAAK,CAACE,oBAAoB,CAAE;AACvD,gBAAiBH,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,0BAA2B;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,YAAY,gBAAGV,UAAU,CAC7B,CAAC;EAAEW,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,OAAO;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzDlB,KAAA,CAAAmB,aAAA,CAAChB,IAAI,EAAAiB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACvBlB,KAAA,CAAAmB,aAAA,CAACjB,QAAQ;EACPU,KAAK,EAAEA,KAAM;EACbC,WAAW,EAAEA,WAAY;EACzBC,IAAI,EAAEA,IAAK;EACXC,KAAK,EAAEA,KAAM;EACbC,OAAO,EAAEA;AAAQ,CAClB,CACG,CAEV,CAAC;AAEDL,YAAY,CAACU,WAAW,GAAG,cAAc;AAEzC,eAAeV,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","horizontalPaddingStyles","clr","React","forwardRef","useCallback","List","Skeleton","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","LeftAddon","colorText","listItemAddonPaddingHorizontal","RightAddon","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","style","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef, useCallback } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\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\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\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,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,OAAOC,IAAI,MAAqB,SAAS;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AA2BlC,MAAMC,QAAQ,GAAGR,MAAM,CAACS,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIX,uBAAuB,EAAG;AAC9B,CAAC;AAED,MAAMY,OAAO,GAAGb,MAAM,CAACS,GAAI;AAC3B;AACA,CAAC;AAED,MAAMK,mBAAmB,GAAGd,MAAM,CAACO,QAAQ,CAAE;AAC7C,YAAaG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;AAED,MAAMC,SAAS,GAAGjB,MAAM,CAACS,GAAI;AAC7B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC,mBAAoBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGpB,MAAM,CAACS,GAAI;AAC9B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC;AACA,kBAAmBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,YAAY,gBAAGjB,UAAU,CAC7B,CACE;EACEkB,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,GAAGzB,WAAW,CAC9B,CAAC;IAAE0B;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"}
+{"version":3,"file":"index.js","names":["styled","horizontalPaddingStyles","clr","React","forwardRef","useCallback","List","Skeleton","ListItem","div","p","theme","listItemColorBorder","Content","DescriptionSkeleton","sizes","small","LeftAddon","colorText","listItemAddonPaddingHorizontal","RightAddon","ListSkeleton","hasDescription","titleWidth","descriptionWidth","itemCount","left","right","rest","ref","itemRenderer","style","createElement","width","_extends","displayName"],"sources":["../../../src/ListSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef, useCallback } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport List, { ListProps } from '../List';\nimport { ListItemProps } from '../ListItem';\nimport Skeleton from '../Skeleton';\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\nconst LeftAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin-left: auto;\n  padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\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,MAAM,MAAM,iBAAiB;AACpC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAEtD,OAAOC,IAAI,MAAqB,SAAS;AAEzC,OAAOC,QAAQ,MAAM,aAAa;AA2BlC,MAAMC,QAAQ,GAAGR,MAAM,CAACS,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIX,uBAAuB,CAAC,CAAE;AAC9B,CAAC;AAED,MAAMY,OAAO,GAAGb,MAAM,CAACS,GAAI;AAC3B;AACA,CAAC;AAED,MAAMK,mBAAmB,GAAGd,MAAM,CAACO,QAAQ,CAAE;AAC7C,YAAaG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,KAAK,CAACC,KAAM;AACvC;AACA,CAAC;AAED,MAAMC,SAAS,GAAGjB,MAAM,CAACS,GAAI;AAC7B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC,mBAAoBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGpB,MAAM,CAACS,GAAI;AAC9B,WAAYC,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACC,KAAK,CAACO,SAAS,CAAE;AACzC;AACA,kBAAmBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,YAAY,gBAAGjB,UAAU,CAC7B,CACE;EACEkB,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,GAAGzB,WAAW,CAC9B,CAAC;IAAE0B;EAAM,CAAC,kBACR5B,KAAA,CAAA6B,aAAA,CAACxB,QAAQ;IAACuB,KAAK,EAAEA;EAAM,GACpBL,IAAI,iBAAIvB,KAAA,CAAA6B,aAAA,CAACf,SAAS,QAAES,IAAgB,CAAC,eAEtCvB,KAAA,CAAA6B,aAAA,CAACnB,OAAO,qBACNV,KAAA,CAAA6B,aAAA,CAACzB,QAAQ;IAAC0B,KAAK,EAAEV;EAAW,CAAE,CAAC,EAC9BD,cAAc,iBAAInB,KAAA,CAAA6B,aAAA,CAAClB,mBAAmB;IAACmB,KAAK,EAAET;EAAiB,CAAE,CAC3D,CAAC,EAETG,KAAK,iBAAIxB,KAAA,CAAA6B,aAAA,CAACZ,UAAU,QAAEO,KAAkB,CACjC,CACX,EACD,CAACH,gBAAgB,EAAEF,cAAc,EAAEI,IAAI,EAAEC,KAAK,EAAEJ,UAAU,CAC5D,CAAC;EAED,oBACEpB,KAAA,CAAA6B,aAAA,CAAC1B,IAAI,EAAA4B,QAAA;IACHT,SAAS,EAAEA,SAAU;IACrBK,YAAY,EAAEA;EAAa,GACvBF,IAAI;IACRC,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN,CACF,CAAC;AAEDR,YAAY,CAACc,WAAW,GAAG,cAAc;AAEzC,eAAed,YAAY"}

package/dist/esm/LogoLink/index.js

@@ -1,10 +1,10 @@
 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 styled from '@emotion/styled';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
-import { omitEmotionProps } from '@os-design/utils';
 import { useTheme } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
 const darkStyles = p => p.dark && css`
     img {
       filter: brightness(0) invert(1); // Make the logo white

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,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"}
+{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","useTheme","omitEmotionProps","React","forwardRef","darkStyles","p","dark","StyledLogoLink","LogoLink","src","as","onMouseDown","rest","ref","activeTheme","ariaLabel","createElement","_extends","e","preventDefault","alt","displayName"],"sources":["../../../src/LogoLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAezC,MAAMC,UAAU,GAAIC,CAAC,IACnBA,CAAC,CAACC,IAAI,IACNX,GAAI;AACN;AACA;AACA;AACA,GAAG;AAKH,MAAMY,cAAc,GAAGX,MAAM,CAC3B,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CACvC,CAAuB;AACvB,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIO,UAAW;AACf,IAAIN,UAAW;AACf,IAAIC,gBAAgB,CAAC,SAAS,CAAE;AAChC,CAAC;;AAED;AACA;AACA;AACA,MAAMS,QAAQ,gBAAGL,UAAU,CACzB,CAAC;EAAEM,GAAG;EAAEC,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACrD,MAAM;IAAEC;EAAY,CAAC,GAAGd,QAAQ,CAAC,CAAC;EAClC,MAAMe,SAAS,GAAGH,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;EAE9C,oBACEV,KAAA,CAAAc,aAAA,CAACT,cAAc,EAAAU,QAAA;IACbX,IAAI,EAAEQ,WAAW,KAAK,MAAO;IAC7B,cAAYC,SAAU;IACtBL,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGO,CAAC,IAAK;MAClBP,WAAW,CAACO,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB;EAAE,GACEP,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETX,KAAA,CAAAc,aAAA;IAAKP,GAAG,EAAEA,GAAI;IAACW,GAAG,EAAEL;EAAU,CAAE,CAClB,CAAC;AAErB,CACF,CAAC;AAEDP,QAAQ,CAACa,WAAW,GAAG,UAAU;AAEjC,eAAeb,QAAQ"}

package/dist/esm/Menu/index.js

@@ -1,12 +1,12 @@
 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';
 import { useIsMinWidth } from '@os-design/media';
-import { enableScrollingStyles } from '@os-design/styles';
 import { MenuContext } from '@os-design/menu-utils';
-import Popover from '../Popover';
+import { enableScrollingStyles } from '@os-design/styles';
+import { useBrowserLayoutEffect, useForwardedRef, useKeyPress } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
 import Modal from '../Modal';
+import Popover from '../Popover';
 import useFocusWithArrows from './utils/useFocusWithArrows';
 const StyledPopover = styled(Popover)`
   padding: ${p => p.theme.menuPaddingVertical}em 0;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","useBrowserLayoutEffect","useForwardedRef","useKeyPress","useIsMinWidth","enableScrollingStyles","MenuContext","Popover","Modal","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport { useIsMinWidth } from '@os-design/media';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport { MenuContext } from '@os-design/menu-utils';\nimport Popover, { PopoverProps } from '../Popover';\nimport Modal from '../Modal';\nimport useFocusWithArrows from './utils/useFocusWithArrows';\n\nexport interface MenuProps extends PopoverProps {\n  /**\n   * Whether the menu closes when the user selects a menu item.\n   * @default true\n   */\n  closeOnSelect?: boolean;\n  /**\n   * The title of the modal.\n   * @default undefined\n   */\n  modalTitle?: string;\n}\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.menuPaddingVertical}em 0;\n  min-width: ${(p) => p.theme.menuMinWidth}em;\n  max-height: ${(p) => p.theme.menuMaxHeight}em;\n  overflow: hidden;\n  ${enableScrollingStyles('y')};\n`;\n\nconst StyledModal = styled(Modal)`\n  padding-left: 0;\n  padding-right: 0;\n`;\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(\n  (\n    {\n      closeOnSelect = true,\n      modalTitle,\n      trigger,\n      placement = 'bottom-start',\n      visible,\n      onClose = () => {},\n      size,\n      className,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    useFocusWithArrows(containerRef);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const menuId = useMemo(\n      () => id || `menu-${Math.random().toString(36).slice(2, 11)}`,\n      [id]\n    );\n\n    // Replace the aria-haspopup attribute from true to menu\n    useBrowserLayoutEffect(() => {\n      if (!trigger) return;\n      const { current } = trigger as RefObject<Element>;\n      if (!current) return;\n      current.setAttribute('aria-haspopup', 'menu');\n      current.setAttribute('aria-controls', menuId);\n    }, [menuId]);\n\n    const contextValue = useMemo(\n      () => ({ closeOnSelect, onClose }),\n      [closeOnSelect, onClose]\n    );\n\n    return (\n      <MenuContext.Provider value={contextValue}>\n        {isMinXs ? (\n          <StyledPopover\n            trigger={trigger}\n            placement={placement}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            {...rest}\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledPopover>\n        ) : (\n          <StyledModal\n            title={modalTitle}\n            footer={null}\n            visible={visible}\n            onClose={onClose}\n            size={size}\n            className={className}\n            id={menuId}\n            role='menu'\n            ref={mergedContainerRef}\n          >\n            {children}\n          </StyledModal>\n        )}\n      </MenuContext.Provider>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["styled","useIsMinWidth","MenuContext","enableScrollingStyles","useBrowserLayoutEffect","useForwardedRef","useKeyPress","React","forwardRef","useMemo","Modal","Popover","useFocusWithArrows","StyledPopover","p","theme","menuPaddingVertical","menuMinWidth","menuMaxHeight","StyledModal","Menu","closeOnSelect","modalTitle","trigger","placement","visible","onClose","size","className","id","children","rest","ref","containerRef","mergedContainerRef","window","undefined","isMinXs","menuId","Math","random","toString","slice","current","setAttribute","contextValue","createElement","Provider","value","_extends","role","title","footer","displayName"],"sources":["../../../src/Menu/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { useIsMinWidth } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { enableScrollingStyles } from '@os-design/styles';\nimport {\n  useBrowserLayoutEffect,\n  useForwardedRef,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, { forwardRef, RefObject, useMemo } from 'react';\nimport Modal from '../Modal';\nimport Popover, { PopoverProps } from '../Popover';\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/esm/Menu/utils/useFocusWithArrows.js

@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
 import { useKeyPress } from '@os-design/utils';
+import { useCallback } from 'react';
 const useFocusWithArrows = ref => {
   const arrowKeyPressListener = useCallback(e => {
     if (!ref.current) return;

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

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithArrows.js","names":["useCallback","useKeyPress","useFocusWithArrows","ref","arrowKeyPressListener","e","current","focusableListItems","querySelectorAll","activeElement","document","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { RefObject, useCallback } from 'react';\nimport { KeyPressListener, useKeyPress } from '@os-design/utils';\n\nconst useFocusWithArrows = (ref: RefObject<Element>): void => {\n  const arrowKeyPressListener = useCallback<KeyPressListener>(\n    (e) => {\n      if (!ref.current) return;\n      const focusableListItems = ref.current.querySelectorAll<HTMLElement>(\n        'button:not([disabled])'\n      );\n      const { activeElement } = document;\n      const curFocusedIndex = activeElement\n        ? ([...focusableListItems] as Element[]).indexOf(activeElement)\n        : -1;\n\n      let nextFocusedIndex;\n      if (curFocusedIndex === -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex = focusableListItems.length - 1;\n      } else if (curFocusedIndex === -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex = 0;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowUp') {\n        nextFocusedIndex =\n          curFocusedIndex > 0\n            ? curFocusedIndex - 1\n            : focusableListItems.length - 1;\n      } else if (curFocusedIndex > -1 && e.key === 'ArrowDown') {\n        nextFocusedIndex =\n          curFocusedIndex < focusableListItems.length - 1\n            ? curFocusedIndex + 1\n            : 0;\n      }\n\n      if (nextFocusedIndex === undefined) return;\n      const nextFocusedListItem = focusableListItems.item(nextFocusedIndex);\n      if (!nextFocusedListItem) return;\n\n      nextFocusedListItem.focus();\n      e.preventDefault();\n    },\n    [ref]\n  );\n\n  useKeyPress(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    ['ArrowUp', 'ArrowDown'],\n    arrowKeyPressListener\n  );\n};\n\nexport default useFocusWithArrows;\n"],"mappings":"AAAA,SAAoBA,WAAW,QAAQ,OAAO;AAC9C,SAA2BC,WAAW,QAAQ,kBAAkB;AAEhE,MAAMC,kBAAkB,GAAIC,GAAuB,IAAW;EAC5D,MAAMC,qBAAqB,GAAGJ,WAAW,CACtCK,CAAC,IAAK;IACL,IAAI,CAACF,GAAG,CAACG,OAAO,EAAE;IAClB,MAAMC,kBAAkB,GAAGJ,GAAG,CAACG,OAAO,CAACE,gBAAgB,CACrD,wBAAwB,CACzB;IACD,MAAM;MAAEC;IAAc,CAAC,GAAGC,QAAQ;IAClC,MAAMC,eAAe,GAAGF,aAAa,GAChC,CAAC,GAAGF,kBAAkB,CAAC,CAAeK,OAAO,CAACH,aAAa,CAAC,GAC7D,CAAC,CAAC;IAEN,IAAII,gBAAgB;IACpB,IAAIF,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IAClD,CAAC,MAAM,IAAIJ,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MAC1DD,gBAAgB,GAAG,CAAC;IACtB,CAAC,MAAM,IAAIF,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAC,GACfA,eAAe,GAAG,CAAC,GACnBJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IACrC,CAAC,MAAM,IAAIJ,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC,GAC3CJ,eAAe,GAAG,CAAC,GACnB,CAAC;IACT;IAEA,IAAIE,gBAAgB,KAAKG,SAAS,EAAE;IACpC,MAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAI,CAACL,gBAAgB,CAAC;IACrE,IAAI,CAACI,mBAAmB,EAAE;IAE1BA,mBAAmB,CAACE,KAAK,EAAE;IAC3Bd,CAAC,CAACe,cAAc,EAAE;EACpB,CAAC,EACD,CAACjB,GAAG,CAAC,CACN;EAEDF,WAAW,CACR,OAAOoB,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGL,SAAS,EACnD,CAAC,SAAS,EAAE,WAAW,CAAC,EACxBZ,qBAAqB,CACtB;AACH,CAAC;AAED,eAAeF,kBAAkB"}
+{"version":3,"file":"useFocusWithArrows.js","names":["useKeyPress","useCallback","useFocusWithArrows","ref","arrowKeyPressListener","e","current","focusableListItems","querySelectorAll","activeElement","document","curFocusedIndex","indexOf","nextFocusedIndex","key","length","undefined","nextFocusedListItem","item","focus","preventDefault","window"],"sources":["../../../../src/Menu/utils/useFocusWithArrows.ts"],"sourcesContent":["import { KeyPressListener, useKeyPress } from '@os-design/utils';\nimport { RefObject, useCallback } from 'react';\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,SAA2BA,WAAW,QAAQ,kBAAkB;AAChE,SAAoBC,WAAW,QAAQ,OAAO;AAE9C,MAAMC,kBAAkB,GAAIC,GAAuB,IAAW;EAC5D,MAAMC,qBAAqB,GAAGH,WAAW,CACtCI,CAAC,IAAK;IACL,IAAI,CAACF,GAAG,CAACG,OAAO,EAAE;IAClB,MAAMC,kBAAkB,GAAGJ,GAAG,CAACG,OAAO,CAACE,gBAAgB,CACrD,wBACF,CAAC;IACD,MAAM;MAAEC;IAAc,CAAC,GAAGC,QAAQ;IAClC,MAAMC,eAAe,GAAGF,aAAa,GAChC,CAAC,GAAGF,kBAAkB,CAAC,CAAeK,OAAO,CAACH,aAAa,CAAC,GAC7D,CAAC,CAAC;IAEN,IAAII,gBAAgB;IACpB,IAAIF,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACjDD,gBAAgB,GAAGN,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IAClD,CAAC,MAAM,IAAIJ,eAAe,KAAK,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MAC1DD,gBAAgB,GAAG,CAAC;IACtB,CAAC,MAAM,IAAIF,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,SAAS,EAAE;MACtDD,gBAAgB,GACdF,eAAe,GAAG,CAAC,GACfA,eAAe,GAAG,CAAC,GACnBJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC;IACrC,CAAC,MAAM,IAAIJ,eAAe,GAAG,CAAC,CAAC,IAAIN,CAAC,CAACS,GAAG,KAAK,WAAW,EAAE;MACxDD,gBAAgB,GACdF,eAAe,GAAGJ,kBAAkB,CAACQ,MAAM,GAAG,CAAC,GAC3CJ,eAAe,GAAG,CAAC,GACnB,CAAC;IACT;IAEA,IAAIE,gBAAgB,KAAKG,SAAS,EAAE;IACpC,MAAMC,mBAAmB,GAAGV,kBAAkB,CAACW,IAAI,CAACL,gBAAgB,CAAC;IACrE,IAAI,CAACI,mBAAmB,EAAE;IAE1BA,mBAAmB,CAACE,KAAK,CAAC,CAAC;IAC3Bd,CAAC,CAACe,cAAc,CAAC,CAAC;EACpB,CAAC,EACD,CAACjB,GAAG,CACN,CAAC;EAEDH,WAAW,CACR,OAAOqB,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGL,SAAS,EACnD,CAAC,SAAS,EAAE,WAAW,CAAC,EACxBZ,qBACF,CAAC;AACH,CAAC;AAED,eAAeF,kBAAkB"}

package/dist/esm/MenuDivider/index.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { clr } from '@os-design/theming';
+import React, { forwardRef } from 'react';
 const Container = styled.div`
   padding-top: 0.4em;
   border-bottom: 1px solid ${p => clr(p.theme.menuDividerColor)};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","clr","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AAIxC,MAAMC,SAAS,GAAGF,MAAM,CAACG,GAAI;AAC7B;AACA,6BAA8BC,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AAClE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGR,UAAU,CAC5B,CAACS,KAAK,EAAEC,GAAG,kBAAK,oBAAC,SAAS;EAAC,IAAI,EAAC;AAAW,GAAKD,KAAK;EAAE,GAAG,EAAEC;AAAI,GAAG,CACpE;AAEDF,WAAW,CAACG,WAAW,GAAG,aAAa;AAEvC,eAAeH,WAAW"}
+{"version":3,"file":"index.js","names":["styled","clr","React","forwardRef","Container","div","p","theme","menuDividerColor","MenuDivider","props","ref","createElement","_extends","role","displayName"],"sources":["../../../src/MenuDivider/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\n\nexport type MenuDividerProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nconst Container = styled.div`\n  padding-top: 0.4em;\n  border-bottom: 1px solid ${(p) => clr(p.theme.menuDividerColor)};\n  margin-bottom: 0.4em;\n`;\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(\n  (props, ref) => <Container role='separator' {...props} ref={ref} />\n);\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAIzC,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,6BAA8BC,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AAClE;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGN,UAAU,CAC5B,CAACO,KAAK,EAAEC,GAAG,kBAAKT,KAAA,CAAAU,aAAA,CAACR,SAAS,EAAAS,QAAA;EAACC,IAAI,EAAC;AAAW,GAAKJ,KAAK;EAAEC,GAAG,EAAEA;AAAI,EAAE,CACpE,CAAC;AAEDF,WAAW,CAACM,WAAW,GAAG,aAAa;AAEvC,eAAeN,WAAW"}

package/dist/esm/MenuGroup/index.js

@@ -79,6 +79,7 @@ const MenuGroup = /*#__PURE__*/forwardRef(({
       onClick: childOnClick
     } = child.props;
     const selected = multiple && (forwardedValue || []).includes(childValue) || !multiple && forwardedValue === childValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return /*#__PURE__*/React.cloneElement(child, {
       key: childValue,
       selected,