@trackunit/react-components 0.1.13 → 0.1.16

package/index.js

@@ -99,7 +99,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
  * @returns {JSX.Element} Spinner component
  */
 const Spinner = ({ mode = "light", size = "medium", centered = false, className, containerClassName, dataTestId, }) => {
-    return (jsx(Container$8, Object.assign({ "$mode": mode, "$centered": centered, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
+    return (jsx(Container$9, Object.assign({ "$mode": mode, "$centered": centered, className: containerClassName }, { children: jsx(StyledSpinner$1, { "$size": size, "$mode": mode, role: "spinbutton", className: className, "data-testid": dataTestId }) })));
 };
 const getSpinnerStyles = () => ({ $size }) => {
     switch ($size) {
@@ -117,7 +117,7 @@ const StyledSpinner$1 = tw.span `
   ${p => (p.$mode === "dark" ? tws `tu-spinner--dark` : null)}
   ${getSpinnerStyles()}
 `;
-const Container$8 = tw.div `
+const Container$9 = tw.div `
   tu-spinner--container
   ${p => (p.$centered ? tws `tu-spinner--container-centered` : null)}
 `;
@@ -226,12 +226,12 @@ const Icon$1 = ({ name, size = "large", className, dataTestId, color, onClick, f
     if (!IconComponent) {
         return null;
     }
-    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$7, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
+    return (jsx(React.Suspense, Object.assign({ fallback: jsx(LoadingDot, { className: iconSizeClassName }) }, { children: jsx(Root$9, Object.assign({ "$color": color, onClick: onClick, "data-testid": dataTestId, ref: forwardedRef }, { children: jsx(IconComponent, { "data-testid": dataTestId ? `${dataTestId}-${name}` : name, className: `${iconSizeClassName} ${colorClassNames} ${className !== null && className !== void 0 ? className : ""} ${name} aspect-square`, style: fillColor ? Object.assign(Object.assign({}, style), { fill: fillColor }) : Object.assign({}, style) }) })) })));
 };
 const LoadingDot = tw.span `
   tu-loading-dot
 `;
-const Root$7 = tw.span `
+const Root$9 = tw.span `
   tu-icon
   ${({ $color }) => {
     switch ($color) {
@@ -428,7 +428,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    return (jsxs(Container$7, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
+    return (jsxs(Container$8, Object.assign({ "$color": color, className: className, "data-testid": dataTestId, "$inline": inline, ref: ref, role: "alert" }, { children: [jsx(IconContainer$1, Object.assign({ "$inline": inline }, { children: getIconFromColor() })), jsxs(Content$1, Object.assign({ "$inline": inline }, { children: [jsxs(ContentDetails, { children: [jsx(ContentBody, { children: body }), onClose && !inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs(RightAligned, Object.assign({ "$inline": inline }, { children: [secondaryAction && (jsx(Button, Object.assign({ size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading }, { children: secondaryAction.label }))), primaryAction && (jsx(Button, Object.assign({ size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading }, { children: primaryAction.label }))), onClose && inline ? (jsx(CloseButtonContainer, Object.assign({ "$inline": inline }, { children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }), title: "Close Alert", circular: true }) }))) : null] })))] }))] })));
 };
 const CloseButtonContainer = tw.div `
   ${p => (p.$inline ? tws `tu-alert__close-button-container--inline` : tws `tu-alert__close-button-container`)}
@@ -442,7 +442,7 @@ const getBackgroundColor = () => ({ $color }) => {
     };
     return colors[$color];
 };
-const Container$7 = tw.div `
+const Container$8 = tw.div `
   tu-alert
   ${p => (p.$inline ? tws `tu-alert--inline` : null)}
   ${getBackgroundColor()}
@@ -655,11 +655,12 @@ const StyledDensityContainer = twx(DensityContainer) `
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {JSX.Element} CardFooter component
  */
-const CardFooter = ({ dataTestId, className, children, density }) => {
-    return (jsx(TopBorderedDensityContainer, Object.assign({ dataTestId: dataTestId, className: className, "$density": density }, { children: jsx(Body, { children: children }) })));
+const CardFooter = ({ dataTestId, className, children, density, hideSeparator = false }) => {
+    return (jsx(Container$7, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, "$density": density }, { children: jsx(Body, { children: children }) })));
 };
-const TopBorderedDensityContainer = twx(DensityContainer) `
+const Container$7 = twx(DensityContainer) `
   tu-card__footer-density-container
+  ${p => p.$hideSeparator && tws `tu-card__footer-density-container--borderless`}
 `;
 const Body = tw.div `
   tu-card__footer
@@ -706,11 +707,12 @@ const StyledHeading = tw.div `
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, }) => {
-    return (jsx(BottomBorderedDensityContainer, Object.assign({ dataTestId: dataTestId, className: className, "$density": density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }) }))] }) })));
+const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
+    return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, "$density": density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon$1, { name: "XIcon", size: "small" }) }))] }) })));
 };
