@trackunit/react-components 0.5.19 → 0.5.21

package/index.cjs.js

@@ -993,6 +993,99 @@ const useClickOutside = (el, options = {}, onClick) => {
     });
 };
 
+/**
+ * Maps size keys to their corresponding state property names.
+ */
+const breakpointPropsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for sizes, with all values set to false.
+ */
+const defaultBreakpointState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * Creates a breakpoint state object based on a width value
+ */
+const createBreakpointState = ({ width }) => {
+    return sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
+        ...acc,
+        [breakpointPropsMap[size]]: width >= minWidth,
+    }), { ...defaultBreakpointState });
+};
+
+/**
+ * A custom React hook that provides real-time information about a container's size.
+ *
+ * This hook uses ResizeObserver to monitor changes in the container's width and returns
+ * an object with boolean values indicating which breakpoints are currently active.
+ *
+ * @param {RefObject<HTMLElement>} ref - Reference to the container element to observe
+ * @returns {BreakpointState} An object containing boolean values for each container size breakpoint.
+ * @example
+ * const MyComponent = () => {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   const containerSize = useContainerBreakpoints(containerRef);
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       {containerSize.isLg ? (
+ *         <LargeLayout />
+ *       ) : containerSize.isMd ? (
+ *         <MediumLayout />
+ *       ) : (
+ *         <SmallLayout />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ */
+const useContainerBreakpoints = (ref) => {
+    const [containerSize, setContainerSize] = React.useState(() => defaultBreakpointState);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === "development" && !ref.current) {
+            // eslint-disable-next-line no-console
+            console.warn("useContainerBreakpoints: The provided ref is not attached to any element. " +
+                "Make sure to pass the ref to an element using the ref prop, like: <div ref={myRef}>", "\nComponent:", ref.current);
+        }
+    }, [ref]);
+    const updateContainerSize = React.useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const width = ref.current.getBoundingClientRect().width;
+        setContainerSize(createBreakpointState({ width }));
+    }, [ref]);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        // Initial check
+        updateContainerSize();
+        // Set up ResizeObserver
+        const resizeObserver = new ResizeObserver(updateContainerSize);
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [updateContainerSize, ref]);
+    return containerSize;
+};
+
 /**
  * Hook for managing timeouts.
  *
@@ -1384,61 +1477,32 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
-/**
- * Maps viewport size keys to their corresponding state property names.
- */
-const propsMap = {
-    xs: "isXs",
-    sm: "isSm",
-    md: "isMd",
-    lg: "isLg",
-    xl: "isXl",
-    "2xl": "is2xl",
-    "3xl": "is3xl",
-};
-/**
- * The default state for viewport sizes, with all values set to false.
- */
-const defaultState = {
-    isXs: false,
-    isSm: false,
-    isMd: false,
-    isLg: false,
-    isXl: false,
-    is2xl: false,
-    is3xl: false,
-};
 /**
  * A custom React hook that provides real-time information about the current viewport size.
+ * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
  *
  * This hook listens to changes in the viewport size and returns an object with boolean values
- * indicating which breakpoints are currently active. It's useful for creating responsive
- * layouts and components that need to adapt to different screen sizes.
+ * indicating which breakpoints are currently active.
  *
- * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
  * @example
- * function MyComponent() {
- *   const viewportSize = useViewportSize();
+ * const MyComponent = () => {
+ *   const viewportSize = useViewportBreakpoints();
  *
  *   if (viewportSize.isLg) {
  *     return <LargeScreenLayout />;
- *   } else if (viewportSize.isMd) {
- *     return <MediumScreenLayout />;
- *   } else {
- *     return <SmallScreenLayout />;
  *   }
+ *
+ *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
  * }
  */
