@choice-ui/react 1.4.3 → 1.4.5

package/dist/components/virtualized-grid/src/use-virtualized-grid.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { ConfigDataProps, ContainerDataProps, LayoutDataProps, RenderDataProps, VirtualizedGridProps } from './types';
-export declare function useContainerData(internalRef: RefObject<HTMLElement>, externalRef?: RefObject<HTMLElement>, containerRef?: RefObject<HTMLElement>): ContainerDataProps;
+export declare function useContainerData(internalRef: RefObject<HTMLElement>, externalRef?: RefObject<HTMLElement>, _containerRef?: RefObject<HTMLElement>): ContainerDataProps;
 export declare function useConfigData<P>(containerData: ContainerDataProps, props: VirtualizedGridProps<P>): ConfigDataProps<P> | null;
 export declare function useLayoutData<P>(configData: ConfigDataProps<P> | null): LayoutDataProps<P> | null;
 export declare function useRenderData<P>(containerData: ContainerDataProps, configData: ConfigDataProps<P> | null, layoutData: LayoutDataProps<P> | null): RenderDataProps<P> | null;

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

@@ -1,21 +1,27 @@
 import { useMemo } from "react";
-import { useWindowSize, useWindowScroll, useElementScroll, useElementWindowOffset, useElementSize, getColumnWidth } from "./utility.js";
-function useContainerData(internalRef, externalRef, containerRef) {
+import { useWindowSize, useWindowScroll, useElementScroll, useElementSize, useElementWindowOffset, getColumnWidth } from "./utility.js";
+function useContainerData(internalRef, externalRef, _containerRef) {
+  const isUsingCustomScrollContainer = externalRef !== void 0;
   const windowSize = useWindowSize();
   const windowScrollPosition = useWindowScroll();
-  const actualRef = externalRef && externalRef.current ? externalRef : internalRef;
-  const elementScrollPosition = useElementScroll(actualRef);
-  const windowScroll = externalRef && externalRef.current ? elementScrollPosition : windowScrollPosition;
-  const elementWindowOffset = useElementWindowOffset(actualRef);
+  const scrollRef = isUsingCustomScrollContainer ? externalRef : internalRef;
+  const elementScrollPosition = useElementScroll(scrollRef);
+  const scrollContainerSize = useElementSize(scrollRef);
+  const windowScroll = isUsingCustomScrollContainer ? elementScrollPosition : windowScrollPosition;
+  const viewportSize = isUsingCustomScrollContainer && scrollContainerSize ? scrollContainerSize : windowSize;
+  const elementWindowOffset = useElementWindowOffset(
+    internalRef,
+    isUsingCustomScrollContainer ? externalRef : void 0
+  );
   const elementSize = useElementSize(internalRef);
   return useMemo(() => {
     return {
-      windowSize,
+      windowSize: viewportSize,
       windowScroll,
       elementWindowOffset,
       elementSize
     };
-  }, [windowSize, windowScroll, elementWindowOffset, elementSize]);
+  }, [viewportSize, windowScroll, elementWindowOffset, elementSize]);
 }
 function useConfigData(containerData, props) {
   const { items, overscan = 5, gridGap, columnCount, itemData } = props;

package/dist/components/virtualized-grid/src/utility.d.ts

@@ -5,7 +5,7 @@ export declare function useWindowSize(): ElementSize;
 export declare function useElementSize(ref: RefObject<Element>): ElementSize | null;
 export declare function useWindowScroll(): ElementScroll;
 export declare function useElementScroll(ref: RefObject<HTMLElement>): ElementScroll;
-export declare function useElementWindowOffset(ref: RefObject<HTMLElement>): number | null;
+export declare function useElementWindowOffset(ref: RefObject<HTMLElement>, scrollContainerRef?: RefObject<HTMLElement>): number | null;
 export declare function useIntersecting(ref: RefObject<HTMLElement>, rootMargin: string): boolean;
 export declare function getColumnWidth(columnCount: number | null, gridGap: number | null, elementWidth: number | null): number | null;
 export declare function getGridRowStart<P>(cell: CellProps<P>, renderData: RenderDataProps<P> | null): string | undefined;

package/dist/components/virtualized-grid/src/utility.js

@@ -27,8 +27,13 @@ function getWindowScroll() {
     y: window.scrollY
   };
 }
