@trackunit/react-components 0.1.66 → 0.1.68

package/index.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useMemo, cloneElement, useCallback, useEffect, Children, useRef, memo, useContext } from 'react';
+import React__default, { useState, forwardRef, useMemo, createContext, useContext, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import { useMeasure, useCopyToClipboard } from 'react-use';
+import { v4 } from 'uuid';
 import { format, formatDistance } from 'date-fns';
-import { useFloating, offset, flip, size, shift, autoUpdate, useInteractions, useClick, useHover, useRole, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
+import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
 import { useClickOutside } from 'react-browser-hooks';
@@ -17,6 +17,7 @@ import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { color } from '@trackunit/ui-design-tokens';
 
@@ -362,7 +363,7 @@ const CustomIcon = twx(Icon) `
  * @returns {JSX.Element} Text component
  */
 const Text$1 = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
-    return (jsx(StyledText$4, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
+    return (jsx(StyledText$3, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
 };
 const getTextSize = () => ({ $size }) => {
     const sizes = {
@@ -393,7 +394,7 @@ const getTextAlignment = () => ({ $align }) => {
     };
     return alignments[$align];
 };
-const StyledText$4 = tw.text `
+const StyledText$3 = tw.text `
   tu-text
   ${getFontColor$1()}
   ${p => (p.$italicize ? tws `tu-text--italic` : "")}
@@ -492,7 +493,7 @@ const Badge = (_a) => {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsx(StyledText$3, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
+    return (jsx(StyledText$2, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
 };
 const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     const colorClasses = {
@@ -501,7 +502,7 @@ const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     };
     return colorClasses[$color];
 };
-const StyledText$3 = tw.text `
+const StyledText$2 = tw.text `
   tu-badge
   ${({ $count }) => ($count === null || $count === undefined) && tws `tu-badge--square`}
   ${getBadgeModifierClass()}
@@ -795,7 +796,7 @@ const CheckboxWrapper = tw.span `
             ? tws `tu-checkbox--selected`
             : tws `tu-checkbox--deselected`;
 }}
