@trackunit/react-components 0.1.68 → 0.1.70

package/index.cjs

@@ -12,7 +12,6 @@ var dateFns = require('date-fns');
 var react = require('@floating-ui/react');
 var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
-var reactBrowserHooks = require('react-browser-hooks');
 var usePortal = require('react-useportal');
 var ReactSelect = require('react-select');
 var ReactAsyncCreatableSelect = require('react-select/async-creatable');
@@ -998,7 +997,7 @@ const PopoverContent = React__default["default"].forwardRef(function PopoverCont
     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 = react.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"] }, { children: jsxRuntime.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 (jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"], returnFocus: false }, { children: jsxRuntime.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 })) }))) })));
 });
 
 /**
@@ -1493,6 +1492,241 @@ const Divider = tailwindStyledComponents.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);
+    React.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] = React.useState(value);
+    React.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] = React.useState(dpr);
+    const { defaultDpr, maxDpr, round } = options || {};
+    React.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 = React.useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
+    const removeLocalStorageItem = React.useCallback(() => window.localStorage.removeItem(key), [key]);
+    const [item, setValue] = React.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;
+    });
+    React.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] = React.useState(getWindowSize());
+    React.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 = React.useRef(false);
+    const timeout = React.useRef();
+    const callback = React.useRef(onTimeout);
+    const isReady = React.useCallback(() => ready.current, []);
+    const startTimeout = React.useCallback(() => {
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
+    const stopTimeout = React.useCallback(() => {
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
+    }, []);
+    // update ref when function changes
+    React.useEffect(() => {
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    // startTimeout on mount, stopTimeout on unmount
+    React.useEffect(() => {
+        startTimeout();
+        return stopTimeout;
+    }, [duration, startTimeout, stopTimeout]);
+    return [isReady, stopTimeout, startTimeout];
+};
+
 /**
  * A kebab menu component.
  * Advice: fill it with MenuList
@@ -1511,12 +1745,12 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     const [actionMenuIsOpen, setActionMenuIsOpen] = React.useState(false);
     const dotsName = dotsDirection === "horizontal" ? "EllipsisHorizontalIcon" : "EllipsisVerticalIcon";
     const actionMenuRef = React.useRef(null);
-    reactBrowserHooks.useClickOutside(actionMenuRef, () => {
+    useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
     return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
-                        } })) }), jsxRuntime.jsx(PopoverContent, { children: children })] })) })));
+                        } })) }), jsxRuntime.jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
 const Root$4 = tailwindStyledComponents.tw.div `
   tu-more-menu
@@ -2890,170 +3124,6 @@ const Bar = tailwindStyledComponents.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] = React.useState(value);
-    React.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] = React.useState(dpr);
-    const { defaultDpr, maxDpr, round } = options || {};
-    React.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 = React.useCallback((value) => window.localStorage.setItem(key, typeof value === "object" ? JSON.stringify(value) : `${value}`), [key]);
-    const removeLocalStorageItem = React.useCallback(() => window.localStorage.removeItem(key), [key]);
-    const [item, setValue] = React.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;
-    });
-    React.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 = React.useRef(false);
-    const timeout = React.useRef();
-    const callback = React.useRef(onTimeout);
-    const isReady = React.useCallback(() => ready.current, []);
-    const startTimeout = React.useCallback(() => {
-        ready.current = false;
-        timeout.current && clearTimeout(timeout.current);
-        timeout.current = setTimeout(() => {
-            ready.current = true;
-            callback.current();
-        }, duration);
-    }, [duration]);
-    const stopTimeout = React.useCallback(() => {
-        ready.current = null;
-        timeout.current && clearTimeout(timeout.current);
-    }, []);
-    // update ref when function changes
-    React.useEffect(() => {
-        callback.current = onTimeout;
-    }, [onTimeout]);
-    // startTimeout on mount, stopTimeout on unmount
-    React.useEffect(() => {
-        startTimeout();
-        return stopTimeout;
-    }, [duration, startTimeout, stopTimeout]);
-    return [isReady, stopTimeout, startTimeout];
-};
-
 /**
  * The MinTopFullContentLayout component.
  *
@@ -3331,6 +3401,7 @@ exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getOrderedOptions = getOrderedOptions;
 exports.getValueBarColorByValue = getValueBarColorByValue;
 exports.isMultiValue = isMultiValue;
+exports.useClickOutside = useClickOutside;
 exports.useContainerProps = useContainerProps;
 exports.useCustomComponents = useCustomComponents;
 exports.useDebounce = useDebounce;
@@ -3339,4 +3410,5 @@ exports.useLocalStorage = useLocalStorage;
 exports.useModal = useModal;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
+exports.useResize = useResize;
 exports.useTimeout = useTimeout;

package/index.js

@@ -9,7 +9,6 @@ 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';
@@ -968,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 })) }))) })));
 });
 
 /**
@@ -1463,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
@@ -1486,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
@@ -2860,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.
  *
@@ -3208,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.68",
+  "version": "0.1.70",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -14,7 +14,6 @@
     "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",

package/src/components/Select/Select.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
-export interface SelectOption {
+export interface SelectOption<T extends string> {
     label: string;
-    value: string;
+    value: T;
     disabled?: boolean;
 }
 /**

package/src/hooks/index.d.ts

@@ -1,4 +1,6 @@
+export * from "./useClickOutside";
 export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
 export * from "./useLocalStorage";
+export * from "./useResize";
 export * from "./useTimeout";

package/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+/**
+ * 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.
+ */
+export declare const useClickOutside: (el: RefObject<HTMLElement> | RefObject<HTMLElement>[], options?: {
+    active?: boolean | undefined;
+} | ((ev: MouseEvent) => void), onClick?: ((ev: MouseEvent) => void) | undefined) => void;

package/src/hooks/useResize.d.ts

@@ -0,0 +1,10 @@
+export interface WindowSize {
+    height: number;
+    width: number;
+}
+/**
+ * Custom hook to handle window resize events and provide the current window size.
+ *
+ * @returns {WindowSize} An object containing the current window height and width.
+ */
+export declare const useResize: () => WindowSize;