-function getElementOffset(element) {
+function getElementOffset(element, scrollContainer) {
   if (!isBrowser) return 0;
+  if (scrollContainer) {
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = scrollContainer.getBoundingClientRect();
+    return elementRect.top - containerRect.top + scrollContainer.scrollTop;
+  }
   return window.scrollY + element.getBoundingClientRect().top;
 }
 function getElementScroll(element) {
@@ -76,65 +81,66 @@ function useElementSize(ref) {
   return elementSize;
 }
 function useWindowScroll() {
-  const [scrollPosition, setScrollPosition] = useState(getWindowScroll());
-  const ref = useConstRef(scrollPosition);
+  const [scrollPosition, setScrollPosition] = useState(getWindowScroll);
+  const scrollPositionRef = useConstRef(scrollPosition);
   useEffect(() => {
     function update() {
       const nextScrollPosition = getWindowScroll();
-      if (!isSameElementScroll(ref.current, nextScrollPosition)) {
+      if (!isSameElementScroll(scrollPositionRef.current, nextScrollPosition)) {
         setScrollPosition(nextScrollPosition);
       }
     }
-    window.addEventListener("scroll", update);
-    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update, { passive: true });
     return () => {
       window.removeEventListener("scroll", update);
       window.removeEventListener("resize", update);
     };
-  }, [ref]);
+  }, [scrollPositionRef]);
   return scrollPosition;
 }
+const INITIAL_SCROLL = { x: 0, y: 0 };
 function useElementScroll(ref) {
   const [scrollPosition, setScrollPosition] = useState(() => {
     if (ref.current) {
       return getElementScroll(ref.current);
-    } else {
-      return { x: 0, y: 0 };
     }
+    return INITIAL_SCROLL;
   });
   const scrollPositionRef = useConstRef(scrollPosition);
   useEffect(() => {
-    const currentRef = ref.current;
+    const element = ref.current;
+    if (!element) return;
     const onScroll = () => {
-      if (currentRef) {
-        const nextScrollPosition = getElementScroll(currentRef);
-        if (!isSameElementScroll(scrollPositionRef.current, nextScrollPosition)) {
-          setScrollPosition(nextScrollPosition);
-        }
+      const nextScrollPosition = getElementScroll(element);
+      if (!isSameElementScroll(scrollPositionRef.current, nextScrollPosition)) {
+        setScrollPosition(nextScrollPosition);
       }
     };
-    if (currentRef) currentRef.addEventListener("scroll", onScroll);
-    return () => {
-      if (currentRef) currentRef.removeEventListener("scroll", onScroll);
-    };
+    onScroll();
+    element.addEventListener("scroll", onScroll, { passive: true });
+    return () => element.removeEventListener("scroll", onScroll);
   }, [ref, scrollPositionRef]);
   return scrollPosition;
 }
-function useElementWindowOffset(ref) {
-  const [elementOffset, setElementOffset] = useState(() => {
-    if (ref.current) {
-      return getElementOffset(ref.current);
-    } else {
-      return null;
-    }
-  });
+function useElementWindowOffset(ref, scrollContainerRef) {
+  const [elementOffset, setElementOffset] = useState(null);
+  const offsetRef = useConstRef(elementOffset);
   useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      setElementOffset(getElementOffset(entries[0].target));
-    });
+    const updateOffset = () => {
+      if (ref.current) {
+        const newOffset = getElementOffset(ref.current, scrollContainerRef == null ? void 0 : scrollContainerRef.current);
+        if (offsetRef.current !== newOffset) {
+          setElementOffset(newOffset);
+        }
+      }
+    };
+    updateOffset();
+    const observer = new ResizeObserver(updateOffset);
     if (ref.current) observer.observe(ref.current);
+    if (scrollContainerRef == null ? void 0 : scrollContainerRef.current) observer.observe(scrollContainerRef.current);
     return () => observer.disconnect();
-  }, [ref]);
+  }, [ref, scrollContainerRef, offsetRef]);
   return elementOffset;
 }
 function useIntersecting(ref, rootMargin) {

package/dist/components/virtualized-grid/src/virtualized-grid.js

@@ -1,28 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useRef, useMemo } from "react";
 import { VirtualizedGridErrorBoundary } from "./error-boundary.js";
 import { VirtualizedGridTv } from "./tv.js";
 import { useItemPool } from "./use-item-pool.js";
 import { useContainerData, useConfigData, useLayoutData, useRenderData } from "./use-virtualized-grid.js";
 import { useIntersecting, getGridRowStart } from "./utility.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const EMPTY_VISIBLE_ITEMS = [];
 function VirtualizedGridInner(props) {
   const ref = useRef(null);
   const containerData = useContainerData(ref, props.scrollRef, props.containerRef);
   const configData = useConfigData(containerData, props);
   const layoutData = useLayoutData(configData);
   const renderData = useRenderData(containerData, configData, layoutData);
-  const intersecting = useIntersecting(
-    ref,
-    `${configData !== null ? configData.overscan * 100 : 0}px`
-  );
-  const pooledCells = useItemPool(
-    (renderData == null ? void 0 : renderData.cellsToRender.map((cell) => ({ key: cell.key, item: cell }))) || [],
-    {
-      poolSize: props.poolSize || 50,
-      maxPoolSize: props.maxPoolSize || 200
-    }
+  const itemIndexMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    props.items.forEach((item, index) => map.set(item, index));
+    return map;
+  }, [props.items]);
+  const rootMargin = useMemo(
+    () => `${configData !== null ? configData.overscan * 100 : 0}px`,
+    [configData == null ? void 0 : configData.overscan]
   );