-  
+
   ${({ $isInvalid }) => $isInvalid && tws `tu-checkbox--invalid`}
 `;
 
@@ -877,17 +878,28 @@ const DateInput = forwardRef((_a, ref) => {
 });
 
 /**
- * @param {PopoverProps} props The children to render in the popover
- * @returns {ReactElement} Popover with specified content and placement
+ * The hook that powers the Popover component.
+ * It should not be used directly, but rather through the Popover component.
+ *
+ * @param {PopoverProps} options The options for the popover
+ * @returns {ReturnType<usePopover>} The data for the popover
  */
-const Popover = ({ children, render, placement, activation = { click: true, hover: false }, className, dataTestId, }) => {
-    const [open, setOpen] = useState(false);
-    const { x, y, reference, floating, strategy, context } = useFloating({
-        open,
-        onOpenChange: setOpen,
+const usePopover = (_a) => {
+    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, onOpenStateChange: setControlledIsOpen } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "onOpenStateChange"]);
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(initialOpen);
+    const [labelId, setLabelId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const setIsOpen = setControlledIsOpen !== null && setControlledIsOpen !== void 0 ? setControlledIsOpen : setUncontrolledIsOpen;
+    const popoverData = useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
         middleware: [
             offset(8),
             flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            shift(),
             size({
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
@@ -896,83 +908,68 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                     });
                 },
             }),
-            shift(),
         ],
-        placement,
-        whileElementsMounted: autoUpdate,
     });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        useClick(context, { enabled: activation.click, ignoreMouse: activation.hover }),
-        useHover(context, { enabled: activation.hover }),
-        useRole(context),
-        useDismiss(context),
+    const popoverContext = popoverData.context;
+    const clickInteraction = useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const dismissInteraction = useDismiss(popoverContext);
+    const hoverInteraction = useHover(popoverContext, { enabled: activation.hover });
+    const roleInteraction = useRole(popoverContext);
+    const combinedInteractions = useInteractions([
+        clickInteraction,
+        hoverInteraction,
+        dismissInteraction,
+        roleInteraction,
     ]);
-    // Preserve the consumer's ref
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ref = useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
-    return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps(Object.assign({ ref }, children.props))), jsx(FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: open && (jsx(FloatingFocusManager, Object.assign({ guards: false, context: context, modal: false, order: ["reference", "content"], returnFocus: false }, { children: jsx("div", Object.assign({ ref: floating, className: `tu-popover-container animate-fade-in-fast ${className !== null && className !== void 0 ? className : ""}`, "data-testid": dataTestId, style: {
-                            position: strategy,
-                            top: y !== null && y !== void 0 ? y : 0,
-                            left: x !== null && x !== void 0 ? x : 0,
-                            display: "flex",
-                        } }, getFloatingProps(), { children: render({
-                            close: () => {
-                                setOpen(false);
-                            },
-                        }) })) }))) }))] }));
-};
-// Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
-function mergeRefs(refs) {
-    return value => {
-        refs.forEach(ref => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref !== null) {
-                ref.current = value;
-            }
-        });
-    };
-}
+    return useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
+        setIsOpen }, combinedInteractions), popoverData), { isModal,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId, customProps: restOptions })), [isOpen, setIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+};
 
+const PopoverContext = createContext(null);
 /**
- * The PopoverList component.
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
  *
- * @param {PopoverListProps} props - The props for the PopoverList component
- * @returns {JSX.Element} PopoverList component
+ * @returns {ContextType} The popover context
  */
-const PopoverList = ({ className, children, dataTestId }) => {
-    return (jsx(Card, Object.assign({ className: className, dataTestId: dataTestId }, { children: jsx(StyledCardBody, Object.assign({ density: "comfortable" }, { children: jsx(List, { children: children }) })) })));
+const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
+    if (context === null) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
 };
-const List = tw.ul `
-  tu-popover-list
-`;
-const StyledCardBody = twx(CardBody) `
-  tu-popover-list-body
-`;
-
 /**
- * The PopoverListItem component.
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
+ *
+ * To render the content of the popover, use the `<PopoverContent />` component.
  *
- * @param {PopoverListItemProps} props - The props for the PopoverListItem component
- * @returns {JSX.Element} PopoverListItem component
+ *
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider contining the children
  */
-const PopoverListItem = ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }) => {
-    const content = (jsxs("div", Object.assign({ className: "flex items-center gap-3" }, { children: [prefix && jsx("div", { children: prefix }), jsx(StyledText$2, Object.assign({ weight: selected ? "bold" : "normal", "$selected": selected }, { children: children })), suffix && jsx("div", { children: suffix })] })));
-    return (jsx(ListItem, Object.assign({ "$selected": selected, disabled: disabled, onClick: onClick, "aria-label": ariaLabel, "data-testid": dataTestId, className: className }, { children: url ? jsx(PopoverLink, Object.assign({ to: url }, { children: content })) : content })));
-};
-const StyledText$2 = twx(Text$1) `
-  tu-popover-list-item__text
-  ${p => p.$selected && tws `tu-popover-list-item__text--selected`}
-`;
-const ListItem = tw.li `
-  group
-  tu-popover-list-item
-  ${p => p.disabled && tws `tu-popover-list-item--disabled`}
-`;
-const PopoverLink = twx(Link) `
-  tu-popover-list-item__anchor
-`;
+const Popover = (_a) => {
+    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
+    const popover = usePopover(Object.assign({ isModal }, restOptions));
+    return jsx(PopoverContext.Provider, Object.assign({ value: popover }, { children: children }));
+};
+
+const PopoverContent = React__default.forwardRef(function PopoverContent(_a, propRef) {
+    var _b, _c, _d, _e;
+    var { className, dataTestId, children } = _a, props = __rest(_a, ["className", "dataTestId", "children"]);
+    const _f = usePopoverContext(), { context: floatingContext, customProps } = _f, context = __rest(_f, ["context", "customProps"]);
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    return (jsx(FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsx(FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"] }, { children: jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
+});
 
 /**
  * The PopoverTitle component.
@@ -991,6 +988,20 @@ const StyledText$1 = twx(Text$1) `
 tu-popover-title-text
 `;
 
+const PopoverTrigger = forwardRef(function PopoverTrigger(_a, propRef) {
+    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+    const context = usePopoverContext();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childrenRef = children.ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    if (!renderButton && isValidElement(children)) {
+        return cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+    }
+    else {
+        return (jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+    }
+});
+
 /**
  * The Tooltip component is used to show helpful tips or contextual information to the users.
  *
@@ -1005,7 +1016,7 @@ const Tooltip = (_a) => {
     }
     return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
 };
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsx(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", render: () => (jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) }))) }, { children: children })));
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx(Content, Object.assign({ "$mode": mode }, { children: jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
 const Flex$1 = tw.div `
   inline-flex
 `;
@@ -1039,13 +1050,13 @@ const TipContainer = tw.text `
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @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(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label` }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
+    return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label" }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
 };
-const FormGroupRoot = tw.label `
+const FormGroupRoot = tw.div `
   tu-form-group
   ${({ $disabled }) => {
-    return $disabled ? "pointer-events-none	" : null;
+    return $disabled ? "pointer-events-none" : null;
 }}
 `;
 const ContainerBefore = tw.div `
@@ -1059,7 +1070,7 @@ const ContainerAfter = tw.div `
   ${({ $isInvalid }) => ($isInvalid ? tws `tu-form-group__container-after--invalid` : null)}
 `;
 const HelpAddon = tw.span `
-  tu-form-group__help-addon 
+  tu-form-group__help-addon
 `;
 
 /**
@@ -1070,9 +1081,10 @@ const HelpAddon = tw.span `
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
 const DateField = forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "dateField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 const localeLookup = {
@@ -1125,7 +1137,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, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
+    return (jsxs(Popover, Object.assign({ placement: placement }, { children: [jsx(PopoverTrigger, { 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 })) }), jsx(PopoverContent, { children: jsx(Card, { children: jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] })));
 };
 
 /**
@@ -1286,15 +1298,16 @@ const EmailInput = React.forwardRef((_a, ref) => {
  *
  */
 const EmailField = forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const [value, setValue] = useState(defaultValue);
+    const htmlForId = id ? id : "emailField-" + v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
         return typeof inputValue === "string";
     }
     // Check the regular expression only if value is a string
     const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -1409,7 +1422,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     return (jsxs(Container$4, 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 && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children && typeof children !== "string" ? (children) : (jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: children !== null && children !== void 0 ? children : label }))), suffix && (jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
 const Container$4 = tw.div `
   group tu-menu-item
@@ -1440,7 +1453,7 @@ const MenuList = (_a) => {
     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$3, 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, {})] }))) })));
+    return (jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list" }, { children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx(Divider, {})] }))) })));
 };
 const Container$3 = tw.div `
   tu-menu-list
@@ -1471,9 +1484,9 @@ 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, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
-                    setActionMenuIsOpen(!actionMenuIsOpen);
-                } })) })) })));
+    return (jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+                            setActionMenuIsOpen(!actionMenuIsOpen);
+                        } })) }), jsx(PopoverContent, { children: children })] })) })));
 };
 const Root$4 = tw.div `
   tu-more-menu
@@ -1569,9 +1582,10 @@ const NumberInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ r
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 const NumberField = forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "numberField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2300,9 +2314,10 @@ const Container = tw.div `
  * @returns {JSX.Element} - The PhoneField component.
  */
 const PhoneField = forwardRef((_a, ref) => {
-    var { label, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(PhoneInput, Object.assign({ value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    const htmlForId = id ? id : "phoneField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
 });
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2396,7 +2411,7 @@ ${({ $inline }) => ($inline ? tws `tu-radiogroup--inline` : tws `tu-radiogroup`)
 const RadioItem = ({ label, value, dataTestId, className, description }) => {
     const groupCtx = React.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, type: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+    return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
 };
 const InputWrapper = tw.label `tu-radioitem__wrapper`;
 const Input = tw.input `
@@ -2556,9 +2571,17 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     circular: false,
                     variant: "transparent",
                     color: "secondary",
-                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
-                        return itemOverflowMap[child.props.id] ? child : null;
-                    }) })) }))) : null] })));
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: close => (jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default.Children.map(children, child => {
+                        return itemOverflowMap[child.props.id]
+                            ? React__default.cloneElement(child, {
+                                onClick: () => {
+                                    var _a, _b;
+                                    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    close();
+                                },
+                            })
+                            : null;
+                    }) }))) }))) : null] })));
 };
 const Root$2 = tw.div `
   tu-sidebar
@@ -2583,7 +2606,7 @@ const ChildContainer = tw.div `
  */
 const TextArea = React.forwardRef((_a, ref) => {
     var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, className, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
-    return (jsx(StyledTextArea, Object.assign({ name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
+    return (jsx(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
 });
 const StyledTextArea = tw.textarea `
   tu-textarea
@@ -2620,17 +2643,18 @@ const Root$1 = tw.span `
 `;
 
 const TextAreaField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlForId = id ? id : "textAreaField-" + v4();
     const handleChange = React.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2641,17 +2665,18 @@ const TextAreaField = React.forwardRef((_a, ref) => {
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
 const TextField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "textField-" + v4();
     const handleChange = React.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2739,9 +2764,10 @@ tu-upload-input`;
  * Upload fields enable the user to upload Files.
  */
 const UploadField = forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(UploadInput, Object.assign({ ref: ref, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "uploadField-" + v4();
+    return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -3182,4 +3208,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, DropZone, EmailField, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneField, PhoneInput, 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, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, DropZone, EmailField, EmailInput, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PhoneField, PhoneInput, Popover, PopoverContent, PopoverTitle, PopoverTrigger, 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, UploadField, UploadInput, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePopoverContext, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,9 +9,10 @@
     "@trackunit/ui-design-tokens": "0.0.61",
     "react": "18.2.0",
     "react-use": "17.4.0",
+    "uuid": "8.3.2",
     "date-fns": "2.29.3",
     "react-day-picker": "8.3.7",
-    "@floating-ui/react": "0.15.1",
+    "@floating-ui/react": "0.22.2",
     "@trackunit/ui-icons": "0.0.61",
     "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",

package/src/components/FormGroup/FormGroup.d.ts

@@ -9,6 +9,7 @@ export interface FormGroupProps extends CommonProps {
      * Content to display in the tooltip when hovering the ? icon next to the label.
      */
     tip?: string | React.ReactNode;
+    htmlFor?: string;
     /**
      * A string to display under the input element to help the user understand the input.
      */
@@ -35,4 +36,4 @@ export interface FormGroupProps extends CommonProps {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled, }: FormGroupProps) => JSX.Element;
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled, }: FormGroupProps) => JSX.Element;

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

@@ -9,7 +9,7 @@ export interface MenuItemProps extends CommonProps {
      * 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;
+    children?: React.ReactNode;
     /**
      * Additional tailwind classes to be applied to the component.
      */

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

@@ -2,13 +2,13 @@
 import { CommonProps } from "../../../common/CommonProps";
 import { IconButtonProps } from "../../buttons";
 import { IconProps } from "../../Icon/Icon";
-import { PopoverPlacement } from "../../Popover";
+import { PopoverContentChildren, PopoverPlacement } from "../../Popover";
 export type DotsDirection = "horizontal" | "vertical";
 export type MenuPlacement = "above" | "below";
 type FilteredIconProps = Omit<IconProps, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
 export interface MoreMenuProps extends CommonProps {
-    children: JSX.Element;
+    children: PopoverContentChildren;
     dotsDirection?: DotsDirection;
     menuPlacement?: PopoverPlacement;
     iconProps?: FilteredIconProps;