-const useViewportSize = () => {
-    const [viewportSize, setViewportSize] = React.useState(() => defaultState);
+const useViewportBreakpoints = () => {
+    const [viewportSize, setViewportSize] = React.useState(() => defaultBreakpointState);
     const updateViewportSize = React.useCallback(() => {
-        const newViewportSize = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => {
-            const matches = window.matchMedia(`(min-width: ${minWidth}px)`).matches;
-            return {
-                ...acc,
-                [propsMap[size]]: matches,
-            };
-        }, Object.assign({}, defaultState));
+        const newViewportSize = sharedUtils.objectEntries(uiDesignTokens.themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
+            ...acc,
+            [breakpointPropsMap[size]]: window.matchMedia(`(min-width: ${minWidth}px)`).matches,
+        }), { ...defaultBreakpointState });
         setViewportSize(newViewportSize);
     }, []);
     React.useEffect(() => {
@@ -1579,7 +1643,7 @@ const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
 const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
-    const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportSize();
+    const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
     if (isSmallScreen) {
         return jsxRuntime.jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `smallScreen-${dataTestId}` });
     }
@@ -1816,7 +1880,14 @@ const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     },
 });
 const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-2"]);
-const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative", "p-4"]);
+const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative"], {
+    variants: {
+        extraPadding: {
+            true: "p-4",
+            false: "",
+        },
+    },
+});
 const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"], {
     variants: {
         expanded: {
@@ -1857,7 +1928,7 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = sharedUtils.uuidv4();
     const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
     const handleClick = React__namespace.useCallback((e) => {
@@ -1866,12 +1937,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
 };
-const Collapsible = ({ children, expanded, id }) => {
+const Collapsible = ({ children, expanded, id, extraPadding }) => {
     const ref = React.useRef(null);
     const { height } = useGeometry(ref);
-    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
+    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible({ extraPadding }), children: children }) }) }));
 };
 
 /**
@@ -3356,6 +3427,11 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
 
 const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
 const PADDING = 16;
+const DEFAULT_DISMISSAL = {
+    enabled: true,
+    outsidePress: true,
+    ancestorScroll: false,
+};
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
@@ -3363,7 +3439,7 @@ const PADDING = 16;
  * @param {PopoverProps} options The options for the popover
  * @returns {ReturnType<typeof usePopover>} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
     const [labelId, setLabelId] = React.useState();
     const [descriptionId, setDescriptionId] = React.useState();
@@ -3392,12 +3468,11 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
     });
     const popoverContext = popoverData.context;
     const resolvedActivation = typeof activation === "function" ? activation(DEFAULT_ACTIVATION) : activation;
+    const resolvedDismissal = typeof dismissal === "function" ? dismissal(DEFAULT_DISMISSAL) : dismissal;
     const clickInteraction = react.useClick(popoverContext, {
         enabled: resolvedActivation.click,
-        ignoreMouse: resolvedActivation.hover,
-        keyboardHandlers: false,
     });
-    const dismissInteraction = react.useDismiss(popoverContext, dismissal);
+    const dismissInteraction = react.useDismiss(popoverContext, resolvedDismissal);
     const hoverInteraction = react.useHover(popoverContext, {
         enabled: resolvedActivation.hover,
     });
@@ -3461,6 +3536,34 @@ const Popover = ({ children, isModal = false, ...restOptions }) => {
     return (jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children: typeof children === "function" ? children({ isOpen: popover.isOpen, placement: popover.placement }) : children }));
 };
 
+/** @internal */
+const PORTAL_CONTAINER = "portal-container";
+/**
+ * Creates or retrieves the default portal container element
+ *
+ * @internal
+ */
+const getDefaultPortalContainer = () => {
+    let container = document.getElementById(PORTAL_CONTAINER);
+    if (!container) {
+        container = document.createElement("div");
+        container.id = PORTAL_CONTAINER;
+        document.body.appendChild(container);
+    }
+    return container;
+};
+
+/**
+ * Portals the floating element into a given container element
+ * By default they're portalled into an z-index isolated div in
+ * document body -> div#portal-container.
+ * alongside other portalled elements.
+ */
+const Portal = (props) => {
+    var _a;
+    return jsxRuntime.jsx(react.FloatingPortal, { ...props, root: (_a = props.root) !== null && _a !== void 0 ? _a : getDefaultPortalContainer() });
+};
+
 const cvaPopoverContainer = cssClassVarianceUtilities.cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
 const cvaPopoverTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "px-2", "py-1"], {
     variants: {
@@ -3476,7 +3579,7 @@ const PopoverContent = React.forwardRef(function PopoverContent({ className, dat
     var _a;
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(react.FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
+    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen ? (jsxRuntime.jsx(react.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -3544,7 +3647,7 @@ const cvaTooltipPopoverTail = cssClassVarianceUtilities.cvaMerge("", {
         },
         mode: {
             light: "fill-white",
-            dark: "fill-slate-600",
+            dark: "fill-neutral-700",
         },
     },
     defaultVariants: {
@@ -4924,6 +5027,7 @@ exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
+exports.Portal = Portal;
 exports.Prompt = Prompt;
 exports.ROLE_CARD = ROLE_CARD;
 exports.SectionHeader = SectionHeader;
@@ -4970,6 +5074,7 @@ exports.iconColorNames = iconColorNames;
 exports.iconPalette = iconPalette;
 exports.setLocalStorage = setLocalStorage;
 exports.useClickOutside = useClickOutside;
+exports.useContainerBreakpoints = useContainerBreakpoints;
 exports.useContinuousTimeout = useContinuousTimeout;
 exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
@@ -4989,5 +5094,5 @@ exports.useResize = useResize;
 exports.useScrollDetection = useScrollDetection;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
-exports.useViewportSize = useViewportSize;
+exports.useViewportBreakpoints = useViewportBreakpoints;
 exports.useWindowActivity = useWindowActivity;

package/index.esm.js

@@ -13,7 +13,7 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import { useDebounceCallback, useCopyToClipboard } from 'usehooks-ts';
 import { Link, useBlocker } from '@tanstack/react-router';
-import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, FloatingPortal, useMergeRefs, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
 import { twMerge } from 'tailwind-merge';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
@@ -973,6 +973,99 @@ const useClickOutside = (el, options = {}, onClick) => {
     });
 };
 
+/**
+ * Maps size keys to their corresponding state property names.
+ */
+const breakpointPropsMap = {
+    xs: "isXs",
+    sm: "isSm",
+    md: "isMd",
+    lg: "isLg",
+    xl: "isXl",
+    "2xl": "is2xl",
+    "3xl": "is3xl",
+};
+/**
+ * The default state for sizes, with all values set to false.
+ */
+const defaultBreakpointState = {
+    isXs: false,
+    isSm: false,
+    isMd: false,
+    isLg: false,
+    isXl: false,
+    is2xl: false,
+    is3xl: false,
+};
+/**
+ * Creates a breakpoint state object based on a width value
+ */
+const createBreakpointState = ({ width }) => {
+    return objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
+        ...acc,
+        [breakpointPropsMap[size]]: width >= minWidth,
+    }), { ...defaultBreakpointState });
+};
+
+/**
+ * A custom React hook that provides real-time information about a container's size.
+ *
+ * This hook uses ResizeObserver to monitor changes in the container's width and returns
+ * an object with boolean values indicating which breakpoints are currently active.
+ *
+ * @param {RefObject<HTMLElement>} ref - Reference to the container element to observe
+ * @returns {BreakpointState} An object containing boolean values for each container size breakpoint.
+ * @example
+ * const MyComponent = () => {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   const containerSize = useContainerBreakpoints(containerRef);
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       {containerSize.isLg ? (
+ *         <LargeLayout />
+ *       ) : containerSize.isMd ? (
+ *         <MediumLayout />
+ *       ) : (
+ *         <SmallLayout />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ */
+const useContainerBreakpoints = (ref) => {
+    const [containerSize, setContainerSize] = useState(() => defaultBreakpointState);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "development" && !ref.current) {
+            // eslint-disable-next-line no-console
+            console.warn("useContainerBreakpoints: The provided ref is not attached to any element. " +
+                "Make sure to pass the ref to an element using the ref prop, like: <div ref={myRef}>", "\nComponent:", ref.current);
+        }
+    }, [ref]);
+    const updateContainerSize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const width = ref.current.getBoundingClientRect().width;
+        setContainerSize(createBreakpointState({ width }));
+    }, [ref]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        // Initial check
+        updateContainerSize();
+        // Set up ResizeObserver
+        const resizeObserver = new ResizeObserver(updateContainerSize);
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [updateContainerSize, ref]);
+    return containerSize;
+};
+
 /**
  * Hook for managing timeouts.
  *
@@ -1364,61 +1457,32 @@ const useSelfUpdatingRef = (initialState) => {
     return stateRef;
 };
 
-/**
- * Maps viewport size keys to their corresponding state property names.
- */
-const propsMap = {
-    xs: "isXs",
-    sm: "isSm",
-    md: "isMd",
-    lg: "isLg",
-    xl: "isXl",
-    "2xl": "is2xl",
-    "3xl": "is3xl",
-};
-/**
- * The default state for viewport sizes, with all values set to false.
- */
-const defaultState = {
-    isXs: false,
-    isSm: false,
-    isMd: false,
-    isLg: false,
-    isXl: false,
-    is2xl: false,
-    is3xl: false,
-};
 /**
  * A custom React hook that provides real-time information about the current viewport size.
+ * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
  *
  * This hook listens to changes in the viewport size and returns an object with boolean values
- * indicating which breakpoints are currently active. It's useful for creating responsive
- * layouts and components that need to adapt to different screen sizes.
+ * indicating which breakpoints are currently active.
  *
- * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
+ * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
  * @example
- * function MyComponent() {
- *   const viewportSize = useViewportSize();
+ * const MyComponent = () => {
+ *   const viewportSize = useViewportBreakpoints();
  *
  *   if (viewportSize.isLg) {
  *     return <LargeScreenLayout />;
- *   } else if (viewportSize.isMd) {
- *     return <MediumScreenLayout />;
- *   } else {
- *     return <SmallScreenLayout />;
  *   }
+ *
+ *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
  * }
  */