-const BottomBorderedDensityContainer = twx(DensityContainer) `
-  tu-card__header-density-container
+const Root$8 = twx(DensityContainer) `
+  tu-card__header-density-container 
+  ${p => p.$hideSeparator && tws `tu-card__header-density-container--borderless`}
 `;
 const Container$6 = tw.div `
   tu-card__header
@@ -783,9 +785,9 @@ const ChartContainer = tw.div `
  * @returns {JSX.Element} Label component
  */
 const Label$2 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsx(Root$6, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
+    return (jsx(Root$7, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
 };
-const Root$6 = tw.label `
+const Root$7 = tw.label `
 tu-label
 ${({ $disabled }) => $disabled && tws `tu-label--disabled`}
 ${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
@@ -1085,7 +1087,7 @@ const TipContainer = tw.text `
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled = false, }) => {
-    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(Label$2, Object.assign({ dataTestId: `${dataTestId}-label` }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
+    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: `${dataTestId}-label` }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
 };
 const FormGroupRoot = tw.label `
   tu-form-group
@@ -1096,6 +1098,9 @@ const FormGroupRoot = tw.label `
 const ContainerBefore = tw.div `
   tu-form-group__container-before
 `;
+const FormGroupLabel = twx(Label$2) `
+  component-formGroup-font
+`;
 const ContainerAfter = tw.div `
   tu-form-group__container-after
   ${({ $isInvalid }) => ($isInvalid ? tws `tu-form-group__container-after--invalid` : null)}
@@ -1213,7 +1218,7 @@ const Drawer = ({ open, onClose = () => { }, children, disableOverlay = false, p
             window.removeEventListener("keyup", onKeyPress);
         };
     }, [open, onClose]);
-    return (jsx(FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxs(Root$5, Object.assign({ id: "drawer" }, { children: [!disableOverlay && jsx(Overlay, { "aria-hidden": open, "$open": open, onClick: onClose, id: "drawer__overlay" }), jsx(StyledCard$1, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, "$open": open, "$position": position, id: "drawer__card", className: className }, { children: children }))] }))) : (
+    return (jsx(FloatingFocusManager, Object.assign({ context: context }, { children: open ? (jsxs(Root$6, Object.assign({ id: "drawer" }, { children: [!disableOverlay && jsx(Overlay, { "aria-hidden": open, "$open": open, onClick: onClose, id: "drawer__overlay" }), jsx(StyledCard$1, Object.assign({ "aria-hidden": open, "data-testId": dataTestId, "$open": open, "$position": position, id: "drawer__card", className: className }, { children: children }))] }))) : (
         // eslint-disable-next-line react/jsx-no-useless-fragment
         jsx(Fragment, {})) })));
 };
@@ -1235,7 +1240,7 @@ const StyledCard$1 = twx(Card) `
   ${({ $open }) => $open && tws `tu-drawer__card--open`}
   ${({ $position }) => getPositionStyles($position)}
 `;
-const Root$5 = tw.div `
+const Root$6 = tw.div `
   tu-drawer
 `;
 const Overlay = tw.div `
@@ -1346,9 +1351,9 @@ const Ping = tw.span `
  */
 const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxs(Root$4, Object.assign({ "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick }, { children: [jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsx("p", { children: label })] })));
+    return (jsxs(Root$5, Object.assign({ "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick }, { children: [jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsx("p", { children: label })] })));
 };
-const Root$4 = tw.div `
+const Root$5 = tw.div `
   inline-flex
   items-center
   transition-all
@@ -1441,11 +1446,11 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsx(Popover, Object.assign({ render: () => children, placement: menuPlacement }, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon$1, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+    return (jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsx(Popover, Object.assign({ render: () => children, placement: menuPlacement }, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon$1, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
                     setActionMenuIsOpen(!actionMenuIsOpen);
                 } })) })) })));
 };
