@os-design/core 1.0.156 → 1.0.158

package/dist/esm/ScrollButton/utils/useVisibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisibility.js","names":["useCallback","useState","useEvent","useBrowserLayoutEffect","useVisibility","container","scrollTo","minOffset","visible","setVisible","updateVisibility","offset","window","scrollY","document","body","scrollHeight","innerHeight","containerElement","Element","current","scrollTop","clientHeight","undefined"],"sources":["../../../../src/ScrollButton/utils/useVisibility.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\n\ninterface UseVisibilityProps {\n  container?: Element | RefObject<Element>;\n  scrollTo: 'top' | 'bottom';\n  minOffset: number;\n}\n\n/**\n * Controls the visibility of the button.\n */\nconst useVisibility = ({\n  container,\n  scrollTo,\n  minOffset,\n}: UseVisibilityProps): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  // Update the visibility of the button when the user scrolls the container\n  const updateVisibility = useCallback(() => {\n    let offset = 0;\n\n    if (!container) {\n      offset =\n        scrollTo === 'top'\n          ? window.scrollY\n          : document.body.scrollHeight - window.scrollY - window.innerHeight;\n    } else {\n      const containerElement =\n        container instanceof Element ? container : container.current;\n      if (containerElement === null) return;\n\n      offset =\n        scrollTo === 'top'\n          ? containerElement.scrollTop\n          : containerElement.scrollHeight -\n            containerElement.scrollTop -\n            containerElement.clientHeight;\n    }\n\n    setVisible(offset >= minOffset);\n  }, [container, scrollTo, minOffset]);\n\n  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),\n    'scroll',\n    updateVisibility\n  );\n\n  return visible;\n};\n\nexport default useVisibility;\n"],"mappings":"AAAA,SAAoBA,WAApB,EAAiCC,QAAjC,QAAiD,OAAjD;AACA,SAASC,QAAT,EAAmBC,sBAAnB,QAAiD,kBAAjD;;AAQA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,CAAC;EACrBC,SADqB;EAErBC,QAFqB;EAGrBC;AAHqB,CAAD,KAIa;EACjC,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBR,QAAQ,CAAC,KAAD,CAAtC,CADiC,CAGjC;;EACA,MAAMS,gBAAgB,GAAGV,WAAW,CAAC,MAAM;IACzC,IAAIW,MAAM,GAAG,CAAb;;IAEA,IAAI,CAACN,SAAL,EAAgB;MACdM,MAAM,GACJL,QAAQ,KAAK,KAAb,GACIM,MAAM,CAACC,OADX,GAEIC,QAAQ,CAACC,IAAT,CAAcC,YAAd,GAA6BJ,MAAM,CAACC,OAApC,GAA8CD,MAAM,CAACK,WAH3D;IAID,CALD,MAKO;MACL,MAAMC,gBAAgB,GACpBb,SAAS,YAAYc,OAArB,GAA+Bd,SAA/B,GAA2CA,SAAS,CAACe,OADvD;MAEA,IAAIF,gBAAgB,KAAK,IAAzB,EAA+B;MAE/BP,MAAM,GACJL,QAAQ,KAAK,KAAb,GACIY,gBAAgB,CAACG,SADrB,GAEIH,gBAAgB,CAACF,YAAjB,GACAE,gBAAgB,CAACG,SADjB,GAEAH,gBAAgB,CAACI,YALvB;IAMD;;IAEDb,UAAU,CAACE,MAAM,IAAIJ,SAAX,CAAV;EACD,CAtBmC,EAsBjC,CAACF,SAAD,EAAYC,QAAZ,EAAsBC,SAAtB,CAtBiC,CAApC;EAwBAJ,sBAAsB,CAAC,MAAMO,gBAAgB,EAAvB,EAA2B,CAACA,gBAAD,CAA3B,CAAtB;EACAR,QAAQ,CACNG,SAAS,KACL,OAAOO,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCW,SADpC,CADH,EAGN,QAHM,EAINb,gBAJM,CAAR;EAOA,OAAOF,OAAP;AACD,CAzCD;;AA2CA,eAAeJ,aAAf"}
+{"version":3,"file":"useVisibility.js","names":["useCallback","useState","useEvent","useBrowserLayoutEffect","useVisibility","container","scrollTo","minOffset","visible","setVisible","updateVisibility","offset","window","scrollY","document","body","scrollHeight","innerHeight","containerElement","Element","current","scrollTop","clientHeight","undefined"],"sources":["../../../../src/ScrollButton/utils/useVisibility.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\n\ninterface UseVisibilityProps {\n  container?: Element | RefObject<Element>;\n  scrollTo: 'top' | 'bottom';\n  minOffset: number;\n}\n\n/**\n * Controls the visibility of the button.\n */\nconst useVisibility = ({\n  container,\n  scrollTo,\n  minOffset,\n}: UseVisibilityProps): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  // Update the visibility of the button when the user scrolls the container\n  const updateVisibility = useCallback(() => {\n    let offset = 0;\n\n    if (!container) {\n      offset =\n        scrollTo === 'top'\n          ? window.scrollY\n          : document.body.scrollHeight - window.scrollY - window.innerHeight;\n    } else {\n      const containerElement =\n        container instanceof Element ? container : container.current;\n      if (containerElement === null) return;\n\n      offset =\n        scrollTo === 'top'\n          ? containerElement.scrollTop\n          : containerElement.scrollHeight -\n            containerElement.scrollTop -\n            containerElement.clientHeight;\n    }\n\n    setVisible(offset >= minOffset);\n  }, [container, scrollTo, minOffset]);\n\n  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),\n    'scroll',\n    updateVisibility\n  );\n\n  return visible;\n};\n\nexport default useVisibility;\n"],"mappings":"AAAA,SAAoBA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,QAAQ,EAAEC,sBAAsB,QAAQ,kBAAkB;AAQnE;AACA;AACA;AACA,MAAMC,aAAa,GAAG,CAAC;EACrBC,SAAS;EACTC,QAAQ;EACRC;AACkB,CAAC,KAAc;EACjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGR,QAAQ,CAAC,KAAK,CAAC;;EAE7C;EACA,MAAMS,gBAAgB,GAAGV,WAAW,CAAC,MAAM;IACzC,IAAIW,MAAM,GAAG,CAAC;IAEd,IAAI,CAACN,SAAS,EAAE;MACdM,MAAM,GACJL,QAAQ,KAAK,KAAK,GACdM,MAAM,CAACC,OAAO,GACdC,QAAQ,CAACC,IAAI,CAACC,YAAY,GAAGJ,MAAM,CAACC,OAAO,GAAGD,MAAM,CAACK,WAAW;IACxE,CAAC,MAAM;MACL,MAAMC,gBAAgB,GACpBb,SAAS,YAAYc,OAAO,GAAGd,SAAS,GAAGA,SAAS,CAACe,OAAO;MAC9D,IAAIF,gBAAgB,KAAK,IAAI,EAAE;MAE/BP,MAAM,GACJL,QAAQ,KAAK,KAAK,GACdY,gBAAgB,CAACG,SAAS,GAC1BH,gBAAgB,CAACF,YAAY,GAC7BE,gBAAgB,CAACG,SAAS,GAC1BH,gBAAgB,CAACI,YAAY;IACrC;IAEAb,UAAU,CAACE,MAAM,IAAIJ,SAAS,CAAC;EACjC,CAAC,EAAE,CAACF,SAAS,EAAEC,QAAQ,EAAEC,SAAS,CAAC,CAAC;EAEpCJ,sBAAsB,CAAC,MAAMO,gBAAgB,EAAE,EAAE,CAACA,gBAAgB,CAAC,CAAC;EACpER,QAAQ,CACNG,SAAS,KACL,OAAOO,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGW,SAAS,CAAiB,EACvE,QAAQ,EACRb,gBAAgB,CACjB;EAED,OAAOF,OAAO;AAChB,CAAC;AAED,eAAeJ,aAAa"}

package/dist/esm/Select/SelectList.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useCallback, useMemo } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useFontSize, useSize } from '@os-design/utils';
@@ -8,7 +7,6 @@ import { useIsMinWidth } from '@os-design/media';
 import { useSelectHandler } from '@os-design/menu-utils';
 import MenuItem from '../MenuItem';
 import useRWLoadNext from '../List/utils/useRWLoadNext';
-
 const SelectList = ({
   searchVisible,
   options,
@@ -46,9 +44,8 @@ const SelectList = ({
       const maxHeight = windowSize.height - theme.modalHeaderHeight * fontSize * scaleFactor - searchInputHeight;
       const curHeight = options.length * itemSize + paddingTop + paddingBottom;
       return curHeight < maxHeight ? curHeight : maxHeight;
-    } // Popover
-
-
+    }
+    // Popover
     const count = options.length < visibleCount ? options.length : visibleCount;
     return count * itemSize + paddingTop + paddingBottom;
   }, [isMinXs, options.length, visibleCount, itemSize, windowSize.height, theme.modalHeaderHeight, fontSize, scaleFactor, searchInputHeight, paddingTop, paddingBottom]);
