@trackunit/react-components 0.1.253 → 0.1.255-alpha-52ec6ef4f8.0

package/index.cjs.js

@@ -1081,7 +1081,7 @@ const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidd
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerAddon, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
     const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
     const handleClick = React__namespace.useCallback((e) => {
         if (onToggle) {
@@ -1089,7 +1089,7 @@ 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", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), 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", { className: cvaCollapseHeader({ expanded, className: headerClassName }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
@@ -1182,145 +1182,6 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
     return (jsxRuntime.jsx(reactDayPicker.DayPicker, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsxRuntime.jsx("div", { "data-testid": dataTestId }) }));
 };
 
-/**
- * The hook that powers the Popover component.
- * It should not be used directly, but rather through the Popover component.
- *
- * @param {PopoverProps} options The options for the popover
- * @returns {ReturnType<usePopover>} The data for the popover
- */
-const usePopover = (_a) => {
-    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "dismissal", "onOpenStateChange"]);
-    const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
-    const [labelId, setLabelId] = React.useState();
-    const [descriptionId, setDescriptionId] = React.useState();
-    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
-    const popoverData = react.useFloating({
-        placement,
-        open: isOpen,
-        onOpenChange: open => {
-            setUncontrolledIsOpen(open);
-            onOpenStateChange === null || onOpenStateChange === void 0 ? void 0 : onOpenStateChange(open);
-        },
-        whileElementsMounted: react.autoUpdate,
-        middleware: [
-            react.offset(8),
-            react.flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-            react.shift(),
-            react.size({
-                apply({ availableWidth, availableHeight, elements }) {
-                    Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth}px`,
-                        maxHeight: `${availableHeight}px`,
-                    });
-                },
-            }),
-        ],
-    });
-    const popoverContext = popoverData.context;
-    const clickInteraction = react.useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
-    const dismissInteraction = react.useDismiss(popoverContext, dismissal);
-    const hoverInteraction = react.useHover(popoverContext, { enabled: activation.hover });
-    const roleInteraction = react.useRole(popoverContext);
-    const combinedInteractions = react.useInteractions([
-        clickInteraction,
-        hoverInteraction,
-        dismissInteraction,
-        roleInteraction,
-    ]);
-    return React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ isOpen, setIsOpen: setUncontrolledIsOpen }, lodash.omit(popoverData, "middlewareData", "floatingStyles", "elements")), { x: popoverData.x, y: popoverData.y, isPositioned: popoverData.isPositioned, refs: popoverData.refs, update: popoverData.update, placement: popoverData.placement, strategy: popoverData.strategy }), combinedInteractions), { isModal,
-        labelId,
-        descriptionId,
-        setLabelId,
-        setDescriptionId, customProps: restOptions })), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
-};
-
-const PopoverContext = React.createContext(null);
-/**
- * A hook to get the popover context.
- * It should only be used by the Popover components.
- *
- * @returns {ContextType} The popover context
- */
-const usePopoverContext = () => {
-    const context = React.useContext(PopoverContext);
-    if (context === null) {
-        throw new Error("Popover components must be wrapped in <Popover />");
-    }
-    return context;
-};
-/**
- * The popover component.
- * - This component should wrap all the popover components.
- * - It returns a context that is used by the popover components.
- * - The context is used to share the state of the popover, such as the open state and the reference element.
- *
- * To open the popover, use the `<PopoverTrigger />` component.
- *
- * To render the content of the popover, use the `<PopoverContent />` component.
- *
- * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider containing the children
- */
-const Popover = (_a) => {
-    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
-    const popover = usePopover(Object.assign({ isModal }, restOptions));
-    return jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children: children });
-};
-
-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: {
-        divider: {
-            true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
-            false: "",
-        },
-    },
-});
-const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
-
-const PopoverContent = React__default["default"].forwardRef(function PopoverContent(_a, propRef) {
-    var _b;
-    var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
-    const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
-    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, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
-});
-
-/**
- * The PopoverTitle component.
- 
- * @param {PopoverTitleProps} props - The props for the PopoverTitle component
- * @returns {JSX.Element} PopoverTitle component
- */
-const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true, children: children }), action] }));
-};
-
-const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
-    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
-    const context = usePopoverContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
-    const childrenRef = children.ref;
-    const ref = react.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
-    if (!renderButton && React.isValidElement(children)) {
-        return React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
-    }
-    else {
-        return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
-    }
-});
-
-/**
- * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- 
- * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
- * @returns {JSX.Element} DayPickerPopover component
- */
-const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxRuntime.jsxs(Popover, { placement: placement, children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button, { variant: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
-};
-
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  
@@ -1508,6 +1369,135 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+/**
+ * The hook that powers the Popover component.
+ * It should not be used directly, but rather through the Popover component.
+ *
+ * @param {PopoverProps} options The options for the popover
+ * @returns {ReturnType<typeof usePopover>} The data for the popover
+ */
+const usePopover = (_a) => {
+    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "dismissal", "onOpenStateChange"]);
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
+    const [labelId, setLabelId] = React.useState();
+    const [descriptionId, setDescriptionId] = React.useState();
+    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const popoverData = react.useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: open => {
+            setUncontrolledIsOpen(open);
+            onOpenStateChange === null || onOpenStateChange === void 0 ? void 0 : onOpenStateChange(open);
+        },
+        whileElementsMounted: react.autoUpdate,
+        middleware: [
+            react.offset(8),
+            react.flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            react.shift(),
+            react.size({
+                apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth}px`,
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+        ],
+    });
+    const popoverContext = popoverData.context;
+    const clickInteraction = react.useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const dismissInteraction = react.useDismiss(popoverContext, dismissal);
+    const hoverInteraction = react.useHover(popoverContext, { enabled: activation.hover });
+    const roleInteraction = react.useRole(popoverContext);
+    const combinedInteractions = react.useInteractions([
+        clickInteraction,
+        hoverInteraction,
+        dismissInteraction,
+        roleInteraction,
+    ]);
+    return React.useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ isOpen, setIsOpen: setUncontrolledIsOpen }, lodash.omit(popoverData, "middlewareData", "floatingStyles", "elements")), { x: popoverData.x, y: popoverData.y, isPositioned: popoverData.isPositioned, refs: popoverData.refs, update: popoverData.update, placement: popoverData.placement, strategy: popoverData.strategy }), combinedInteractions), { isModal,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId, customProps: restOptions })), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+};
+
+const PopoverContext = React.createContext(null);
+/**
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
+ *
+ * @returns {ContextType} The popover context
+ */
+const usePopoverContext = () => {
+    const context = React.useContext(PopoverContext);
+    if (context === null) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
+};
+/**
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
+ *
+ * To render the content of the popover, use the `<PopoverContent />` component.
+ *
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider containing the children
+ */
+const Popover = (_a) => {
+    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
+    const popover = usePopover(Object.assign({ isModal }, restOptions));
+    return jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children: children });
+};
+
+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: {
+        divider: {
+            true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
+            false: "",
+        },
+    },
+});
+const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-neutral-500"]);
+
+const PopoverContent = React__default["default"].forwardRef(function PopoverContent(_a, propRef) {
+    var _b;
+    var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
+    const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
+    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, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, order: ["reference", "content"], returnFocus: false, children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
+});
+
+/**
+ * The PopoverTitle component.
+ 
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {JSX.Element} PopoverTitle component
+ */
+const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(Text, { className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true, children: children }), action] }));
+};
+
+const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
+    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+    const context = usePopoverContext();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
+    const childrenRef = children.ref;
+    const ref = react.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    if (!renderButton && React.isValidElement(children)) {
+        return React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+    }
+    else {
+        return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+    }
+});
+
 const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex", "hover:cursor-pointer"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
