@os-design/core 1.0.121 → 1.0.124

package/dist/cjs/List/index.js

@@ -81,6 +81,7 @@ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       threshold = _ref$threshold === void 0 ? 10 : _ref$threshold,
       _ref$overscanCount = _ref.overscanCount,
       overscanCount = _ref$overscanCount === void 0 ? 10 : _ref$overscanCount,
+      heightProp = _ref.height,
       _ref$paddingTop = _ref.paddingTop,
       paddingTop = _ref$paddingTop === void 0 ? 0 : _ref$paddingTop,
       _ref$paddingBottom = _ref.paddingBottom,
@@ -120,20 +121,23 @@ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var paddingBottomSize = (0, _react.useMemo)(function () {
     return ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) + paddingBottom) * fontSize + safeAreaInset.bottom;
   }, [hasNavigation, theme.navigationTabHeight, isMinMd, paddingBottom, fontSize, safeAreaInset.bottom]);
-  var scrollLoadNextHandler = (0, _useRWLoadNext["default"])({
+  var height = (0, _react.useMemo)(function () {
+    return heightProp || size.height;
+  }, [heightProp, size.height]);
+  var loadNextHandler = (0, _useRWLoadNext["default"])({
     itemCount: itemCount,
     threshold: threshold,
     itemSize: itemSize,
     paddingTop: paddingTopSize,
-    height: size.height,
+    height: height,
     onLoadNext: onLoadNext
   });
-  var scrollHandler = (0, _react.useCallback)(function (_ref2) {
+  var windowScrollHandler = (0, _react.useCallback)(function (_ref2) {
     var top = _ref2.top;
     // Set the scroll position to the list
     if (listRef.current) listRef.current.scrollTo(top);
-    scrollLoadNextHandler(top);
-  }, [listRef, scrollLoadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    loadNextHandler(top);
+  }, [listRef, loadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var InnerElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, innerElementRef) {
     var style = _ref3.style,
@@ -147,32 +151,44 @@ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, rest));
   });
   InnerElement.displayName = 'InnerElement';
+  var renderList = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_reactWindow.FixedSizeList, {
+      ref: mergedListRef,
+      width: "100%",
+      height: height,
+      itemData: itemData,
+      itemSize: itemSize,
+      itemCount: itemCount,
+      style: heightProp ? {} : {
+        height: '100% important!'
+      },
+      overscanCount: overscanCount,
+      onScroll: heightProp ? function (_ref4) {
+        var scrollOffset = _ref4.scrollOffset;
+        return loadNextHandler(scrollOffset);
+      } : undefined,
+      innerElementType: InnerElement,
+      outerRef: outerRef,
+      innerRef: innerRef
+    }, function (_ref5) {
+      var style = _ref5.style,
+          rest = _objectWithoutProperties(_ref5, _excluded2);
+
+      return itemRenderer(_objectSpread({
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          top: "".concat(parseFloat(style.top ? style.top.toString() : '0') + paddingTopSize, "px")
+        })
+      }, rest));
+    });
+  }, [InnerElement, height, heightProp, innerRef, itemCount, itemData, itemRenderer, itemSize, loadNextHandler, mergedListRef, outerRef, overscanCount, paddingTopSize]);
+
+  if (heightProp) {
+    return renderList();
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_WindowScroller["default"], {
-    onScroll: scrollHandler
-  }, /*#__PURE__*/_react["default"].createElement(_reactWindow.FixedSizeList, {
-    ref: mergedListRef,
-    width: "100%",
-    height: size.height,
-    itemData: itemData,
-    itemSize: itemSize,
-    itemCount: itemCount,
-    style: {
-      height: '100% important!'
-    },
-    overscanCount: overscanCount,
-    innerElementType: InnerElement,
-    outerRef: outerRef,
-    innerRef: innerRef
-  }, function (_ref4) {
-    var style = _ref4.style,
-        rest = _objectWithoutProperties(_ref4, _excluded2);
-
-    return itemRenderer(_objectSpread({
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        top: "".concat(parseFloat(style.top ? style.top.toString() : '0') + paddingTopSize, "px")
-      })
-    }, rest));
-  }));
+    onScroll: windowScrollHandler
+  }, renderList());
 });
 List.displayName = 'List';
 var _default = List;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/index.tsx"],"names":["List","ref","itemCount","itemData","itemHeight","threshold","overscanCount","paddingTop","paddingBottom","onLoadNext","itemRenderer","outerRef","innerRef","listRef","mergedListRef","size","fontSize","document","body","LayoutContext","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","scrollLoadNextHandler","height","scrollHandler","top","current","scrollTo","InnerElement","innerElementRef","style","rest","parseFloat","displayName","toString"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n  FixedSizeList,\n  FixedSizeListProps,\n  ListChildComponentProps,\n} from 'react-window';\nimport {\n  useForwardedRef,\n  useSize,\n  useFontSize,\n  useSafeAreaInset,\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 {\n  /**\n   * Total count of items.\n   */\n  itemCount: number;\n  /**\n   * Array of items.\n   */\n  itemData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\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 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 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   * Ref to attach to the outer container element.\n   * @default undefined\n   */\n  outerRef?: FixedSizeListProps['outerRef'];\n  /**\n   * Ref to attach to the inner container element.\n   * @default undefined\n   */\n  innerRef?: FixedSizeListProps['innerRef'];\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemData,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      paddingTop = 0,\n      paddingBottom = 0,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      outerRef,\n      innerRef,\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 scrollLoadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height: size.height,\n      onLoadNext,\n    });\n\n    const scrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        scrollLoadNextHandler(top);\n      },\n      [listRef, scrollLoadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = forwardRef<HTMLDivElement, any>(\n      ({ style, ...rest }, innerElementRef) => (\n        <div\n          ref={innerElementRef}\n          style={{\n            ...style,\n            height: `${\n              parseFloat(style.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...rest}\n        />\n      )\n    );\n    InnerElement.displayName = 'InnerElement';\n\n    return (\n      <WindowScroller onScroll={scrollHandler}>\n        <FixedSizeList\n          ref={mergedListRef}\n          width='100%'\n          height={size.height}\n          itemData={itemData}\n          itemSize={itemSize}\n          itemCount={itemCount}\n          style={{ height: '100% important!' }}\n          overscanCount={overscanCount}\n          innerElementType={InnerElement}\n          outerRef={outerRef}\n          innerRef={innerRef}\n        >\n          {({ style, ...rest }) =>\n            itemRenderer({\n              style: {\n                ...style,\n                top: `${\n                  parseFloat(style.top ? style.top.toString() : '0') +\n                  paddingTopSize\n                }px`,\n              },\n              ...rest,\n            })\n          }\n        </FixedSizeList>\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/List/index.tsx"],"names":["List","ref","itemCount","itemData","itemHeight","threshold","overscanCount","heightProp","height","paddingTop","paddingBottom","onLoadNext","itemRenderer","outerRef","innerRef","listRef","mergedListRef","size","fontSize","document","body","LayoutContext","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerElementRef","style","rest","parseFloat","displayName","renderList","scrollOffset","undefined","toString"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n  FixedSizeList,\n  FixedSizeListProps,\n  ListChildComponentProps,\n} from 'react-window';\nimport {\n  useForwardedRef,\n  useSize,\n  useFontSize,\n  useSafeAreaInset,\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 {\n  /**\n   * Total count of items.\n   */\n  itemCount: number;\n  /**\n   * Array of items.\n   */\n  itemData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\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 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   * Ref to attach to the outer container element.\n   * @default undefined\n   */\n  outerRef?: FixedSizeListProps['outerRef'];\n  /**\n   * Ref to attach to the inner container element.\n   * @default undefined\n   */\n  innerRef?: FixedSizeListProps['innerRef'];\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemData,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      height: heightProp,\n      paddingTop = 0,\n      paddingBottom = 0,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      outerRef,\n      innerRef,\n    },\n    ref\n  ) => {\n    const [listRef, mergedListRef] = useForwardedRef(ref);\n    const size = useSize();\n    const fontSize = useFontSize(document.body);\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n    const { theme } = useTheme();\n    const isMinMd = useIsMinWidth('md');\n    const safeAreaInset = useSafeAreaInset();\n\n    const itemSize = useMemo(\n      () => itemHeight * fontSize,\n      [itemHeight, fontSize]\n    );\n\n    const paddingTopSize = useMemo(\n      () =>\n        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n          paddingTop) *\n        fontSize,\n      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n    );\n\n    const paddingBottomSize = useMemo(\n      () =>\n        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n          paddingBottom) *\n          fontSize +\n        safeAreaInset.bottom,\n      [\n        hasNavigation,\n        theme.navigationTabHeight,\n        isMinMd,\n        paddingBottom,\n        fontSize,\n        safeAreaInset.bottom,\n      ]\n    );\n\n    const height = useMemo(\n      () => heightProp || size.height,\n      [heightProp, size.height]\n    );\n\n    const loadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height,\n      onLoadNext,\n    });\n\n    const windowScrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        loadNextHandler(top);\n      },\n      [listRef, loadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = forwardRef<HTMLDivElement, any>(\n      ({ style, ...rest }, innerElementRef) => (\n        <div\n          ref={innerElementRef}\n          style={{\n            ...style,\n            height: `${\n              parseFloat(style.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...rest}\n        />\n      )\n    );\n    InnerElement.displayName = 'InnerElement';\n\n    const renderList = useCallback(\n      () => (\n        <FixedSizeList\n          ref={mergedListRef}\n          width='100%'\n          height={height}\n          itemData={itemData}\n          itemSize={itemSize}\n          itemCount={itemCount}\n          style={heightProp ? {} : { height: '100% important!' }}\n          overscanCount={overscanCount}\n          onScroll={\n            heightProp\n              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n              : undefined\n          }\n          innerElementType={InnerElement}\n          outerRef={outerRef}\n          innerRef={innerRef}\n        >\n          {({ style, ...rest }) =>\n            itemRenderer({\n              style: {\n                ...style,\n                top: `${\n                  parseFloat(style.top ? style.top.toString() : '0') +\n                  paddingTopSize\n                }px`,\n              },\n              ...rest,\n            })\n          }\n        </FixedSizeList>\n      ),\n      [\n        InnerElement,\n        height,\n        heightProp,\n        innerRef,\n        itemCount,\n        itemData,\n        itemRenderer,\n        itemSize,\n        loadNextHandler,\n        mergedListRef,\n        outerRef,\n        overscanCount,\n        paddingTopSize,\n      ]\n    );\n\n    if (heightProp) {\n      return renderList();\n    }\n\n    return (\n      <WindowScroller onScroll={windowScrollHandler}>\n        {renderList()}\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}

package/dist/esm/List/index.js

@@ -19,6 +19,7 @@ const List = /*#__PURE__*/forwardRef(({
   itemHeight = 4,
   threshold = 10,
   overscanCount = 10,
+  height: heightProp,
   paddingTop = 0,
   paddingBottom = 0,
   onLoadNext = () => {},
@@ -41,21 +42,22 @@ const List = /*#__PURE__*/forwardRef(({
   const itemSize = useMemo(() => itemHeight * fontSize, [itemHeight, fontSize]);
   const paddingTopSize = useMemo(() => ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) + paddingTop) * fontSize, [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]);
   const paddingBottomSize = useMemo(() => ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) + paddingBottom) * fontSize + safeAreaInset.bottom, [hasNavigation, theme.navigationTabHeight, isMinMd, paddingBottom, fontSize, safeAreaInset.bottom]);
-  const scrollLoadNextHandler = useRWLoadNext({
+  const height = useMemo(() => heightProp || size.height, [heightProp, size.height]);
+  const loadNextHandler = useRWLoadNext({
     itemCount,
     threshold,
     itemSize,
     paddingTop: paddingTopSize,
-    height: size.height,
+    height,
     onLoadNext
   });
-  const scrollHandler = useCallback(({
+  const windowScrollHandler = useCallback(({
     top
   }) => {
     // Set the scroll position to the list
     if (listRef.current) listRef.current.scrollTo(top);
-    scrollLoadNextHandler(top);
-  }, [listRef, scrollLoadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    loadNextHandler(top);
+  }, [listRef, loadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   const InnerElement = /*#__PURE__*/forwardRef(({
     style,
@@ -67,19 +69,20 @@ const List = /*#__PURE__*/forwardRef(({
     }
   }, rest)));
   InnerElement.displayName = 'InnerElement';
-  return /*#__PURE__*/React.createElement(WindowScroller, {
-    onScroll: scrollHandler
-  }, /*#__PURE__*/React.createElement(FixedSizeList, {
+  const renderList = useCallback(() => /*#__PURE__*/React.createElement(FixedSizeList, {
     ref: mergedListRef,
     width: "100%",
-    height: size.height,
+    height: height,
     itemData: itemData,
     itemSize: itemSize,
     itemCount: itemCount,
-    style: {
+    style: heightProp ? {} : {
       height: '100% important!'
     },
     overscanCount: overscanCount,
+    onScroll: heightProp ? ({
+      scrollOffset
+    }) => loadNextHandler(scrollOffset) : undefined,
     innerElementType: InnerElement,
     outerRef: outerRef,
     innerRef: innerRef
@@ -91,7 +94,15 @@ const List = /*#__PURE__*/forwardRef(({
       top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTopSize}px`
     },
     ...rest
-  })));
+  })), [InnerElement, height, heightProp, innerRef, itemCount, itemData, itemRenderer, itemSize, loadNextHandler, mergedListRef, outerRef, overscanCount, paddingTopSize]);
+
+  if (heightProp) {
+    return renderList();
+  }
+
+  return /*#__PURE__*/React.createElement(WindowScroller, {
+    onScroll: windowScrollHandler
+  }, renderList());
 });
 List.displayName = 'List';
 export { default as WindowScroller } from './WindowScroller';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/index.tsx"],"names":["React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","useForwardedRef","useSize","useFontSize","useSafeAreaInset","useTheme","useIsMinWidth","WindowScroller","useRWLoadNext","LayoutContext","List","itemCount","itemData","itemHeight","threshold","overscanCount","paddingTop","paddingBottom","onLoadNext","itemRenderer","outerRef","innerRef","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","scrollLoadNextHandler","height","scrollHandler","top","current","scrollTo","InnerElement","style","rest","innerElementRef","parseFloat","displayName","toString","default"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n  FixedSizeList,\n  FixedSizeListProps,\n  ListChildComponentProps,\n} from 'react-window';\nimport {\n  useForwardedRef,\n  useSize,\n  useFontSize,\n  useSafeAreaInset,\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 {\n  /**\n   * Total count of items.\n   */\n  itemCount: number;\n  /**\n   * Array of items.\n   */\n  itemData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\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 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 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   * Ref to attach to the outer container element.\n   * @default undefined\n   */\n  outerRef?: FixedSizeListProps['outerRef'];\n  /**\n   * Ref to attach to the inner container element.\n   * @default undefined\n   */\n  innerRef?: FixedSizeListProps['innerRef'];\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemData,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      paddingTop = 0,\n      paddingBottom = 0,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      outerRef,\n      innerRef,\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 scrollLoadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height: size.height,\n      onLoadNext,\n    });\n\n    const scrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        scrollLoadNextHandler(top);\n      },\n      [listRef, scrollLoadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = forwardRef<HTMLDivElement, any>(\n      ({ style, ...rest }, innerElementRef) => (\n        <div\n          ref={innerElementRef}\n          style={{\n            ...style,\n            height: `${\n              parseFloat(style.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...rest}\n        />\n      )\n    );\n    InnerElement.displayName = 'InnerElement';\n\n    return (\n      <WindowScroller onScroll={scrollHandler}>\n        <FixedSizeList\n          ref={mergedListRef}\n          width='100%'\n          height={size.height}\n          itemData={itemData}\n          itemSize={itemSize}\n          itemCount={itemCount}\n          style={{ height: '100% important!' }}\n          overscanCount={overscanCount}\n          innerElementType={InnerElement}\n          outerRef={outerRef}\n          innerRef={innerRef}\n        >\n          {({ style, ...rest }) =>\n            itemRenderer({\n              style: {\n                ...style,\n                top: `${\n                  parseFloat(style.top ? style.top.toString() : '0') +\n                  paddingTopSize\n                }px`,\n              },\n              ...rest,\n            })\n          }\n        </FixedSizeList>\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/List/index.tsx"],"names":["React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","useForwardedRef","useSize","useFontSize","useSafeAreaInset","useTheme","useIsMinWidth","WindowScroller","useRWLoadNext","LayoutContext","List","itemCount","itemData","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","onLoadNext","itemRenderer","outerRef","innerRef","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","style","rest","innerElementRef","parseFloat","displayName","renderList","scrollOffset","undefined","toString","default"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,WAA5B,EAAyCC,UAAzC,EAAqDC,OAArD,QAAoE,OAApE;AACA,SACEC,aADF,QAIO,cAJP;AAKA,SACEC,eADF,EAEEC,OAFF,EAGEC,WAHF,EAIEC,gBAJF,QAKO,kBALP;AAMA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,OAAOC,cAAP,MAA+C,kBAA/C;AACA,OAAOC,aAAP,MAA0B,uBAA1B;AACA,OAAOC,aAAP,MAA0B,yBAA1B;;AA+DA;AACA;AACA;AACA;AACA,MAAMC,IAAI,gBAAGd,UAAU,CACrB,CACE;AACEe,EAAAA,SADF;AAEEC,EAAAA,QAFF;AAGEC,EAAAA,UAAU,GAAG,CAHf;AAIEC,EAAAA,SAAS,GAAG,EAJd;AAKEC,EAAAA,aAAa,GAAG,EALlB;AAMEC,EAAAA,MAAM,EAAEC,UANV;AAOEC,EAAAA,UAAU,GAAG,CAPf;AAQEC,EAAAA,aAAa,GAAG,CARlB;AASEC,EAAAA,UAAU,GAAG,MAAM,CAAE,CATvB;AAUEC,EAAAA,YAAY,GAAG,MAAM,IAVvB;AAWEC,EAAAA,QAXF;AAYEC,EAAAA;AAZF,CADF,EAeEC,GAfF,KAgBK;AACH,QAAM,CAACC,OAAD,EAAUC,aAAV,IAA2BzB,eAAe,CAACuB,GAAD,CAAhD;AACA,QAAMG,IAAI,GAAGzB,OAAO,EAApB;AACA,QAAM0B,QAAQ,GAAGzB,WAAW,CAAC0B,QAAQ,CAACC,IAAV,CAA5B;AACA,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MAAmClC,UAAU,CAACW,aAAD,CAAnD;AACA,QAAM;AAAEwB,IAAAA;AAAF,MAAY5B,QAAQ,EAA1B;AACA,QAAM6B,OAAO,GAAG5B,aAAa,CAAC,IAAD,CAA7B;AACA,QAAM6B,aAAa,GAAG/B,gBAAgB,EAAtC;AAEA,QAAMgC,QAAQ,GAAGrC,OAAO,CACtB,MAAMc,UAAU,GAAGe,QADG,EAEtB,CAACf,UAAD,EAAae,QAAb,CAFsB,CAAxB;AAKA,QAAMS,cAAc,GAAGtC,OAAO,CAC5B,MACE,CAAC,CAACiC,aAAa,GAAGC,KAAK,CAACK,gBAAN,CAAuBJ,OAAO,GAAG,CAAH,GAAO,CAArC,CAAH,GAA6C,CAA3D,IACChB,UADF,IAEAU,QAJ0B,EAK5B,CAACI,aAAD,EAAgBC,KAAK,CAACK,gBAAtB,EAAwCJ,OAAxC,EAAiDhB,UAAjD,EAA6DU,QAA7D,CAL4B,CAA9B;AAQA,QAAMW,iBAAiB,GAAGxC,OAAO,CAC/B,MACE,CAAC,CAACgC,aAAa,IAAI,CAACG,OAAlB,GAA4BD,KAAK,CAACO,mBAAlC,GAAwD,CAAzD,IACCrB,aADF,IAEES,QAFF,GAGAO,aAAa,CAACM,MALe,EAM/B,CACEV,aADF,EAEEE,KAAK,CAACO,mBAFR,EAGEN,OAHF,EAIEf,aAJF,EAKES,QALF,EAMEO,aAAa,CAACM,MANhB,CAN+B,CAAjC;AAgBA,QAAMzB,MAAM,GAAGjB,OAAO,CACpB,MAAMkB,UAAU,IAAIU,IAAI,CAACX,MADL,EAEpB,CAACC,UAAD,EAAaU,IAAI,CAACX,MAAlB,CAFoB,CAAtB;AAKA,QAAM0B,eAAe,GAAGlC,aAAa,CAAC;AACpCG,IAAAA,SADoC;AAEpCG,IAAAA,SAFoC;AAGpCsB,IAAAA,QAHoC;AAIpClB,IAAAA,UAAU,EAAEmB,cAJwB;AAKpCrB,IAAAA,MALoC;AAMpCI,IAAAA;AANoC,GAAD,CAArC;AASA,QAAMuB,mBAAmB,GAAG9C,WAAW,CACrC,CAAC;AAAE+C,IAAAA;AAAF,GAAD,KAA6B;AAC3B;AACA,QAAInB,OAAO,CAACoB,OAAZ,EAAqBpB,OAAO,CAACoB,OAAR,CAAgBC,QAAhB,CAAyBF,GAAzB;AACrBF,IAAAA,eAAe,CAACE,GAAD,CAAf;AACD,GALoC,EAMrC,CAACnB,OAAD,EAAUiB,eAAV,CANqC,CAAvC,CApDG,CA6DH;;AACA,QAAMK,YAAY,gBAAGnD,UAAU,CAC7B,CAAC;AAAEoD,IAAAA,KAAF;AAAS,OAAGC;AAAZ,GAAD,EAAqBC,eAArB,kBACE;AACE,IAAA,GAAG,EAAEA,eADP;AAEE,IAAA,KAAK,EAAE,EACL,GAAGF,KADE;AAELhC,MAAAA,MAAM,EAAG,GACPmC,UAAU,CAACH,KAAK,CAAChC,MAAP,CAAV,GAA2BqB,cAA3B,GAA4CE,iBAC7C;AAJI;AAFT,KAQMU,IARN,EAF2B,CAA/B;AAcAF,EAAAA,YAAY,CAACK,WAAb,GAA2B,cAA3B;AAEA,QAAMC,UAAU,GAAGxD,WAAW,CAC5B,mBACE,oBAAC,aAAD;AACE,IAAA,GAAG,EAAE6B,aADP;AAEE,IAAA,KAAK,EAAC,MAFR;AAGE,IAAA,MAAM,EAAEV,MAHV;AAIE,IAAA,QAAQ,EAAEJ,QAJZ;AAKE,IAAA,QAAQ,EAAEwB,QALZ;AAME,IAAA,SAAS,EAAEzB,SANb;AAOE,IAAA,KAAK,EAAEM,UAAU,GAAG,EAAH,GAAQ;AAAED,MAAAA,MAAM,EAAE;AAAV,KAP3B;AAQE,IAAA,aAAa,EAAED,aARjB;AASE,IAAA,QAAQ,EACNE,UAAU,GACN,CAAC;AAAEqC,MAAAA;AAAF,KAAD,KAAsBZ,eAAe,CAACY,YAAD,CAD/B,GAENC,SAZR;AAcE,IAAA,gBAAgB,EAAER,YAdpB;AAeE,IAAA,QAAQ,EAAEzB,QAfZ;AAgBE,IAAA,QAAQ,EAAEC;AAhBZ,KAkBG,CAAC;AAAEyB,IAAAA,KAAF;AAAS,OAAGC;AAAZ,GAAD,KACC5B,YAAY,CAAC;AACX2B,IAAAA,KAAK,EAAE,EACL,GAAGA,KADE;AAELJ,MAAAA,GAAG,EAAG,GACJO,UAAU,CAACH,KAAK,CAACJ,GAAN,GAAYI,KAAK,CAACJ,GAAN,CAAUY,QAAV,EAAZ,GAAmC,GAApC,CAAV,GACAnB,cACD;AALI,KADI;AAQX,OAAGY;AARQ,GAAD,CAnBhB,CAF0B,EAkC5B,CACEF,YADF,EAEE/B,MAFF,EAGEC,UAHF,EAIEM,QAJF,EAKEZ,SALF,EAMEC,QANF,EAOES,YAPF,EAQEe,QARF,EASEM,eATF,EAUEhB,aAVF,EAWEJ,QAXF,EAYEP,aAZF,EAaEsB,cAbF,CAlC4B,CAA9B;;AAmDA,MAAIpB,UAAJ,EAAgB;AACd,WAAOoC,UAAU,EAAjB;AACD;;AAED,sBACE,oBAAC,cAAD;AAAgB,IAAA,QAAQ,EAAEV;AAA1B,KACGU,UAAU,EADb,CADF;AAKD,CA3JoB,CAAvB;AA8JA3C,IAAI,CAAC0C,WAAL,GAAmB,MAAnB;AAEA,SAASK,OAAO,IAAIlD,cAApB,QAA0C,kBAA1C;AACA,SAASkD,OAAO,IAAIjD,aAApB,QAAyC,uBAAzC;AAEA,eAAeE,IAAf","sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n  FixedSizeList,\n  FixedSizeListProps,\n  ListChildComponentProps,\n} from 'react-window';\nimport {\n  useForwardedRef,\n  useSize,\n  useFontSize,\n  useSafeAreaInset,\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 {\n  /**\n   * Total count of items.\n   */\n  itemCount: number;\n  /**\n   * Array of items.\n   */\n  itemData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\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 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   * Ref to attach to the outer container element.\n   * @default undefined\n   */\n  outerRef?: FixedSizeListProps['outerRef'];\n  /**\n   * Ref to attach to the inner container element.\n   * @default undefined\n   */\n  innerRef?: FixedSizeListProps['innerRef'];\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n  (\n    {\n      itemCount,\n      itemData,\n      itemHeight = 4,\n      threshold = 10,\n      overscanCount = 10,\n      height: heightProp,\n      paddingTop = 0,\n      paddingBottom = 0,\n      onLoadNext = () => {},\n      itemRenderer = () => null,\n      outerRef,\n      innerRef,\n    },\n    ref\n  ) => {\n    const [listRef, mergedListRef] = useForwardedRef(ref);\n    const size = useSize();\n    const fontSize = useFontSize(document.body);\n    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n    const { theme } = useTheme();\n    const isMinMd = useIsMinWidth('md');\n    const safeAreaInset = useSafeAreaInset();\n\n    const itemSize = useMemo(\n      () => itemHeight * fontSize,\n      [itemHeight, fontSize]\n    );\n\n    const paddingTopSize = useMemo(\n      () =>\n        ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n          paddingTop) *\n        fontSize,\n      [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n    );\n\n    const paddingBottomSize = useMemo(\n      () =>\n        ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n          paddingBottom) *\n          fontSize +\n        safeAreaInset.bottom,\n      [\n        hasNavigation,\n        theme.navigationTabHeight,\n        isMinMd,\n        paddingBottom,\n        fontSize,\n        safeAreaInset.bottom,\n      ]\n    );\n\n    const height = useMemo(\n      () => heightProp || size.height,\n      [heightProp, size.height]\n    );\n\n    const loadNextHandler = useRWLoadNext({\n      itemCount,\n      threshold,\n      itemSize,\n      paddingTop: paddingTopSize,\n      height,\n      onLoadNext,\n    });\n\n    const windowScrollHandler = useCallback(\n      ({ top }: ScrollPosition) => {\n        // Set the scroll position to the list\n        if (listRef.current) listRef.current.scrollTo(top);\n        loadNextHandler(top);\n      },\n      [listRef, loadNextHandler]\n    );\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const InnerElement = forwardRef<HTMLDivElement, any>(\n      ({ style, ...rest }, innerElementRef) => (\n        <div\n          ref={innerElementRef}\n          style={{\n            ...style,\n            height: `${\n              parseFloat(style.height) + paddingTopSize + paddingBottomSize\n            }px`,\n          }}\n          {...rest}\n        />\n      )\n    );\n    InnerElement.displayName = 'InnerElement';\n\n    const renderList = useCallback(\n      () => (\n        <FixedSizeList\n          ref={mergedListRef}\n          width='100%'\n          height={height}\n          itemData={itemData}\n          itemSize={itemSize}\n          itemCount={itemCount}\n          style={heightProp ? {} : { height: '100% important!' }}\n          overscanCount={overscanCount}\n          onScroll={\n            heightProp\n              ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n              : undefined\n          }\n          innerElementType={InnerElement}\n          outerRef={outerRef}\n          innerRef={innerRef}\n        >\n          {({ style, ...rest }) =>\n            itemRenderer({\n              style: {\n                ...style,\n                top: `${\n                  parseFloat(style.top ? style.top.toString() : '0') +\n                  paddingTopSize\n                }px`,\n              },\n              ...rest,\n            })\n          }\n        </FixedSizeList>\n      ),\n      [\n        InnerElement,\n        height,\n        heightProp,\n        innerRef,\n        itemCount,\n        itemData,\n        itemRenderer,\n        itemSize,\n        loadNextHandler,\n        mergedListRef,\n        outerRef,\n        overscanCount,\n        paddingTopSize,\n      ]\n    );\n\n    if (heightProp) {\n      return renderList();\n    }\n\n    return (\n      <WindowScroller onScroll={windowScrollHandler}>\n        {renderList()}\n      </WindowScroller>\n    );\n  }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}

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

@@ -6,6 +6,7 @@ export interface ListProps {
     itemHeight?: number;
     threshold?: number;
     overscanCount?: number;
+    height?: number;
     paddingTop?: number;
     paddingBottom?: number;
     onLoadNext?: () => void;

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,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,cAAc,CAAC;AAatB,MAAM,WAAW,SAAS;IAIxB,SAAS,EAAE,MAAM,CAAC;IAIlB,QAAQ,CAAC,EAAE,GAAG,CAAC;IAKf,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAKxB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;IAKjD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAK1C,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC3C;AAMD,QAAA,MAAM,IAAI,sFAwHT,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,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,cAAc,CAAC;AAatB,MAAM,WAAW,SAAS;IAIxB,SAAS,EAAE,MAAM,CAAC;IAIlB,QAAQ,CAAC,EAAE,GAAG,CAAC;IAKf,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,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAKxB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;IAKjD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAK1C,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC3C;AAMD,QAAA,MAAM,IAAI,sFA4JT,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.121",
+  "version": "1.0.124",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,9 +30,9 @@
   "dependencies": {
     "@os-design/date-picker-utils": "^1.0.5",
     "@os-design/icons": "^1.0.34",
-    "@os-design/input-number-utils": "^1.0.11",
+    "@os-design/input-number-utils": "^1.0.12",
     "@os-design/media": "^1.0.11",
-    "@os-design/menu-utils": "^1.0.5",
+    "@os-design/menu-utils": "^1.0.6",
     "@os-design/portal": "^1.0.1",
     "@os-design/styles": "^1.0.32",
     "@os-design/theming": "^1.0.30",
@@ -56,5 +56,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "6b4ff5f8f5080c52fd07c10a8903a93595899f09"
+  "gitHead": "cac99126e9fef77b38f35021b01e0061b0dc41b6"
 }