+  const intersecting = useIntersecting(ref, rootMargin);
+  const visibleItemsForPool = useMemo(() => {
+    if (!(renderData == null ? void 0 : renderData.cellsToRender)) return EMPTY_VISIBLE_ITEMS;
+    return renderData.cellsToRender.map((cell) => ({ key: cell.key, item: cell }));
+  }, [renderData == null ? void 0 : renderData.cellsToRender]);
+  const pooledCells = useItemPool(visibleItemsForPool, {
+    poolSize: props.poolSize || 50,
+    maxPoolSize: props.maxPoolSize || 200
+  });
   const colWidth = props.fixedColumnWidth ? `${props.fixedColumnWidth}px` : "1fr";
   const tv = VirtualizedGridTv({
     listMode: props.listMode
@@ -47,11 +55,12 @@ function VirtualizedGridInner(props) {
           children: renderData !== null && props.enablePooling ? pooledCells.map((pooledCell) => {
             var _a;
             const cell = pooledCell.item;
+            const itemIndex = itemIndexMap.get(cell.item) ?? -1;
             return /* @__PURE__ */ jsx(
               "div",
               {
                 className: tv.item(),
-                "data-index": props.items.findIndex((item) => item === cell.item),
+                "data-index": itemIndex,
                 "data-render-index": pooledCell.index,
                 "data-id": cell.key,
                 "data-pool-id": pooledCell.poolId,
@@ -61,18 +70,19 @@ function VirtualizedGridInner(props) {
                   gridRowStart: getGridRowStart(cell, renderData),
                   ...(_a = props.itemProps) == null ? void 0 : _a.style
                 },
-                children: props.renderItem(cell.item, pooledCell.index)
+                children: props.renderItem(cell.item, itemIndex)
               },
               `pool-${pooledCell.poolId}`
             );
-          }) : renderData !== null && renderData.cellsToRender.map((cell, index) => {
+          }) : renderData !== null && renderData.cellsToRender.map((cell) => {
             var _a;
+            const itemIndex = itemIndexMap.get(cell.item) ?? -1;
             return /* @__PURE__ */ jsx(
               "div",
               {
                 className: tv.item(),
-                "data-index": props.items.findIndex((item) => item === cell.item),
-                "data-render-index": index,
+                "data-index": itemIndex,
+                "data-render-index": itemIndex,
                 "data-id": cell.key,
                 style: {
                   height: cell.height,
@@ -80,7 +90,7 @@ function VirtualizedGridInner(props) {
                   gridRowStart: getGridRowStart(cell, renderData),
                   ...(_a = props.itemProps) == null ? void 0 : _a.style
                 },
-                children: props.renderItem(cell.item, index)
+                children: props.renderItem(cell.item, itemIndex)
               },
               cell.key
             );

package/dist/context/choice-ui-provider.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { AlertDialogProps } from '../components/alert-dialog';
+export interface ChoiceUiProviderProps {
+    children: ReactNode;
+    /**
+     * AlertDialog configuration
+     */
+    alertDialog?: Omit<AlertDialogProps, "children">;
+    /**
+     * Tooltip delay configuration
+     * @default { open: 400, close: 200 }
+     */
+    tooltipDelay?: {
+        open?: number;
+        close?: number;
+    };
+}
+/**
+ * Unified provider for Choice UI components.
+ * Combines TooltipProvider and AlertDialogProvider for convenience.
+ *
+ * @example
+ * ```tsx
+ * import { ChoiceUiProvider } from "@choice-ui/react"
+ *
+ * function App() {
+ *   return (
+ *     <ChoiceUiProvider>
+ *       <YourApp />
+ *     </ChoiceUiProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function ChoiceUiProvider(props: ChoiceUiProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/choice-ui-provider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { FloatingDelayGroup } from "@floating-ui/react";
+import { AlertDialogProvider } from "../components/alert-dialog/dist/index.js";
+const DEFAULT_TOOLTIP_DELAY = {
+  open: 400,
+  close: 200
+};
+function ChoiceUiProvider(props) {
+  const { children, alertDialog, tooltipDelay = DEFAULT_TOOLTIP_DELAY } = props;
+  return /* @__PURE__ */ jsx(FloatingDelayGroup, { delay: tooltipDelay, children: /* @__PURE__ */ jsx(AlertDialogProvider, { ...alertDialog, children }) });
+}
+export {
+  ChoiceUiProvider
+};

package/dist/context/index.d.ts

@@ -0,0 +1,2 @@
+export { ChoiceUiProvider } from './choice-ui-provider';
+export type { ChoiceUiProviderProps } from './choice-ui-provider';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './context';
 export * from './shared';