@@ -3074,7 +3064,6 @@ exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
 exports.CopyableText = CopyableText;
 exports.DayPicker = DayPicker;
-exports.DayPickerPopover = DayPickerPopover;
 exports.DayRangePicker = DayRangePicker;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useRef, useMemo, useEffect, useState, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, memo, Children, useReducer } from 'react';
+import React__default, { useRef, useMemo, useEffect, useState, useCallback, memo, createContext, useContext, forwardRef, isValidElement, cloneElement, Children, useReducer } from 'react';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
@@ -10,7 +10,7 @@ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useMeasure, useCopyToClipboard, usePrevious } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
-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, FloatingFocusManager, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { omit } from 'lodash';
 import usePortal from 'react-useportal';
 import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
@@ -1050,7 +1050,7 @@ const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerAddon, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }) => {
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
         if (onToggle) {
@@ -1058,7 +1058,7 @@ 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", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaCollapseHeader({ expanded, className: headerClassName }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
@@ -1151,145 +1151,6 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
     return (jsx(DayPicker$1, { onDayClick: onDaySelect, selected: selectedDays, locale: locale, disabled: disabledDays, className: `custom-day-picker ${className !== null && className !== void 0 ? className : ""}`, max: max, footer: jsx("div", { "data-testid": dataTestId }) }));
 };
 
-/**
- * The hook that powers the Popover component.
- * It should not be used directly, but rather through the Popover component.
- *
- * @param {PopoverProps} options The options for the popover
- * @returns {ReturnType<usePopover>} The data for the popover
- */
-const usePopover = (_a) => {
-    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "dismissal", "onOpenStateChange"]);
-    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
-    const [labelId, setLabelId] = useState();
-    const [descriptionId, setDescriptionId] = useState();
-    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
-    const popoverData = useFloating({
-        placement,
-        open: isOpen,
-        onOpenChange: open => {
-            setUncontrolledIsOpen(open);
-            onOpenStateChange === null || onOpenStateChange === void 0 ? void 0 : onOpenStateChange(open);
-        },
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(8),
-            flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
-            shift(),
-            size({
-                apply({ availableWidth, availableHeight, elements }) {
-                    Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth}px`,
-                        maxHeight: `${availableHeight}px`,
-                    });
-                },
-            }),
-        ],
-    });
-    const popoverContext = popoverData.context;
-    const clickInteraction = useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
-    const dismissInteraction = useDismiss(popoverContext, dismissal);
-    const hoverInteraction = useHover$1(popoverContext, { enabled: activation.hover });
-    const roleInteraction = useRole(popoverContext);
-    const combinedInteractions = useInteractions([
-        clickInteraction,
-        hoverInteraction,
-        dismissInteraction,
-        roleInteraction,
-    ]);
-    return useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ isOpen, setIsOpen: setUncontrolledIsOpen }, omit(popoverData, "middlewareData", "floatingStyles", "elements")), { x: popoverData.x, y: popoverData.y, isPositioned: popoverData.isPositioned, refs: popoverData.refs, update: popoverData.update, placement: popoverData.placement, strategy: popoverData.strategy }), combinedInteractions), { isModal,
-        labelId,
-        descriptionId,
-        setLabelId,
-        setDescriptionId, customProps: restOptions })), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
-};
-
-const PopoverContext = createContext(null);
-/**
- * A hook to get the popover context.
- * It should only be used by the Popover components.
- *
- * @returns {ContextType} The popover context
- */
-const usePopoverContext = () => {
-    const context = useContext(PopoverContext);
-    if (context === null) {
-        throw new Error("Popover components must be wrapped in <Popover />");
-    }
-    return context;
-};
-/**
- * The popover component.
- * - This component should wrap all the popover components.
- * - It returns a context that is used by the popover components.
- * - The context is used to share the state of the popover, such as the open state and the reference element.
- *
- * To open the popover, use the `<PopoverTrigger />` component.
- *
- * To render the content of the popover, use the `<PopoverContent />` component.
- *
- * @param {PopoverProps} props The props for the popover
- * @returns {JSX.Element} A Popover Context Provider containing the children
- */
-const Popover = (_a) => {
-    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
-    const popover = usePopover(Object.assign({ isModal }, restOptions));
-    return jsx(PopoverContext.Provider, { value: popover, children: children });
-};
-
-const cvaPopoverContainer = cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
-const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1"], {
-    variants: {
-        divider: {
-            true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
-            false: "",
-        },
-    },
-});
-const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
-
-const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
-    var _b;
-    var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
-    const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
-    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, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
-});
-
-/**
- * The PopoverTitle component.
- 
- * @param {PopoverTitleProps} props - The props for the PopoverTitle component
- * @returns {JSX.Element} PopoverTitle component
- */
-const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
-    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true, children: children }), action] }));
-};
-
-const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
-    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
-    const context = usePopoverContext();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
-    const childrenRef = children.ref;
-    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
-    if (!renderButton && isValidElement(children)) {
-        return cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
-    }
-    else {
-        return (jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
-    }
-});
-
-/**
- * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- 
- * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
- * @returns {JSX.Element} DayPickerPopover component
- */
-const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { variant: color, size: size, className: className, prefix: jsx(Icon, { name: "Calendar", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker", children: buttonContent }) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] }));
-};
-
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  
@@ -1477,6 +1338,135 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { onClick: onClick, "data-testid": dataTestId, className: cvaExternalLink({ className }), title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+/**
+ * The hook that powers the Popover component.
+ * It should not be used directly, but rather through the Popover component.
+ *
+ * @param {PopoverProps} options The options for the popover
+ * @returns {ReturnType<typeof usePopover>} The data for the popover
+ */
+const usePopover = (_a) => {
+    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, dismissal, onOpenStateChange } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "dismissal", "onOpenStateChange"]);
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
+    const [labelId, setLabelId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const popoverData = useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: open => {
+            setUncontrolledIsOpen(open);
+            onOpenStateChange === null || onOpenStateChange === void 0 ? void 0 : onOpenStateChange(open);
+        },
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(8),
+            flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            shift(),
+            size({
+                apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth}px`,
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+        ],
+    });
+    const popoverContext = popoverData.context;
+    const clickInteraction = useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const dismissInteraction = useDismiss(popoverContext, dismissal);
+    const hoverInteraction = useHover$1(popoverContext, { enabled: activation.hover });
+    const roleInteraction = useRole(popoverContext);
+    const combinedInteractions = useInteractions([
+        clickInteraction,
+        hoverInteraction,
+        dismissInteraction,
+        roleInteraction,
+    ]);
+    return useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({ isOpen, setIsOpen: setUncontrolledIsOpen }, omit(popoverData, "middlewareData", "floatingStyles", "elements")), { x: popoverData.x, y: popoverData.y, isPositioned: popoverData.isPositioned, refs: popoverData.refs, update: popoverData.update, placement: popoverData.placement, strategy: popoverData.strategy }), combinedInteractions), { isModal,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId, customProps: restOptions })), [isOpen, setUncontrolledIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+};
+
+const PopoverContext = createContext(null);
+/**
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
+ *
+ * @returns {ContextType} The popover context
+ */
+const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
+    if (context === null) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
+};
+/**
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
+ *
+ * To render the content of the popover, use the `<PopoverContent />` component.
+ *
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider containing the children
+ */
+const Popover = (_a) => {
+    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
+    const popover = usePopover(Object.assign({ isModal }, restOptions));
+    return jsx(PopoverContext.Provider, { value: popover, children: children });
+};
+
+const cvaPopoverContainer = cvaMerge(["component-popover-border", "z-popover", "animate-fade-in-fast"]);
+const cvaPopoverTitleContainer = cvaMerge(["flex", "items-center", "px-2", "py-1"], {
+    variants: {
+        divider: {
+            true: ["border-b", "border-solid", "border-b-neutral-100", "mb-1"],
+            false: "",
+        },
+    },
+});
+const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
+
+const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
+    var _b;
+    var { className, dataTestId, children, portalId } = _a, props = __rest(_a, ["className", "dataTestId", "children", "portalId"]);
+    const _c = usePopoverContext(), { context: floatingContext, customProps } = _c, context = __rest(_c, ["context", "customProps"]);
+    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, { guards: false, context: floatingContext, modal: context.isModal, closeOnFocusOut: false, order: ["reference", "content"], returnFocus: false, children: jsx("div", Object.assign({ ref: ref, className: cvaPopoverContainer({ className: className !== null && className !== void 0 ? className : customProps.className }), "data-testid": (_b = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _b !== void 0 ? _b : "popover-content", style: Object.assign({ position: context.strategy, top: context.y, left: context.x, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) })) : null }));
+});
+
+/**
+ * The PopoverTitle component.
+ 
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {JSX.Element} PopoverTitle component
+ */
+const PopoverTitle = ({ children, action, divider = false, className, dataTestId }) => {
+    return (jsxs("div", { className: cvaPopoverTitleContainer({ divider, className }), "data-testid": dataTestId, children: [jsx(Text, { className: cvaPopoverTitleText(), type: "div", subtle: true, size: "small", weight: "bold", uppercase: true, children: children }), action] }));
+};
+
+const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
+    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+    const context = usePopoverContext();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, local-rules/no-typescript-assertion
+    const childrenRef = children.ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    if (!renderButton && isValidElement(children)) {
+        return cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+    }
+    else {
+        return (jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+    }
+});
+
 const cvaTooltipFlexContainer = cvaMerge(["inline-flex", "hover:cursor-pointer"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
@@ -3033,4 +3023,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.253",
+  "version": "0.1.255-alpha-52ec6ef4f8.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,7 +13,7 @@
     "react-use": "^17.4.0",
     "react-day-picker": "^8.9.1",
     "date-fns": "^2.30.0",
-    "@floating-ui/react": "^0.26.2",
+    "@floating-ui/react": "^0.26.6",
     "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",

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

@@ -6,6 +6,10 @@ export interface CollapseProps extends CommonProps {
      * Expands the collapse component during initialization.
      */
     initialExpanded?: boolean;
+    /**
+     * Class name for the header.
+     */
+    headerClassName?: string;
     /**
      * onToggle event.
      */
@@ -30,4 +34,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, headerAddon, dataTestId, }: CollapseProps) => JSX.Element;
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, }: CollapseProps) => JSX.Element;

