@os-design/core 1.0.136 → 1.0.137

package/dist/cjs/List/index.js

@@ -141,12 +141,11 @@ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     loadNextHandler(top);
   }, [listRef, loadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  var InnerElement = (0, _react.useCallback)(function (_ref3, innerElementRef) {
+  var InnerElement = (0, _react.useCallback)(function (_ref3) {
     var innerStyle = _ref3.style,
         innerRest = _objectWithoutProperties(_ref3, _excluded2);
 
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
-      ref: innerElementRef,
       style: _objectSpread(_objectSpread({}, innerStyle), {}, {
         height: "".concat(parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize, "px")
       })

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

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

package/dist/cjs/Select/SelectList.js

@@ -108,12 +108,11 @@ var SelectList = function SelectList(_ref) {
     maxSelectedItems: maxSelectedItems
   }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  var InnerElement = (0, _react.useCallback)(function (_ref2, innerElementRef) {
+  var InnerElement = (0, _react.useCallback)(function (_ref2) {
     var style = _ref2.style,
         innerElementRest = _objectWithoutProperties(_ref2, _excluded);
 
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
-      ref: innerElementRef,
       style: _objectSpread(_objectSpread({}, style), {}, {
         height: "".concat(parseFloat(style.height) + paddingTop + paddingBottom, "px")
       }),

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

@@ -1 +1 @@
-{"version":3,"file":"SelectList.js","names":["SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","useSize","isMinXs","useIsMinWidth","fontSize","useFontSize","document","body","useTheme","theme","scaleFactor","useMemo","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","useRWLoadNext","itemCount","onSelect","useSelectHandler","InnerElement","useCallback","innerElementRef","style","innerElementRest","parseFloat","listItemFn","index","optionTitle","title","optionValue","optionOnClick","onClick","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 }, innerElementRef) => (\n      <div\n        ref={innerElementRef}\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":["SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","useSize","isMinXs","useIsMinWidth","fontSize","useFontSize","document","body","useTheme","theme","scaleFactor","useMemo","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","useRWLoadNext","itemCount","onSelect","useSelectHandler","InnerElement","useCallback","style","innerElementRest","parseFloat","listItemFn","index","optionTitle","title","optionValue","optionOnClick","onClick","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/List/index.js

@@ -62,8 +62,7 @@ const List = /*#__PURE__*/forwardRef(({
   const InnerElement = useCallback(({
     style: innerStyle,
     ...innerRest
-  }, innerElementRef) => /*#__PURE__*/React.createElement("div", _extends({
-    ref: innerElementRef,
+  }) => /*#__PURE__*/React.createElement("div", _extends({
     style: { ...innerStyle,
       height: `${parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize}px`
     }

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

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

package/dist/esm/Select/SelectList.js

@@ -69,8 +69,7 @@ const SelectList = ({
   const InnerElement = useCallback(({
     style,
     ...innerElementRest
-  }, innerElementRef) => /*#__PURE__*/React.createElement("div", _extends({
-    ref: innerElementRef,
+  }) => /*#__PURE__*/React.createElement("div", _extends({
     style: { ...style,
       height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
     },

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","innerElementRef","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 }, innerElementRef) => (\n      <div\n        ref={innerElementRef}\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":";;AAAA,OAAOA,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,SAASC,aAAT,QAA8B,cAA9B;AACA,SAASC,WAAT,EAAsBC,OAAtB,QAAqC,kBAArC;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,aAAT,QAA8B,kBAA9B;AAEA,SAASC,gBAAT,QAAiC,uBAAjC;AACA,OAAOC,QAAP,MAAwC,aAAxC;AACA,OAAOC,aAAP,MAA0B,6BAA1B;;AAoBA,MAAMC,UAAqC,GAAG,CAAC;EAC7CC,aAD6C;EAE7CC,OAF6C;EAG7CC,YAH6C;EAI7CC,aAJ6C;EAK7CC,SAL6C;EAM7CC,UAN6C;EAO7CC,gBAP6C;EAQ7CC,YAR6C;EAS7CC,KAT6C;EAU7CC,QAAQ,GAAG,MAAM,CAAE,CAV0B;EAW7CC,EAX6C;EAY7CC;AAZ6C,CAAD,KAaxC;EACJ,MAAMC,UAAU,GAAGnB,OAAO,EAA1B;EACA,MAAMoB,OAAO,GAAGlB,aAAa,CAAC,IAAD,CAA7B;EACA,MAAMmB,QAAQ,GAAGtB,WAAW,CAACuB,QAAQ,CAACC,IAAV,CAA5B;EACA,MAAM;IAAEC;EAAF,IAAYvB,QAAQ,EAA1B;EAEA,MAAMwB,WAAW,GAAG5B,OAAO,CAAC,MAAM;IAChC,MAAM6B,CAAC,GAAGR,IAAI,IAAI,QAAlB;IACA,OAAO,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,EAA6BS,QAA7B,CAAsCD,CAAtC,IACHF,KAAK,CAACI,KAAN,CAAYF,CAAZ,CADG,GAEHG,MAAM,CAACH,CAAC,CAACI,OAAF,CAAU,wBAAV,EAAoC,IAApC,CAAD,CAAN,IAAqD,CAFzD,CAFgC,CAI4B;EAC7D,CAL0B,EAKxB,CAACZ,IAAD,EAAOM,KAAK,CAACI,KAAb,CALwB,CAA3B;EAOA,MAAMG,aAAa,GAAGlC,OAAO,CAAC,MAAM;IAClC,MAAMmC,SAAS,GAAGZ,OAAO,GACrBI,KAAK,CAACS,mBADe,GAErBT,KAAK,CAACU,wBAAN,CAA+B,CAA/B,CAFJ;IAGA,OAAOF,SAAS,GAAGX,QAAZ,GAAuBI,WAA9B;EACD,CAL4B,EAK1B,CACDL,OADC,EAEDI,KAAK,CAACS,mBAFL,EAGDT,KAAK,CAACU,wBAHL,EAIDb,QAJC,EAKDI,WALC,CAL0B,CAA7B;EAaA,MAAMU,UAAU,GAAGtC,OAAO,CACxB,MAAOU,aAAa,GAAG,IAAIkB,WAAP,GAAqBM,aADjB,EAExB,CAACxB,aAAD,EAAgBkB,WAAhB,EAA6BM,aAA7B,CAFwB,CAA1B;EAKA,MAAMK,iBAAiB,GAAGvC,OAAO,CAC/B,MACEU,aAAa,GACT,CAACiB,KAAK,CAACa,UAAN,GAAmBb,KAAK,CAACS,mBAA1B,IACAZ,QADA,GAEAI,WAHS,GAIT,CANyB,EAO/B,CACElB,aADF,EAEEiB,KAAK,CAACa,UAFR,EAGEb,KAAK,CAACS,mBAHR,EAIEZ,QAJF,EAKEI,WALF,CAP+B,CAAjC;EAgBA,MAAMa,QAAQ,GAAGzC,OAAO,CACtB,MAAM2B,KAAK,CAACe,cAAN,GAAuBlB,QAAvB,GAAkCI,WADlB,EAEtB,CAACD,KAAK,CAACe,cAAP,EAAuBlB,QAAvB,EAAiCI,WAAjC,CAFsB,CAAxB;EAKA,MAAMe,MAAM,GAAG3C,OAAO,CAAC,MAAM;IAC3B;IACA,IAAI,CAACuB,OAAL,EAAc;MACZ,MAAMqB,SAAS,GACbtB,UAAU,CAACqB,MAAX,GACAhB,KAAK,CAACkB,iBAAN,GAA0BrB,QAA1B,GAAqCI,WADrC,GAEAW,iBAHF;MAIA,MAAMO,SAAS,GAAGnC,OAAO,CAACoC,MAAR,GAAiBN,QAAjB,GAA4BH,UAA5B,GAAyCJ,aAA3D;MACA,OAAOY,SAAS,GAAGF,SAAZ,GAAwBE,SAAxB,GAAoCF,SAA3C;IACD,CAT0B,CAU3B;;;IACA,MAAMI,KAAK,GAAGrC,OAAO,CAACoC,MAAR,GAAiBnC,YAAjB,GAAgCD,OAAO,CAACoC,MAAxC,GAAiDnC,YAA/D;IACA,OAAOoC,KAAK,GAAGP,QAAR,GAAmBH,UAAnB,GAAgCJ,aAAvC;EACD,CAbqB,EAanB,CACDX,OADC,EAEDZ,OAAO,CAACoC,MAFP,EAGDnC,YAHC,EAID6B,QAJC,EAKDnB,UAAU,CAACqB,MALV,EAMDhB,KAAK,CAACkB,iBANL,EAODrB,QAPC,EAQDI,WARC,EASDW,iBATC,EAUDD,UAVC,EAWDJ,aAXC,CAbmB,CAAtB;EA2BA,MAAMe,aAAa,GAAGzC,aAAa,CAAC;IAClC0C,SAAS,EAAEvC,OAAO,CAACoC,MADe;IAElCjC,SAFkC;IAGlC2B,QAHkC;IAIlCH,UAJkC;IAKlCK,MALkC;IAMlC5B;EANkC,CAAD,CAAnC;EASA,MAAMoC,QAAQ,GAAG7C,gBAAgB,CAAC;IAChCY,KAAK,EAAEA,KAAK,IAAI,EADgB;IAEhCC,QAFgC;IAGhCH;EAHgC,CAAD,CAAjC,CAxFI,CA8FJ;;EACA,MAAMoC,YAAY,GAAGrD,WAAW,CAC9B,CAAC;IAAEsD,KAAF;IAAS,GAAGC;EAAZ,CAAD,kBACE;IACE,KAAK,EAAE,EACL,GAAGD,KADE;MAELV,MAAM,EAAG,GAAEY,UAAU,CAACF,KAAK,CAACV,MAAP,CAAV,GAA2BL,UAA3B,GAAwCJ,aAAc;IAF5D,CADT;IAKE,IAAI,EAAC,SALP;IAME,EAAE,EAAEd;EANN,GAOMkC,gBAPN,EAF4B,EAY9B,CAAClC,EAAD,EAAKc,aAAL,EAAoBI,UAApB,CAZ8B,CAAhC;EAeA,MAAMkB,UAAU,GAAGzD,WAAW,CAC5B,CAAC;IAAE0D,KAAF;IAASJ;EAAT,CAAD,KAAsB;IACpB,MAAM;MACJK,KAAK,EAAEC,WADH;MAEJzC,KAAK,EAAE0C,WAFH;MAGJC,OAAO,EAAEC,aAHL;MAIJ,GAAGC;IAJC,IAKFpD,OAAO,CAAC8C,KAAD,CALX;IAMA,oBACE,oBAAC,QAAD;MACE,KAAK,EAAE,EACL,GAAGJ,KADE;QAELW,GAAG,EAAG,GACJT,UAAU,CAACF,KAAK,CAACW,GAAN,GAAYX,KAAK,CAACW,GAAN,CAAUC,QAAV,EAAZ,GAAmC,GAApC,CAAV,GAAqD3B,UACtD;MAJI,CADT;MAOE,QAAQ,EAAE,CAACpB,KAAK,IAAI,EAAV,EAAcY,QAAd,CAAuB8B,WAAW,IAAI,EAAtC,CAPZ;MAQE,OAAO,EAAGM,CAAD,IAAO;QACd,IAAI,CAACN,WAAL,EAAkB;QAClBT,QAAQ,CAACS,WAAD,CAAR,CAFc,CAId;QACA;QACA;QACA;;QACA,IAAI3C,YAAY,CAACkD,OAAb,IAAwBnD,gBAAgB,KAAK,CAAjD,EAAoD;UAClDC,YAAY,CAACkD,OAAb,CAAqBC,KAArB;QACD;;QAED,IAAIN,aAAJ,EAAmBA,aAAa,CAACI,CAAD,CAAb;MACpB,CArBH;MAsBE,IAAI,EAAC,QAtBP;MAuBE,iBAAe,CAAChD,KAAK,IAAI,EAAV,EAAcY,QAAd,CAAuB8B,WAAW,IAAI,EAAtC;IAvBjB,GAwBMG,UAxBN,GA0BGJ,WA1BH,CADF;EA8BD,CAtC2B,EAuC5B,CAAC1C,YAAD,EAAeD,gBAAf,EAAiCmC,QAAjC,EAA2CxC,OAA3C,EAAoD2B,UAApD,EAAgEpB,KAAhE,CAvC4B,CAA9B;EA0CA,oBACE,oBAAC,aAAD;IACE,KAAK,EAAC,MADR;IAEE,MAAM,EAAEyB,MAFV;IAGE,QAAQ,EAAEF,QAHZ;IAIE,SAAS,EAAE9B,OAAO,CAACoC,MAJrB;IAKE,aAAa,EAAElC,aALjB;IAME,QAAQ,EAAE,CAAC;MAAEwD;IAAF,CAAD,KAAsBpB,aAAa,CAACoB,YAAD,CAN/C;IAOE,gBAAgB,EAAEjB;EAPpB,GASGI,UATH,CADF;AAaD,CAlLD;;AAoLA/C,UAAU,CAAC6D,WAAX,GAAyB,YAAzB;AAEA,eAAe7D,UAAf"}

package/dist/types/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AACf,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AAatB,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,WAAW,CAAC;IAIrD,SAAS,EAAE,MAAM,CAAC;IAKlB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,KAAK,CAAC,EAAE,aAAa,CAAC;IAKtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAKxB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;CAClD;AAMD,QAAA,MAAM,IAAI,sFAiKT,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AACf,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AAatB,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,WAAW,CAAC;IAIrD,SAAS,EAAE,MAAM,CAAC;IAKlB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,KAAK,CAAC,EAAE,aAAa,CAAC;IAKtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAKxB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;CAClD;AAMD,QAAA,MAAM,IAAI,sFAgKT,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,eAAe,IAAI,CAAC"}

package/dist/types/Select/SelectList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACjC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmLzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SelectList.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,QAAQ;IACxC,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACjC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkLzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.136",
+  "version": "1.0.137",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "623c286ffe8221abff99412e41830002a5a1b353"
+  "gitHead": "d739445b89862f1b3cdea6d1591a4b10bf17b078"
 }