-const Root$3 = tw.div `
+const Root$4 = tw.div `
   tu-more-menu
   ${({ variant }) => (variant === "primary" ? tws `tu-more-menu--primary` : "")}
 `;
@@ -1619,7 +1624,7 @@ const IconContainer = tw.div `
  * @returns {JSX.Element} PageHeader component
  */
 const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
-    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon$1, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": `${dataTestId}-heading` }, { children: title })), description && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: `${dataTestId}-spinner`, centered: true }), action] })), jsx(ChildContainer, { children: children })] })));
+    return (jsxs(StyledPageHeader, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({ "data-testid": `${dataTestId}-heading-container` }, { children: [jsxs(HeadingContainer, { children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon$1, { name: "ArrowLeftIcon" }) })), jsx(Heading, Object.assign({ "data-testid": `${dataTestId}-heading` }, { children: title })), description && (jsx(StyledTip, Object.assign({ link: isValidHttpUrl(link) ? link : undefined, dataTestId: `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, renderAs: link ? "a" : "span" }, { children: description })))] }), tag && jsx(Tag, Object.assign({ dataTestId: dataTestId }, { children: tag })), showLoading && jsx(Spinner, { dataTestId: `${dataTestId}-spinner`, centered: true }), action] })), jsx(ChildContainer$1, { children: children })] })));
 };
 function isValidHttpUrl(link) {
     if (!link) {
@@ -1646,7 +1651,7 @@ const HeadingContainer = tw.div `
 const Heading = tw.h1 `
   tu-page-header__heading
 `;
-const ChildContainer = tw.div `
+const ChildContainer$1 = tw.div `
   tu-page-header__child-container
 `;
 const StyledTip = twx(Tip) `
@@ -1754,15 +1759,15 @@ const Pagination = ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, ca
         handlePageChange("manual");
     }, [handlePageChange]);
     if (loading) {
-        return (jsx(Root$2, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
+        return (jsx(Root$3, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
     }
-    return (jsxs(Root$2, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon$1, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(Text$1, { children: getTranslatedPage() }), jsx(PageInput, { type: "number", min: 1, 
+    return (jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon$1, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(Text$1, { children: getTranslatedPage() }), jsx(PageInput, { type: "number", min: 1, 
                         // max={amountOfPages}
                         value: pageInputValue, onFocus: handleOnFocus, onBlur: handleOnBlur, onChange: handleOnChange, onKeyPress: handleOnKeyPress, "data-testid": "page-input" }), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? false
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon$1, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] })));
 };
-const Root$2 = tw.div `
+const Root$3 = tw.div `
 tu-pagination
 `;
 const TextStyled = twx(Text$1) `
@@ -2451,6 +2456,111 @@ const SelectContainer = tw.div `
 `;
 Select.displayName = "Select";
 
+/**
+ * A hook used to detect what children are overflowing a container.
+ *
+ * @param {OverflowItemsOptions} root0  The options for the hook.
+ * @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
+ * @returns {object} The overflow items and the ref to the container.
+ */
+const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id", children, }) => {
+    const [itemOverflowMap, setItemOverflowMap] = useState({});
+    const overflowContainerRef = useRef(null); // TODO: Handle other elements than div
+    const observerRef = useRef(null);
+    const handleIntersection = useCallback(entries => {
+        const updatedEntries = {};
+        entries.forEach(entry => {
+            const targetElementId = entry.target[childUniqueIdentifierAttribute];
+            if (targetElementId) {
+                updatedEntries[targetElementId] = entry.isIntersecting ? false : true;
+            }
+        });
+        setItemOverflowMap(prev => (Object.assign(Object.assign({}, prev), updatedEntries)));
+    }, [childUniqueIdentifierAttribute]);
+    const observe = useCallback(() => {
+        const node = overflowContainerRef.current;
+        if (node && node.children) {
+            const root = overflowContainerRef.current;
+            const options = { root, threshold };
+            const observer = new IntersectionObserver(handleIntersection, options);
+            Array.from(node.children).forEach(child => {
+                observer.observe(child);
+            });
+            observer.observe(node);
+            observerRef.current = observer;
+        }
+    }, [handleIntersection, threshold]);
+    const unobserve = useCallback(() => {
+        const currentObserver = observerRef.current;
+        currentObserver === null || currentObserver === void 0 ? void 0 : currentObserver.disconnect();
+        observerRef.current = null;
+    }, []);
+    const initializeObserver = useCallback(() => {
+        unobserve();
+        observe();
+    }, [observe, unobserve]);
+    useEffect(() => {
+        initializeObserver();
+        return () => {
+            unobserve();
+        };
+    }, [initializeObserver, unobserve, children]);
+    return { overflowContainerRef, itemOverflowMap };
+};
+
+/**
+ * The sidebar components is used to render a responsive sidebar.
+ * - The sidebar will be rendered horizontally until a given breakpoint where it will be stacked vertically.
+ * - The sidebar hides items that does not fit in the sidebar and show them in a more menu.
+ * - **_The sidebar is just a wrapper. You are responsible for styling the children._**
+ *
+ * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
+ *
+ * @param {SidebarProps} props - The props for the Sidebar component
+ * @returns {JSX.Element} Sidebar component
+ */
+const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", className, dataTestId = "sidebar", moreMenuProps, menuListProps, overflowThreshold, }) => {
+    const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
+        children,
+        childUniqueIdentifierAttribute: "id",
+        threshold: overflowThreshold !== null && overflowThreshold !== void 0 ? overflowThreshold : 0.8,
+    });
+    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    const itemVisibilityClassName = (id) => {
+        if (itemOverflowMap[id]) {
+            return tws `invisible`;
+        }
+        return tws `visible`;
+    };
+    return (jsxs(Root$2, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(ChildContainer, Object.assign({ "$breakpoint": breakpoint, ref: overflowContainerRef, className: childContainerClassName, "data-testid": `${dataTestId}-child-container` }, { children: React__default.Children.map(children, child => {
+                    return React__default.cloneElement(child, {
+                        className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
+                    });
+                }) })), overflowItemCount > 0 ? (jsx(MoreMenu, Object.assign({ iconButtonProps: {
+                    circular: false,
+                    variant: "transparent",
+                    color: "secondary",
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: `${dataTestId}-more-menu` }, { children: jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
+                        return itemOverflowMap[child.props.id] ? child : null;
+                    }) })) }))) : null] })));
+};
+const Root$2 = tw.div `
+  tu-sidebar
+`;
+const breakpointClasses = {
+    xs: tws `tu-sidebar__child-container--xs`,
+    sm: tws `tu-sidebar__child-container--sm`,
+    md: tws `tu-sidebar__child-container--md`,
+    lg: tws `tu-sidebar__child-container--lg`,
+    xl: tws `tu-sidebar__child-container--xl`,
+    "2xl": tws `tu-sidebar__child-container--2xl`,
+    "3xl": tws `tu-sidebar__child-container--3xl`,
+};
+const ChildContainer = tw.div `
+  tu-sidebar__child-container
+  ${({ $breakpoint }) => breakpointClasses[$breakpoint]}
+`;
+
 /**
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
@@ -2961,4 +3071,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.13",
+  "version": "0.1.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,7 +9,7 @@
     "@trackunit/tailwind-styled-components": "0.0.51",
     "react": "18.2.0",
     "@trackunit/ui-design-tokens": "0.0.53",
-    "@trackunit/react-core-contexts-test": "0.1.14",
+    "@trackunit/react-core-contexts-test": "0.1.15",
     "echarts-for-react": "3.0.2",
     "echarts": "5.4.0",
     "uuid": "8.3.2",

package/src/components/Card/CardFooter.d.ts

@@ -9,6 +9,10 @@ export interface CardFooterProps extends CommonProps {
      * Element to render in the footer
      */
     children?: React.ReactNode | null;
