@trackunit/react-components 0.1.22 → 0.1.25

package/index.css

@@ -197,17 +197,14 @@
   }
 }
 
-/* CSS related to the LAbel component */
+/* CSS related to the Label component */
 
 .tu-label {
-  @apply leading-none
-    text-base
+  @apply text-base
     text-slate-700	
+    overflow-hidden
     whitespace-nowrap
     text-ellipsis
-    items-center 
-    grid
-    gap-2	
     hover:text-slate-800 
     group-hover:text-slate-800 
     active:text-slate-800

package/index.js

@@ -211,7 +211,7 @@ const IconSizeClassMap = {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-const Icon$1 = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
+const Icon = ({ name, size = "large", className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }) => {
     const iconSizeClassName = React.useMemo(() => IconSizeClassMap[size], [size]);
     const correctIconType = React.useMemo(() => (type ? type : size === "large" ? "outline" : "solid"), [type, size]);
     const colorClassNames = React.useMemo(() => (correctIconType === "solid" ? tws `fill-current stroke-transparent` : tws `fill-transparent stroke-current`), [correctIconType]);
@@ -307,7 +307,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon$1, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsx(ActionContainer, { children: jsx(StyledIconButton, { "$fieldSize": iconSize, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
 };
 const ActionContainer = tw.div `
   tu-action-container
@@ -330,7 +330,7 @@ const Flex$2 = tw.div `
   flex
   items-center
 `;
-const CustomIcon = twx(Icon$1) `
+const CustomIcon = twx(Icon) `
   cursor-pointer
   w-5
   h-5
@@ -403,13 +403,13 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
     const getIconFromColor = () => {
         switch (color) {
             case "danger":
-                return jsx(Icon$1, { name: "ExclamationIcon", color: "danger" });
+                return jsx(Icon, { name: "ExclamationIcon", color: "danger" });
             case "warning":
-                return jsx(Icon$1, { name: "ExclamationCircleIcon", color: "warning" });
+                return jsx(Icon, { name: "ExclamationCircleIcon", color: "warning" });
             case "success":
-                return jsx(Icon$1, { name: "CheckCircleIcon", color: "success" });
+                return jsx(Icon, { name: "CheckCircleIcon", color: "success" });
             default:
-                return jsx(Icon$1, { name: "InformationCircleIcon" });
+                return jsx(Icon, { name: "InformationCircleIcon" });
         }
     };
     const getButtonColor = () => {
@@ -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$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] })))] }))] })));
+    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, { 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, { 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`)}
@@ -705,7 +705,7 @@ const StyledHeading = tw.div `
  * @returns {JSX.Element} CardHeader component
  */
 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" }), className: "self-start" }))] }) })));
+    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, { name: "XIcon", size: "small" }), className: "self-start" }))] }) })));
 };
 const Root$8 = twx(DensityContainer) `
   tu-card__header-density-container 
@@ -872,7 +872,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
     }, [expanded, onToggle]);
     return (jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs(LabelContainer$2, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = twx(Icon$1) `
+const Rotate = twx(Icon) `
   ${p => (p.$expanded ? tws `tu-icon--animated-rotate-expanded` : null)}
   tu-icon--animated-rotate
 `;
@@ -930,7 +930,7 @@ const DateInput = forwardRef((_a, ref) => {
     // window.chrome doesn't exist in TS but is available on chrome browsers.
     // If it fails it will just show our icon.
     const hideOnChrome = () => (window.chrome !== null && typeof window.chrome !== "undefined" ? "hidden" : "");
-    return (jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: jsx(Icon$1, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid", className: hideOnChrome() }) }, rest)));
+    return (jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: jsx(Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid", className: hideOnChrome() }) }, rest)));
 });
 
 /**
@@ -1070,7 +1070,7 @@ const Content = tw.div `
  */
 const Tip = ({ children, iconProps, dataTestId, link, renderAs = "span", className, placement = "bottom", mode, }) => {
     const ifAnchorTag = renderAs === "a";
-    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon$1, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: `${dataTestId}-icon` }, iconProps)) })) })));
+    return (jsx(TipContainer, Object.assign({ "data-testid": dataTestId, "$as": renderAs, href: ifAnchorTag ? link : undefined, target: ifAnchorTag ? "_blank" : undefined, className: className }, { children: jsx(Tooltip, Object.assign({ label: children, dataTestId: `${dataTestId}-tooltip`, mode: mode, className: "tu-tip-tooltip", placement: placement }, { children: jsx(Icon, Object.assign({ name: "QuestionMarkCircleIcon", size: "medium", dataTestId: `${dataTestId}-icon` }, iconProps)) })) })));
 };
 const TipContainer = tw.text `
   tu-tip
@@ -1169,7 +1169,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsx(Popover, Object.assign({ placement: placement, render: () => (jsx(PopoverList, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) })) }, { children: jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsx(Icon$1, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
+    return (jsx(Popover, Object.assign({ placement: placement, render: () => (jsx(PopoverList, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) })) }, { children: jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
 };
 
 /**
@@ -1377,12 +1377,12 @@ const Indicator = tw.div `
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, selected, focused, prefix, icon, disabled, onClick, }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }) => {
     const containerProps = useContainerProps({ className, dataTestId });
     return (jsxs(Container$3, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": `${dataTestId}-prefix` }, { children: prefix }))), jsx(Label, Object.assign({ "data-testid": `${dataTestId}-label` }, { children: label })), icon && (jsx(Icon, Object.assign({ "$selected": selected, "data-testid": `${dataTestId}-icon` }, { children: icon })))] })));
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsx(Label, Object.assign({ "data-testid": `${dataTestId}-label` }, { children: label })), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
 const Container$3 = tw.div `
   group tu-menu-item
@@ -1391,9 +1391,9 @@ const Container$3 = tw.div `
   ${({ $disabled }) => ($disabled ? tws `tu-menu-item--disabled ` : "")}
 
 `;
-const Icon = tw.div `
-  tu-menu-item__icon
-  ${({ $selected }) => ($selected ? tws `tu-menu-item__icon--selected ` : "")}
+const Suffix = tw.div `
+  tu-menu-item__suffix
+  ${({ $selected }) => ($selected ? tws `tu-menu-item__suffix--selected ` : "")}
 `;
 const Prefix = tw.div `
   tu-menu-item__prefix
@@ -1410,13 +1410,14 @@ const Label = tw.div `
  * @returns {JSX.Element} MenuList component
  */
 const MenuList = (_a) => {
-    var { dataTestId, className, children, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "showDivider"]);
+    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx(Container$2, Object.assign({ "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
+    return (jsx(Container$2, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
 };
 const Container$2 = tw.div `
   tu-menu-list
+  ${props => props.$withStickyHeader && tws `tu-menu-list--sticky-header`}
 `;
 const Divider = tw.hr `
   tu-menu-list__divider
@@ -1443,7 +1444,7 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    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: () => {
+    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, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
                     setActionMenuIsOpen(!actionMenuIsOpen);
                 } })) })) })));
 };
@@ -1562,7 +1563,7 @@ const Tag = React.forwardRef((_a, ref) => {
     var { className, dataTestId, children, size = "medium", onClose, color = "primary" } = _a; __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
     return (jsxs(StyledText, Object.assign({ className: className, "$size": size, "data-testid": `${dataTestId}-tag`, "$as": "span", "$color": color, "$withXIcon": !!onClose, ref: ref }, { children: [children, onClose && (
             // a fix for multiselect deselecting tags working together with fade out animation
-            jsx(IconContainer, Object.assign({ onMouseDown: onClose }, { children: jsx(Icon$1, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", style: { WebkitTransition: "-webkit-transform 0.150s" }, className: size === "medium" ? tws `tu-tag__icon` : tws `tu-tag__icon tu-tag__icon--small` }) })))] })));
+            jsx(IconContainer, Object.assign({ onMouseDown: onClose }, { children: jsx(Icon, { name: "XCircleIcon", dataTestId: dataTestId + "Icon", type: "solid", style: { WebkitTransition: "-webkit-transform 0.150s" }, className: size === "medium" ? tws `tu-tag__icon` : tws `tu-tag__icon tu-tag__icon--small` }) })))] })));
 });
 const getSizeModifierClass = () => ({ $size, $withXIcon }) => {
     const tagSizeModifierClass = {
@@ -1609,7 +1610,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$1, { 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, { 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) {
@@ -1746,11 +1747,11 @@ const Pagination = ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, ca
     if (loading) {
         return (jsx(Root$3, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
     }
-    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, 
+    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, { 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" })] })));
+                    : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] })));
 };
 const Root$3 = tw.div `
 tu-pagination
@@ -1953,10 +1954,11 @@ const TextInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-const Search = ({ className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref, }) => {
-    return (jsx(StyledTextInput, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon$1, { name: "SearchIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": `${dataTestId}_suffix_component`, onClick: () => {
+const Search = (_a) => {
+    var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ref } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete", "ref"]);
+    return (jsx(StyledTextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: className, "$widenOnFocus": widenInputOnFocus, "$showBorderWhenNotInFocus": showBorderWhenNotInFocus, placeholder: placeholder, prefix: jsx(Icon, { name: "SearchIcon", size: "medium" }), suffix: onClear ? (jsx("button", Object.assign({ "data-testid": `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
-            } }, { children: jsx(Icon$1, { name: "XIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete }));
+            } }, { children: jsx(Icon, { name: "XIcon", size: "small" }) }))) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
 };
 const StyledTextInput = twx(TextInput) `
   tu-search
@@ -2078,7 +2080,7 @@ const SelectPrefix = tw.div `
  * @returns {JSX.Element} SingleSelectMenuItem
  */
 const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, icon: selected ? jsx(Icon$1, { name: "CheckIcon", size: "small" }) : undefined }));
+    return (jsx(MenuItem, { dataTestId: dataTestId, label: label, prefix: icon, onClick: onClick, selected: selected, disabled: disabled, focused: focused, suffix: selected ? jsx(Icon, { name: "CheckIcon", size: "small" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -2198,6 +2200,7 @@ tu-select__counter
  * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
  */
 const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon) => {
+    // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     const customComponents = React.useMemo(() => {
         return Object.assign({ ValueContainer: props => {
                 if (props.isMulti) {
@@ -2235,18 +2238,19 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
             }, LoadingIndicator: props => {
                 return jsx(Spinner, { size: "small", className: tws `mt-1.5 mr-1` });
             }, DropdownIndicator: props => {
-                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? (dropdownIcon) : menuIsOpen ? (jsx(Icon$1, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon$1, { name: "ChevronDownIcon", size: "medium" })) }) })));
+                const icon = props.selectProps.menuIsOpen ? (jsx(Icon, { name: "ChevronUpIcon", size: "medium" })) : (jsx(Icon, { name: "ChevronDownIcon", size: "medium" }));
+                return props.selectProps.isLoading ? null : (jsx(components.DropdownIndicator, Object.assign({}, props, { children: jsx(StyledIcon, { children: dropdownIcon ? dropdownIcon : icon }) })));
             }, IndicatorSeparator: () => null, ClearIndicator: props => {
                 if (disabled) {
                     return null;
                 }
-                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": `${dataTestId}-XIcon` }, { children: jsx(Icon$1, { name: "XCircleIcon", size: "medium" }) })) })));
+                return (jsx(components.ClearIndicator, Object.assign({}, props, { children: jsx(XIcon, Object.assign({ onClick: props.clearValue, "data-testid": `${dataTestId}-XIcon` }, { children: jsx(Icon, { name: "XCircleIcon", size: "medium" }) })) })));
             }, Control: props => {
-                return (jsx(components.Control, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onTouchEnd: () => null }), className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
+                return (jsx(components.Control, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__control--disabled` : "" })));
             }, SingleValue: props => {
                 return (jsx(components.SingleValue, Object.assign({}, props, { className: props.isDisabled ? tws `tu-select__single-value--disabled` : "" }, { children: jsx("div", Object.assign({ "data-testid": dataTestId + "-singleValue" }, { children: props.children })) })));
             }, Menu: props => {
-                return (jsx(components.Menu, Object.assign({}, props, { className: menuIsOpen
+                return (jsx(components.Menu, Object.assign({}, props, { className: props.selectProps.menuIsOpen
                         ? tws `tu-select__menu-list animate-fade-in-fast`
                         : tws `tu-select__menu-list animate-fade-out-fast` })));
             }, Option: props => {
@@ -2259,7 +2263,7 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                 return (jsx(components.Option, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { role: "option", onClick: () => { } }) }, { children: props.isMulti ? (jsx(MultiSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled, dataTestId: props.label }))) : (jsx(SingleSelectMenuItem, Object.assign({}, componentProps, { disabled: disabled || props.isDisabled, dataTestId: props.label }))) })));
             } }, componentsProps);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [componentsProps, disabled, menuIsOpen, refMenuIsEnabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
+    }, [componentsProps, disabled, maxSelectedDisplayCount]); // do not add dropdownIcon (it will cause issue with opening/closing list for selects with custom icon)
     return customComponents;
 };
 const StyledIcon = tw.div `
@@ -2642,7 +2646,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, children, className, dataTestId = "timeline-date", dot = jsx(Indicator$1, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon$1, { name: "CalendarIcon", size: "large" }) }), header = `${format(date, "MMM d, yyyy")} (${formatDistance(date, new Date(), { addSuffix: true })})`, onClick, }) => {
+const TimelineElement = ({ date, children, className, dataTestId = "timeline-date", dot = jsx(Indicator$1, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = `${format(date, "MMM d, yyyy")} (${formatDistance(date, new Date(), { addSuffix: true })})`, onClick, }) => {
     var _a;
     return (jsxs("li", Object.assign({ className: `${tws `tu-timeline-element`}${(_a = " " + className) !== null && _a !== void 0 ? _a : ""}  `, "data-date": `${date}`, "data-testid": `${dataTestId}`, onClick: () => onClick && onClick() }, { children: [jsx("div", Object.assign({ className: tws `tu-timeline-element__dot` }, { children: dot })), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] })));
 };
@@ -3107,4 +3111,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, 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, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, 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, 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, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

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

package/src/components/Checkbox/Checkbox.d.ts

@@ -9,6 +9,10 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      * Children to be displayed
      */
     children?: React.ReactNode;
+    /**
+     * An boolean flag to set checkbox to checked state
+     */
+    checked?: boolean;
     /**
      * An boolean flag to set checkbox to disabled state
      */

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { CommonProps } from "../../../common";
 export interface MenuItemProps extends CommonProps {
-    /**
-     * The icon to be rendered in the menu item.
-     */
-    icon?: JSX.Element;
     /**
      * Label of the menu item
      */
     label?: string;
+    /**
+     * The children element is a custom element that can be used to override the label.
+     * If you use this prop, the label prop will be ignored.
+     */
+    children?: JSX.Element;
     /**
      * Additional tailwind classes to be applied to the component.
      */
@@ -22,7 +23,13 @@ export interface MenuItemProps extends CommonProps {
      * This is typically used to render an icon.
      *
      */
-    prefix?: JSX.Element;
+    prefix?: React.ReactNode;
+    /**
+     * An React element to render after the label.
+     * This is typically used to render an icon.
+     *
+     */
+    suffix?: JSX.Element;
     /**
      * An boolean flag to turn on/off selected state
      * This is typically used highlight that item is selected
@@ -55,4 +62,4 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, selected, focused, prefix, icon, disabled, onClick, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, }: MenuItemProps) => JSX.Element;

package/src/components/Menu/MenuList/MenuList.d.ts

@@ -15,11 +15,17 @@ export interface MenuListProps {
     /**
      * List of menu items to be rendered.
      */
-    children: JSX.Element[] | JSX.Element;
+    children: React.ReactNode;
     /**
      * List of menu items to be rendered.
      */
     showDivider?: boolean;
+    /**
+     * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
+     *
+     * @default false
+     */
+    withStickyHeader?: boolean;
 }
 /**
  * The MenuList component is used for menus and selects.
@@ -27,4 +33,4 @@ export interface MenuListProps {
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, children, showDivider, ...args }: MenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, children, withStickyHeader, showDivider, ...args }: MenuListProps) => JSX.Element;

package/src/components/RadioGroup/RadioItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-interface RadioItemProps extends CommonProps {
+export interface RadioItemProps extends CommonProps {
     /**
      * The label of the radio item.
      */
@@ -21,4 +21,3 @@ interface RadioItemProps extends CommonProps {
  * @returns {JSX.Element} RadioItem component
  */
 export declare const RadioItem: ({ label, value, dataTestId, className, description }: RadioItemProps) => JSX.Element;
-export {};

package/src/components/Search/Search.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface SearchProps extends CommonProps {
+import { TextInputProps } from "../TextInput/TextInput";
+export interface SearchProps extends CommonProps, TextInputProps {
     /**
      * The name for the HTML element.
      */
@@ -58,4 +59,4 @@ export interface SearchProps extends CommonProps {
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ref, }: SearchProps) => JSX.Element;
+export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ref, ...rest }: SearchProps) => JSX.Element;