-const useViewportSize = () => {
-    const [viewportSize, setViewportSize] = useState(() => defaultState);
+const useViewportBreakpoints = () => {
+    const [viewportSize, setViewportSize] = useState(() => defaultBreakpointState);
     const updateViewportSize = useCallback(() => {
-        const newViewportSize = objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => {
-            const matches = window.matchMedia(`(min-width: ${minWidth}px)`).matches;
-            return {
-                ...acc,
-                [propsMap[size]]: matches,
-            };
-        }, Object.assign({}, defaultState));
+        const newViewportSize = objectEntries(themeScreenSizeAsNumber).reduce((acc, [size, minWidth]) => ({
+            ...acc,
+            [breakpointPropsMap[size]]: window.matchMedia(`(min-width: ${minWidth}px)`).matches,
+        }), { ...defaultBreakpointState });
         setViewportSize(newViewportSize);
     }, []);
     useEffect(() => {
@@ -1559,7 +1623,7 @@ const Breadcrumb = ({ className, dataTestId, breadcrumbItems, back }) => {
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
 const BreadcrumbContainer = ({ dataTestId, breadcrumbItems }) => {
-    const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportSize();
+    const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
     if (isSmallScreen) {
         return jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, dataTestId: `smallScreen-${dataTestId}` });
     }
@@ -1796,7 +1860,14 @@ const cvaCollapseHeader = cvaMerge([
     },
 });
 const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "gap-2"]);
