@trackunit/react-components 0.1.67 → 0.1.69

package/index.js

@@ -4,11 +4,11 @@ import * as React 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, 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';
 import usePortal from 'react-useportal';
 import ReactSelect, { components } from 'react-select';
 export { default as ValueType } from 'react-select';
@@ -795,7 +795,7 @@ const CheckboxWrapper = tw.span `
             ? tws `tu-checkbox--selected`
             : tws `tu-checkbox--deselected`;
 }}
-  
+
   ${({ $isInvalid }) => $isInvalid && tws `tu-checkbox--invalid`}
 `;
 
@@ -967,7 +967,7 @@ const PopoverContent = React__default.forwardRef(function PopoverContent(_a, pro
     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 })) }))) })));
+    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"], returnFocus: false }, { 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 })) }))) })));
 });
 
 /**
@@ -1049,13 +1049,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 `
@@ -1069,7 +1069,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
 `;
 
 /**
@@ -1080,9 +1080,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 = {
@@ -1296,15 +1297,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 })) })));
 });
 
 /**
@@ -1460,6 +1462,241 @@ const Divider = tw.hr `
   tu-menu-list__divider
 `;
 
+/**
+ * Custom hook to handle click outside events.
+ *
+ * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
+ * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
+ * @param {Function} [onClick] - The event handler for the click outside event.
+ */
+const useClickOutside = (el, options = {}, onClick) => {
+    const els = Array.isArray(el) ? el : [el];
+    let active = true;
+    if (!onClick && typeof options === "function") {
+        onClick = options;
+    }
+    else if (typeof options === "object") {
+        active = options.active !== undefined ? options.active : active;
+    }
+    const handler = (ev) => {
+        const target = ev.target;
+        if (els.every(ref => !ref.current || !ref.current.contains(target))) {
+            onClick && onClick(ev);
+        }
+    };
+    const cleanup = () => window.removeEventListener("click", handler);
+    useEffect(() => {
+        if (active) {
+            window.addEventListener("click", handler);
+        }
+        else {
+            cleanup();
+        }
+        return cleanup;
+    });
+};
+
+/**
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
+ *
+ * @param {any} value The value to set
+ * @param {number} delay The debounce time
+ * @returns {any} value The latest values received
+ */
+const useDebounce = (value, delay = 500) => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
+
+// Copied from https://github.com/rexxars/use-device-pixel-ratio
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+function useDevicePixelRatio(options) {
+    const dpr = getDevicePixelRatio(options);
+    const [currentDpr, setCurrentDpr] = useState(dpr);
+    const { defaultDpr, maxDpr, round } = options || {};
+    useEffect(() => {
+        const canListen = typeof window !== "undefined" && "matchMedia" in window;
+        if (!canListen) {
+            return;
+        }
+        const updateDpr = () => setCurrentDpr(getDevicePixelRatio({ defaultDpr, maxDpr, round }));
+        const mediaMatcher = window.matchMedia(`screen and (resolution: ${currentDpr}dppx)`);
+        // Safari 13.1 does not have `addEventListener`, but does have `addListener`
+        if (mediaMatcher.addEventListener) {
+            mediaMatcher.addEventListener("change", updateDpr);
+        }
+        else {
+            mediaMatcher.addListener(updateDpr);
+        }
+        return () => {
+            if (mediaMatcher.removeEventListener) {
+                mediaMatcher.removeEventListener("change", updateDpr);
+            }
+            else {
+                mediaMatcher.removeListener(updateDpr);
+            }
+        };
+    }, [currentDpr, defaultDpr, maxDpr, round]);
+    return currentDpr;
+}
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+function getDevicePixelRatio(options) {
+    const { defaultDpr = 1, maxDpr = 3, round = true } = options || {};
+    const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
+    const dpr = hasDprProp ? window.devicePixelRatio : defaultDpr;
+    const rounded = Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+    return rounded;
+}
+
+/**
+ * The useLocalStorage hook works like useState, but saves to localstorage.
+ *
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @returns {string | null | undefined} value
+ */
+const useLocalStorage = (key, initialValue) => {
+    if (!key) {
+        throw new Error("useLocalStorage key may not be falsy");
+    }
+    const setLocalStorageItem = useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
+    const removeLocalStorageItem = useCallback(() => window.localStorage.removeItem(key), [key]);
+    const [item, setValue] = useState(() => {
+        const value = window.localStorage.getItem(key);
+        if (value !== undefined && value !== null) {
+            const parsedValue = tryParse(value);
+            return parsedValue;
+        }
+        return initialValue !== null && initialValue !== void 0 ? initialValue : null;
+    });
+    useEffect(() => {
+        if (item !== undefined && item !== null) {
+            setLocalStorageItem(item);
+        }
+        else {
+            removeLocalStorageItem();
+        }
+    }, [item, setLocalStorageItem, removeLocalStorageItem, key]);
+    /*
+    // Sync local storage between tabs / windows
+    useEffect(() => {
+      const handleStorageChange = (e: StorageEvent) => {
+        if (e.key === key) {
+          setValue(tryParse(e.newValue));
+        }
+      };
+  
+      window.addEventListener("storage", handleStorageChange);
+  
+      return () => {
+        window.removeEventListener("storage", handleStorageChange);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    */
+    const removeItem = () => {
+        setValue(null);
+    };
+    return [item, setValue, removeItem];
+};
+function tryParse(value) {
+    try {
+        return JSON.parse(value);
+    }
+    catch (_a) {
+        return value;
+    }
+}
+
+/**
+ * Custom hook to handle window resize events and provide the current window size.
+ *
+ * @returns {WindowSize} An object containing the current window height and width.
+ */
+const useResize = () => {
+    const [size, setSize] = useState(getWindowSize());
+    useEffect(() => {
+        const handleResize = () => {
+            setSize(getWindowSize());
+        };
+        window.addEventListener("resize", handleResize, false);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [setSize]);
+    return size;
+};
+/**
+ * Get the current window size.
+ *
+ * @returns {WindowSize} An object containing the current window height and width.
+ */
+const getWindowSize = () => {
+    try {
+        return {
+            height: window.innerHeight,
+            width: window.innerWidth,
+        };
+    }
+    catch (err) {
+        return {
+            height: 0,
+            width: 0,
+        };
+    }
+};
+
+/**
+ * @param {UseTimeoutProps} props The props
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
+ */
+const useTimeout = ({ onTimeout, duration }) => {
+    const ready = useRef(false);
+    const timeout = useRef();
+    const callback = useRef(onTimeout);
+    const isReady = useCallback(() => ready.current, []);
+    const startTimeout = useCallback(() => {
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
+    const stopTimeout = useCallback(() => {
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
+    }, []);
+    // update ref when function changes
+    useEffect(() => {
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    // startTimeout on mount, stopTimeout on unmount
+    useEffect(() => {
+        startTimeout();
+        return stopTimeout;
+    }, [duration, startTimeout, stopTimeout]);
+    return [isReady, stopTimeout, startTimeout];
+};
+
 /**
  * A kebab menu component.
  * Advice: fill it with MenuList
@@ -1483,7 +1720,7 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     });
     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 })] })) })));
+                        } })) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
 const Root$4 = tw.div `
   tu-more-menu
@@ -1579,9 +1816,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 })) })));
 });
 
 /**
@@ -2310,9 +2548,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) {
@@ -2406,7 +2645,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 `
@@ -2601,7 +2840,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
@@ -2638,17 +2877,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 })) })));
 });
 
 /**
@@ -2659,17 +2899,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 })) })));
 });
 
 /**
@@ -2757,9 +2998,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 })) })));
 });
 
 /**
@@ -2852,170 +3094,6 @@ const Bar = tw.rect `
   tu-value-bar__bar
 `;
 
-/**
- * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
- *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @returns {any} value The latest values received
- */
-const useDebounce = (value, delay = 500) => {
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    useEffect(() => {
-        const handler = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delay);
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [value, delay]);
-    return debouncedValue;
-};
-
-// Copied from https://github.com/rexxars/use-device-pixel-ratio
-/**
- * Get the device pixel ratio, potentially rounded and capped.
- * Will emit new values if it changes.
- *
- * @param {DevicePixelRatioOptions} options the options object
- * @returns { number } The current device pixel ratio, or the default if none can be resolved
- */
-function useDevicePixelRatio(options) {
-    const dpr = getDevicePixelRatio(options);
-    const [currentDpr, setCurrentDpr] = useState(dpr);
-    const { defaultDpr, maxDpr, round } = options || {};
-    useEffect(() => {
-        const canListen = typeof window !== "undefined" && "matchMedia" in window;
-        if (!canListen) {
-            return;
-        }
-        const updateDpr = () => setCurrentDpr(getDevicePixelRatio({ defaultDpr, maxDpr, round }));
-        const mediaMatcher = window.matchMedia(`screen and (resolution: ${currentDpr}dppx)`);
-        // Safari 13.1 does not have `addEventListener`, but does have `addListener`
-        if (mediaMatcher.addEventListener) {
-            mediaMatcher.addEventListener("change", updateDpr);
-        }
-        else {
-            mediaMatcher.addListener(updateDpr);
-        }
-        return () => {
-            if (mediaMatcher.removeEventListener) {
-                mediaMatcher.removeEventListener("change", updateDpr);
-            }
-            else {
-                mediaMatcher.removeListener(updateDpr);
-            }
-        };
-    }, [currentDpr, defaultDpr, maxDpr, round]);
-    return currentDpr;
-}
-/**
- * Returns the current device pixel ratio (DPR) given the passed options
- *
- * @param { DevicePixelRatioOptions } options the options object
- * @returns { number } current device pixel ratio
- */
-function getDevicePixelRatio(options) {
-    const { defaultDpr = 1, maxDpr = 3, round = true } = options || {};
-    const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
-    const dpr = hasDprProp ? window.devicePixelRatio : defaultDpr;
-    const rounded = Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
-    return rounded;
-}
-
-/**
- * The useLocalStorage hook works like useState, but saves to localstorage.
- *
- * @param {string} key - The key the values is saved under.
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
- * @returns {string | null | undefined} value
- */
-const useLocalStorage = (key, initialValue) => {
-    if (!key) {
-        throw new Error("useLocalStorage key may not be falsy");
-    }
-    const setLocalStorageItem = useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
-    const removeLocalStorageItem = useCallback(() => window.localStorage.removeItem(key), [key]);
-    const [item, setValue] = useState(() => {
-        const value = window.localStorage.getItem(key);
-        if (value !== undefined && value !== null) {
-            const parsedValue = tryParse(value);
-            return parsedValue;
-        }
-        return initialValue !== null && initialValue !== void 0 ? initialValue : null;
-    });
-    useEffect(() => {
-        if (item !== undefined && item !== null) {
-            setLocalStorageItem(item);
-        }
-        else {
-            removeLocalStorageItem();
-        }
-    }, [item, setLocalStorageItem, removeLocalStorageItem, key]);
-    /*
-    // Sync local storage between tabs / windows
-    useEffect(() => {
-      const handleStorageChange = (e: StorageEvent) => {
-        if (e.key === key) {
-          setValue(tryParse(e.newValue));
-        }
-      };
-  
-      window.addEventListener("storage", handleStorageChange);
-  
-      return () => {
-        window.removeEventListener("storage", handleStorageChange);
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    */
-    const removeItem = () => {
-        setValue(null);
-    };
-    return [item, setValue, removeItem];
-};
-function tryParse(value) {
-    try {
-        return JSON.parse(value);
-    }
-    catch (_a) {
-        return value;
-    }
-}
-
-/**
- * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
- */
-const useTimeout = ({ onTimeout, duration }) => {
-    const ready = useRef(false);
-    const timeout = useRef();
-    const callback = useRef(onTimeout);
-    const isReady = useCallback(() => ready.current, []);
-    const startTimeout = useCallback(() => {
-        ready.current = false;
-        timeout.current && clearTimeout(timeout.current);
-        timeout.current = setTimeout(() => {
-            ready.current = true;
-            callback.current();
-        }, duration);
-    }, [duration]);
-    const stopTimeout = useCallback(() => {
-        ready.current = null;
-        timeout.current && clearTimeout(timeout.current);
-    }, []);
-    // update ref when function changes
-    useEffect(() => {
-        callback.current = onTimeout;
-    }, [onTimeout]);
-    // startTimeout on mount, stopTimeout on unmount
-    useEffect(() => {
-        startTimeout();
-        return stopTimeout;
-    }, [duration, startTimeout, stopTimeout]);
-    return [isReady, stopTimeout, startTimeout];
-};
-
 /**
  * The MinTopFullContentLayout component.
  *
@@ -3200,4 +3278,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, 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 };
+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, useClickOutside, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePopoverContext, usePrompt, useResize, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -9,11 +9,11 @@
     "@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.22.2",
     "@trackunit/ui-icons": "0.0.61",
-    "react-browser-hooks": "2.2.4",
     "react-useportal": "1.0.17",
     "libphonenumber-js": "1.10.24",
     "react-router-dom": "6.4.5",