@redis-ui/components 42.8.0 → 43.2.1

package/dist/HighlightedIcon/HighlightedIcon.style.js

@@ -0,0 +1,47 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SIZE_MAP = {
+  XS: {
+    size: "1.6rem",
+    borderRadius: "0.3rem"
+  },
+  S: {
+    size: "2rem",
+    borderRadius: "0.3rem"
+  },
+  M: {
+    size: "2.4rem",
+    borderRadius: "0.5rem"
+  },
+  L: {
+    size: "3.2rem",
+    borderRadius: "0.5rem"
+  },
+  XL: {
+    size: "4rem",
+    borderRadius: "0.8rem"
+  },
+  XXL: {
+    size: "4.4rem",
+    borderRadius: "0.8rem"
+  }
+};
+const getColors = (type) => {
+  const theme = useTheme();
+  return theme.components.highlightedIcon.variants[type];
+};
+const HighlightedIconContainer = _styled.div.withConfig({
+  displayName: "HighlightedIconstyle__HighlightedIconContainer",
+  componentId: "RedisUI__sc-o2gs2e-0"
+})(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
+  $size
+}) => SIZE_MAP[$size].size, ({
+  $type
+}) => getColors($type).background, ({
+  $type
+}) => getColors($type).text, ({
+  $size
+}) => SIZE_MAP[$size].borderRadius);
+export {
+  HighlightedIconContainer
+};

package/dist/HighlightedIcon/HighlightedIcon.types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { IconType as IconComponent } from '@redislabsdev/redis-ui-icons';
+import { HighlightedIconType, IconSizeType } from '@redislabsdev/redis-ui-styles';
+export interface HighlightedIconProps extends HTMLAttributes<HTMLDivElement> {
+    icon: IconComponent;
+    size?: IconSizeType;
+    type?: HighlightedIconType;
+}

package/dist/HighlightedIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HighlightedIcon } from './HighlightedIcon';
+export * from './HighlightedIcon.types';
+export * as HighlightedIconStyles from './HighlightedIcon.style';

package/dist/Inputs/QuantityCounter/components/InputGroup/components/ValueLabel/ValueLabel.cjs