-const cvaCollapsible = cvaMerge(["block", "relative", "p-4"]);
+const cvaCollapsible = cvaMerge(["block", "relative"], {
+    variants: {
+        extraPadding: {
+            true: "p-4",
+            false: "",
+        },
+    },
+});
 const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
     variants: {
         expanded: {
@@ -1837,7 +1908,7 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = uuidv4();
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
@@ -1846,12 +1917,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
 };
-const Collapsible = ({ children, expanded, id }) => {
+const Collapsible = ({ children, expanded, id, extraPadding }) => {
     const ref = useRef(null);
     const { height } = useGeometry(ref);
-    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
+    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible({ extraPadding }), children: children }) }) }));
 };
 
 /**
@@ -3336,6 +3407,11 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
 
 const DEFAULT_ACTIVATION = { click: true, hover: false, keyboardHandlers: true };
 const PADDING = 16;
+const DEFAULT_DISMISSAL = {
+    enabled: true,
+    outsidePress: true,
+    ancestorScroll: false,
+};
 /**
  * The hook that powers the Popover component.
  * It should not be used directly, but rather through the Popover component.
@@ -3343,7 +3419,7 @@ const PADDING = 16;
  * @param {PopoverProps} options The options for the popover
  * @returns {ReturnType<typeof usePopover>} The data for the popover
  */
