@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/toggle-button/src/tv.d.ts

@@ -19,7 +19,7 @@ export declare const toggleButtonTv: import('tailwind-variants').TVReturnType<{
     };
     disabled: {
         true: {
-            label: string;
+            root: string;
         };
         false: {};
     };
@@ -62,7 +62,7 @@ export declare const toggleButtonTv: import('tailwind-variants').TVReturnType<{
     };
     disabled: {
         true: {
-            label: string;
+            root: string;
         };
         false: {};
     };
@@ -105,7 +105,7 @@ export declare const toggleButtonTv: import('tailwind-variants').TVReturnType<{
     };
     disabled: {
         true: {
-            label: string;
+            root: string;
         };
         false: {};
     };
@@ -128,3 +128,67 @@ export declare const toggleButtonTv: import('tailwind-variants').TVReturnType<{
     input: string[];
     label: string[];
 }, undefined, unknown, unknown, undefined>>;
+export declare const toggleGroupTv: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    multiple: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    multiple: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+}, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    multiple: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/toggle-button/src/tv.js

@@ -1,11 +1,11 @@
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const toggleButtonTv = tcv({
   slots: {
-    root: ["relative"],
+    root: ["relative rounded-md"],
     input: ["absolute inset-0 h-full w-full", "peer pointer-events-auto appearance-none opacity-0"],
     label: [
-      "absolute inset-0 flex h-full w-full rounded-md",
-      "items-center justify-center",
+      "absolute inset-0 flex h-full w-full rounded-[inherit]",
+      "items-center justify-center select-none",
       "border border-solid border-transparent",
       "peer-focus-visible:border-selected-boundary"
     ]
@@ -27,7 +27,7 @@ const toggleButtonTv = tcv({
     },
     disabled: {
       true: {
-        label: "text-secondary-foreground"
+        root: "text-secondary-foreground"
       },
       false: {}
     },
@@ -50,7 +50,7 @@ const toggleButtonTv = tcv({
       active: false,
       disabled: false,
       class: {
-        label: "hover:bg-secondary-background"
+        root: "hover:bg-secondary-background"
       }
     },
     {
@@ -59,7 +59,7 @@ const toggleButtonTv = tcv({
       event: "click",
       disabled: false,
       class: {
-        label: "active:bg-tertiary-background"
+        root: "active:bg-tertiary-background"
       }
     },
     {
@@ -69,7 +69,7 @@ const toggleButtonTv = tcv({
       disabled: false,
       event: "click",
       class: {
-        label: "active:bg-tertiary-background"
+        root: "active:bg-tertiary-background"
       }
     },
     {
@@ -79,7 +79,7 @@ const toggleButtonTv = tcv({
       disabled: false,
       event: "click",
       class: {
-        label: "active:bg-accent-background/10"
+        root: "active:bg-accent-background/10"
       }
     },
     {
@@ -87,7 +87,7 @@ const toggleButtonTv = tcv({
       active: true,
       disabled: false,
       class: {
-        label: "bg-tertiary-background"
+        root: "bg-tertiary-background"
       }
     },
     {
@@ -105,7 +105,7 @@ const toggleButtonTv = tcv({
       disabled: false,
       checked: false,
       class: {
-        label: "bg-secondary-background"
+        root: "bg-secondary-background"
       }
     },
     {
@@ -114,7 +114,7 @@ const toggleButtonTv = tcv({
       disabled: false,
       checked: true,
       class: {
-        label: "bg-accent-background/10 text-accent-foreground"
+        root: "bg-accent-background/10 text-accent-foreground"
       }
     },
     {
@@ -123,7 +123,7 @@ const toggleButtonTv = tcv({
       disabled: false,
       active: false,
       class: {
-        label: "bg-accent-background/10 text-accent-foreground hover:bg-accent-background/5"
+        root: "bg-accent-background/10 text-accent-foreground hover:bg-accent-background/5"
       }
     },
     {
@@ -131,7 +131,7 @@ const toggleButtonTv = tcv({
       checked: true,
       disabled: true,
       class: {
-        label: "bg-tertiary-background"
+        root: "bg-tertiary-background"
       }
     }
   ],
@@ -145,6 +145,37 @@ const toggleButtonTv = tcv({
     focused: false
   }
 });
+const toggleGroupTv = tcv({
+  slots: {
+    root: ["flex gap-1"]
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-row"
+      },
+      vertical: {
+        root: "flex-col"
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 pointer-events-none"
+      },
+      false: {}
+    },
+    multiple: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    disabled: false,
+    multiple: false
+  }
+});
 export {
-  toggleButtonTv
+  toggleButtonTv,
+  toggleGroupTv
 };

package/dist/components/tooltip/dist/index.d.ts

@@ -1,38 +1,10 @@
-import { HTMLProps, ReactNode } from 'react';
-import { Placement, UseFloatingReturn } from '@floating-ui/react';
+import { Placement } from '@floating-ui/react';
+import { ReactNode } from 'react';
 import { KbdKey } from '../../kbd/src';
-import * as react from 'react';
 export { FloatingDelayGroup as TooltipProvider } from '@floating-ui/react';
+import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const TooltipTrigger: react.ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
-
-interface TooltipOptions {
-    disabled?: boolean;
-    initialOpen?: boolean;
-    offset?: number;
-    onOpenChange?: (open: boolean) => void;
-    open?: boolean;
-    placement?: Placement;
-}
-interface TooltipContextValue {
-    arrowRef: React.RefObject<HTMLElement>;
-    context: UseFloatingReturn["context"];
-    disabled: boolean;
-    floatingStyles: React.CSSProperties;
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    isPositioned: UseFloatingReturn["isPositioned"];
-    middlewareData: UseFloatingReturn["middlewareData"];
-    open: boolean;
-    placement: Placement;
-    refs: UseFloatingReturn["refs"];
-    setOpen: (open: boolean) => void;
-    strategy: UseFloatingReturn["strategy"];
-    update: UseFloatingReturn["update"];
-    x: number | null;
-    y: number | null;
-}
 interface TooltipProps {
     children?: React.ReactNode;
     className?: string;
@@ -55,17 +27,12 @@ interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
     variant?: "default" | "light";
     withArrow?: boolean;
 }
-interface TooltipArrowProps {
-    className?: string;
-    variant?: "default" | "light";
-}
-
-declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-declare const TooltipArrow: react.ForwardRefExoticComponent<TooltipArrowProps & react.RefAttributes<HTMLDivElement>>;
-
-declare function useTooltip({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, disabled, offset: offsetValue, }?: TooltipOptions): TooltipContextValue;
 
-declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function TooltipRoot(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare const Tooltip: typeof TooltipRoot & {
+    Trigger: react.ForwardRefExoticComponent<Omit<react.HTMLProps<HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
 
-export { Tooltip, TooltipArrow, type TooltipArrowProps, TooltipContent, type TooltipContentProps, type TooltipContextValue, type TooltipOptions, type TooltipProps, TooltipTrigger, useTooltip };
+export { Tooltip, type TooltipContentProps, type TooltipProps };

package/dist/components/tooltip/dist/index.js

@@ -1,9 +1,9 @@
-import { Slot } from "../../slot/dist/index.js";
-import { useDelayGroupContext, offset, flip, shift, arrow, useFloating, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions, useMergeRefs, useDelayGroup, useTransitionStyles, FloatingPortal } from "@floating-ui/react";
+import { Kbd } from "../../kbd/dist/index.js";
+import { useMergeRefs, useDelayGroup, useTransitionStyles, FloatingPortal, offset, flip, shift, arrow, useFloating, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { FloatingDelayGroup } from "@floating-ui/react";
-import { createContext, forwardRef, useState, useRef, useMemo, useContext } from "react";
+import { forwardRef, createContext, useMemo, useState, useRef, useContext } from "react";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Kbd } from "../../kbd/dist/index.js";
+import { Slot } from "../../slot/dist/index.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
 var TooltipContext = createContext(null);
 function useTooltipState() {
@@ -14,26 +14,10 @@ function useTooltipState() {
   return context;
 }
 var PORTAL_ROOT_ID = "floating-tooltip-root";
-var TooltipTrigger = forwardRef(
-  function TooltipTrigger2({ children, ...props }, propRef) {
-    const state = useTooltipState();
-    const childrenRef = children == null ? void 0 : children.ref;
-    const ref = useMergeRefs([state.refs.setReference, propRef, childrenRef]);
-    return /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref,
-        ...state.disabled && { disabled: true },
-        ...state.getReferenceProps(props),
-        children
-      }
-    );
-  }
-);
 var tooltipContentVariants = tcv({
   slots: {
     root: "rounded-md px-2 py-1",
-    arrow: "translate-none"
+    arrow: "box-border"
   },
   variants: {
     variant: {
@@ -109,7 +93,7 @@ var TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "def
       width: `${ARROW_SIZE}px`,
       height: `${ARROW_SIZE}px`,
       transform: "rotate(45deg)",
-      // floating-ui 会自动计算正确的位置并避免圆角冲突
+      // floating-ui will automatically calculate the correct position and avoid corner conflicts
       top: y != null ? `${y}px` : void 0,
       left: x != null ? `${x}px` : void 0,
       right: void 0,
@@ -146,9 +130,10 @@ var TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
     const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
     const state = useTooltipState();
-    const { isInstantPhase, currentId } = useDelayGroupContext();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
-    useDelayGroup(state.context, { id: state.context.floatingId });
+    const { isInstantPhase, currentId } = useDelayGroup(state.context, {
+      id: state.context.floatingId
+    });
     const INSTANT_DURATION = 0;
     const ANIMATION_DURATION = 100;
     const { isMounted, styles } = useTransitionStyles(state.context, {
@@ -160,7 +145,7 @@ var TooltipContent = forwardRef(
         opacity: 0,
         transform: "scale(0.96)"
       },
-      // 使用 common 选项设置正确的 transformOrigin
+      // Use common option to set the correct transformOrigin
       common: ({ side }) => ({
         transformOrigin: {
           top: "bottom",
@@ -195,6 +180,22 @@ var TooltipContent = forwardRef(
     ) });
   }
 );
+var TooltipTrigger = forwardRef(
+  function TooltipTrigger2({ children, ...props }, propRef) {
+    const state = useTooltipState();
+    const childrenRef = children == null ? void 0 : children.ref;
+    const ref = useMergeRefs([state.refs.setReference, propRef, childrenRef]);
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        ...state.disabled && { disabled: true },
+        ...state.getReferenceProps(props),
+        children
+      }
+    );
+  }
+);
 function useTooltip({
   initialOpen = false,
   placement = "top",
@@ -207,7 +208,6 @@ function useTooltip({
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const arrowRef = useRef(null);
-  const { delay } = useDelayGroupContext();
   const middleware = useMemo(
     () => [
       offset(offsetValue),
@@ -216,7 +216,7 @@ function useTooltip({
       arrow({
         element: arrowRef,
         padding: 8
-        // 圆角保护：确保箭头距离容器边缘至少8px
+        // Corner protection: ensure arrow is at least 8px from container edge
       })
     ],
     [offsetValue]
@@ -229,6 +229,7 @@ function useTooltip({
     middleware
   });
   const context = data.context;
+  const { delay } = useDelayGroup(context);
   const hover = useHover(context, {
     move: false,
     enabled: controlledOpen == null && !disabled,
@@ -254,7 +255,7 @@ function useTooltip({
     [open, setOpen, disabled, interactions, data]
   );
 }
-function Tooltip(props) {
+function TooltipRoot(props) {
   const {
     children,
     className,
@@ -303,11 +304,12 @@ function Tooltip(props) {
   }
   return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: tooltip, children });
 }
+var Tooltip = Object.assign(TooltipRoot, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  displayName: "Tooltip"
+});
 export {
   Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  FloatingDelayGroup as TooltipProvider,
-  TooltipTrigger,
-  useTooltip
+  FloatingDelayGroup as TooltipProvider
 };

package/dist/components/tooltip/src/components/tooltip-arrow.js

@@ -25,7 +25,7 @@ const TooltipArrow = forwardRef(function TooltipArrow2({ className, variant = "d
       width: `${ARROW_SIZE}px`,
       height: `${ARROW_SIZE}px`,
       transform: "rotate(45deg)",
-      // floating-ui 会自动计算正确的位置并避免圆角冲突
+      // floating-ui will automatically calculate the correct position and avoid corner conflicts
       top: y != null ? `${y}px` : void 0,
       left: x != null ? `${x}px` : void 0,
       right: void 0,

package/dist/components/tooltip/src/components/tooltip-content.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDelayGroupContext, useMergeRefs, useDelayGroup, useTransitionStyles, FloatingPortal } from "@floating-ui/react";
+import { useMergeRefs, useDelayGroup, useTransitionStyles, FloatingPortal } from "@floating-ui/react";
 import { forwardRef, useMemo } from "react";
 import { useTooltipState } from "../context/tooltip-context.js";
 import { tooltipContentVariants } from "../tv.js";
@@ -9,9 +9,10 @@ const TooltipContent = forwardRef(
   function TooltipContent2(props, propRef) {
     const { className, withArrow = true, variant = "default", children, portalId, ...rest } = props;
     const state = useTooltipState();
-    const { isInstantPhase, currentId } = useDelayGroupContext();
     const ref = useMergeRefs([state.refs.setFloating, propRef]);
-    useDelayGroup(state.context, { id: state.context.floatingId });
+    const { isInstantPhase, currentId } = useDelayGroup(state.context, {
+      id: state.context.floatingId
+    });
     const INSTANT_DURATION = 0;
     const ANIMATION_DURATION = 100;
     const { isMounted, styles } = useTransitionStyles(state.context, {
@@ -23,7 +24,7 @@ const TooltipContent = forwardRef(
         opacity: 0,
         transform: "scale(0.96)"
       },
-      // 使用 common 选项设置正确的 transformOrigin
+      // Use common option to set the correct transformOrigin
       common: ({ side }) => ({
         transformOrigin: {
           top: "bottom",

package/dist/components/tooltip/src/context/index.d.ts

@@ -0,0 +1 @@
+export { TooltipContext } from './tooltip-context';

package/dist/components/tooltip/src/hooks/use-tooltip.js

@@ -1,4 +1,4 @@
-import { useDelayGroupContext, offset, flip, shift, arrow, useFloating, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { offset, flip, shift, arrow, useFloating, autoUpdate, useDelayGroup, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { useState, useRef, useMemo } from "react";
 function useTooltip({
   initialOpen = false,
@@ -12,7 +12,6 @@ function useTooltip({
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
   const arrowRef = useRef(null);
-  const { delay } = useDelayGroupContext();
   const middleware = useMemo(
     () => [
       offset(offsetValue),
@@ -21,7 +20,7 @@ function useTooltip({
       arrow({
         element: arrowRef,
         padding: 8
-        // 圆角保护：确保箭头距离容器边缘至少8px
+        // Corner protection: ensure arrow is at least 8px from container edge
       })
     ],
     [offsetValue]
@@ -34,6 +33,7 @@ function useTooltip({
     middleware
   });
   const context = data.context;
+  const { delay } = useDelayGroup(context);
   const hover = useHover(context, {
     move: false,
     enabled: controlledOpen == null && !disabled,

package/dist/components/tooltip/src/index.d.ts

@@ -1,5 +1,3 @@
-export * from './components';
-export * from './hooks';
+export { Tooltip } from './tooltip';
+export type { TooltipProps, TooltipContentProps } from './types';
 export { FloatingDelayGroup as TooltipProvider } from '@floating-ui/react';
-export * from './tooltip';
-export * from './types';

package/dist/components/tooltip/src/tooltip.d.ts

@@ -1,2 +1,8 @@
 import { TooltipProps } from './types';
-export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipRoot(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: typeof TooltipRoot & {
+    Trigger: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLProps<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<import('../..').TooltipContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+export {};

package/dist/components/tooltip/src/tooltip.js

@@ -4,7 +4,7 @@ import { TooltipContent } from "./components/tooltip-content.js";
 import { TooltipTrigger } from "./components/tooltip-trigger.js";
 import { PORTAL_ROOT_ID, TooltipContext } from "./context/tooltip-context.js";
 import { useTooltip } from "./hooks/use-tooltip.js";
-function Tooltip(props) {
+function TooltipRoot(props) {
   const {
     children,
     className,
@@ -53,6 +53,11 @@ function Tooltip(props) {
   }
   return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: tooltip, children });
 }
+const Tooltip = Object.assign(TooltipRoot, {
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  displayName: "Tooltip"
+});
 export {
   Tooltip
 };

package/dist/components/tooltip/src/tv.js

@@ -2,7 +2,7 @@ import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const tooltipContentVariants = tcv({
   slots: {
     root: "rounded-md px-2 py-1",
-    arrow: "translate-none"
+    arrow: "box-border"
   },
   variants: {
     variant: {

package/dist/components/virtualized-grid/dist/index.d.ts

@@ -73,7 +73,7 @@ interface VirtualizedGridProps<P> {
 
 declare function VirtualizedGrid<P>(props: VirtualizedGridProps<P>): react_jsx_runtime.JSX.Element;
 
-declare function useContainerData(internalRef: RefObject<HTMLElement>, externalRef?: RefObject<HTMLElement>, containerRef?: RefObject<HTMLElement>): ContainerDataProps;
+declare function useContainerData(internalRef: RefObject<HTMLElement>, externalRef?: RefObject<HTMLElement>, _containerRef?: RefObject<HTMLElement>): ContainerDataProps;
 declare function useConfigData<P>(containerData: ContainerDataProps, props: VirtualizedGridProps<P>): ConfigDataProps<P> | null;
 declare function useLayoutData<P>(configData: ConfigDataProps<P> | null): LayoutDataProps<P> | null;
 declare function useRenderData<P>(containerData: ContainerDataProps, configData: ConfigDataProps<P> | null, layoutData: LayoutDataProps<P> | null): RenderDataProps<P> | null;
@@ -83,7 +83,7 @@ declare function useWindowSize(): ElementSize;
 declare function useElementSize(ref: RefObject<Element>): ElementSize | null;
 declare function useWindowScroll(): ElementScroll;
 declare function useElementScroll(ref: RefObject<HTMLElement>): ElementScroll;
-declare function useElementWindowOffset(ref: RefObject<HTMLElement>): number | null;
+declare function useElementWindowOffset(ref: RefObject<HTMLElement>, scrollContainerRef?: RefObject<HTMLElement>): number | null;
 declare function useIntersecting(ref: RefObject<HTMLElement>, rootMargin: string): boolean;
 declare function getColumnWidth(columnCount: number | null, gridGap: number | null, elementWidth: number | null): number | null;
 declare function getGridRowStart<P>(cell: CellProps<P>, renderData: RenderDataProps<P> | null): string | undefined;

package/dist/components/virtualized-grid/src/use-item-pool.js

@@ -1,11 +1,13 @@
-import { useRef, useCallback, useMemo } from "react";
+import { useRef, useMemo, useEffect } from "react";
 function useItemPool(visibleItems, options = {}) {
   const { poolSize = 50, maxPoolSize = 200 } = options;
   const poolRef = useRef(/* @__PURE__ */ new Map());
   const keyToPoolIdRef = useRef(/* @__PURE__ */ new Map());
   const nextPoolIdRef = useRef(0);
-  const getPooledItem = useCallback(
-    (key, item, index) => {
+  const pooledItems = useMemo(() => {
+    const visibleKeys = new Set(visibleItems.map((v) => v.key));
+    return visibleItems.map((visibleItem, index) => {
+      const { key, item } = visibleItem;
       const existingPoolId = keyToPoolIdRef.current.get(key);
       if (existingPoolId !== void 0) {
         const pooledItem2 = poolRef.current.get(existingPoolId);
@@ -17,28 +19,23 @@ function useItemPool(visibleItems, options = {}) {
       }
       let poolId;
       const usedPoolIds = new Set(keyToPoolIdRef.current.values());
-      let reusablePoolId;
       for (let i = 0; i < nextPoolIdRef.current && i < maxPoolSize; i++) {
         if (!usedPoolIds.has(i)) {
-          reusablePoolId = i;
+          poolId = i;
           break;
         }
       }
-      if (reusablePoolId !== void 0) {
-        poolId = reusablePoolId;
-      } else if (nextPoolIdRef.current < maxPoolSize) {
+      if (poolId === void 0 && nextPoolIdRef.current < maxPoolSize) {
         poolId = nextPoolIdRef.current++;
-      } else {
-        const keysToEvict = [];
-        const visibleKeys = new Set(visibleItems.map((v) => v.key));
+      }
+      if (poolId === void 0) {
         for (const [k, pid] of keyToPoolIdRef.current.entries()) {
           if (!visibleKeys.has(k)) {
-            keysToEvict.push(k);
+            keyToPoolIdRef.current.delete(k);
             poolId = pid;
             break;
           }
         }
-        keysToEvict.forEach((k) => keyToPoolIdRef.current.delete(k));
       }
       if (poolId === void 0) {
         poolId = 0;
@@ -47,30 +44,21 @@ function useItemPool(visibleItems, options = {}) {
       poolRef.current.set(poolId, pooledItem);
       keyToPoolIdRef.current.set(key, poolId);
       return pooledItem;
-    },
-    [maxPoolSize, visibleItems]
-  );
-  const cleanupPool = useCallback(() => {
+    });
+  }, [visibleItems, maxPoolSize]);
+  useEffect(() => {
     const visibleKeys = new Set(visibleItems.map((v) => v.key));
     const keysToRemove = [];
     for (const [key, poolId] of keyToPoolIdRef.current.entries()) {
       if (!visibleKeys.has(key)) {
         keysToRemove.push(key);
-        const pooledItem = poolRef.current.get(poolId);
-        if (pooledItem && poolRef.current.size > poolSize) {
+        if (poolRef.current.size > poolSize) {
           poolRef.current.delete(poolId);
         }
       }
     }
     keysToRemove.forEach((key) => keyToPoolIdRef.current.delete(key));
   }, [visibleItems, poolSize]);
-  const pooledItems = useMemo(() => {
-    const items = visibleItems.map(
-      (visibleItem, index) => getPooledItem(visibleItem.key, visibleItem.item, index)
-    );
-    setTimeout(cleanupPool, 0);
-    return items;
-  }, [visibleItems, getPooledItem, cleanupPool]);
   return pooledItems;
 }
 export {