+    /**
+     * Wether or not a seperator line should be rendered
+     */
+    hideSeparator?: boolean;
 }
 /**
  * A simple footer intended to use with Cards and Modals.
@@ -18,4 +22,4 @@ export interface CardFooterProps extends CommonProps {
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {JSX.Element} CardFooter component
  */
-export declare const CardFooter: ({ dataTestId, className, children, density }: CardFooterProps) => JSX.Element;
+export declare const CardFooter: ({ dataTestId, className, children, density, hideSeparator }: CardFooterProps) => JSX.Element;

package/src/components/Card/CardHeader.d.ts

@@ -5,7 +5,7 @@ export interface CardHeaderProps extends CommonProps {
     /**
      * The text to show in the Cards main heading
      */
-    heading: string;
+    heading?: string;
     /**
      * The variant/size of the heading.
      * Same as the `Heading` component.
@@ -26,7 +26,7 @@ export interface CardHeaderProps extends CommonProps {
     /**
      * Wether or not a seperator line should be rendered
      */
-    showSeparator?: boolean;
+    hideSeparator?: boolean;
     /** Function to call when the close button is clicked */
     onClose?: () => void;
     /**
@@ -44,4 +44,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {JSX.Element} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, }: CardHeaderProps) => JSX.Element;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator, }: CardHeaderProps) => JSX.Element;

package/src/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { MenuList, MoreMenu } from "../Menu";
+export interface SidebarItemProps extends CommonProps {
+    /**
+     * The id prop is used to identify the sidebar item in the dom.
+     * This is needed as it is used for the intersection observer to determine which items are visible and which are not.
+     */
+    id: string;
+}
+export declare type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export interface SidebarProps extends CommonProps {
+    /**
+     * The breakpoint at which the menu will go from Horizontal to vertical stacked
+     *
+     * @default "lg"
+     */
+    breakpoint?: Breakpoints;
+    /**
+     * The overflowThreshold is used to determine when an item is considered to be overflowing.
+     */
+    overflowThreshold?: number;
+    /**
+     * The child elements of the sidebar.
+     * Usually this will be a list of SidebarItems, bottons or links.
+     *
+     *  **For the overflow functionality to take effect use _"min-w-[*]"_ or _"flex-shrink-0"_ on the elements.**
+     */
+    children: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
+    /**
+     * The childContainerClassName is applied to the element that contains the children.
+     * This can be used to change gap or similar styling.
+     */
+    childContainerClassName?: string;
+    /**
+     * Pass custom props to the MoreMenu component used to render overflow items
+     */
+    moreMenuProps?: Omit<React.ComponentProps<typeof MoreMenu>, "children">;
+    /**
+     * Pass custom props to the MenuList component used to render overflow items
+     */
+    menuListProps?: Omit<React.ComponentProps<typeof MenuList>, "children">;
+}
+/**
+ * The sidebar components is used to render a responsive sidebar.
+ * - The sidebar will be rendered horizontally until a given breakpoint where it will be stacked vertically.
+ * - The sidebar hides items that does not fit in the sidebar and show them in a more menu.
+ * - **_The sidebar is just a wrapper. You are responsible for styling the children._**
+ *
+ * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
+ *
+ * @param {SidebarProps} props - The props for the Sidebar component
+ * @returns {JSX.Element} Sidebar component
+ */
+export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, dataTestId, moreMenuProps, menuListProps, overflowThreshold, }: SidebarProps) => JSX.Element;