-const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal, onOpenStateChange, ...restOptions }) => {
+const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = DEFAULT_ACTIVATION, dismissal = DEFAULT_DISMISSAL, onOpenStateChange, ...restOptions }) => {
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
     const [labelId, setLabelId] = useState();
     const [descriptionId, setDescriptionId] = useState();
@@ -3372,12 +3448,11 @@ const usePopover = ({ initialOpen = false, placement = "bottom", isModal, isOpen
     });
     const popoverContext = popoverData.context;
     const resolvedActivation = typeof activation === "function" ? activation(DEFAULT_ACTIVATION) : activation;
+    const resolvedDismissal = typeof dismissal === "function" ? dismissal(DEFAULT_DISMISSAL) : dismissal;
     const clickInteraction = useClick(popoverContext, {
         enabled: resolvedActivation.click,
-        ignoreMouse: resolvedActivation.hover,
-        keyboardHandlers: false,
     });
-    const dismissInteraction = useDismiss(popoverContext, dismissal);
+    const dismissInteraction = useDismiss(popoverContext, resolvedDismissal);
     const hoverInteraction = useHover$1(popoverContext, {
         enabled: resolvedActivation.hover,
     });
@@ -3441,6 +3516,34 @@ const Popover = ({ children, isModal = false, ...restOptions }) => {
     return (jsx(PopoverContext.Provider, { value: popover, children: typeof children === "function" ? children({ isOpen: popover.isOpen, placement: popover.placement }) : children }));
 };
 
+/** @internal */
+const PORTAL_CONTAINER = "portal-container";
+/**
+ * Creates or retrieves the default portal container element
+ *
+ * @internal
+ */
+const getDefaultPortalContainer = () => {
+    let container = document.getElementById(PORTAL_CONTAINER);
+    if (!container) {
+        container = document.createElement("div");
+        container.id = PORTAL_CONTAINER;
+        document.body.appendChild(container);
+    }
+    return container;
+};
+
+/**
+ * Portals the floating element into a given container element
+ * By default they're portalled into an z-index isolated div in
+ * document body -> div#portal-container.
+ * alongside other portalled elements.
+ */
+const Portal = (props) => {
+    var _a;
+    return jsx(FloatingPortal, { ...props, root: (_a = props.root) !== null && _a !== void 0 ? _a : getDefaultPortalContainer() });
+};
+
 const cvaPopoverContainer = cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
 const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1"], {
     variants: {
@@ -3456,7 +3559,7 @@ const PopoverContent = React__default.forwardRef(function PopoverContent({ class
     var _a;
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsx(FloatingPortal, { id: portalId !== null && portalId !== void 0 ? portalId : "tu-floating-ui", children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
+    return (jsx(Portal, { id: portalId, children: context.isOpen ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_a = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _a !== void 0 ? _a : "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -3524,7 +3627,7 @@ const cvaTooltipPopoverTail = cvaMerge("", {
         },
         mode: {
             light: "fill-white",
-            dark: "fill-slate-600",
+            dark: "fill-neutral-700",
         },
     },
     defaultVariants: {
@@ -4869,4 +4972,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.5.19",
+  "version": "0.5.21",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Collapse/Collapse.d.ts

@@ -26,6 +26,12 @@ export interface CollapseProps extends CommonProps {
      * An addon to add to the header. This can be used for a status indicator or similar.
      */
     headerAddon?: React.ReactNode;
+    /**
+     * Without animation children wont be rendered until expanded, which improves performance
+     *  for high volume data
+     */
+    animate?: boolean;
+    extraPadding?: boolean;
 }
 /**
  * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
@@ -44,4 +50,4 @@ export interface CollapseProps extends CommonProps {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate, extraPadding, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Collapse/Collapse.variants.d.ts

@@ -3,7 +3,9 @@ export declare const cvaCollapseHeader: (props?: ({
     expanded?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCollapsible: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapsible: (props?: ({
+    extraPadding?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseAnimated: (props?: ({
     expanded?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -5,7 +5,7 @@ export type PopoverActivation = {
     hover?: boolean;
     keyboardHandlers?: boolean;
 };
-export type PopoverDismissal = Pick<UseDismissProps, "ancestorScroll" | "enabled" | "outsidePress" | "referencePress">;
+export type PopoverDismissal = Pick<UseDismissProps, "ancestorScroll" | "enabled" | "outsidePress">;
 export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
 export type Strategy = "absolute" | "fixed";
 export interface PopoverProps extends CommonProps {
@@ -32,7 +32,7 @@ export interface PopoverProps extends CommonProps {
     /**
      * Options for dismissal of the popover
      */
-    dismissal?: PopoverDismissal;
+    dismissal?: PopoverDismissal | ((defaultDismissal: PopoverDismissal) => PopoverDismissal);
     /**
      * Callback to be called when the popover open state changes
      */

package/src/components/Portal/Portal.d.ts

@@ -0,0 +1,9 @@
+import { FloatingPortalProps } from "@floating-ui/react";
+export type PortalProps = FloatingPortalProps;
+/**
+ * Portals the floating element into a given container element
+ * By default they're portalled into an z-index isolated div in
+ * document body -> div#portal-container.
+ * alongside other portalled elements.
+ */
+export declare const Portal: (props: FloatingPortalProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Portal/shared.d.ts

@@ -0,0 +1,19 @@
+import { UseFloatingPortalNodeProps } from "@floating-ui/react";
+/** @internal */
+export declare const PORTAL_CONTAINER = "portal-container";
+/**
+ * Creates or retrieves the default portal container element
+ *
+ * @internal
+ */
+export declare const getDefaultPortalContainer: () => HTMLElement;
+/**
+ * Hook that creates or retrieves a portal node for floating UI components
+ *
+ * @param props - The portal node props
+ * @param props.root - The root element to attach the portal to
+ * @param props.id - The ID for the portal node
+ * @returns {HTMLElement | null} The portal node props
+ * @internal
+ */
+export declare const usePortalNode: (props?: UseFloatingPortalNodeProps) => HTMLElement | null;

package/src/components/index.d.ts

@@ -21,6 +21,7 @@ export * from "./Pagination/Pagination";
 export * from "./Polygon/Polygon";
 export * from "./Popover";
 export * from "./Popover/Popover";
+export * from "./Portal/Portal";
 export * from "./Prompt";
 export * from "./SectionHeader";
 export * from "./Sidebar/Sidebar";

package/src/hooks/breakpoint-utils.d.ts

@@ -0,0 +1,23 @@
+import { themeScreenSizeAsNumber } from "@trackunit/ui-design-tokens";
+export type BreakpointSize = keyof typeof themeScreenSizeAsNumber;
+/**
+ * Represents the state of sizes as boolean values.
+ * Each property is true if the width is greater than or equal to the corresponding breakpoint.
+ */
+export type BreakpointState = {
+    [K in BreakpointSize as `is${Capitalize<K>}`]: boolean;
+};
+/**
+ * Maps size keys to their corresponding state property names.
+ */
+export declare const breakpointPropsMap: Record<BreakpointSize, keyof BreakpointState>;
+/**
+ * The default state for sizes, with all values set to false.
+ */
+export declare const defaultBreakpointState: BreakpointState;
+/**
+ * Creates a breakpoint state object based on a width value
+ */
+export declare const createBreakpointState: ({ width }: {
+    width: number;
+}) => BreakpointState;

package/src/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from "./localStorage/setLocalStorage";
 export * from "./localStorage/useLocalStorage";
 export * from "./localStorage/useLocalStorageReducer";
 export * from "./useClickOutside";
+export * from "./useContainerBreakpoints";
 export * from "./useContinuousTimeout";
 export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
@@ -16,5 +17,5 @@ export * from "./useResize";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
-export * from "./useViewportSize";
+export * from "./useViewportBreakpoints";
 export * from "./useWindowActivity";

package/src/hooks/useContainerBreakpoints.d.ts

@@ -0,0 +1,29 @@
+import { type RefObject } from "react";
+import { type BreakpointState } from "./breakpoint-utils";
+/**
+ * A custom React hook that provides real-time information about a container's size.
+ *
+ * This hook uses ResizeObserver to monitor changes in the container's width and returns
+ * an object with boolean values indicating which breakpoints are currently active.
+ *
+ * @param {RefObject<HTMLElement>} ref - Reference to the container element to observe
+ * @returns {BreakpointState} An object containing boolean values for each container size breakpoint.
+ * @example
+ * const MyComponent = () => {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   const containerSize = useContainerBreakpoints(containerRef);
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       {containerSize.isLg ? (
+ *         <LargeLayout />
+ *       ) : containerSize.isMd ? (
+ *         <MediumLayout />
+ *       ) : (
+ *         <SmallLayout />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ */
+export declare const useContainerBreakpoints: (ref: RefObject<HTMLElement>) => BreakpointState;

package/src/hooks/useViewportBreakpoints.d.ts

@@ -0,0 +1,21 @@
+import { type BreakpointState } from "./breakpoint-utils";
+/**
+ * A custom React hook that provides real-time information about the current viewport size.
+ * ! Consider using `useContainerBreakpoints` instead, and only use this when you need to actually react to the viewport size, not the container size.
+ *
+ * This hook listens to changes in the viewport size and returns an object with boolean values
+ * indicating which breakpoints are currently active.
+ *
+ * @returns {BreakpointState} An object containing boolean values for each viewport size breakpoint.
+ * @example
+ * const MyComponent = () => {
+ *   const viewportSize = useViewportBreakpoints();
+ *
+ *   if (viewportSize.isLg) {
+ *     return <LargeScreenLayout />;
+ *   }
+ *
+ *   return viewportSize.isMd ? <MediumScreenLayout /> : <SmallLayout />;
+ * }
+ */
+export declare const useViewportBreakpoints: () => BreakpointState;

package/src/hooks/useViewportSize.d.ts

@@ -1,32 +0,0 @@
-import { themeScreenSizeAsNumber } from "@trackunit/ui-design-tokens";
-type ViewportSize = keyof typeof themeScreenSizeAsNumber;
-/**
- * Represents the state of viewport sizes as boolean values.
- * Each property is true if the viewport width is greater than or equal to the corresponding breakpoint.
- */
-type ViewportSizeState = {
-    [K in ViewportSize as `is${Capitalize<K>}`]: boolean;
-};
-/**
- * A custom React hook that provides real-time information about the current viewport size.
- *
- * This hook listens to changes in the viewport size and returns an object with boolean values
- * indicating which breakpoints are currently active. It's useful for creating responsive
- * layouts and components that need to adapt to different screen sizes.
- *
- * @returns {ViewportSizeState} An object containing boolean values for each viewport size breakpoint.
- * @example
- * function MyComponent() {
- *   const viewportSize = useViewportSize();
- *
- *   if (viewportSize.isLg) {
- *     return <LargeScreenLayout />;
- *   } else if (viewportSize.isMd) {
- *     return <MediumScreenLayout />;
- *   } else {
- *     return <SmallScreenLayout />;
- *   }
- * }
- */
-export declare const useViewportSize: () => ViewportSizeState;
-export {};