@@ -64,13 +61,15 @@ const SelectList = ({
     value: value || [],
     onChange,
     maxSelectedItems
-  }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const InnerElement = useCallback(({
     style,
     ...innerElementRest
   }) => /*#__PURE__*/React.createElement("div", _extends({
-    style: { ...style,
+    style: {
+      ...style,
       height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
     },
     role: "listbox",
@@ -87,21 +86,22 @@ const SelectList = ({
       ...restOption
     } = options[index];
     return /*#__PURE__*/React.createElement(MenuItem, _extends({
-      style: { ...style,
+      style: {
+        ...style,
         top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTop}px`
       },
       selected: (value || []).includes(optionValue || ''),
       onClick: e => {
         if (!optionValue) return;
-        onSelect(optionValue); // Focus the input.
+        onSelect(optionValue);
+
+        // Focus the input.
         // Otherwise, if the max number of selected items equals 1
         // and the user presses enter to select an item,
         // the input will lose focus.
-
         if (containerRef.current && maxSelectedItems === 1) {
           containerRef.current.focus();
         }
-
         if (optionOnClick) optionOnClick(e);
       },
       role: "option",
@@ -120,7 +120,6 @@ const SelectList = ({
     innerElementType: InnerElement
   }, listItemFn);
 };
-
 SelectList.displayName = 'SelectList';
 export default SelectList;
 //# sourceMappingURL=SelectList.js.map

package/dist/esm/Select/SelectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.js","names":["React","useCallback","useMemo","FixedSizeList","useFontSize","useSize","useTheme","useIsMinWidth","useSelectHandler","MenuItem","useRWLoadNext","SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","isMinXs","fontSize","document","body","theme","scaleFactor","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","itemCount","onSelect","InnerElement","style","innerElementRest","parseFloat","listItemFn","index","title","optionTitle","optionValue","onClick","optionOnClick","restOption","top","toString","e","current","focus","scrollOffset","displayName"],"sources":["../../../src/Select/SelectList.tsx"],"sourcesContent":["import React, { RefObject, useCallback, useMemo } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport { useFontSize, useSize } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { useSelectHandler } from '@os-design/menu-utils';\nimport MenuItem, { MenuItemProps } from '../MenuItem';\nimport useRWLoadNext from '../List/utils/useRWLoadNext';\n\nexport interface OptionProps extends MenuItemProps {\n  title?: string;\n}\n\ninterface SelectListProps extends WithSize {\n  searchVisible: boolean;\n  options: OptionProps[];\n  visibleCount: number;\n  overscanCount: number;\n  threshold: number;\n  onLoadNext: () => void;\n  maxSelectedItems: number | 'all';\n  containerRef: RefObject<HTMLDivElement>;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  id?: string;\n}\n\nconst SelectList: React.FC<SelectListProps> = ({\n  searchVisible,\n  options,\n  visibleCount,\n  overscanCount,\n  threshold,\n  onLoadNext,\n  maxSelectedItems,\n  containerRef,\n  value,\n  onChange = () => {},\n  id,\n  size,\n}) => {\n  const windowSize = useSize();\n  const isMinXs = useIsMinWidth('xs');\n  const fontSize = useFontSize(document.body);\n  const { theme } = useTheme();\n\n  const scaleFactor = useMemo(() => {\n    const s = size || 'medium';\n    return ['small', 'medium', 'large'].includes(s)\n      ? theme.sizes[s]\n      : Number(s.replace(/^([0-9]+(\\.[0-9]+)?).*/, '$1')) || 1; // Extract the number\n  }, [size, theme.sizes]);\n\n  const paddingBottom = useMemo(() => {\n    const paddingEm = isMinXs\n      ? theme.menuPaddingVertical\n      : theme.modalBodyPaddingVertical[0];\n    return paddingEm * fontSize * scaleFactor;\n  }, [\n    isMinXs,\n    theme.menuPaddingVertical,\n    theme.modalBodyPaddingVertical,\n    fontSize,\n    scaleFactor,\n  ]);\n\n  const paddingTop = useMemo(\n    () => (searchVisible ? 5 * scaleFactor : paddingBottom),\n    [searchVisible, scaleFactor, paddingBottom]\n  );\n\n  const searchInputHeight = useMemo(\n    () =>\n      searchVisible\n        ? (theme.baseHeight + theme.menuPaddingVertical) *\n          fontSize *\n          scaleFactor\n        : 0,\n    [\n      searchVisible,\n      theme.baseHeight,\n      theme.menuPaddingVertical,\n      fontSize,\n      scaleFactor,\n    ]\n  );\n\n  const itemSize = useMemo(\n    () => theme.menuItemHeight * fontSize * scaleFactor,\n    [theme.menuItemHeight, fontSize, scaleFactor]\n  );\n\n  const height = useMemo(() => {\n    // Modal\n    if (!isMinXs) {\n      const maxHeight =\n        windowSize.height -\n        theme.modalHeaderHeight * fontSize * scaleFactor -\n        searchInputHeight;\n      const curHeight = options.length * itemSize + paddingTop + paddingBottom;\n      return curHeight < maxHeight ? curHeight : maxHeight;\n    }\n    // Popover\n    const count = options.length < visibleCount ? options.length : visibleCount;\n    return count * itemSize + paddingTop + paddingBottom;\n  }, [\n    isMinXs,\n    options.length,\n    visibleCount,\n    itemSize,\n    windowSize.height,\n    theme.modalHeaderHeight,\n    fontSize,\n    scaleFactor,\n    searchInputHeight,\n    paddingTop,\n    paddingBottom,\n  ]);\n\n  const scrollHandler = useRWLoadNext({\n    itemCount: options.length,\n    threshold,\n    itemSize,\n    paddingTop,\n    height,\n    onLoadNext,\n  });\n\n  const onSelect = useSelectHandler({\n    value: value || [],\n    onChange,\n    maxSelectedItems,\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const InnerElement = useCallback(\n    ({ style, ...innerElementRest }) => (\n      <div\n        style={{\n          ...style,\n          height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,\n        }}\n        role='listbox'\n        id={id}\n        {...innerElementRest}\n      />\n    ),\n    [id, paddingBottom, paddingTop]\n  );\n\n  const listItemFn = useCallback(\n    ({ index, style }) => {\n      const {\n        title: optionTitle,\n        value: optionValue,\n        onClick: optionOnClick,\n        ...restOption\n      } = options[index];\n      return (\n        <MenuItem\n          style={{\n            ...style,\n            top: `${\n              parseFloat(style.top ? style.top.toString() : '0') + paddingTop\n            }px`,\n          }}\n          selected={(value || []).includes(optionValue || '')}\n          onClick={(e) => {\n            if (!optionValue) return;\n            onSelect(optionValue);\n\n            // Focus the input.\n            // Otherwise, if the max number of selected items equals 1\n            // and the user presses enter to select an item,\n            // the input will lose focus.\n            if (containerRef.current && maxSelectedItems === 1) {\n              containerRef.current.focus();\n            }\n\n            if (optionOnClick) optionOnClick(e);\n          }}\n          role='option'\n          aria-selected={(value || []).includes(optionValue || '')}\n          {...restOption}\n        >\n          {optionTitle}\n        </MenuItem>\n      );\n    },\n    [containerRef, maxSelectedItems, onSelect, options, paddingTop, value]\n  );\n\n  return (\n    <FixedSizeList\n      width='100%'\n      height={height}\n      itemSize={itemSize}\n      itemCount={options.length}\n      overscanCount={overscanCount}\n      onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}\n      innerElementType={InnerElement}\n    >\n      {listItemFn}\n    </FixedSizeList>\n  );\n};\n\nSelectList.displayName = 'SelectList';\n\nexport default SelectList;\n"],"mappings":"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"}
+{"version":3,"file":"SelectList.js","names":["React","useCallback","useMemo","FixedSizeList","useFontSize","useSize","useTheme","useIsMinWidth","useSelectHandler","MenuItem","useRWLoadNext","SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","isMinXs","fontSize","document","body","theme","scaleFactor","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","itemCount","onSelect","InnerElement","style","innerElementRest","parseFloat","listItemFn","index","title","optionTitle","optionValue","onClick","optionOnClick","restOption","top","toString","e","current","focus","scrollOffset","displayName"],"sources":["../../../src/Select/SelectList.tsx"],"sourcesContent":["import React, { RefObject, useCallback, useMemo } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport { useFontSize, useSize } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { useSelectHandler } from '@os-design/menu-utils';\nimport MenuItem, { MenuItemProps } from '../MenuItem';\nimport useRWLoadNext from '../List/utils/useRWLoadNext';\n\nexport interface OptionProps extends MenuItemProps {\n  title?: string;\n}\n\ninterface SelectListProps extends WithSize {\n  searchVisible: boolean;\n  options: OptionProps[];\n  visibleCount: number;\n  overscanCount: number;\n  threshold: number;\n  onLoadNext: () => void;\n  maxSelectedItems: number | 'all';\n  containerRef: RefObject<HTMLDivElement>;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  id?: string;\n}\n\nconst SelectList: React.FC<SelectListProps> = ({\n  searchVisible,\n  options,\n  visibleCount,\n  overscanCount,\n  threshold,\n  onLoadNext,\n  maxSelectedItems,\n  containerRef,\n  value,\n  onChange = () => {},\n  id,\n  size,\n}) => {\n  const windowSize = useSize();\n  const isMinXs = useIsMinWidth('xs');\n  const fontSize = useFontSize(document.body);\n  const { theme } = useTheme();\n\n  const scaleFactor = useMemo(() => {\n    const s = size || 'medium';\n    return ['small', 'medium', 'large'].includes(s)\n      ? theme.sizes[s]\n      : Number(s.replace(/^([0-9]+(\\.[0-9]+)?).*/, '$1')) || 1; // Extract the number\n  }, [size, theme.sizes]);\n\n  const paddingBottom = useMemo(() => {\n    const paddingEm = isMinXs\n      ? theme.menuPaddingVertical\n      : theme.modalBodyPaddingVertical[0];\n    return paddingEm * fontSize * scaleFactor;\n  }, [\n    isMinXs,\n    theme.menuPaddingVertical,\n    theme.modalBodyPaddingVertical,\n    fontSize,\n    scaleFactor,\n  ]);\n\n  const paddingTop = useMemo(\n    () => (searchVisible ? 5 * scaleFactor : paddingBottom),\n    [searchVisible, scaleFactor, paddingBottom]\n  );\n\n  const searchInputHeight = useMemo(\n    () =>\n      searchVisible\n        ? (theme.baseHeight + theme.menuPaddingVertical) *\n          fontSize *\n          scaleFactor\n        : 0,\n    [\n      searchVisible,\n      theme.baseHeight,\n      theme.menuPaddingVertical,\n      fontSize,\n      scaleFactor,\n    ]\n  );\n\n  const itemSize = useMemo(\n    () => theme.menuItemHeight * fontSize * scaleFactor,\n    [theme.menuItemHeight, fontSize, scaleFactor]\n  );\n\n  const height = useMemo(() => {\n    // Modal\n    if (!isMinXs) {\n      const maxHeight =\n        windowSize.height -\n        theme.modalHeaderHeight * fontSize * scaleFactor -\n        searchInputHeight;\n      const curHeight = options.length * itemSize + paddingTop + paddingBottom;\n      return curHeight < maxHeight ? curHeight : maxHeight;\n    }\n    // Popover\n    const count = options.length < visibleCount ? options.length : visibleCount;\n    return count * itemSize + paddingTop + paddingBottom;\n  }, [\n    isMinXs,\n    options.length,\n    visibleCount,\n    itemSize,\n    windowSize.height,\n    theme.modalHeaderHeight,\n    fontSize,\n    scaleFactor,\n    searchInputHeight,\n    paddingTop,\n    paddingBottom,\n  ]);\n\n  const scrollHandler = useRWLoadNext({\n    itemCount: options.length,\n    threshold,\n    itemSize,\n    paddingTop,\n    height,\n    onLoadNext,\n  });\n\n  const onSelect = useSelectHandler({\n    value: value || [],\n    onChange,\n    maxSelectedItems,\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const InnerElement = useCallback(\n    ({ style, ...innerElementRest }) => (\n      <div\n        style={{\n          ...style,\n          height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,\n        }}\n        role='listbox'\n        id={id}\n        {...innerElementRest}\n      />\n    ),\n    [id, paddingBottom, paddingTop]\n  );\n\n  const listItemFn = useCallback(\n    ({ index, style }) => {\n      const {\n        title: optionTitle,\n        value: optionValue,\n        onClick: optionOnClick,\n        ...restOption\n      } = options[index];\n      return (\n        <MenuItem\n          style={{\n            ...style,\n            top: `${\n              parseFloat(style.top ? style.top.toString() : '0') + paddingTop\n            }px`,\n          }}\n          selected={(value || []).includes(optionValue || '')}\n          onClick={(e) => {\n            if (!optionValue) return;\n            onSelect(optionValue);\n\n            // Focus the input.\n            // Otherwise, if the max number of selected items equals 1\n            // and the user presses enter to select an item,\n            // the input will lose focus.\n            if (containerRef.current && maxSelectedItems === 1) {\n              containerRef.current.focus();\n            }\n\n            if (optionOnClick) optionOnClick(e);\n          }}\n          role='option'\n          aria-selected={(value || []).includes(optionValue || '')}\n          {...restOption}\n        >\n          {optionTitle}\n        </MenuItem>\n      );\n    },\n    [containerRef, maxSelectedItems, onSelect, options, paddingTop, value]\n  );\n\n  return (\n    <FixedSizeList\n      width='100%'\n      height={height}\n      itemSize={itemSize}\n      itemCount={options.length}\n      overscanCount={overscanCount}\n      onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}\n      innerElementType={InnerElement}\n    >\n      {listItemFn}\n    </FixedSizeList>\n  );\n};\n\nSelectList.displayName = 'SelectList';\n\nexport default SelectList;\n"],"mappings":"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"}

package/dist/esm/Select/SelectToggle.js

@@ -13,15 +13,12 @@ export const Container = styled.div`
   align-items: center;
   overflow: hidden;
 `;
-
 const notHasLeftStyles = p => !p.hasLeft && css`
     padding-left: ${p.theme.inputPaddingHorizontal}em;
   `;
-
 const notHasRightStyles = p => !p.hasRight && !p.unbordered && css`
     padding-right: ${p.theme.inputPaddingHorizontal}em;
   `;
-
 export const Content = styled('div', omitEmotionProps('hasLeft', 'hasRight', 'unbordered'))`
   flex: 1;
   ${notHasLeftStyles};
@@ -32,16 +29,13 @@ export const Placeholder = styled.span`
   color: ${p => clr(p.theme.inputColorPlaceholder)};
   ${ellipsisStyles};
 `;
-
 const unborderedTitleStyles = p => p.unbordered && css`
     font-weight: 500;
     ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
   `;
-
 const disabledStyles = p => p.disabled && css`
     color: ${clr(p.theme.inputDisabledColorText)};
   `;
-
 export const Title = styled('span', omitEmotionProps('disabled', 'unbordered'))`
   color: ${p => clr(p.theme.colorText)};
   ${unborderedTitleStyles};
@@ -88,13 +82,11 @@ const DeleteButton = styled.button`
 
   ${transitionStyles('color')};
 `;
-
 const unborderedIconContainerStyles = p => p.unbordered && css`
     padding-top: 0.2em;
     font-size: 0.8em;
     ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
   `;
-
 export const IconContainer = styled('span', omitEmotionProps('unbordered', 'disabled'))`
   color: ${p => clr(p.theme.selectColorIcon)};
   line-height: 1;
@@ -125,7 +117,6 @@ export const RightAddon = styled(Addon)`
       padding-right: ${p.theme.inputPaddingHorizontal}em;
     `}
 `;
-
 const SelectToggle = ({
   selectedItems,
   onDelete,
@@ -147,7 +138,6 @@ const SelectToggle = ({
     if (selectedItems.length === 0) {
       return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
     }
-
     if (multiple) {
       return /*#__PURE__*/React.createElement(List, null, selectedItems.map(({
         title,
@@ -167,7 +157,6 @@ const SelectToggle = ({
         "aria-hidden": true
       }, title)));
     }
-
     return /*#__PURE__*/React.createElement(Title, {
       disabled: disabled,
       unbordered: unbordered
@@ -176,7 +165,6 @@ const SelectToggle = ({
   const showClearButton = useMemo(() => clearVisible && selectedItems.length > 0, [clearVisible, selectedItems.length]);
   const rightValue = useMemo(() => {
     if (loading) return /*#__PURE__*/React.createElement(Loading, null);
-
     if (showClearButton) {
       return /*#__PURE__*/React.createElement(Button, {
         type: "ghost",
@@ -194,7 +182,6 @@ const SelectToggle = ({
         "aria-label": locale.clearLabel
       }, /*#__PURE__*/React.createElement(ClearIcon, null));
     }
-
     return right || /*#__PURE__*/React.createElement(IconContainer, {
       unbordered: unbordered,
       disabled: disabled
@@ -225,7 +212,6 @@ const SelectToggle = ({
     hasPadding: rightHasPaddingValue
   }, rightValue)));
 };
-
 SelectToggle.displayName = 'SelectToggle';
 export default SelectToggle;
 //# sourceMappingURL=SelectToggle.js.map

package/dist/esm/Select/SelectToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectToggle.js","names":["React","useCallback","useMemo","styled","Up","Down","Loading","Close","CloseCircle","ellipsisStyles","resetButtonStyles","transitionStyles","omitEmotionProps","clr","ThemeOverrider","css","Tag","Button","Container","div","notHasLeftStyles","p","hasLeft","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","unbordered","Content","Placeholder","span","inputColorPlaceholder","unborderedTitleStyles","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","selectToggleListItemHeight","List","selectToggleListItemGap","DeleteButton","button","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","unborderedIconContainerStyles","IconContainer","selectColorIcon","ClearIcon","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","left","leftHasPadding","right","rightHasPadding","placeholder","loading","clearVisible","locale","renderContent","length","map","title","value","e","stopPropagation","deleteLabel","undefined","showClearButton","rightValue","key","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","sizes","small","displayName"],"sources":["../../../src/Select/SelectToggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Tag from '../Tag';\nimport Button from '../Button';\nimport { SelectLocale } from './utils/defaultLocale';\n\ninterface SelectToggleProps {\n  selectedItems: Array<{ title: string; value: string }>;\n  onDelete: (value: string) => void;\n  onClear: () => void;\n  opened: boolean;\n  multiple: boolean;\n  left?: React.ReactNode;\n  leftHasPadding?: boolean;\n  right?: React.ReactNode;\n  rightHasPadding?: boolean;\n  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\n}\n\nexport const Container = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  !p.unbordered &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n  unbordered?: boolean;\n}\nexport const Content = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight', 'unbordered')\n)<ContentProps>`\n  flex: 1;\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n  ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst unborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectToggleProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${unborderedTitleStyles};\n  ${disabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ListItemProps = Pick<SelectToggleProps, 'disabled'>;\nconst ListItem = styled(Tag, omitEmotionProps('disabled'))<ListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${disabledStyles};\n`;\n\nconst List = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n    ${(p) => -p.theme.selectToggleListItemGap}em 0;\n\n  & > div {\n    margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n      ${(p) => p.theme.selectToggleListItemGap}em 0;\n  }\n`;\n\nconst DeleteButton = styled.button`\n  ${resetButtonStyles};\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};\n    }\n  }\n\n  ${transitionStyles('color')};\n`;\n\nconst unborderedIconContainerStyles = (p) =>\n  p.unbordered &&\n  css`\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\ninterface IconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const IconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<IconContainerProps>`\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n  line-height: 1;\n  ${unborderedIconContainerStyles};\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nexport const LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nexport const RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  multiple,\n  left,\n  leftHasPadding = false,\n  right,\n  rightHasPadding = false,\n  placeholder,\n  unbordered,\n  loading,\n  disabled,\n  clearVisible,\n  locale,\n}) => {\n  const renderContent = useCallback(() => {\n    if (selectedItems.length === 0) {\n      return <Placeholder>{placeholder}</Placeholder>;\n    }\n    if (multiple) {\n      return (\n        <List>\n          {selectedItems.map(({ title, value }) => (\n            <ListItem\n              key={value}\n              disabled={disabled}\n              right={\n                !disabled ? (\n                  <DeleteButton\n                    onClick={(e) => {\n                      onDelete(value);\n                      e.stopPropagation();\n                    }}\n                    onKeyDown={(e) => e.stopPropagation()}\n                    aria-label={`${locale.deleteLabel} ${title}`}\n                    aria-hidden\n                  >\n                    <Close />\n                  </DeleteButton>\n                ) : undefined\n              }\n              aria-hidden\n            >\n              {title}\n            </ListItem>\n          ))}\n        </List>\n      );\n    }\n    return (\n      <Title disabled={disabled} unbordered={unbordered}>\n        {selectedItems[0].title}\n      </Title>\n    );\n  }, [\n    selectedItems,\n    multiple,\n    disabled,\n    unbordered,\n    placeholder,\n    locale.deleteLabel,\n    onDelete,\n  ]);\n\n  const showClearButton = useMemo(\n    () => clearVisible && selectedItems.length > 0,\n    [clearVisible, selectedItems.length]\n  );\n\n  const rightValue = useMemo(() => {\n    if (loading) return <Loading />;\n    if (showClearButton) {\n      return (\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          disabled={disabled}\n          onClick={(e) => {\n            onClear();\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onClear();\n            e.stopPropagation();\n          }}\n          aria-label={locale.clearLabel}\n        >\n          <ClearIcon />\n        </Button>\n      );\n    }\n    return (\n      right || (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {opened ? <Up /> : <Down />}\n        </IconContainer>\n      )\n    );\n  }, [\n    disabled,\n    loading,\n    locale.clearLabel,\n    onClear,\n    opened,\n    right,\n    showClearButton,\n    unbordered,\n  ]);\n\n  const rightHasPaddingValue = useMemo(() => {\n    if (loading) return true;\n    if (showClearButton) return false;\n    return right ? rightHasPadding : true;\n  }, [loading, right, rightHasPadding, showClearButton]);\n\n  return (\n    <Container>\n      {left && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n        </ThemeOverrider>\n      )}\n\n      <Content hasLeft={!!left} hasRight={!!right} unbordered={unbordered}>\n        {renderContent()}\n      </Content>\n\n      {rightValue && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <RightAddon hasPadding={rightHasPaddingValue}>\n            {rightValue}\n          </RightAddon>\n        </ThemeOverrider>\n      )}\n    </Container>\n  );\n};\n\nSelectToggle.displayName = 'SelectToggle';\n\nexport default SelectToggle;\n"],"mappings":"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"}
+{"version":3,"file":"SelectToggle.js","names":["React","useCallback","useMemo","styled","Up","Down","Loading","Close","CloseCircle","ellipsisStyles","resetButtonStyles","transitionStyles","omitEmotionProps","clr","ThemeOverrider","css","Tag","Button","Container","div","notHasLeftStyles","p","hasLeft","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","unbordered","Content","Placeholder","span","inputColorPlaceholder","unborderedTitleStyles","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","selectToggleListItemHeight","List","selectToggleListItemGap","DeleteButton","button","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","unborderedIconContainerStyles","IconContainer","selectColorIcon","ClearIcon","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","left","leftHasPadding","right","rightHasPadding","placeholder","loading","clearVisible","locale","renderContent","length","map","title","value","e","stopPropagation","deleteLabel","undefined","showClearButton","rightValue","key","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","sizes","small","displayName"],"sources":["../../../src/Select/SelectToggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Tag from '../Tag';\nimport Button from '../Button';\nimport { SelectLocale } from './utils/defaultLocale';\n\ninterface SelectToggleProps {\n  selectedItems: Array<{ title: string; value: string }>;\n  onDelete: (value: string) => void;\n  onClear: () => void;\n  opened: boolean;\n  multiple: boolean;\n  left?: React.ReactNode;\n  leftHasPadding?: boolean;\n  right?: React.ReactNode;\n  rightHasPadding?: boolean;\n  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\n}\n\nexport const Container = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  !p.unbordered &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n  unbordered?: boolean;\n}\nexport const Content = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight', 'unbordered')\n)<ContentProps>`\n  flex: 1;\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n  ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst unborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectToggleProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${unborderedTitleStyles};\n  ${disabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ListItemProps = Pick<SelectToggleProps, 'disabled'>;\nconst ListItem = styled(Tag, omitEmotionProps('disabled'))<ListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${disabledStyles};\n`;\n\nconst List = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n    ${(p) => -p.theme.selectToggleListItemGap}em 0;\n\n  & > div {\n    margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n      ${(p) => p.theme.selectToggleListItemGap}em 0;\n  }\n`;\n\nconst DeleteButton = styled.button`\n  ${resetButtonStyles};\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};\n    }\n  }\n\n  ${transitionStyles('color')};\n`;\n\nconst unborderedIconContainerStyles = (p) =>\n  p.unbordered &&\n  css`\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\ninterface IconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const IconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<IconContainerProps>`\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n  line-height: 1;\n  ${unborderedIconContainerStyles};\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nexport const LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nexport const RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  multiple,\n  left,\n  leftHasPadding = false,\n  right,\n  rightHasPadding = false,\n  placeholder,\n  unbordered,\n  loading,\n  disabled,\n  clearVisible,\n  locale,\n}) => {\n  const renderContent = useCallback(() => {\n    if (selectedItems.length === 0) {\n      return <Placeholder>{placeholder}</Placeholder>;\n    }\n    if (multiple) {\n      return (\n        <List>\n          {selectedItems.map(({ title, value }) => (\n            <ListItem\n              key={value}\n              disabled={disabled}\n              right={\n                !disabled ? (\n                  <DeleteButton\n                    onClick={(e) => {\n                      onDelete(value);\n                      e.stopPropagation();\n                    }}\n                    onKeyDown={(e) => e.stopPropagation()}\n                    aria-label={`${locale.deleteLabel} ${title}`}\n                    aria-hidden\n                  >\n                    <Close />\n                  </DeleteButton>\n                ) : undefined\n              }\n              aria-hidden\n            >\n              {title}\n            </ListItem>\n          ))}\n        </List>\n      );\n    }\n    return (\n      <Title disabled={disabled} unbordered={unbordered}>\n        {selectedItems[0].title}\n      </Title>\n    );\n  }, [\n    selectedItems,\n    multiple,\n    disabled,\n    unbordered,\n    placeholder,\n    locale.deleteLabel,\n    onDelete,\n  ]);\n\n  const showClearButton = useMemo(\n    () => clearVisible && selectedItems.length > 0,\n    [clearVisible, selectedItems.length]\n  );\n\n  const rightValue = useMemo(() => {\n    if (loading) return <Loading />;\n    if (showClearButton) {\n      return (\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          disabled={disabled}\n          onClick={(e) => {\n            onClear();\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onClear();\n            e.stopPropagation();\n          }}\n          aria-label={locale.clearLabel}\n        >\n          <ClearIcon />\n        </Button>\n      );\n    }\n    return (\n      right || (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {opened ? <Up /> : <Down />}\n        </IconContainer>\n      )\n    );\n  }, [\n    disabled,\n    loading,\n    locale.clearLabel,\n    onClear,\n    opened,\n    right,\n    showClearButton,\n    unbordered,\n  ]);\n\n  const rightHasPaddingValue = useMemo(() => {\n    if (loading) return true;\n    if (showClearButton) return false;\n    return right ? rightHasPadding : true;\n  }, [loading, right, rightHasPadding, showClearButton]);\n\n  return (\n    <Container>\n      {left && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n        </ThemeOverrider>\n      )}\n\n      <Content hasLeft={!!left} hasRight={!!right} unbordered={unbordered}>\n        {renderContent()}\n      </Content>\n\n      {rightValue && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <RightAddon hasPadding={rightHasPaddingValue}>\n            {rightValue}\n          </RightAddon>\n        </ThemeOverrider>\n      )}\n    </Container>\n  );\n};\n\nSelectToggle.displayName = 'SelectToggle';\n\nexport default SelectToggle;\n"],"mappings":"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"}

package/dist/esm/Select/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import { transitionStyles } from '@os-design/styles';
 import { omitEmotionProps, useEvent, useForwardedRef, useForwardedState, useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';
@@ -13,25 +12,21 @@ import InputSearch from '../InputSearch';
 import SelectToggle from './SelectToggle';
 import SelectList from './SelectList';
 import defaultLocale from './utils/defaultLocale';
-
 const paddingStyles = p => {
   const paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
   return css`
     padding: calc(${paddingVertical}em - 1px) 0;
   `;
 };
-
 const openedStyles = p => p.opened && !p.unbordered && css`
     border-color: ${clr(p.theme.inputFocusColorBorder)};
     box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};
   `;
-
 const unborderedStyles = p => p.unbordered && css`
     border: 0;
     box-shadow: none !important;
     ${transitionStyles('background-color')(p)};
   `;
-
 const unborderedHoverStyles = p => p.unbordered && !p.disabled && css`
     @media (hover: hover) {
       &:hover,
@@ -40,7 +35,6 @@ const unborderedHoverStyles = p => p.unbordered && !p.disabled && css`
       }
     }
   `;
-
 export const SelectContainer = styled(InputContainer, omitEmotionProps('opened', 'unbordered', 'disabled'))`
   cursor: ${p => !p.disabled ? 'pointer' : 'not-allowed'};
   user-select: none;
@@ -77,10 +71,10 @@ const InputSearchContainer = styled.div`
   padding: ${p => p.theme.menuPaddingVertical}em
     ${p => p.theme.inputPaddingHorizontal}em 0;
 `;
+
 /**
  * The component that allows to pick a value from predefined options.
  */
-
 const Select = /*#__PURE__*/forwardRef(({
   options = [],
   left,
@@ -117,11 +111,11 @@ const Select = /*#__PURE__*/forwardRef(({
     defaultValue,
     onChange
   });
+
   /**
    * Detect the width of the container when the select was opened and update
    * it when either the container size or the window size has been changed.
    */
-
   const resizeHandler = useCallback(() => {
     window.requestAnimationFrame(() => {
       if (!opened || !containerRef.current) return;
@@ -132,8 +126,9 @@ const Select = /*#__PURE__*/forwardRef(({
   }, [opened, containerRef, width]);
   useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);
   useResizeObserver(containerRef, resizeHandler);
-  useEvent(typeof window !== 'undefined' ? window : undefined, 'resize', resizeHandler); // Replace the aria-haspopup attribute from menu to listbox
+  useEvent(typeof window !== 'undefined' ? window : undefined, 'resize', resizeHandler);
 
+  // Replace the aria-haspopup attribute from menu to listbox
   useBrowserLayoutEffect(() => {
     if (!containerRef.current) return;
     containerRef.current.setAttribute('aria-haspopup', 'listbox');
@@ -158,7 +153,6 @@ const Select = /*#__PURE__*/forwardRef(({
     },
     onKeyDown: e => {
       if (disabled) return;
-
       if (['Enter', ' '].includes(e.key)) {
         setOpened(!opened);
         e.preventDefault();

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useRef","useState","transitionStyles","omitEmotionProps","useEvent","useForwardedRef","useForwardedState","useResizeObserver","useBrowserLayoutEffect","styled","m","css","clr","InputContainer","Menu","InputSearch","SelectToggle","SelectList","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","resizeHandler","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","focus","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useEvent,\n  useForwardedRef,\n  useForwardedState,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport { InputContainer } from '../Input';\nimport Menu from '../Menu';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport SelectToggle from './SelectToggle';\nimport SelectList, { OptionProps } from './SelectList';\nimport { PopoverProps } from '../Popover';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n  extends JsxDivProps,\n    WithSize,\n    Pick<PopoverProps, 'placement'> {\n  /**\n   * Options of the select.\n   * @default undefined\n   */\n  options?: OptionProps[];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the select.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the search input visible.\n   * @default false\n   */\n  searchVisible?: boolean;\n  /**\n   * Props of the search input.\n   * @default undefined\n   */\n  searchProps?: InputSearchProps;\n  /**\n   * Text displayed when there are no list items.\n   * @default Not found\n   */\n  notFoundText?: string;\n  /**\n   * Whether the border is hidden.\n   * @default false\n   */\n  unbordered?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the select is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the select has the clear button.\n   * @default false\n   */\n  clearVisible?: boolean;\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 inside of the visible \"window\" to render.\n   * @default 6\n   */\n  visibleCount?: 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 max number of options that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: SelectLocale;\n  /**\n   * Selected options.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n}\n\nconst paddingStyles = (p) => {\n  const paddingVertical =\n    (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n  return css`\n    padding: calc(${paddingVertical}em - 1px) 0;\n  `;\n};\n\nconst openedStyles = (p) =>\n  p.opened &&\n  !p.unbordered &&\n  css`\n    border-color: ${clr(p.theme.inputFocusColorBorder)};\n    box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n  `;\n\nconst unborderedStyles = (p) =>\n  p.unbordered &&\n  css`\n    border: 0;\n    box-shadow: none !important;\n    ${transitionStyles('background-color')(p)};\n  `;\n\nconst unborderedHoverStyles = (p) =>\n  p.unbordered &&\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n      }\n    }\n  `;\n\ninterface SelectContainerProps {\n  opened: boolean;\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const SelectContainer = styled(\n  InputContainer,\n  omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n  cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  height: unset;\n  min-height: ${(p) => p.theme.baseHeight}em;\n\n  ${paddingStyles};\n  ${openedStyles};\n  ${unborderedStyles};\n  ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n  width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: unset;\n\n  ${m.min.xs} {\n    width: ${(p) => p.width}px;\n  }\n`;\n\nconst NotFound = styled.div`\n  height: ${(p) => p.theme.menuItemHeight}em;\n  display: flex;\n  align-items: center;\n\n  padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n  color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n  padding: ${(p) => p.theme.menuPaddingVertical}em\n    ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      options = [],\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      searchVisible = false,\n      searchProps = {},\n      notFoundText = 'Not found',\n      unbordered = false,\n      loading = false,\n      disabled = false,\n      clearVisible = false,\n      threshold = 10,\n      visibleCount = 6,\n      overscanCount = 10,\n      maxSelectedItems = 1,\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      onLoadNext = () => {},\n      size,\n      placement,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [width, setWidth] = useState(0);\n    const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    /**\n     * Detect the width of the container when the select was opened and update\n     * it when either the container size or the window size has been changed.\n     */\n    const resizeHandler = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!opened || !containerRef.current) return;\n        const nextWidth = containerRef.current.getBoundingClientRect().width;\n        if (width === nextWidth) return;\n        setWidth(nextWidth);\n      });\n    }, [opened, containerRef, width]);\n    useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n    useResizeObserver(containerRef, resizeHandler);\n    useEvent(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'resize',\n      resizeHandler\n    );\n\n    // Replace the aria-haspopup attribute from menu to listbox\n    useBrowserLayoutEffect(() => {\n      if (!containerRef.current) return;\n      containerRef.current.setAttribute('aria-haspopup', 'listbox');\n    }, []);\n\n    const selectedItems = useMemo(\n      () =>\n        (forwardedValue || []).map((v) => {\n          const option = (options || []).find((item) => item.value === v);\n          return { title: option ? option.title || '' : '', value: v };\n        }),\n      [forwardedValue, options]\n    );\n\n    const listBoxId = useMemo(\n      () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          unbordered={unbordered}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-disabled={disabled}\n          aria-busy={loading}\n          aria-haspopup='listbox'\n          aria-owns={listBoxId}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <SelectToggle\n            selectedItems={selectedItems}\n            onDelete={(v) =>\n              setForwardedValue(\n                (forwardedValue || []).filter((item) => item !== v)\n              )\n            }\n            onClear={() => {\n              setForwardedValue([]);\n              if (!containerRef.current) return;\n              containerRef.current.focus();\n            }}\n            opened={opened}\n            multiple={maxSelectedItems !== 1}\n            placeholder={placeholder}\n            left={left}\n            leftHasPadding={leftHasPadding}\n            right={right}\n            rightHasPadding={rightHasPadding}\n            unbordered={unbordered}\n            disabled={disabled}\n            clearVisible={clearVisible}\n            loading={loading}\n            locale={locale}\n          />\n        </SelectContainer>\n\n        <SelectMenu\n          trigger={containerRef}\n          visible={opened}\n          onClose={() => setOpened(false)}\n          size={size}\n          width={width}\n          closeOnSelect={maxSelectedItems === 1}\n          modalTitle={placeholder}\n          placement={placement}\n        >\n          {searchVisible && (\n            <InputSearchContainer ref={inputSearchContainerRef}>\n              <InputSearch {...searchProps} />\n            </InputSearchContainer>\n          )}\n\n          {options.length > 0 ? (\n            <SelectList\n              searchVisible={searchVisible}\n              options={options}\n              visibleCount={visibleCount}\n              overscanCount={overscanCount}\n              threshold={threshold}\n              onLoadNext={onLoadNext}\n              maxSelectedItems={maxSelectedItems}\n              containerRef={containerRef}\n              value={forwardedValue}\n              onChange={setForwardedValue}\n              id={listBoxId}\n              size={size}\n            />\n          ) : (\n            <NotFound>{notFoundText}</NotFound>\n          )}\n        </SelectMenu>\n      </>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,UADF,EAEEC,WAFF,EAGEC,OAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,SAASC,gBAAT,QAA2C,mBAA3C;AACA,SACEC,gBADF,EAEEC,QAFF,EAGEC,eAHF,EAIEC,iBAJF,EAKEC,iBALF,EAMEC,sBANF,QAOO,kBAPP;AAQA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,cAAT,QAA+B,UAA/B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,WAAP,MAA8C,gBAA9C;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,UAAP,MAAwC,cAAxC;AAEA,OAAOC,aAAP,MAA4C,uBAA5C;;AA4HA,MAAMC,aAAa,GAAIC,CAAD,IAAO;EAC3B,MAAMC,eAAe,GACnB,CAACD,CAAC,CAACE,KAAF,CAAQC,UAAR,GAAqBH,CAAC,CAACE,KAAF,CAAQE,0BAA9B,IAA4D,CAD9D;EAGA,OAAOb,GAAI;AACb,oBAAoBU,eAAgB;AACpC,GAFE;AAGD,CAPD;;AASA,MAAMI,YAAY,GAAIL,CAAD,IACnBA,CAAC,CAACM,MAAF,IACA,CAACN,CAAC,CAACO,UADH,IAEAhB,GAAI;AACN,oBAAoBC,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQM,qBAAT,CAAgC;AACvD,+BAA+BhB,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQO,qBAAT,CAAgC;AAClE,GANA;;AAQA,MAAMC,gBAAgB,GAAIV,CAAD,IACvBA,CAAC,CAACO,UAAF,IACAhB,GAAI;AACN;AACA;AACA,MAAMT,gBAAgB,CAAC,kBAAD,CAAhB,CAAqCkB,CAArC,CAAwC;AAC9C,GANA;;AAQA,MAAMW,qBAAqB,GAAIX,CAAD,IAC5BA,CAAC,CAACO,UAAF,IACA,CAACP,CAAC,CAACY,QADH,IAEArB,GAAI;AACN;AACA;AACA;AACA,4BAA4BC,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQW,uBAAT,CAAkC;AACjE;AACA;AACA,GAVA;;AAiBA,OAAO,MAAMC,eAAe,GAAGzB,MAAM,CACnCI,cADmC,EAEnCV,gBAAgB,CAAC,QAAD,EAAW,YAAX,EAAyB,UAAzB,CAFmB,CAGb;AACxB,YAAaiB,CAAD,IAAQ,CAACA,CAAC,CAACY,QAAH,GAAc,SAAd,GAA0B,aAAe;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,gBAAiBZ,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQC,UAAW;AAC1C;AACA,IAAIJ,aAAc;AAClB,IAAIM,YAAa;AACjB,IAAIK,gBAAiB;AACrB,IAAIC,qBAAsB;AAC1B,CAjBO;AAsBP,MAAMI,UAAU,GAAG1B,MAAM,CAACK,IAAD,EAAOX,gBAAgB,CAAC,OAAD,CAAvB,CAAmD;AAC5E;AACA;AACA;AACA;AACA,IAAIO,CAAC,CAAC0B,GAAF,CAAMC,EAAG;AACb,aAAcjB,CAAD,IAAOA,CAAC,CAACkB,KAAM;AAC5B;AACA,CARA;AAUA,MAAMC,QAAQ,GAAG9B,MAAM,CAAC+B,GAAI;AAC5B,YAAapB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQmB,cAAe;AAC1C;AACA;AACA;AACA,eAAgBrB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQoB,sBAAuB;AACrD,WAAYtB,CAAD,IAAOR,GAAG,CAACQ,CAAC,CAACE,KAAF,CAAQqB,uBAAT,CAAkC;AACvD,CAPA;AASA,MAAMC,oBAAoB,GAAGnC,MAAM,CAAC+B,GAAI;AACxC,aAAcpB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQuB,mBAAoB;AAChD,MAAOzB,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQoB,sBAAuB;AAC5C,CAHA;AAKA;AACA;AACA;;AACA,MAAMI,MAAM,gBAAGjD,UAAU,CACvB,CACE;EACEkD,OAAO,GAAG,EADZ;EAEEC,IAFF;EAGEC,cAAc,GAAG,KAHnB;EAIEC,KAJF;EAKEC,eAAe,GAAG,KALpB;EAMEC,WANF;EAOEC,aAAa,GAAG,KAPlB;EAQEC,WAAW,GAAG,EARhB;EASEC,YAAY,GAAG,WATjB;EAUE5B,UAAU,GAAG,KAVf;EAWE6B,OAAO,GAAG,KAXZ;EAYExB,QAAQ,GAAG,KAZb;EAaEyB,YAAY,GAAG,KAbjB;EAcEC,SAAS,GAAG,EAdd;EAeEC,YAAY,GAAG,CAfjB;EAgBEC,aAAa,GAAG,EAhBlB;EAiBEC,gBAAgB,GAAG,CAjBrB;EAkBEC,MAAM,GAAG5C,aAlBX;EAmBE6C,KAnBF;EAoBEC,YApBF;EAqBEC,QArBF;EAsBEC,UAAU,GAAG,MAAM,CAAE,CAtBvB;EAuBEC,IAvBF;EAwBEC,SAxBF;EAyBE,GAAGC;AAzBL,CADF,EA4BEC,GA5BF,KA6BK;EACH,MAAM,CAACC,YAAD,EAAeC,kBAAf,IAAqCnE,eAAe,CAACiE,GAAD,CAA1D;EACA,MAAM,CAAChC,KAAD,EAAQmC,QAAR,IAAoBxE,QAAQ,CAAC,CAAD,CAAlC;EACA,MAAMyE,uBAAuB,GAAG1E,MAAM,CAAiB,IAAjB,CAAtC;EACA,MAAM,CAAC0B,MAAD,EAASiD,SAAT,IAAsB1E,QAAQ,CAAC,KAAD,CAApC;EACA,MAAM,CAAC2E,cAAD,EAAiBC,iBAAjB,IAAsCvE,iBAAiB,CAAC;IAC5DyD,KAD4D;IAE5DC,YAF4D;IAG5DC;EAH4D,CAAD,CAA7D;EAMA;AACJ;AACA;AACA;;EACI,MAAMa,aAAa,GAAGhF,WAAW,CAAC,MAAM;IACtCiF,MAAM,CAACC,qBAAP,CAA6B,MAAM;MACjC,IAAI,CAACtD,MAAD,IAAW,CAAC6C,YAAY,CAACU,OAA7B,EAAsC;MACtC,MAAMC,SAAS,GAAGX,YAAY,CAACU,OAAb,CAAqBE,qBAArB,GAA6C7C,KAA/D;MACA,IAAIA,KAAK,KAAK4C,SAAd,EAAyB;MACzBT,QAAQ,CAACS,SAAD,CAAR;IACD,CALD;EAMD,CAPgC,EAO9B,CAACxD,MAAD,EAAS6C,YAAT,EAAuBjC,KAAvB,CAP8B,CAAjC;EAQA9B,sBAAsB,CAAC,MAAMsE,aAAa,EAApB,EAAwB,CAACA,aAAD,CAAxB,CAAtB;EACAvE,iBAAiB,CAACgE,YAAD,EAAeO,aAAf,CAAjB;EACA1E,QAAQ,CACL,OAAO2E,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCK,SADpC,EAEN,QAFM,EAGNN,aAHM,CAAR,CAzBG,CA+BH;;EACAtE,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAAC+D,YAAY,CAACU,OAAlB,EAA2B;IAC3BV,YAAY,CAACU,OAAb,CAAqBI,YAArB,CAAkC,eAAlC,EAAmD,SAAnD;EACD,CAHqB,EAGnB,EAHmB,CAAtB;EAKA,MAAMC,aAAa,GAAGvF,OAAO,CAC3B,MACE,CAAC6E,cAAc,IAAI,EAAnB,EAAuBW,GAAvB,CAA4BC,CAAD,IAAO;IAChC,MAAMC,MAAM,GAAG,CAAC1C,OAAO,IAAI,EAAZ,EAAgB2C,IAAhB,CAAsBC,IAAD,IAAUA,IAAI,CAAC5B,KAAL,KAAeyB,CAA9C,CAAf;IACA,OAAO;MAAEI,KAAK,EAAEH,MAAM,GAAGA,MAAM,CAACG,KAAP,IAAgB,EAAnB,GAAwB,EAAvC;MAA2C7B,KAAK,EAAEyB;IAAlD,CAAP;EACD,CAHD,CAFyB,EAM3B,CAACZ,cAAD,EAAiB7B,OAAjB,CAN2B,CAA7B;EASA,MAAM8C,SAAS,GAAG9F,OAAO,CACvB,MAAO,WAAU+F,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EADlC,EAEvB,EAFuB,CAAzB;EAKA,oBACE,uDACE,oBAAC,eAAD;IACE,MAAM,EAAEvE,MADV;IAEE,UAAU,EAAEC,UAFd;IAGE,QAAQ,EAAEK,QAHZ;IAIE,IAAI,EAAEmC,IAJR;IAKE,QAAQ,EAAE,CAACnC,QAAD,GAAY,CAAZ,GAAgB,CAAC,CAL7B;IAME,OAAO,EAAE,MAAM;MACb,IAAIA,QAAJ,EAAc;MACd2C,SAAS,CAAC,CAACjD,MAAF,CAAT;IACD,CATH;IAUE,SAAS,EAAGwE,CAAD,IAAO;MAChB,IAAIlE,QAAJ,EAAc;;MACd,IAAI,CAAC,OAAD,EAAU,GAAV,EAAemE,QAAf,CAAwBD,CAAC,CAACE,GAA1B,CAAJ,EAAoC;QAClCzB,SAAS,CAAC,CAACjD,MAAF,CAAT;QACAwE,CAAC,CAACG,cAAF;MACD;IACF,CAhBH;IAiBE,WAAW,EAAGH,CAAD,IAAOA,CAAC,CAACG,cAAF,EAjBtB;IAkBE,IAAI,EAAC,UAlBP;IAmBE,iBAAerE,QAnBjB;IAoBE,aAAWwB,OApBb;IAqBE,iBAAc,SArBhB;IAsBE,aAAWqC;EAtBb,GAuBMxB,IAvBN;IAwBE,GAAG,EAAEG;EAxBP,iBA0BE,oBAAC,YAAD;IACE,aAAa,EAAEc,aADjB;IAEE,QAAQ,EAAGE,CAAD,IACRX,iBAAiB,CACf,CAACD,cAAc,IAAI,EAAnB,EAAuB0B,MAAvB,CAA+BX,IAAD,IAAUA,IAAI,KAAKH,CAAjD,CADe,CAHrB;IAOE,OAAO,EAAE,MAAM;MACbX,iBAAiB,CAAC,EAAD,CAAjB;MACA,IAAI,CAACN,YAAY,CAACU,OAAlB,EAA2B;MAC3BV,YAAY,CAACU,OAAb,CAAqBsB,KAArB;IACD,CAXH;IAYE,MAAM,EAAE7E,MAZV;IAaE,QAAQ,EAAEmC,gBAAgB,KAAK,CAbjC;IAcE,WAAW,EAAET,WAdf;IAeE,IAAI,EAAEJ,IAfR;IAgBE,cAAc,EAAEC,cAhBlB;IAiBE,KAAK,EAAEC,KAjBT;IAkBE,eAAe,EAAEC,eAlBnB;IAmBE,UAAU,EAAExB,UAnBd;IAoBE,QAAQ,EAAEK,QApBZ;IAqBE,YAAY,EAAEyB,YArBhB;IAsBE,OAAO,EAAED,OAtBX;IAuBE,MAAM,EAAEM;EAvBV,EA1BF,CADF,eAsDE,oBAAC,UAAD;IACE,OAAO,EAAES,YADX;IAEE,OAAO,EAAE7C,MAFX;IAGE,OAAO,EAAE,MAAMiD,SAAS,CAAC,KAAD,CAH1B;IAIE,IAAI,EAAER,IAJR;IAKE,KAAK,EAAE7B,KALT;IAME,aAAa,EAAEuB,gBAAgB,KAAK,CANtC;IAOE,UAAU,EAAET,WAPd;IAQE,SAAS,EAAEgB;EARb,GAUGf,aAAa,iBACZ,oBAAC,oBAAD;IAAsB,GAAG,EAAEqB;EAA3B,gBACE,oBAAC,WAAD,EAAiBpB,WAAjB,CADF,CAXJ,EAgBGP,OAAO,CAACyD,MAAR,GAAiB,CAAjB,gBACC,oBAAC,UAAD;IACE,aAAa,EAAEnD,aADjB;IAEE,OAAO,EAAEN,OAFX;IAGE,YAAY,EAAEY,YAHhB;IAIE,aAAa,EAAEC,aAJjB;IAKE,SAAS,EAAEF,SALb;IAME,UAAU,EAAEQ,UANd;IAOE,gBAAgB,EAAEL,gBAPpB;IAQE,YAAY,EAAEU,YARhB;IASE,KAAK,EAAEK,cATT;IAUE,QAAQ,EAAEC,iBAVZ;IAWE,EAAE,EAAEgB,SAXN;IAYE,IAAI,EAAE1B;EAZR,EADD,gBAgBC,oBAAC,QAAD,QAAWZ,YAAX,CAhCJ,CAtDF,CADF;AA4FD,CA7KsB,CAAzB;AAgLAT,MAAM,CAAC2D,WAAP,GAAqB,QAArB;AAEA,eAAe3D,MAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useRef","useState","transitionStyles","omitEmotionProps","useEvent","useForwardedRef","useForwardedState","useResizeObserver","useBrowserLayoutEffect","styled","m","css","clr","InputContainer","Menu","InputSearch","SelectToggle","SelectList","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","resizeHandler","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","focus","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport {\n  omitEmotionProps,\n  useEvent,\n  useForwardedRef,\n  useForwardedState,\n  useResizeObserver,\n  useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport { InputContainer } from '../Input';\nimport Menu from '../Menu';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport SelectToggle from './SelectToggle';\nimport SelectList, { OptionProps } from './SelectList';\nimport { PopoverProps } from '../Popover';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n  extends JsxDivProps,\n    WithSize,\n    Pick<PopoverProps, 'placement'> {\n  /**\n   * Options of the select.\n   * @default undefined\n   */\n  options?: OptionProps[];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the select.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the search input visible.\n   * @default false\n   */\n  searchVisible?: boolean;\n  /**\n   * Props of the search input.\n   * @default undefined\n   */\n  searchProps?: InputSearchProps;\n  /**\n   * Text displayed when there are no list items.\n   * @default Not found\n   */\n  notFoundText?: string;\n  /**\n   * Whether the border is hidden.\n   * @default false\n   */\n  unbordered?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the select is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the select has the clear button.\n   * @default false\n   */\n  clearVisible?: boolean;\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 inside of the visible \"window\" to render.\n   * @default 6\n   */\n  visibleCount?: 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 max number of options that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: SelectLocale;\n  /**\n   * Selected options.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n  /**\n   * The callback to load more items.\n   * @default undefined\n   */\n  onLoadNext?: () => void;\n}\n\nconst paddingStyles = (p) => {\n  const paddingVertical =\n    (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n  return css`\n    padding: calc(${paddingVertical}em - 1px) 0;\n  `;\n};\n\nconst openedStyles = (p) =>\n  p.opened &&\n  !p.unbordered &&\n  css`\n    border-color: ${clr(p.theme.inputFocusColorBorder)};\n    box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n  `;\n\nconst unborderedStyles = (p) =>\n  p.unbordered &&\n  css`\n    border: 0;\n    box-shadow: none !important;\n    ${transitionStyles('background-color')(p)};\n  `;\n\nconst unborderedHoverStyles = (p) =>\n  p.unbordered &&\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n      }\n    }\n  `;\n\ninterface SelectContainerProps {\n  opened: boolean;\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const SelectContainer = styled(\n  InputContainer,\n  omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n  cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  height: unset;\n  min-height: ${(p) => p.theme.baseHeight}em;\n\n  ${paddingStyles};\n  ${openedStyles};\n  ${unborderedStyles};\n  ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n  width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: unset;\n\n  ${m.min.xs} {\n    width: ${(p) => p.width}px;\n  }\n`;\n\nconst NotFound = styled.div`\n  height: ${(p) => p.theme.menuItemHeight}em;\n  display: flex;\n  align-items: center;\n\n  padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n  color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n  padding: ${(p) => p.theme.menuPaddingVertical}em\n    ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      options = [],\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      searchVisible = false,\n      searchProps = {},\n      notFoundText = 'Not found',\n      unbordered = false,\n      loading = false,\n      disabled = false,\n      clearVisible = false,\n      threshold = 10,\n      visibleCount = 6,\n      overscanCount = 10,\n      maxSelectedItems = 1,\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      onLoadNext = () => {},\n      size,\n      placement,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [width, setWidth] = useState(0);\n    const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    /**\n     * Detect the width of the container when the select was opened and update\n     * it when either the container size or the window size has been changed.\n     */\n    const resizeHandler = useCallback(() => {\n      window.requestAnimationFrame(() => {\n        if (!opened || !containerRef.current) return;\n        const nextWidth = containerRef.current.getBoundingClientRect().width;\n        if (width === nextWidth) return;\n        setWidth(nextWidth);\n      });\n    }, [opened, containerRef, width]);\n    useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n    useResizeObserver(containerRef, resizeHandler);\n    useEvent(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'resize',\n      resizeHandler\n    );\n\n    // Replace the aria-haspopup attribute from menu to listbox\n    useBrowserLayoutEffect(() => {\n      if (!containerRef.current) return;\n      containerRef.current.setAttribute('aria-haspopup', 'listbox');\n    }, []);\n\n    const selectedItems = useMemo(\n      () =>\n        (forwardedValue || []).map((v) => {\n          const option = (options || []).find((item) => item.value === v);\n          return { title: option ? option.title || '' : '', value: v };\n        }),\n      [forwardedValue, options]\n    );\n\n    const listBoxId = useMemo(\n      () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          unbordered={unbordered}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-disabled={disabled}\n          aria-busy={loading}\n          aria-haspopup='listbox'\n          aria-owns={listBoxId}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <SelectToggle\n            selectedItems={selectedItems}\n            onDelete={(v) =>\n              setForwardedValue(\n                (forwardedValue || []).filter((item) => item !== v)\n              )\n            }\n            onClear={() => {\n              setForwardedValue([]);\n              if (!containerRef.current) return;\n              containerRef.current.focus();\n            }}\n            opened={opened}\n            multiple={maxSelectedItems !== 1}\n            placeholder={placeholder}\n            left={left}\n            leftHasPadding={leftHasPadding}\n            right={right}\n            rightHasPadding={rightHasPadding}\n            unbordered={unbordered}\n            disabled={disabled}\n            clearVisible={clearVisible}\n            loading={loading}\n            locale={locale}\n          />\n        </SelectContainer>\n\n        <SelectMenu\n          trigger={containerRef}\n          visible={opened}\n          onClose={() => setOpened(false)}\n          size={size}\n          width={width}\n          closeOnSelect={maxSelectedItems === 1}\n          modalTitle={placeholder}\n          placement={placement}\n        >\n          {searchVisible && (\n            <InputSearchContainer ref={inputSearchContainerRef}>\n              <InputSearch {...searchProps} />\n            </InputSearchContainer>\n          )}\n\n          {options.length > 0 ? (\n            <SelectList\n              searchVisible={searchVisible}\n              options={options}\n              visibleCount={visibleCount}\n              overscanCount={overscanCount}\n              threshold={threshold}\n              onLoadNext={onLoadNext}\n              maxSelectedItems={maxSelectedItems}\n              containerRef={containerRef}\n              value={forwardedValue}\n              onChange={setForwardedValue}\n              id={listBoxId}\n              size={size}\n            />\n          ) : (\n            <NotFound>{notFoundText}</NotFound>\n          )}\n        </SelectMenu>\n      </>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":";AAAA,OAAOA,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,gBAAgB,QAAkB,mBAAmB;AAC9D,SACEC,gBAAgB,EAChBC,QAAQ,EACRC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,sBAAsB,QACjB,kBAAkB;AACzB,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,cAAc,QAAQ,UAAU;AACzC,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAA4B,gBAAgB;AAC9D,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,UAAU,MAAuB,cAAc;AAEtD,OAAOC,aAAa,MAAwB,uBAAuB;AA4HnE,MAAMC,aAAa,GAAIC,CAAC,IAAK;EAC3B,MAAMC,eAAe,GACnB,CAACD,CAAC,CAACE,KAAK,CAACC,UAAU,GAAGH,CAAC,CAACE,KAAK,CAACE,0BAA0B,IAAI,CAAC;EAE/D,OAAOb,GAAI;AACb,oBAAoBU,eAAgB;AACpC,GAAG;AACH,CAAC;AAED,MAAMI,YAAY,GAAIL,CAAC,IACrBA,CAAC,CAACM,MAAM,IACR,CAACN,CAAC,CAACO,UAAU,IACbhB,GAAI;AACN,oBAAoBC,GAAG,CAACQ,CAAC,CAACE,KAAK,CAACM,qBAAqB,CAAE;AACvD,+BAA+BhB,GAAG,CAACQ,CAAC,CAACE,KAAK,CAACO,qBAAqB,CAAE;AAClE,GAAG;AAEH,MAAMC,gBAAgB,GAAIV,CAAC,IACzBA,CAAC,CAACO,UAAU,IACZhB,GAAI;AACN;AACA;AACA,MAAMT,gBAAgB,CAAC,kBAAkB,CAAC,CAACkB,CAAC,CAAE;AAC9C,GAAG;AAEH,MAAMW,qBAAqB,GAAIX,CAAC,IAC9BA,CAAC,CAACO,UAAU,IACZ,CAACP,CAAC,CAACY,QAAQ,IACXrB,GAAI;AACN;AACA;AACA;AACA,4BAA4BC,GAAG,CAACQ,CAAC,CAACE,KAAK,CAACW,uBAAuB,CAAE;AACjE;AACA;AACA,GAAG;AAOH,OAAO,MAAMC,eAAe,GAAGzB,MAAM,CACnCI,cAAc,EACdV,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,UAAU,CAAC,CAC9B;AACxB,YAAaiB,CAAC,IAAM,CAACA,CAAC,CAACY,QAAQ,GAAG,SAAS,GAAG,aAAe;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,gBAAiBZ,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACC,UAAW;AAC1C;AACA,IAAIJ,aAAc;AAClB,IAAIM,YAAa;AACjB,IAAIK,gBAAiB;AACrB,IAAIC,qBAAsB;AAC1B,CAAC;AAKD,MAAMI,UAAU,GAAG1B,MAAM,CAACK,IAAI,EAAEX,gBAAgB,CAAC,OAAO,CAAC,CAAmB;AAC5E;AACA;AACA;AACA;AACA,IAAIO,CAAC,CAAC0B,GAAG,CAACC,EAAG;AACb,aAAcjB,CAAC,IAAKA,CAAC,CAACkB,KAAM;AAC5B;AACA,CAAC;AAED,MAAMC,QAAQ,GAAG9B,MAAM,CAAC+B,GAAI;AAC5B,YAAapB,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACmB,cAAe;AAC1C;AACA;AACA;AACA,eAAgBrB,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACoB,sBAAuB;AACrD,WAAYtB,CAAC,IAAKR,GAAG,CAACQ,CAAC,CAACE,KAAK,CAACqB,uBAAuB,CAAE;AACvD,CAAC;AAED,MAAMC,oBAAoB,GAAGnC,MAAM,CAAC+B,GAAI;AACxC,aAAcpB,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACuB,mBAAoB;AAChD,MAAOzB,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACoB,sBAAuB;AAC5C,CAAC;;AAED;AACA;AACA;AACA,MAAMI,MAAM,gBAAGjD,UAAU,CACvB,CACE;EACEkD,OAAO,GAAG,EAAE;EACZC,IAAI;EACJC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,eAAe,GAAG,KAAK;EACvBC,WAAW;EACXC,aAAa,GAAG,KAAK;EACrBC,WAAW,GAAG,CAAC,CAAC;EAChBC,YAAY,GAAG,WAAW;EAC1B5B,UAAU,GAAG,KAAK;EAClB6B,OAAO,GAAG,KAAK;EACfxB,QAAQ,GAAG,KAAK;EAChByB,YAAY,GAAG,KAAK;EACpBC,SAAS,GAAG,EAAE;EACdC,YAAY,GAAG,CAAC;EAChBC,aAAa,GAAG,EAAE;EAClBC,gBAAgB,GAAG,CAAC;EACpBC,MAAM,GAAG5C,aAAa;EACtB6C,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,UAAU,GAAG,MAAM,CAAC,CAAC;EACrBC,IAAI;EACJC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,YAAY,EAAEC,kBAAkB,CAAC,GAAGnE,eAAe,CAACiE,GAAG,CAAC;EAC/D,MAAM,CAAChC,KAAK,EAAEmC,QAAQ,CAAC,GAAGxE,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAMyE,uBAAuB,GAAG1E,MAAM,CAAiB,IAAI,CAAC;EAC5D,MAAM,CAAC0B,MAAM,EAAEiD,SAAS,CAAC,GAAG1E,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC2E,cAAc,EAAEC,iBAAiB,CAAC,GAAGvE,iBAAiB,CAAC;IAC5DyD,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;;EAEF;AACJ;AACA;AACA;EACI,MAAMa,aAAa,GAAGhF,WAAW,CAAC,MAAM;IACtCiF,MAAM,CAACC,qBAAqB,CAAC,MAAM;MACjC,IAAI,CAACtD,MAAM,IAAI,CAAC6C,YAAY,CAACU,OAAO,EAAE;MACtC,MAAMC,SAAS,GAAGX,YAAY,CAACU,OAAO,CAACE,qBAAqB,EAAE,CAAC7C,KAAK;MACpE,IAAIA,KAAK,KAAK4C,SAAS,EAAE;MACzBT,QAAQ,CAACS,SAAS,CAAC;IACrB,CAAC,CAAC;EACJ,CAAC,EAAE,CAACxD,MAAM,EAAE6C,YAAY,EAAEjC,KAAK,CAAC,CAAC;EACjC9B,sBAAsB,CAAC,MAAMsE,aAAa,EAAE,EAAE,CAACA,aAAa,CAAC,CAAC;EAC9DvE,iBAAiB,CAACgE,YAAY,EAAEO,aAAa,CAAC;EAC9C1E,QAAQ,CACL,OAAO2E,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGK,SAAS,EACnD,QAAQ,EACRN,aAAa,CACd;;EAED;EACAtE,sBAAsB,CAAC,MAAM;IAC3B,IAAI,CAAC+D,YAAY,CAACU,OAAO,EAAE;IAC3BV,YAAY,CAACU,OAAO,CAACI,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,aAAa,GAAGvF,OAAO,CAC3B,MACE,CAAC6E,cAAc,IAAI,EAAE,EAAEW,GAAG,CAAEC,CAAC,IAAK;IAChC,MAAMC,MAAM,GAAG,CAAC1C,OAAO,IAAI,EAAE,EAAE2C,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAAC5B,KAAK,KAAKyB,CAAC,CAAC;IAC/D,OAAO;MAAEI,KAAK,EAAEH,MAAM,GAAGA,MAAM,CAACG,KAAK,IAAI,EAAE,GAAG,EAAE;MAAE7B,KAAK,EAAEyB;IAAE,CAAC;EAC9D,CAAC,CAAC,EACJ,CAACZ,cAAc,EAAE7B,OAAO,CAAC,CAC1B;EAED,MAAM8C,SAAS,GAAG9F,OAAO,CACvB,MAAO,WAAU+F,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAE,EAAC,EAC1D,EAAE,CACH;EAED,oBACE,uDACE,oBAAC,eAAe;IACd,MAAM,EAAEvE,MAAO;IACf,UAAU,EAAEC,UAAW;IACvB,QAAQ,EAAEK,QAAS;IACnB,IAAI,EAAEmC,IAAK;IACX,QAAQ,EAAE,CAACnC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,MAAM;MACb,IAAIA,QAAQ,EAAE;MACd2C,SAAS,CAAC,CAACjD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAGwE,CAAC,IAAK;MAChB,IAAIlE,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACmE,QAAQ,CAACD,CAAC,CAACE,GAAG,CAAC,EAAE;QAClCzB,SAAS,CAAC,CAACjD,MAAM,CAAC;QAClBwE,CAAC,CAACG,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAGH,CAAC,IAAKA,CAAC,CAACG,cAAc,EAAG;IACvC,IAAI,EAAC,UAAU;IACf,iBAAerE,QAAS;IACxB,aAAWwB,OAAQ;IACnB,iBAAc,SAAS;IACvB,aAAWqC;EAAU,GACjBxB,IAAI;IACR,GAAG,EAAEG;EAAmB,iBAExB,oBAAC,YAAY;IACX,aAAa,EAAEc,aAAc;IAC7B,QAAQ,EAAGE,CAAC,IACVX,iBAAiB,CACf,CAACD,cAAc,IAAI,EAAE,EAAE0B,MAAM,CAAEX,IAAI,IAAKA,IAAI,KAAKH,CAAC,CAAC,CAEtD;IACD,OAAO,EAAE,MAAM;MACbX,iBAAiB,CAAC,EAAE,CAAC;MACrB,IAAI,CAACN,YAAY,CAACU,OAAO,EAAE;MAC3BV,YAAY,CAACU,OAAO,CAACsB,KAAK,EAAE;IAC9B,CAAE;IACF,MAAM,EAAE7E,MAAO;IACf,QAAQ,EAAEmC,gBAAgB,KAAK,CAAE;IACjC,WAAW,EAAET,WAAY;IACzB,IAAI,EAAEJ,IAAK;IACX,cAAc,EAAEC,cAAe;IAC/B,KAAK,EAAEC,KAAM;IACb,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAExB,UAAW;IACvB,QAAQ,EAAEK,QAAS;IACnB,YAAY,EAAEyB,YAAa;IAC3B,OAAO,EAAED,OAAQ;IACjB,MAAM,EAAEM;EAAO,EACf,CACc,eAElB,oBAAC,UAAU;IACT,OAAO,EAAES,YAAa;IACtB,OAAO,EAAE7C,MAAO;IAChB,OAAO,EAAE,MAAMiD,SAAS,CAAC,KAAK,CAAE;IAChC,IAAI,EAAER,IAAK;IACX,KAAK,EAAE7B,KAAM;IACb,aAAa,EAAEuB,gBAAgB,KAAK,CAAE;IACtC,UAAU,EAAET,WAAY;IACxB,SAAS,EAAEgB;EAAU,GAEpBf,aAAa,iBACZ,oBAAC,oBAAoB;IAAC,GAAG,EAAEqB;EAAwB,gBACjD,oBAAC,WAAW,EAAKpB,WAAW,CAAI,CAEnC,EAEAP,OAAO,CAACyD,MAAM,GAAG,CAAC,gBACjB,oBAAC,UAAU;IACT,aAAa,EAAEnD,aAAc;IAC7B,OAAO,EAAEN,OAAQ;IACjB,YAAY,EAAEY,YAAa;IAC3B,aAAa,EAAEC,aAAc;IAC7B,SAAS,EAAEF,SAAU;IACrB,UAAU,EAAEQ,UAAW;IACvB,gBAAgB,EAAEL,gBAAiB;IACnC,YAAY,EAAEU,YAAa;IAC3B,KAAK,EAAEK,cAAe;IACtB,QAAQ,EAAEC,iBAAkB;IAC5B,EAAE,EAAEgB,SAAU;IACd,IAAI,EAAE1B;EAAK,EACX,gBAEF,oBAAC,QAAQ,QAAEZ,YAAY,CACxB,CACU,CACZ;AAEP,CAAC,CACF;AAEDT,MAAM,CAAC2D,WAAW,GAAG,QAAQ;AAE7B,eAAe3D,MAAM"}

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

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","deleteLabel","clearLabel"],"sources":["../../../../src/Select/utils/defaultLocale.ts"],"sourcesContent":["export interface SelectLocale {\n  deleteLabel: string;\n  clearLabel: string;\n}\n\nconst defaultLocale: SelectLocale = {\n  deleteLabel: 'Delete',\n  clearLabel: 'Clear',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAKA,MAAMA,aAA2B,GAAG;EAClCC,WAAW,EAAE,QADqB;EAElCC,UAAU,EAAE;AAFsB,CAApC;AAKA,eAAeF,aAAf"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","deleteLabel","clearLabel"],"sources":["../../../../src/Select/utils/defaultLocale.ts"],"sourcesContent":["export interface SelectLocale {\n  deleteLabel: string;\n  clearLabel: string;\n}\n\nconst defaultLocale: SelectLocale = {\n  deleteLabel: 'Delete',\n  clearLabel: 'Clear',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAKA,MAAMA,aAA2B,GAAG;EAClCC,WAAW,EAAE,QAAQ;EACrBC,UAAU,EAAE;AACd,CAAC;AAED,eAAeF,aAAa"}

package/dist/esm/Skeleton/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
 import React, { forwardRef } from 'react';
@@ -24,10 +23,10 @@ const StyledSkeleton = styled('div', omitEmotionProps('width', 'size'))`
   border-radius: ${p => p.theme.borderRadius}em;
   animation: ${SkeletonAnimation} 1.4s ease infinite;
 `;
+
 /**
  * Provides a basic placeholder while a user waits for the content to load.
  */
-
 const Skeleton = /*#__PURE__*/forwardRef(({
   width = '100%',
   ...rest

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","keyframes","React","forwardRef","omitEmotionProps","clr","SkeletonAnimation","StyledSkeleton","p","width","theme","skeletonColorBgFrom","skeletonColorBgTo","borderRadius","Skeleton","rest","ref","displayName"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface SkeletonProps extends JsxDivProps {\n  /**\n   * The width of the skeleton.\n   * @default 100%\n   */\n  width?: string;\n}\n\nconst SkeletonAnimation = keyframes`\n  from { background-position: 100% 50%; }\n  to { background-position: 0 50%; }\n`;\n\ntype StyledSkeletonProps = Required<Pick<SkeletonProps, 'width'>>;\nconst StyledSkeleton = styled(\n  'div',\n  omitEmotionProps('width', 'size')\n)<StyledSkeletonProps>`\n  width: ${(p) => p.width};\n  height: 1em;\n\n  background: linear-gradient(\n    90deg,\n    ${(p) => clr(p.theme.skeletonColorBgFrom)} 25%,\n    ${(p) => clr(p.theme.skeletonColorBgTo)} 37%,\n    ${(p) => clr(p.theme.skeletonColorBgFrom)} 63%\n  );\n  background-size: 400% 100%;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  animation: ${SkeletonAnimation} 1.4s ease infinite;\n`;\n\n/**\n * Provides a basic placeholder while a user waits for the content to load.\n */\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ width = '100%', ...rest }, ref) => (\n    <StyledSkeleton width={width} aria-busy {...rest} ref={ref} />\n  )\n);\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAWA,MAAMC,iBAAiB,GAAGL,SAAU;AACpC;AACA;AACA,CAHA;AAMA,MAAMM,cAAc,GAAGP,MAAM,CAC3B,KAD2B,EAE3BI,gBAAgB,CAAC,OAAD,EAAU,MAAV,CAFW,CAGN;AACvB,WAAYI,CAAD,IAAOA,CAAC,CAACC,KAAM;AAC1B;AACA;AACA;AACA;AACA,MAAOD,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACE,KAAF,CAAQC,mBAAT,CAA8B;AAC9C,MAAOH,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACE,KAAF,CAAQE,iBAAT,CAA4B;AAC5C,MAAOJ,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACE,KAAF,CAAQC,mBAAT,CAA8B;AAC9C;AACA;AACA;AACA,mBAAoBH,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQG,YAAa;AAC/C,eAAeP,iBAAkB;AACjC,CAjBA;AAmBA;AACA;AACA;;AACA,MAAMQ,QAAQ,gBAAGX,UAAU,CACzB,CAAC;EAAEM,KAAK,GAAG,MAAV;EAAkB,GAAGM;AAArB,CAAD,EAA8BC,GAA9B,kBACE,oBAAC,cAAD;EAAgB,KAAK,EAAEP,KAAvB;EAA8B;AAA9B,GAA4CM,IAA5C;EAAkD,GAAG,EAAEC;AAAvD,GAFuB,CAA3B;AAMAF,QAAQ,CAACG,WAAT,GAAuB,UAAvB;AAEA,eAAeH,QAAf"}
+{"version":3,"file":"index.js","names":["styled","keyframes","React","forwardRef","omitEmotionProps","clr","SkeletonAnimation","StyledSkeleton","p","width","theme","skeletonColorBgFrom","skeletonColorBgTo","borderRadius","Skeleton","rest","ref","displayName"],"sources":["../../../src/Skeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface SkeletonProps extends JsxDivProps {\n  /**\n   * The width of the skeleton.\n   * @default 100%\n   */\n  width?: string;\n}\n\nconst SkeletonAnimation = keyframes`\n  from { background-position: 100% 50%; }\n  to { background-position: 0 50%; }\n`;\n\ntype StyledSkeletonProps = Required<Pick<SkeletonProps, 'width'>>;\nconst StyledSkeleton = styled(\n  'div',\n  omitEmotionProps('width', 'size')\n)<StyledSkeletonProps>`\n  width: ${(p) => p.width};\n  height: 1em;\n\n  background: linear-gradient(\n    90deg,\n    ${(p) => clr(p.theme.skeletonColorBgFrom)} 25%,\n    ${(p) => clr(p.theme.skeletonColorBgTo)} 37%,\n    ${(p) => clr(p.theme.skeletonColorBgFrom)} 63%\n  );\n  background-size: 400% 100%;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  animation: ${SkeletonAnimation} 1.4s ease infinite;\n`;\n\n/**\n * Provides a basic placeholder while a user waits for the content to load.\n */\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ width = '100%', ...rest }, ref) => (\n    <StyledSkeleton width={width} aria-busy {...rest} ref={ref} />\n  )\n);\n\nSkeleton.displayName = 'Skeleton';\n\nexport default Skeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AAWxC,MAAMC,iBAAiB,GAAGL,SAAU;AACpC;AACA;AACA,CAAC;AAGD,MAAMM,cAAc,GAAGP,MAAM,CAC3B,KAAK,EACLI,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CACZ;AACvB,WAAYI,CAAC,IAAKA,CAAC,CAACC,KAAM;AAC1B;AACA;AACA;AACA;AACA,MAAOD,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAE;AAC9C,MAAOH,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACE,KAAK,CAACE,iBAAiB,CAAE;AAC5C,MAAOJ,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACE,KAAK,CAACC,mBAAmB,CAAE;AAC9C;AACA;AACA;AACA,mBAAoBH,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACG,YAAa;AAC/C,eAAeP,iBAAkB;AACjC,CAAC;;AAED;AACA;AACA;AACA,MAAMQ,QAAQ,gBAAGX,UAAU,CACzB,CAAC;EAAEM,KAAK,GAAG,MAAM;EAAE,GAAGM;AAAK,CAAC,EAAEC,GAAG,kBAC/B,oBAAC,cAAc;EAAC,KAAK,EAAEP,KAAM;EAAC;AAAS,GAAKM,IAAI;EAAE,GAAG,EAAEC;AAAI,GAC5D,CACF;AAEDF,QAAQ,CAACG,WAAW,GAAG,UAAU;AAEjC,eAAeH,QAAQ"}