package/src/components/Sidebar/useOverflowItems.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes } from "react";
+import { SidebarItemProps } from "./Sidebar";
+export interface OverflowItemsOptions {
+    /**
+     * If the child elements of the container are not available at the time of the hook initialization,
+     * you can pass the children as a prop, and the hook will initialize the observer when the children are available.
+     */
+    children?: React.ReactElement<SidebarItemProps>[] | React.ReactElement<SidebarItemProps>;
+    /**
+     * The threshold for the intersection observer.
+     * Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
+     *
+     * @default 1
+     */
+    threshold?: number | number[];
+    /**
+     * The unique identifier attribute for the child elements.
+     * The identifier is the value that will be returned in the visibleItemsIds array.
+     *
+     * **ATTENTION: The identifier must be a HTMLAttribute that is available in the DOM, you cannot use react key.**
+     *
+     * @default "id"
+     */
+    childUniqueIdentifierAttribute?: keyof HTMLAttributes<HTMLElement> | `data-${string}`;
+}
+export declare type OverflowMap = {
+    [key: string]: boolean;
+};
+/**
+ * A hook used to detect what children are overflowing a container.
+ *
+ * @param {OverflowItemsOptions} root0  The options for the hook.
+ * @param {OverflowItemsOptions.threshold} root0.threshold The threshold for the intersection observer.
+ * @returns {object} The overflow items and the ref to the container.
+ */
+export declare const useOverflowItems: ({ threshold, childUniqueIdentifierAttribute, children, }: OverflowItemsOptions) => {
+    overflowContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    itemOverflowMap: OverflowMap;
+};

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -34,6 +34,10 @@ export interface ButtonCommonProps extends CommonProps {
      * The link to be used for the button.
      */
     to?: string;
+    /**
+     * The id of the button.
+     */
+    id?: string;
     title?: string;
     tabIndex?: number;
     role?: string;

package/src/components/index.d.ts

@@ -33,6 +33,7 @@ export * from "./RadioGroup";
 export * from "./Search";
 export * from "./SectionHeader";
 export * from "./Select";
+export * from "./Sidebar/Sidebar";
 export * from "./SkeletonLines";
 export * from "./Spacer";
 export * from "./Spinner";