@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/virtualList/VirtualListItemWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type VirtualListItemWrapperProps = {
+    translateY: number;
+    'data-index': number;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const VirtualListItemWrapper: React.ForwardRefExoticComponent<VirtualListItemWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default VirtualListItemWrapper;

package/lib/es/components/virtualList/VirtualListItemWrapper.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const VirtualListItemWrapper = react_1.default.forwardRef((props, ref) => {
+    const { translateY, children, className = '', style = {}, ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: `VirtualListItemWrapper ${className}`, style: {
+            ...style,
+            position: 'absolute',
+            transform: `translateY(${translateY}px)`,
+            width: '100%',
+            willChange: 'transform',
+        }, ...remainingProps, children: children }));
+});
+exports.default = VirtualListItemWrapper;

package/lib/es/components/virtualList/useVirtualListResizeObserver.d.ts

@@ -0,0 +1,2 @@
+declare const useVirtualListResizeObserver: (itemsRef: React.RefObject<HTMLDivElement>, measureItem: (index: number, element: HTMLElement) => void, dependencies?: any[]) => void;
+export default useVirtualListResizeObserver;

package/lib/es/components/virtualList/useVirtualListResizeObserver.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useVirtualListResizeObserver = (itemsRef, measureItem, dependencies = []) => {
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    const measureItems = (0, react_1.useCallback)(() => {
+        if (!itemsRef.current) {
+            return;
+        }
+        const children = Array.from(itemsRef.current.children);
+        children.forEach(child => {
+            const index = Number.parseInt(child.getAttribute('data-index') || '', 10);
+            if (!Number.isNaN(index)) {
+                measureItem(index, child);
+            }
+        });
+    }, [measureItem]);
+    // Setup resize observer
+    (0, react_1.useEffect)(() => {
+        if (!itemsRef.current) {
+            return;
+        }
+        resizeObserverRef.current = new ResizeObserver(() => {
+            measureItems();
+        });
+        return () => resizeObserverRef.current?.disconnect();
+    }, [measureItems]);
+    // Observe children
+    (0, react_1.useEffect)(() => {
+        if (!itemsRef.current || !resizeObserverRef.current) {
+            return;
+        }
+        const children = Array.from(itemsRef.current.children);
+        children.forEach(child => {
+            resizeObserverRef.current?.observe(child);
+        });
+        // Initial measurement
+        measureItems();
+        return () => {
+            children.forEach(child => {
+                resizeObserverRef.current?.unobserve(child);
+            });
+        };
+    }, [...dependencies, measureItems]);
+};
+exports.default = useVirtualListResizeObserver;

package/lib/es/hooks/useClickOutside.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
 export type EventListenerType = keyof DocumentEventMap;
+export declare const DEFAULT_EVENT_TYPES: EventListenerType[];
 /**
  * Custom hook to detect clicks outside a specified element.
  *
  * @param callback - The callback function to be called when a click outside the element is detected.
  * @param events - Array of event types to listen for.
+ * @param isActive - Flag to only listen for clicks when target element active.
  *
  * @returns A mutable ref object representing the target element.
  */
-declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => import("react").MutableRefObject<T>;
-export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => void;
+declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[], isActive?: boolean) => React.MutableRefObject<T>;
+export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[], isActive?: boolean) => void;
 export default useClickOutside;

package/lib/es/hooks/useClickOutside.js

@@ -3,24 +3,30 @@
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClickOutsideWithRef = void 0;
+exports.useClickOutsideWithRef = exports.DEFAULT_EVENT_TYPES = void 0;
 const react_1 = require("react");
+exports.DEFAULT_EVENT_TYPES = ['mousedown', 'touchstart'];
 /**
  * Custom hook to detect clicks outside a specified element.
  *
  * @param callback - The callback function to be called when a click outside the element is detected.
  * @param events - Array of event types to listen for.
+ * @param isActive - Flag to only listen for clicks when target element active.
  *
  * @returns A mutable ref object representing the target element.
  */
