@trackunit/react-components 0.1.12 → 0.1.14

package/index.js

@@ -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$8, 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$8 = tw.span `
   tu-icon
   ${({ $color }) => {
     switch ($color) {
@@ -783,9 +783,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`}
@@ -1213,7 +1213,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 +1235,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 +1346,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 +1441,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 +1619,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 +1646,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 +1754,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 +2451,107 @@ 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, 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({ 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({}, moreMenuProps, { 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 +3062,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.12",
+  "version": "0.1.14",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

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, 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";