@trackunit/react-components 1.20.20 → 1.21.4

package/index.cjs.js

@@ -1462,14 +1462,13 @@ const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems,
  * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
  */
 const useBreadcrumbItemsToRender = (breadcrumbItems) => {
-    const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
+    return react.useMemo(() => breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
             return (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
         }
         return (jsxRuntime.jsx(Text, { className: "text-nowrap pl-2 font-medium", size: "small", children: item.label }, index));
-    });
-    return breadCrumbItemsToJSX;
+    }), [breadcrumbItems]);
 };
 
 /**
@@ -2315,7 +2314,7 @@ const useCopyToClipboard = () => {
             throw new Error(`Copy failed: ${errorMessage}`);
         }
     }, []);
-    return [isCopied, copyToClipboard];
+    return react.useMemo(() => [isCopied, copyToClipboard], [isCopied, copyToClipboard]);
 };
 
 /**
@@ -2474,7 +2473,7 @@ const DEFAULT_SIZING = {
  * @param {PopoverProps} options The options for the popover
  * @returns {UsePopoverType} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, sizing = DEFAULT_SIZING, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, sizing = DEFAULT_SIZING, onOpenStateChange, id, className, "data-testid": dataTestId, }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = react.useState(initialOpen);
     const [labelId, setLabelId] = react.useState();
     const [descriptionId, setDescriptionId] = react.useState();
@@ -2558,8 +2557,12 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         descriptionId,
         setLabelId,
         setDescriptionId,
-        customProps: restOptions,
-    }), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+        customProps: {
+            id,
+            className,
+            "data-testid": dataTestId
+        },
+    }), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, id, className, dataTestId]);
 };
 
 const PopoverContext = react.createContext(null);
@@ -5916,7 +5919,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         // eslint-disable-next-line react-hooks/refs
         return containerRef.current ? totalSize >= containerRef.current.clientHeight : false;
     }, [totalSize]);
-    return {
+    return react.useMemo(() => ({
         ...virtualizer,
         containerRef,
         listRef,
@@ -5930,7 +5933,21 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         topSeparatorOnScroll,
         isAtTop,
         contentFillsContainer,
-    };
+    }), [
+        virtualizer,
+        containerRef,
+        listRef,
+        rows,
+        getListItemProps,
+        header,
+        resolvedLoadingIndicator,
+        shouldShowLoaderAtIndex,
+        count,
+        separator,
+        topSeparatorOnScroll,
+        isAtTop,
+        contentFillsContainer,
+    ]);
 };
 const getResolvedLoadingIndicator = (loadingIndicator) => {
     if (typeof loadingIndicator === "function") {
@@ -6024,9 +6041,7 @@ const useListItemHeight = () => {
         // Return the larger of calculated height or minimum height
         return Math.max(totalHeight, MIN_ITEM_HEIGHT);
     }, []);
-    return {
-        getListItemHeight,
-    };
+    return react.useMemo(() => ({ getListItemHeight }), [getListItemHeight]);
 };
 
 // These must be two separate divs (menu and menulist) so that the overflow-clip can be applied to the parent and the overflow-y-auto can be applied to the child.
@@ -7600,7 +7615,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
             unobserve();
         };
     }, [initializeObserver, unobserve, children]);
-    return { overflowContainerRef, itemOverflowMap };
+    return react.useMemo(() => ({ overflowContainerRef, itemOverflowMap }), [overflowContainerRef, itemOverflowMap]);
 };
 
 /**

package/index.esm.js

@@ -1460,14 +1460,13 @@ const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems,
  * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
  */
 const useBreadcrumbItemsToRender = (breadcrumbItems) => {
-    const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
+    return useMemo(() => breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
             return (jsxs("div", { className: "flex items-center", children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
         }
         return (jsx(Text, { className: "text-nowrap pl-2 font-medium", size: "small", children: item.label }, index));
-    });
-    return breadCrumbItemsToJSX;
+    }), [breadcrumbItems]);
 };
 
 /**
@@ -2313,7 +2312,7 @@ const useCopyToClipboard = () => {
             throw new Error(`Copy failed: ${errorMessage}`);
         }
     }, []);
-    return [isCopied, copyToClipboard];
+    return useMemo(() => [isCopied, copyToClipboard], [isCopied, copyToClipboard]);
 };
 
 /**
@@ -2472,7 +2471,7 @@ const DEFAULT_SIZING = {
  * @param {PopoverProps} options The options for the popover
  * @returns {UsePopoverType} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, sizing = DEFAULT_SIZING, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, sizing = DEFAULT_SIZING, onOpenStateChange, id, className, "data-testid": dataTestId, }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
     const [labelId, setLabelId] = useState();
     const [descriptionId, setDescriptionId] = useState();
@@ -2556,8 +2555,12 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
         descriptionId,
         setLabelId,
         setDescriptionId,
-        customProps: restOptions,
-    }), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+        customProps: {
+            id,
+            className,
+            "data-testid": dataTestId
+        },
+    }), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, id, className, dataTestId]);
 };
 
 const PopoverContext = createContext(null);
@@ -5914,7 +5917,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         // eslint-disable-next-line react-hooks/refs
         return containerRef.current ? totalSize >= containerRef.current.clientHeight : false;
     }, [totalSize]);
-    return {
+    return useMemo(() => ({
         ...virtualizer,
         containerRef,
         listRef,
@@ -5928,7 +5931,21 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         topSeparatorOnScroll,
         isAtTop,
         contentFillsContainer,
-    };
+    }), [
+        virtualizer,
+        containerRef,
+        listRef,
+        rows,
+        getListItemProps,
+        header,
+        resolvedLoadingIndicator,
+        shouldShowLoaderAtIndex,
+        count,
+        separator,
+        topSeparatorOnScroll,
+        isAtTop,
+        contentFillsContainer,
+    ]);
 };
 const getResolvedLoadingIndicator = (loadingIndicator) => {
     if (typeof loadingIndicator === "function") {
@@ -6022,9 +6039,7 @@ const useListItemHeight = () => {
         // Return the larger of calculated height or minimum height
         return Math.max(totalHeight, MIN_ITEM_HEIGHT);
     }, []);
-    return {
-        getListItemHeight,
-    };
+    return useMemo(() => ({ getListItemHeight }), [getListItemHeight]);
 };
 
 // These must be two separate divs (menu and menulist) so that the overflow-clip can be applied to the parent and the overflow-y-auto can be applied to the child.
@@ -7598,7 +7613,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
             unobserve();
         };
     }, [initializeObserver, unobserve, children]);
-    return { overflowContainerRef, itemOverflowMap };
+    return useMemo(() => ({ overflowContainerRef, itemOverflowMap }), [overflowContainerRef, itemOverflowMap]);
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.20.20",
+  "version": "1.21.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,10 +13,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.86",
-    "@trackunit/css-class-variance-utilities": "1.11.89",
-    "@trackunit/shared-utils": "1.13.89",
-    "@trackunit/ui-icons": "1.11.85",
+    "@trackunit/ui-design-tokens": "1.11.88",
+    "@trackunit/css-class-variance-utilities": "1.11.91",
+    "@trackunit/shared-utils": "1.13.91",
+    "@trackunit/ui-icons": "1.11.87",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",
     "fflate": "^0.8.2",

package/src/components/Popover/usePopover.d.ts

@@ -6,4 +6,4 @@ import { PopoverProps, UsePopoverType } from "./PopoverTypes";
  * @param {PopoverProps} options The options for the popover
  * @returns {UsePopoverType} The data for the popover
  */
-export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, dismissal, sizing, onOpenStateChange, ...restOptions }: PopoverProps) => UsePopoverType;
+export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, dismissal, sizing, onOpenStateChange, id, className, "data-testid": dataTestId, }: PopoverProps) => UsePopoverType;