@@ -10,11 +10,15 @@ const ValueLabel = ({
   const {
     value
   } = InputValue_context.useInputValueApi();
-  if (!children || !value) return null;
-  if (typeof children === "string") return jsxRuntime.jsxRuntimeExports.jsx(ValueLabel_style.ValueLabel, {
-    component: "span",
-    children
-  });
+  if (!children || !value) {
+    return null;
+  }
+  if (typeof children === "string") {
+    return jsxRuntime.jsxRuntimeExports.jsx(ValueLabel_style.ValueLabel, {
+      component: "span",
+      children
+    });
+  }
   return React.Children.only(children);
 };
 exports.ValueLabel = ValueLabel;

package/dist/Inputs/QuantityCounter/components/InputGroup/components/ValueLabel/ValueLabel.js

@@ -8,11 +8,15 @@ const ValueLabel = ({
   const {
     value
   } = useInputValueApi();
-  if (!children || !value) return null;
-  if (typeof children === "string") return jsxRuntimeExports.jsx(ValueLabel$1, {
-    component: "span",
-    children
-  });
+  if (!children || !value) {
+    return null;
+  }
+  if (typeof children === "string") {
+    return jsxRuntimeExports.jsx(ValueLabel$1, {
+      component: "span",
+      children
+    });
+  }
   return Children.only(children);
 };
 export {

package/dist/Inputs/components/Compose/Compose.style.cjs

@@ -19,23 +19,42 @@ const getStateStyle = (theme) => {
   const maps = [bgColor, textColor, borderColor];
   return _styled.css`
     & {
-      ${css_utils.styleFromTokens(maps, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.normal
+  })};
     }
 
     &:focus-within {
-      ${css_utils.styleFromTokens(maps, statesStyle.focused, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.focused,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='error'] {
-      ${css_utils.styleFromTokens(maps, statesStyle.error, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.error,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='success'] {
-      ${css_utils.styleFromTokens(maps, statesStyle.success, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.success,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &:has(:is(input, textarea):disabled) {
-      ${css_utils.styleFromTokens(maps, statesStyle.disabled, statesStyle.normal)};
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.disabled,
+    fallbackTokens: statesStyle.normal
+  })};
       cursor: no-drop;
 
       ${StatusIndicator_style.IconContainer},${Loader_style.LoaderSVG} {
@@ -61,7 +80,11 @@ const CommonInputCompose = _styled__default.default.div.attrs(() => ({
     `;
 }, () => getStateStyle(redisUiStyles.useTheme()), ({
   $variant
-}) => css_utils.styleFromTokens([css_utils.tokenMaps.borderWidth, css_utils.tokenMaps.borderRadius], redisUiStyles.useTheme().components.input.variants[$variant], redisUiStyles.useTheme().components.input.variants.outline), ({
+}) => css_utils.styleFromTokens({
+  tokenMaps: [css_utils.tokenMaps.borderWidth, css_utils.tokenMaps.borderRadius],
+  tokens: redisUiStyles.useTheme().components.input.variants[$variant],
+  fallbackTokens: redisUiStyles.useTheme().components.input.variants.outline
+}), ({
   $variant
 }) => $variant !== "underline" ? void 0 : _styled.css`
             border-top-color: transparent;

package/dist/Inputs/components/Compose/Compose.style.js

@@ -15,23 +15,42 @@ const getStateStyle = (theme) => {
   const maps = [bgColor, textColor, borderColor];
   return css`
     & {
-      ${styleFromTokens(maps, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.normal
+  })};
     }
 
     &:focus-within {
-      ${styleFromTokens(maps, statesStyle.focused, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.focused,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='error'] {
-      ${styleFromTokens(maps, statesStyle.error, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.error,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &[data-status='success'] {
-      ${styleFromTokens(maps, statesStyle.success, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.success,
+    fallbackTokens: statesStyle.normal
+  })};
     }
 
     &:has(:is(input, textarea):disabled) {
-      ${styleFromTokens(maps, statesStyle.disabled, statesStyle.normal)};
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: statesStyle.disabled,
+    fallbackTokens: statesStyle.normal
+  })};
       cursor: no-drop;
 
       ${IconContainer},${LoaderSVG} {
@@ -57,7 +76,11 @@ const CommonInputCompose = _styled.div.attrs(() => ({
     `;
 }, () => getStateStyle(useTheme()), ({
   $variant
-}) => styleFromTokens([tokenMaps.borderWidth, tokenMaps.borderRadius], useTheme().components.input.variants[$variant], useTheme().components.input.variants.outline), ({
+}) => styleFromTokens({
+  tokenMaps: [tokenMaps.borderWidth, tokenMaps.borderRadius],
+  tokens: useTheme().components.input.variants[$variant],
+  fallbackTokens: useTheme().components.input.variants.outline
+}), ({
   $variant
 }) => $variant !== "underline" ? void 0 : css`
             border-top-color: transparent;

package/dist/Inputs/hooks/numericInput/numericInput.utils.cjs

@@ -12,11 +12,19 @@ const roundDecimal = (value, fractionDigits) => +value.toFixed(fractionDigits);
 const isInoperative = (value) => value == null || typeof value === "number" && Number.isNaN(value);
 const isEmpty = (value) => isInoperative(value) || value === "";
 const toNumberOptimistic = (value) => {
-  if (isInoperative(value)) return void 0;
-  if (typeof value === "number") return value;
-  if (!Number.isNaN(+value)) return +value;
+  if (isInoperative(value)) {
+    return void 0;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  if (!Number.isNaN(+value)) {
+    return +value;
+  }
   value = `${value}0`;
-  if (!Number.isNaN(+value)) return +value;
+  if (!Number.isNaN(+value)) {
+    return +value;
+  }
   value = value.replace(/e/i, "0e");
   return !Number.isNaN(+value) ? +value : void 0;
 };

package/dist/Inputs/hooks/numericInput/numericInput.utils.js

@@ -10,11 +10,19 @@ const roundDecimal = (value, fractionDigits) => +value.toFixed(fractionDigits);
 const isInoperative = (value) => value == null || typeof value === "number" && Number.isNaN(value);
 const isEmpty = (value) => isInoperative(value) || value === "";
 const toNumberOptimistic = (value) => {
-  if (isInoperative(value)) return void 0;
-  if (typeof value === "number") return value;
-  if (!Number.isNaN(+value)) return +value;
+  if (isInoperative(value)) {
+    return void 0;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  if (!Number.isNaN(+value)) {
+    return +value;
+  }
   value = `${value}0`;
-  if (!Number.isNaN(+value)) return +value;
+  if (!Number.isNaN(+value)) {
+    return +value;
+  }
   value = value.replace(/e/i, "0e");
   return !Number.isNaN(+value) ? +value : void 0;
 };

package/dist/Inputs/hooks/numericInput/useNumericInput.cjs

@@ -2,14 +2,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const numericInput_utils = require("./numericInput.utils.cjs");
-const snapToConstraints = (value, min, max, maxDecimals) => numericInput_utils.roundDecimal(numericInput_utils.snapToRange(value, min, max), maxDecimals);
+const snapToConstraints = ({
+  value,
+  min,
+  max,
+  maxDecimals
+}) => numericInput_utils.roundDecimal(numericInput_utils.snapToRange(value, min, max), maxDecimals);
 const defaultValidate = ({
   value,
   required,
   min,
   max,
   maxDecimals
-}) => !required && value == null ? null : snapToConstraints(value || 0, min, max, maxDecimals);
+}) => !required && value == null ? null : snapToConstraints({
+  value: value || 0,
+  min,
+  max,
+  maxDecimals
+});
 const defaultCalcStepActionValue = ({
   value,
   step,
@@ -44,7 +54,9 @@ const useNumericInput = ({
   }, [max, maxDecimals, min, step]);
   React.useLayoutEffect(() => {
     if (numericInput_utils.isEmpty(value)) {
-      if (lastValueRef.current != null) setDisplayValue("");
+      if (lastValueRef.current != null) {
+        setDisplayValue("");
+      }
     } else if (lastValueRef.current !== value) {
       setDisplayValue(String(value));
       lastValueRef.current = value;

package/dist/Inputs/hooks/numericInput/useNumericInput.js

@@ -1,13 +1,23 @@
 import { useState, useRef, useMemo, useLayoutEffect, useCallback } from "react";
 import { normalizeMaxDecimals, isEmpty, toNumberOptimistic, toString, getClosestDivisibleNumber, normalizeMinMax, normalizeStep, toNumber, roundDecimal, snapToRange } from "./numericInput.utils.js";
-const snapToConstraints = (value, min, max, maxDecimals) => roundDecimal(snapToRange(value, min, max), maxDecimals);
+const snapToConstraints = ({
+  value,
+  min,
+  max,
+  maxDecimals
+}) => roundDecimal(snapToRange(value, min, max), maxDecimals);
 const defaultValidate = ({
   value,
   required,
   min,
   max,
   maxDecimals
-}) => !required && value == null ? null : snapToConstraints(value || 0, min, max, maxDecimals);
+}) => !required && value == null ? null : snapToConstraints({
+  value: value || 0,
+  min,
+  max,
+  maxDecimals
+});
 const defaultCalcStepActionValue = ({
   value,
   step,
@@ -42,7 +52,9 @@ const useNumericInput = ({
   }, [max, maxDecimals, min, step]);
   useLayoutEffect(() => {
     if (isEmpty(value)) {
-      if (lastValueRef.current != null) setDisplayValue("");
+      if (lastValueRef.current != null) {
+        setDisplayValue("");
+      }
     } else if (lastValueRef.current !== value) {
       setDisplayValue(String(value));
       lastValueRef.current = value;

package/dist/Loader/Loader.cjs

@@ -19,6 +19,7 @@ const Loader = ({
     "aria-live": loaderText ? void 0 : "polite",
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsxs(Loader_style.InnerFlexContainer, {
+      "aria-busy": true,
       role: loaderText ? void 0 : "status",
       children: [jsxRuntime.jsxRuntimeExports.jsx(Loader_style.LoaderSVG, {
         "$variant": variant,

package/dist/Loader/Loader.js

@@ -17,6 +17,7 @@ const Loader = ({
     "aria-live": loaderText ? void 0 : "polite",
     ...restProps,
     children: jsxRuntimeExports.jsxs(InnerFlexContainer, {
+      "aria-busy": true,
       role: loaderText ? void 0 : "status",
       children: [jsxRuntimeExports.jsx(LoaderSVG, {
         "$variant": variant,

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.style.cjs

@@ -16,21 +16,36 @@ const getMenuItemStatesStyle = (stateStyles) => {
   };
   return _styled.css`
     & {
-      ${css_utils.styleFromTokens(maps, fallbackStyle)}
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: fallbackStyle
+  })}
     }
 
     &[data-highlighted],
     &:hover {
-      ${css_utils.styleFromTokens(maps, stateStyles.hover, fallbackStyle)}
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateStyles.hover,
+    fallbackTokens: fallbackStyle
+  })}
     }
 
     &[data-selected] {
-      ${css_utils.styleFromTokens(maps, stateStyles.selected, fallbackStyle)}
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateStyles.selected,
+    fallbackTokens: fallbackStyle
+  })}
     }
 
     &[data-disabled],
     &:disabled {
-      ${css_utils.styleFromTokens(maps, stateStyles.disabled, fallbackStyle)}
+      ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateStyles.disabled,
+    fallbackTokens: fallbackStyle
+  })}
     }
   `;
 };

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.style.js

@@ -12,21 +12,36 @@ const getMenuItemStatesStyle = (stateStyles) => {
   };
   return css`
     & {
-      ${styleFromTokens(maps, fallbackStyle)}
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: fallbackStyle
+  })}
     }
 
     &[data-highlighted],
     &:hover {
-      ${styleFromTokens(maps, stateStyles.hover, fallbackStyle)}
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateStyles.hover,
+    fallbackTokens: fallbackStyle
+  })}
     }
 
     &[data-selected] {
-      ${styleFromTokens(maps, stateStyles.selected, fallbackStyle)}
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateStyles.selected,
+    fallbackTokens: fallbackStyle
+  })}
     }
 
     &[data-disabled],
     &:disabled {
-      ${styleFromTokens(maps, stateStyles.disabled, fallbackStyle)}
+      ${styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateStyles.disabled,
+    fallbackTokens: fallbackStyle
+  })}
     }
   `;
 };

package/dist/Menu/components/Content/components/Label/components/Compose/Compose.style.cjs

@@ -11,7 +11,10 @@ const MenuContentLabelCompose = _styled__default.default.div.withConfig({
   componentId: "RedisUI__sc-sansj6-0"
 })(["", " gap:", ";padding:", ";padding-inline-start:", ";display:flex;align-items:center;cursor:default;"], ({
   variant = "header"
-}) => css_utils.styleFromTokens(maps, redisUiStyles.useTheme().components.menu.label.variants[variant]), () => redisUiStyles.useTheme().components.menu.label.gap, () => redisUiStyles.useTheme().components.menu.label.padding, ({
+}) => css_utils.styleFromTokens({
+  tokenMaps: maps,
+  tokens: redisUiStyles.useTheme().components.menu.label.variants[variant]
+}), () => redisUiStyles.useTheme().components.menu.label.gap, () => redisUiStyles.useTheme().components.menu.label.padding, ({
   shift
 }) => {
   const styles = redisUiStyles.useTheme().components.menu.label;

package/dist/Menu/components/Content/components/Label/components/Compose/Compose.style.js

@@ -7,7 +7,10 @@ const MenuContentLabelCompose = _styled.div.withConfig({
   componentId: "RedisUI__sc-sansj6-0"
 })(["", " gap:", ";padding:", ";padding-inline-start:", ";display:flex;align-items:center;cursor:default;"], ({
   variant = "header"
-}) => styleFromTokens(maps, useTheme().components.menu.label.variants[variant]), () => useTheme().components.menu.label.gap, () => useTheme().components.menu.label.padding, ({
+}) => styleFromTokens({
+  tokenMaps: maps,
+  tokens: useTheme().components.menu.label.variants[variant]
+}), () => useTheme().components.menu.label.gap, () => useTheme().components.menu.label.padding, ({
   shift
 }) => {
   const styles = useTheme().components.menu.label;

package/dist/Modal/components/Content/components/Compose/Compose.cjs

@@ -52,7 +52,9 @@ const Compose = ({
       onCloseAutoFocus: (e) => {
         var _a;
         e.preventDefault();
-        if (!document.querySelector("div[role=dialog][data-role=dialog]")) (_a = focusedRef.current) == null ? void 0 : _a.focus();
+        if (!document.querySelector("div[role=dialog][data-role=dialog]")) {
+          (_a = focusedRef.current) == null ? void 0 : _a.focus();
+        }
       }
     })]
   });

package/dist/Modal/components/Content/components/Compose/Compose.js

@@ -50,7 +50,9 @@ const Compose = ({
       onCloseAutoFocus: (e) => {
         var _a;
         e.preventDefault();
-        if (!document.querySelector("div[role=dialog][data-role=dialog]")) (_a = focusedRef.current) == null ? void 0 : _a.focus();
+        if (!document.querySelector("div[role=dialog][data-role=dialog]")) {
+          (_a = focusedRef.current) == null ? void 0 : _a.focus();
+        }
       }
     })]
   });

package/dist/Modal/components/Content/components/Description/Description.cjs

@@ -13,7 +13,9 @@ const Description = Object.assign(({
 }) => {
   var _a;
   const emptyContent = !((_a = react_utils.childrenToString(children)) == null ? void 0 : _a.trim());
-  if (emptyContent) return null;
+  if (emptyContent) {
+    return null;
+  }
   const mainElement = jsxRuntime.jsxRuntimeExports.jsx(index.Description, {
     asChild: true,
     children: jsxRuntime.jsxRuntimeExports.jsx(Description_style.DescriptionContainer, {

package/dist/Modal/components/Content/components/Description/Description.js

@@ -11,7 +11,9 @@ const Description = Object.assign(({
 }) => {
   var _a;
   const emptyContent = !((_a = childrenToString(children)) == null ? void 0 : _a.trim());
-  if (emptyContent) return null;
+  if (emptyContent) {
+    return null;
+  }
   const mainElement = jsxRuntimeExports.jsx(Description$1, {
     asChild: true,
     children: jsxRuntimeExports.jsx(DescriptionContainer, {

package/dist/MultiSelect/components/Compose/hooks/useMultiSelectContextApi.cjs

@@ -57,7 +57,9 @@ function useMultiSelectContextApi({
     };
     const hasSelectable = enabledOptions.length > 0;
     const getIsAllSelected = () => {
-      if (!hasSelectable) return false;
+      if (!hasSelectable) {
+        return false;
+      }
       const selectedValues = new Set(values);
       return !enabledOptions.some(({
         value

package/dist/MultiSelect/components/Compose/hooks/useMultiSelectContextApi.js

@@ -55,7 +55,9 @@ function useMultiSelectContextApi({
     };
     const hasSelectable = enabledOptions.length > 0;
     const getIsAllSelected = () => {
-      if (!hasSelectable) return false;
+      if (!hasSelectable) {
+        return false;
+      }
       const selectedValues = new Set(values);
       return !enabledOptions.some(({
         value

package/dist/MultiSelect/components/Trigger/components/MultiValue/MultiValue.cjs

@@ -39,7 +39,9 @@ const MultiValue = ({
   const handlePointerDown = (e) => {
     let targetElement = e.target;
     while (targetElement && targetElement !== ref.current) {
-      if (targetElement.tagName === "BUTTON") e.stopPropagation();
+      if (targetElement.tagName === "BUTTON") {
+        e.stopPropagation();
+      }
       targetElement = targetElement.parentElement;
     }
   };

package/dist/MultiSelect/components/Trigger/components/MultiValue/MultiValue.js

@@ -37,7 +37,9 @@ const MultiValue = ({
   const handlePointerDown = (e) => {
     let targetElement = e.target;
     while (targetElement && targetElement !== ref.current) {
-      if (targetElement.tagName === "BUTTON") e.stopPropagation();
+      if (targetElement.tagName === "BUTTON") {
+        e.stopPropagation();
+      }
       targetElement = targetElement.parentElement;
     }
   };

package/dist/Overflow/Overflow.cjs

@@ -26,7 +26,9 @@ const Overflow = ({
   const handleItemSizeChange = (size, itemKey) => {
     setSizes((origin) => {
       const origSize = origin.get(itemKey);
-      if (origSize != null && isSizingContainerRef.current || origSize === size) return origin;
+      if (origSize != null && isSizingContainerRef.current || origSize === size) {
+        return origin;
+      }
       const clone = new Map(origin);
       if (size == null) {
         clone.delete(itemKey);

package/dist/Overflow/Overflow.js

@@ -24,7 +24,9 @@ const Overflow = ({
   const handleItemSizeChange = (size, itemKey) => {
     setSizes((origin) => {
       const origSize = origin.get(itemKey);
-      if (origSize != null && isSizingContainerRef.current || origSize === size) return origin;
+      if (origSize != null && isSizingContainerRef.current || origSize === size) {
+        return origin;
+      }
       const clone = new Map(origin);
       if (size == null) {
         clone.delete(itemKey);

package/dist/Overflow/Overflow.utils.cjs

@@ -16,7 +16,9 @@ const calcVisibleCount = ({
     let indexInRow = 0;
     itemKeys.some((key, index) => {
       const size = itemSizes.get(key);
-      if (size === void 0) return true;
+      if (size === void 0) {
+        return true;
+      }
       const calcOverflow = () => {
         const isLastRow = row === maxRows - 1;
         const isFirstInRow = indexInRow === 0;
@@ -26,8 +28,9 @@ const calcVisibleCount = ({
         summarySize += itemSize;
         indexInRow += 1;
         const isOverflow2 = summarySize + expectedExtraSize > containerSize;
-        if (!isOverflow2) visibleCount += 1;
-        else if (isFirstInRow && itemSize >= containerSize && (!isLastRow || isLastItem)) {
+        if (!isOverflow2) {
+          visibleCount += 1;
+        } else if (isFirstInRow && itemSize >= containerSize && (!isLastRow || isLastItem)) {
           visibleCount += 1;
           return false;
         }
@@ -35,7 +38,9 @@ const calcVisibleCount = ({
       };
       const isOverflow = calcOverflow();
       if (isOverflow) {
-        if (row === maxRows - 1) return true;
+        if (row === maxRows - 1) {
+          return true;
+        }
         row += 1;
         indexInRow = 0;
         summarySize = 0;
@@ -49,8 +54,12 @@ const calcVisibleCount = ({
 const verifyChildren = (children) => {
   const keysCheck = /* @__PURE__ */ new Set();
   return React.Children.toArray(children).filter((child) => {
-    if (typeof child !== "object") throw new Error("Child must be ReactElement");
-    if (!("key" in child) || !child.key || keysCheck.has(child.key)) throw new Error("Each child element must have unique key");
+    if (typeof child !== "object") {
+      throw new Error("Child must be ReactElement");
+    }
+    if (!("key" in child) || !child.key || keysCheck.has(child.key)) {
+      throw new Error("Each child element must have unique key");
+    }
     keysCheck.add(child.key);
     return true;
   });