-const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
+const useClickOutside = (callback, events = exports.DEFAULT_EVENT_TYPES, isActive = true // Only listen when active
+) => {
     const targetRef = (0, react_1.useRef)(null);
-    (0, exports.useClickOutsideWithRef)(targetRef, callback, events);
+    (0, exports.useClickOutsideWithRef)(targetRef, callback, events, isActive);
     return targetRef;
 };
 // Internal use for now - extend it later to be used outside
-const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstart']) => {
+const useClickOutsideWithRef = (ref, callback, events = exports.DEFAULT_EVENT_TYPES, isActive = true) => {
     (0, react_1.useEffect)(() => {
+        if (!isActive) {
+            return; // Simply return early if not active, no cleanup needed
+        }
         // In case the ref is actually a state and will be set via the state setter function
         const element = ref && 'current' in ref ? ref.current : ref;
         // Event listener function to check if the click is outside the target element
@@ -35,7 +41,7 @@ const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstar
         return () => {
             events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [ref, callback, events]);
+    }, [ref, callback, events, isActive]);
 };
 exports.useClickOutsideWithRef = useClickOutsideWithRef;
 exports.default = useClickOutside;

package/lib/es/hooks/useClipboard.js

@@ -11,7 +11,7 @@ const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
  * @returns An object containing functions and state related to clipboard operations.
  */
 const useClipboard = (options) => {
-    const { timeout = 2000 } = options !== null && options !== void 0 ? options : {};
+    const { timeout = 2000 } = options ?? {};
     const [error, setError] = (0, react_1.useState)(null);
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [copyTimeout, setCopyTimeout] = (0, react_1.useState)(null);

package/lib/es/hooks/useDebugInfo.js

@@ -19,16 +19,19 @@ const useDebugInfo = (componentName, props) => {
     const previousProps = (0, react_1.useRef)(props);
     const lastRenderTimestamp = (0, react_1.useRef)(Date.now());
     // Extract prop keys from the current and previous props
-    const propKeys = Object.keys(Object.assign(Object.assign({}, props), previousProps.current));
+    const propKeys = Object.keys({ ...props, ...previousProps.current });
     // Compare current props with previous props to find changed props
     changedProps.current = propKeys.reduce((obj, key) => {
         if (props[key] === previousProps.current[key]) {
             return obj;
         }
-        return Object.assign(Object.assign({}, obj), { [key]: {
+        return {
+            ...obj,
+            [key]: {
                 previous: previousProps.current[key],
                 current: props[key],
-            } });
+            },
+        };
     }, {});
     // Build debug information object
     const info = {

package/lib/es/hooks/useFocusTrap.js

@@ -17,8 +17,8 @@ const react_1 = require("react");
 const useFocusTrap = (element) => {
     const ref = (0, react_1.useRef)(null);
     const handleFocus = (event) => {
-        const wrapper = element !== null && element !== void 0 ? element : ref.current;
-        const focusableElements = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelectorAll([
+        const wrapper = element ?? ref.current;
+        const focusableElements = wrapper?.querySelectorAll([
             'a[href]',
             'button',
             'textarea',
@@ -28,8 +28,8 @@ const useFocusTrap = (element) => {
             'input[type="checkbox"]',
             'select',
         ].join(', '));
-        const firstFocusableEl = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
-        const lastFocusableEl = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
+        const firstFocusableEl = focusableElements?.[0];
+        const lastFocusableEl = focusableElements?.[focusableElements.length - 1];
         const isTabPressed = event.key === 'Tab';
         if (!isTabPressed) {
             return;
@@ -37,19 +37,19 @@ const useFocusTrap = (element) => {
         // Handle: shift + tab
         if (event.shiftKey) {
             if (document.activeElement === firstFocusableEl) {
-                lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
+                lastFocusableEl?.focus();
                 event.preventDefault();
             }
             return;
         }
         // Handle: tab
         if (document.activeElement === lastFocusableEl) {
-            firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+            firstFocusableEl?.focus();
             event.preventDefault();
         }
     };
     (0, react_1.useEffect)(() => {
-        const wrapper = element !== null && element !== void 0 ? element : ref.current;
+        const wrapper = element ?? ref.current;
         if (wrapper) {
             wrapper.addEventListener('keydown', handleFocus);
         }

package/lib/es/hooks/useFullscreen.js

@@ -66,14 +66,14 @@ const useFullscreen = (options = {}) => {
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(Boolean(initialFullscreenElement));
     const [fullscreenElement, setFullscreenElement] = (0, react_1.useState)(initialFullscreenElement);
     // Request
-    const requestFullscreen = (0, react_1.useCallback)((newTargetElement) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const requestFullscreen = (0, react_1.useCallback)(async (newTargetElement) => {
         // check whether the new target element is a real DOM node or just a function
         const isHtmlElement = newTargetElement instanceof HTMLElement;
         try {
             const target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
             const requestFunctionName = getRequestFunctionName(target);
             if (requestFunctionName) {
-                return yield target[requestFunctionName](requestFullscreenOptions);
+                return await target[requestFunctionName](requestFullscreenOptions);
             }
             else {
                 throw new Error('Request function not found');
@@ -82,19 +82,19 @@ const useFullscreen = (options = {}) => {
         catch (error) {
             console.log(error);
         }
-    }), []);
+    }, []);
     // Exit
-    const exitFullscreen = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const exitFullscreen = (0, react_1.useCallback)(async () => {
         try {
             const exitFunctionName = getExitFunctionName();
             if (fullscreenElement && exitFunctionName) {
-                return yield document[exitFunctionName]();
+                return await document[exitFunctionName]();
             }
         }
         catch (error) {
             console.warn(error);
         }
-    }), [fullscreenElement]);
+    }, [fullscreenElement]);
     // Toggle
     const toggleFullscreen = (0, react_1.useCallback)((newTargetElement) => {
         if (fullscreenElement) {
@@ -117,9 +117,9 @@ const useFullscreen = (options = {}) => {
             setIsFullscreen(false);
             setFullscreenElement(null);
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event || new Event('default'), isOpen);
+        onChange?.call(document, event || new Event('default'), isOpen);
     };
-    const handleErrorEvent = () => (event) => onError === null || onError === void 0 ? void 0 : onError.call(document, event);
+    const handleErrorEvent = () => (event) => onError?.call(document, event);
     (0, useEvent_1.default)('fullscreenchange', handleChangeEvent);
     (0, useEvent_1.default)('webkitfullscreenchange', handleChangeEvent);
     (0, useEvent_1.default)('mozfullscreenchange', handleChangeEvent);

package/lib/es/hooks/useHover.d.ts

@@ -1,9 +1,9 @@
-import React, { type RefObject } from 'react';
+import { type RefObject } from 'react';
 /**
  * Custom hook to detect hover state for a given HTML element.
  *
  * @param elementRef - The reference to the HTML element.
  * @returns A boolean value representing whether the element is being hovered over or not.
  */
-declare const useHover: <T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>) => boolean;
+declare const useHover: <T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>) => boolean;
 export default useHover;

package/lib/es/hooks/useInterval.js

@@ -20,7 +20,7 @@ const useInterval = (callback, delay) => {
         const tick = () => savedCallback.current();
         if (typeof delay === 'number') {
             intervalRef.current = window.setInterval(tick, delay);
-            return () => { var _a; return window.clearInterval((_a = intervalRef.current) !== null && _a !== void 0 ? _a : undefined); };
+            return () => window.clearInterval(intervalRef.current ?? undefined);
         }
     }, [delay]);
     return intervalRef;

package/lib/es/hooks/useKey.d.ts

@@ -9,5 +9,5 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
  *                                         If the first argument is a callback, this is the node (defaults to document).
  * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void | KeyboardEventType[]) | undefined, eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: (event: KeyboardEvent) => void | KeyboardEventType[], eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/lib/es/hooks/useMutationObserver.js

@@ -24,7 +24,7 @@ const unRef = (target) => isRef(target) ? target.current : target;
  */
 const useMutationObserver = (target, callback = noop_1.default, options = DEFAULT_OPTIONS) => {
     const observer = (0, react_1.useRef)(null);
-    const disconnect = (0, react_1.useCallback)(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
+    const disconnect = (0, react_1.useCallback)(() => observer.current?.disconnect(), []);
     const observe = (0, react_1.useCallback)(() => {
         const targetElement = unRef(target);
         if (targetElement) {

package/lib/es/hooks/usePostMessage.d.ts

@@ -25,7 +25,7 @@ export type RemoteAction = {
  * @param onReceiveMessage a callback function triggered when a message is received
  * @returns
  */
-declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: ((eventData: any) => void) | undefined) => {
+declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: (eventData: any) => void) => {
     sendMessageToParent: (message: RemoteAction) => void;
     sendMessageToWidget: (message: RemoteAction, targetFrames: HTMLIFrameElement | HTMLIFrameElement[]) => void;
 };

package/lib/es/hooks/useResizeObserver.js

@@ -7,11 +7,10 @@ const react_1 = require("react");
  * @returns
  */
 const useResizeObserver = () => {
-    var _a, _b, _c, _d;
     const [observerEntry, setObserverEntry] = (0, react_1.useState)(null);
     const nodeRef = (0, react_1.useRef)(null);
     const observer = (0, react_1.useRef)(null);
-    const disconnect = (0, react_1.useCallback)(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
+    const disconnect = (0, react_1.useCallback)(() => observer.current?.disconnect(), []);
     const observe = (0, react_1.useCallback)(() => {
         observer.current = new ResizeObserver(([entry]) => setObserverEntry(entry));
         if (nodeRef.current) {
@@ -26,8 +25,8 @@ const useResizeObserver = () => {
         nodeRef,
         observerEntry,
         {
-            blockSize: (_b = (_a = observerEntry === null || observerEntry === void 0 ? void 0 : observerEntry.borderBoxSize) === null || _a === void 0 ? void 0 : _a.at(0)) === null || _b === void 0 ? void 0 : _b.blockSize,
-            inlineSize: (_d = (_c = observerEntry === null || observerEntry === void 0 ? void 0 : observerEntry.borderBoxSize) === null || _c === void 0 ? void 0 : _c.at(0)) === null || _d === void 0 ? void 0 : _d.inlineSize,
+            blockSize: observerEntry?.borderBoxSize?.at(0)?.blockSize,
+            inlineSize: observerEntry?.borderBoxSize?.at(0)?.inlineSize,
         },
     ];
 };

package/lib/es/hooks/useStorage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type StorageType = 'localStorage' | 'sessionStorage';
 /**
  * A custom hook for managing state stored in localStorage.
@@ -9,7 +8,7 @@ export type StorageType = 'localStorage' | 'sessionStorage';
  * @returns A tuple containing the state value, a function to update the state, and a function
  *          to remove the value from localStorage.
  */
-export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>, () => void];
+export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => void];
 /**
  * A custom hook for managing state stored in sessionStorage.
  *
@@ -19,4 +18,4 @@ export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() =>
  * @returns A tuple containing the state value, a function to update the state,
  *          and a function to remove the value from sessionStorage.
  */
-export declare const useSessionStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>, () => void];
+export declare const useSessionStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>, () => void];

package/lib/es/hooks/useTimeout.js

@@ -35,7 +35,7 @@ const useTimeout = (callback, delay) => {
     return timeoutRef;
 };
 const useChainedTimeout = () => {
-    const MAX_DELAY_MS = Math.pow(2, 31) - 1;
+    const MAX_DELAY_MS = 2 ** 31 - 1;
     const setChainedTimeout = (ref, fn, timeoutAtMs) => {
         const delayMs = timeoutAtMs - Date.now();
         ref.current =
@@ -43,7 +43,7 @@ const useChainedTimeout = () => {
                 ? setTimeout(fn, delayMs)
                 : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
     };
-    const handleRef = (0, react_1.useRef)();
+    const handleRef = (0, react_1.useRef)(null);
     const { set, clear } = (0, react_1.useMemo)(() => {
         const clear = () => clearTimeout(handleRef.current);
         const set = (fn, delayMs = 0) => {

package/lib/es/hooks/useToggle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom hook to handle toggle states.
+ *
+ * @param initialValue - The initial state of the toggle (default: false)
+ * @returns An object with the current value, toggle function, and control functions
+ */
+declare const useToggle: (initialValue?: boolean) => {
+    isToggled: boolean;
+    toggle: (eventOrCallback?: React.SyntheticEvent | ((newValue: boolean) => void)) => void;
+    enable: () => void;
+    disable: () => void;
+};
+export default useToggle;

package/lib/es/hooks/useToggle.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Custom hook to handle toggle states.
+ *
+ * @param initialValue - The initial state of the toggle (default: false)
+ * @returns An object with the current value, toggle function, and control functions
+ */
+const useToggle = (initialValue = false) => {
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    // Handle actual custom callbacks functions and
+    // events when assigning this function to a button directly
+    const toggle = (0, react_1.useCallback)((eventOrCallback) => {
+        setValue(prev => {
+            const newValue = !prev;
+            if (typeof eventOrCallback === 'function') {
+                // Call the callback with the new value
+                eventOrCallback(newValue);
+            }
+            return newValue;
+        });
+    }, []);
+    const enable = (0, react_1.useCallback)(() => setValue(true), []);
+    const disable = (0, react_1.useCallback)(() => setValue(false), []);
+    return {
+        isToggled: value,
+        toggle,
+        enable,
+        disable,
+    };
+};
+exports.default = useToggle;

package/lib/es/hooks/useUncontrollable.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUncontrolled = exports.useUncontrolledProp = exports.defaultKey = void 0;
-const tslib_1 = require("tslib");
+exports.defaultKey = defaultKey;
+exports.useUncontrolledProp = useUncontrolledProp;
+exports.useUncontrolled = useUncontrolled;
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 // forked from https://github.com/jquense/uncontrollable/blob/master/src/index.ts
 const react_1 = require("react");
 function defaultKey(key) {
     return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
 }
-exports.defaultKey = defaultKey;
 function useUncontrolledProp(propValue, defaultValue, handler) {
     const wasPropRef = (0, react_1.useRef)(propValue !== undefined);
     const [stateValue, setState] = (0, react_1.useState)(defaultValue);
@@ -26,21 +26,23 @@ function useUncontrolledProp(propValue, defaultValue, handler) {
         isProp ? propValue : stateValue,
         (0, react_1.useCallback)((...args) => {
             const [value, ...rest] = args;
-            const returnValue = handler === null || handler === void 0 ? void 0 : handler(value, ...rest);
+            const returnValue = handler?.(value, ...rest);
             setState(value);
             return returnValue;
         }, [handler]),
     ];
 }
-exports.useUncontrolledProp = useUncontrolledProp;
 function useUncontrolled(props, config) {
     return Object.keys(config).reduce((result, fieldName) => {
-        const _a = result, _b = defaultKey(fieldName), defaultValue = _a[_b], _c = fieldName, propsValue = _a[_c], rest = tslib_1.__rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + ""]);
+        const { [defaultKey(fieldName)]: defaultValue, [fieldName]: propsValue, ...rest } = result;
         // @ts-ignore-next-line
         const handlerName = config[fieldName];
         // @ts-ignore-next-line
         const [value, handler] = useUncontrolledProp(propsValue, defaultValue, props[handlerName]);
-        return Object.assign(Object.assign({}, rest), { [fieldName]: value, [handlerName]: handler });
+        return {
+            ...rest,
+            [fieldName]: value,
+            [handlerName]: handler,
+        };
     }, props);
 }
-exports.useUncontrolled = useUncontrolled;

package/lib/es/styles/variables/colors/colors.json

@@ -69,5 +69,11 @@
     "color-warmup-charm": "#C9778D",
     "color-warmup-salmon": "#F19588",
     "color-warmup-cherokee": "#F5BB89",
-    "color-warmup-corn": "#FDE082"
+    "color-warmup-corn": "#FDE082",
+    "color-spectrum-indigo": "#8e96eb",
+    "color-spectrum-violet": "#ad91f3",
+    "color-spectrum-purple": "#c08eeb",
+    "color-spectrum-fuchsia": "#dc82e9",
+    "color-spectrum-pink": "#e878b6",
+    "color-spectrum-rose": "#ef7186"
 }

package/lib/es/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.d.ts

@@ -17,13 +17,13 @@ export type VolkswagenApplicationHeaderProps = ApplicationHeaderProps & {
 };
 export declare const VolkswagenApplicationHeader: React.ForwardRefExoticComponent<ApplicationHeaderProps & {
     homeRoute?: React.ReactNode;
-    appMenuItems?: ModuleProps[] | undefined;
+    appMenuItems?: ModuleProps[];
     appNavigator?: React.ReactNode;
-    appNavigatorClassName?: string | undefined;
-    navItems?: ModuleProps[] | undefined;
-    actionBarItems?: React.ReactNode[] | undefined;
-    onMount?: VoidFunction | undefined;
-    onUnmount?: VoidFunction | undefined;
-    className?: string | undefined;
+    appNavigatorClassName?: string;
+    navItems?: ModuleProps[];
+    actionBarItems?: React.ReactNode[];
+    onMount?: VoidFunction;
+    onUnmount?: VoidFunction;
+    className?: string;
 } & React.RefAttributes<HTMLElement>>;
 export default VolkswagenApplicationHeader;

package/lib/es/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -9,8 +9,8 @@ const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ApplicationActionBar_1 = tslib_1.__importDefault(require("../../../../components/applicationHeader/ApplicationActionBar"));
 exports.VolkswagenApplicationHeader = (0, react_1.forwardRef)((props, ref) => {
-    const { homeRoute = '', appNavigator, appNavigatorClassName, appMenuItems, navItems = [], actionBarItems = [], onMount = () => { }, onUnmount = () => { }, className = '' } = props, remainingProps = tslib_1.__rest(props, ["homeRoute", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onMount", "onUnmount", "className"]);
+    const { homeRoute = '', appNavigator, appNavigatorClassName, appMenuItems, navItems = [], actionBarItems = [], onMount = () => { }, onUnmount = () => { }, className = '', ...remainingProps } = props;
     const wrapperClassNames = (0, classnames_1.default)('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
-    return ((0, jsx_runtime_1.jsx)("nav", Object.assign({}, remainingProps, { className: wrapperClassNames, ref: ref }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'width-100pct' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'brand' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'logo' }, { children: homeRoute })) })), (0, isEmpty_1.default)(navItems) && (0, jsx_runtime_1.jsx)("ul", { className: 'SubmoduleNavigation nav' }), !(0, isEmpty_1.default)(navItems) && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'SubmoduleNavigation nav' }, { children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'submodule', "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key))) }))), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { items: actionBarItems })] })) })));
+    return ((0, jsx_runtime_1.jsx)("nav", { ...remainingProps, className: wrapperClassNames, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: 'width-100pct', children: [(0, jsx_runtime_1.jsx)("div", { className: 'brand', children: (0, jsx_runtime_1.jsx)("div", { className: 'logo', children: homeRoute }) }), (0, isEmpty_1.default)(navItems) && (0, jsx_runtime_1.jsx)("ul", { className: 'SubmoduleNavigation nav' }), !(0, isEmpty_1.default)(navItems) && ((0, jsx_runtime_1.jsx)("ul", { className: 'SubmoduleNavigation nav', children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("li", { className: 'submodule', "data-nav-item-key": navItem.key, children: navItem.route }, navItem.key))) })), (0, jsx_runtime_1.jsx)(ApplicationActionBar_1.default, { items: actionBarItems })] }) }));
 });
 exports.default = exports.VolkswagenApplicationHeader;

package/lib/es/useAfterMount.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useAfterMount_1 = require("./hooks/useAfterMount");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useAfterMount_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useAfterMount_1).default; } });

package/lib/es/useClipboard.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useClipboard_1 = require("./hooks/useClipboard");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useClipboard_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useClipboard_1).default; } });

package/lib/es/useDarkMode.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useDarkMode_1 = require("./hooks/useDarkMode");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useDarkMode_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useDarkMode_1).default; } });

package/lib/es/useDebugInfo.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useDebugInfo_1 = require("./hooks/useDebugInfo");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useDebugInfo_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useDebugInfo_1).default; } });

package/lib/es/useEffectOnce.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useEffectOnce_1 = require("./hooks/useEffectOnce");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useEffectOnce_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useEffectOnce_1).default; } });

package/lib/es/useElementSize.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useElementSize_1 = require("./hooks/useElementSize");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useElementSize_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useElementSize_1).default; } });

package/lib/es/useEsc.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+const tslib_1 = require("tslib");
 var useEsc_1 = require("./hooks/useEsc");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(useEsc_1).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useEsc_1).default; } });