package/src/components/DayPicker/index.d.ts

@@ -17,5 +17,4 @@ export interface TimeZone {
     offset: string;
 }
 export * from "./DayPicker";
-export * from "./DayPickerPopover";
 export * from "./DayRangePicker";

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

@@ -4,6 +4,6 @@ import { PopoverProps, UsePopoverType } from "./PopoverTypes";
  * It should not be used directly, but rather through the Popover component.
  *
  * @param {PopoverProps} options The options for the popover
- * @returns {ReturnType<usePopover>} The data for the popover
+ * @returns {ReturnType<typeof usePopover>} The data for the popover
  */
 export declare const usePopover: ({ initialOpen, placement, isModal, isOpen: controlledIsOpen, activation, dismissal, onOpenStateChange, ...restOptions }: PopoverProps) => UsePopoverType;

package/src/components/DayPicker/DayPickerPopover.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { Matcher } from "react-day-picker";
-import { CommonProps, Size } from "../../common/CommonProps";
-import { PopoverPlacement } from "../Popover";
-import { ButtonVariant } from "../buttons";
-export interface DayPickerPopoverProps extends CommonProps {
-    disabledDays?: Matcher | Matcher[] | undefined;
-    onDaySelect: (day: Date) => void;
-    selectedDay?: Date;
-    color?: ButtonVariant;
-    size?: Size;
-    placement?: PopoverPlacement;
-    buttonContent: JSX.Element;
-    language: string;
-}
-/**
- * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- 
- * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
- * @returns {JSX.Element} DayPickerPopover component
- */
-export declare const DayPickerPopover: ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;