@ringcentral/spring-base 1.11.2 → 1.13.0

package/utils.js

@@ -1,12 +1,10 @@
-import { g as getRefElement } from './chunks/twMerge.js';
-export { a as ariaHideOutside, b as combineClasses, c as combineProps, i as isRef, l as logInDev, o as ownerWindow, t as twMerge } from './chunks/twMerge.js';
-import React__default, { isValidElement, useCallback } from 'react';
-import lodashOmit from 'lodash/omit';
-export { unstable_ownerDocument as ownerDocument } from '@mui/utils';
-import lodashPick from 'lodash/pick';
-import 'lodash/isPlainObject';
-import './config.js';
-import 'tailwind-merge';
+import { unstable_ownerDocument, unstable_ownerWindow } from "@mui/utils";
+import react, { isValidElement, useCallback } from "react";
+import isPlainObject from "lodash/isPlainObject";
+import omit from "lodash/omit";
+import pick from "lodash/pick";
+import { extendTailwindMerge } from "tailwind-merge";
+import { rcConfiguration } from "./config.js";
 
 const a11yKeyboard = {
     ArrowLeft: 'ArrowLeft',
@@ -14,9 +12,402 @@ const a11yKeyboard = {
     Space: ' ',
     Escape: 'Escape',
     Enter: 'Enter',
-    Tab: 'Tab',
+    Tab: 'Tab'
 };
 
+
+
+const ownerWindow = unstable_ownerWindow;
+
+// Based on React Aria's ariaHideOutside implementation:
+// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts
+// Extended for Spring UI's multi-window support, native inert, and dynamic targets.
+
+const ARIA_HIDDEN = 'aria-hidden';
+const TOP_LAYER_ATTR = 'data-sui-top-layer';
+const alwaysVisibleSelector = `[data-live-announcer="true"], [${TOP_LAYER_ATTR}]`;
+// Preserve the existing numeric aria-hidden map for interoperability with
+// Spring UI bundles that predate native inert support.
+const ARIA_HIDDEN_REF_COUNT_MAP = '__SUI_ARIA_HIDE_OUTSIDE_REF_COUNT_MAP__';
+const INERT_REF_COUNT_MAP = '__SUI_ARIA_HIDE_OUTSIDE_INERT_REF_COUNT_MAP__';
+const getRefCountMap = (window, mechanism)=>{
+    const key = mechanism === 'inert' ? INERT_REF_COUNT_MAP : ARIA_HIDDEN_REF_COUNT_MAP;
+    // @ts-ignore
+    if (!window[key]) {
+        // @ts-ignore
+        window[key] = new WeakMap();
+    }
+    // @ts-ignore
+    return window[key];
+};
+const OBSERVER_STACK = '__SUI_ARIA_HIDE_OUTSIDE_OBSERVER_STACK__';
+const getObserverStack = (window)=>{
+    // @ts-ignore
+    if (!window[OBSERVER_STACK]) {
+        // @ts-ignore
+        window[OBSERVER_STACK] = [];
+    }
+    // @ts-ignore
+    return window[OBSERVER_STACK];
+};
+const isElement = (node)=>{
+    return typeof node === 'object' && node != null && 'nodeType' in node && node.nodeType === 1;
+};
+const isAlwaysVisibleNode = (node)=>{
+    return node.getAttribute('data-live-announcer') === 'true' || node.hasAttribute(TOP_LAYER_ATTR);
+};
+/**
+ * Makes DOM content outside the given targets unavailable. Targets can be
+ * updated without rebuilding the observer or restoring unrelated nodes.
+ * @param targets - The elements that should remain available.
+ * @param options - Root and native inert configuration.
+ * @returns - An incremental target controller.
+ */ const createAriaHideOutsideController = (targets, options = {})=>{
+    const isLegacyRoot = isElement(options);
+    const configuredRoot = isLegacyRoot ? options : options.root;
+    const currentWindow = ownerWindow(configuredRoot ?? targets[0]);
+    if (!currentWindow) {
+        // Current JS environment doesn't have a window object, do nothing.
+        return {
+            addTarget: ()=>{},
+            removeTarget: ()=>{},
+            dispose: ()=>{}
+        };
+    }
+    const root = configuredRoot ?? currentWindow.document.body;
+    const shouldUseInert = !isLegacyRoot && options.shouldUseInert && 'inert' in currentWindow.HTMLElement.prototype;
+    const visibleNodes = new Set(targets);
+    const targetNodes = new Set(targets);
+    const automaticVisibleNodes = new Set();
+    const hiddenNodes = new Set();
+    // A target may detach before it is unregistered. Retain the ancestor path
+    // restored during registration so surviving ancestors can be hidden again.
+    const targetPaths = new Map();
+    const getTargetPath = (target)=>{
+        const path = [];
+        let node = target;
+        while(node && root.contains(node)){
+            path.push(node);
+            if (node === root) {
+                break;
+            }
+            node = node.parentElement;
+        }
+        return path;
+    };
+    for (const target of targets){
+        targetPaths.set(target, getTargetPath(target));
+    }
+    const observerStack = getObserverStack(currentWindow);
+    const getHideMechanism = (node)=>shouldUseInert && node instanceof currentWindow.HTMLElement ? 'inert' : 'aria-hidden';
+    const getHidden = (node, mechanism)=>mechanism === 'inert' ? node.inert : node.getAttribute(ARIA_HIDDEN) === 'true';
+    const setHidden = (node, mechanism, hidden)=>{
+        if (mechanism === 'inert') {
+            node.inert = hidden;
+        } else if (hidden) {
+            node.setAttribute(ARIA_HIDDEN, 'true');
+        } else {
+            node.removeAttribute(ARIA_HIDDEN);
+        }
+    };
+    const restoreHiddenNode = (node)=>{
+        if (!hiddenNodes.delete(node)) {
+            return;
+        }
+        const mechanism = getHideMechanism(node);
+        const refCountMap = getRefCountMap(currentWindow, mechanism);
+        const count = refCountMap.get(node);
+        if (typeof count !== 'number') {
+            return;
+        }
+        if (count === 1) {
+            setHidden(node, mechanism, false);
+            refCountMap.delete(node);
+        } else {
+            refCountMap.set(node, count - 1);
+        }
+    };
+    const hide = (node)=>{
+        // This controller already owns a hide for the node. Counting it twice would
+        // leave the node unavailable after cleanup.
+        if (hiddenNodes.has(node)) {
+            return;
+        }
+        const mechanism = getHideMechanism(node);
+        const refCountMap = getRefCountMap(currentWindow, mechanism);
+        const refCount = refCountMap.get(node) ?? 0;
+        // If the node was already unavailable through this mechanism, and Spring
+        // does not own a matching hide, leave the existing state untouched.
+        if (getHidden(node, mechanism) && refCount === 0) {
+            return;
+        }
+        if (refCount === 0) {
+            setHidden(node, mechanism, true);
+        }
+        hiddenNodes.add(node);
+        refCountMap.set(node, refCount + 1);
+    };
+    const addAlwaysVisibleNode = (node)=>{
+        automaticVisibleNodes.add(node);
+        visibleNodes.add(node);
+    };
+    const addAlwaysVisibleNodes = (node)=>{
+        if (isAlwaysVisibleNode(node)) {
+            addAlwaysVisibleNode(node);
+        }
+        for (const alwaysVisibleNode of node.querySelectorAll(alwaysVisibleSelector)){
+            addAlwaysVisibleNode(alwaysVisibleNode);
+        }
+    };
+    const removeDisconnectedAlwaysVisibleNodes = (node)=>{
+        for (const alwaysVisibleNode of automaticVisibleNodes){
+            if (!node.contains(alwaysVisibleNode) || root.contains(alwaysVisibleNode)) {
+                continue;
+            }
+            automaticVisibleNodes.delete(alwaysVisibleNode);
+            if (!targetNodes.has(alwaysVisibleNode)) {
+                visibleNodes.delete(alwaysVisibleNode);
+            }
+        }
+    };
+    const containsNode = (nodes, node)=>{
+        for (const candidate of nodes){
+            if (candidate.contains(node)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const containsVisibleNode = (node, nodes)=>{
+        for (const visibleNode of nodes){
+            if (node.contains(visibleNode)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const isCoveredByHiddenNode = (node)=>{
+        let ancestor = node.parentElement;
+        while(ancestor && root.contains(ancestor)){
+            if (hiddenNodes.has(ancestor)) {
+                return !(ancestor === node.parentElement && ancestor.getAttribute('role') === 'row');
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return false;
+    };
+    const shouldAdoptHiddenNode = (node)=>{
+        return root.contains(node) && !hiddenNodes.has(node) && !containsNode(visibleNodes, node) && !containsVisibleNode(node, visibleNodes) && !isCoveredByHiddenNode(node);
+    };
+    const acceptNode = (node)=>{
+        // Skip this node and its children if it must remain available. Also skip
+        // children of already unavailable nodes, as both aria-hidden and inert are
+        // recursive. An exception is made for role="row" because VoiceOver on iOS
+        // requires its cells to be hidden individually.
+        if (visibleNodes.has(node) || node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') {
+            return currentWindow.NodeFilter.FILTER_REJECT;
+        }
+        // Keep the complete ancestor path for overlay targets and explicitly marked
+        // top layers so neither mechanism makes a visible node unavailable through
+        // one of its ancestors.
+        if (containsVisibleNode(node, visibleNodes)) {
+            return currentWindow.NodeFilter.FILTER_SKIP;
+        }
+        return currentWindow.NodeFilter.FILTER_ACCEPT;
+    };
+    // `walkRoot` must not sit inside a visible node's subtree. Descendants of a
+    // target are kept available by the tree walker rejecting the target itself,
+    // which only happens when the walk starts at or above it. Every caller
+    // guarantees this through `containsNode(visibleNodes, ...)`.
+    const walk = (walkRoot, includeRoot)=>{
+        // A body-sibling portal can contain its marker below the node that is added
+        // to the document. Discover the whole subtree before considering its root.
+        addAlwaysVisibleNodes(walkRoot);
+        const rootFilter = acceptNode(walkRoot);
+        if (includeRoot && rootFilter === currentWindow.NodeFilter.FILTER_ACCEPT) {
+            hide(walkRoot);
+        }
+        if (rootFilter === currentWindow.NodeFilter.FILTER_REJECT) {
+            return;
+        }
+        const walker = currentWindow.document.createTreeWalker(walkRoot, currentWindow.NodeFilter.SHOW_ELEMENT, {
+            acceptNode
+        });
+        let node = walker.nextNode();
+        while(node != null){
+            hide(node);
+            node = walker.nextNode();
+        }
+    };
+    const addTarget = (target)=>{
+        if (!root.contains(target)) {
+            return;
+        }
+        targetNodes.add(target);
+        visibleNodes.add(target);
+        const path = getTargetPath(target);
+        const restoredAncestorIndexes = [];
+        for(let index = 0; index < path.length; index++){
+            // Only ancestors that were actually restored can expose previously covered
+            // siblings. Skip the target itself (index 0) and nodes that were never hidden.
+            if (index > 0 && hiddenNodes.has(path[index])) {
+                restoredAncestorIndexes.push(index);
+            }
+            restoreHiddenNode(path[index]);
+        }
+        targetPaths.set(target, path);
+        for (const index of restoredAncestorIndexes){
+            const ancestor = path[index];
+            const pathChild = path[index - 1];
+            for (const child of ancestor.children){
+                if (child !== pathChild) {
+                    walk(child, true);
+                }
+            }
+        }
+    };
+    const removeTarget = (target)=>{
+        if (!targetNodes.delete(target)) {
+            return;
+        }
+        if (!automaticVisibleNodes.has(target)) {
+            visibleNodes.delete(target);
+        }
+        const targetPath = targetPaths.get(target);
+        targetPaths.delete(target);
+        // The target may already be detached. Resume hiding from the first
+        // surviving ancestor restored during registration.
+        const connectedAncestor = targetPath?.find((node)=>root.contains(node));
+        if (!connectedAncestor) {
+            return;
+        }
+        // A branch can live inside another target's subtree, e.g. a submenu
+        // portaled into its parent menu. That subtree stays available through the
+        // enclosing target, so hiding from here would make the enclosing overlay
+        // unavailable as well.
+        if (containsNode(visibleNodes, connectedAncestor)) {
+            return;
+        }
+        let walkRoot = connectedAncestor;
+        while(walkRoot.parentElement && walkRoot.parentElement !== root && !containsVisibleNode(walkRoot.parentElement, visibleNodes)){
+            walkRoot = walkRoot.parentElement;
+        }
+        walk(walkRoot, true);
+    };
+    // If there is already a MutationObserver listening from a previous call,
+    // disconnect it so the new one takes over.
+    if (observerStack.length) {
+        observerStack[observerStack.length - 1].disconnect();
+    }
+    walk(root, false);
+    const processChanges = (changes)=>{
+        for (const change of changes){
+            if (change.type !== 'childList') {
+                continue;
+            }
+            for (const node of change.removedNodes){
+                if (isElement(node)) {
+                    removeDisconnectedAlwaysVisibleNodes(node);
+                }
+            }
+            if (!change.target.isConnected || change.addedNodes.length === 0) {
+                continue;
+            }
+            // If the parent element of the added nodes is not within one of the targets,
+            // and not already inside a hidden node, hide all of the new children.
+            if (!containsNode(visibleNodes, change.target) && !containsNode(hiddenNodes, change.target)) {
+                for (const node of change.addedNodes){
+                    if (isElement(node) && root.contains(node)) {
+                        walk(node, true);
+                    }
+                }
+            }
+        }
+    };
+    const observer = new currentWindow.MutationObserver(processChanges);
+    observer.observe(root, {
+        childList: true,
+        subtree: true
+    });
+    const observerWrapper = {
+        observe () {
+            observer.observe(root, {
+                childList: true,
+                subtree: true
+            });
+        },
+        resume (releasedHiddenNodes, releasedAlwaysVisibleNodes) {
+            for (const node of releasedAlwaysVisibleNodes){
+                if (root.contains(node)) {
+                    addAlwaysVisibleNode(node);
+                }
+            }
+            for (const node of releasedHiddenNodes){
+                if (shouldAdoptHiddenNode(node)) {
+                    hide(node);
+                }
+            }
+            observerWrapper.observe();
+        },
+        disconnect () {
+            observer.disconnect();
+        }
+    };
+    observerStack.push(observerWrapper);
+    let isCleanedUp = false;
+    const dispose = ()=>{
+        if (isCleanedUp) {
+            return;
+        }
+        isCleanedUp = true;
+        const pendingChanges = observer.takeRecords();
+        observer.disconnect();
+        processChanges(pendingChanges);
+        // Hand ownership of nodes hidden while the previous observer was paused
+        // back before releasing this controller's references.
+        if (observerWrapper === observerStack[observerStack.length - 1]) {
+            observerStack.pop();
+            const previousObserver = observerStack[observerStack.length - 1];
+            if (previousObserver?.resume) {
+                previousObserver.resume(hiddenNodes, automaticVisibleNodes);
+            } else {
+                previousObserver?.observe();
+            }
+        } else {
+            observerStack.splice(observerStack.indexOf(observerWrapper), 1);
+        }
+        for (const node of [
+            ...hiddenNodes
+        ]){
+            restoreHiddenNode(node);
+        }
+        targetPaths.clear();
+        targetNodes.clear();
+        automaticVisibleNodes.clear();
+    };
+    return {
+        addTarget: (target)=>{
+            if (!isCleanedUp) {
+                addTarget(target);
+            }
+        },
+        removeTarget: (target)=>{
+            if (!isCleanedUp) {
+                removeTarget(target);
+            }
+        },
+        dispose
+    };
+};
+/**
+ * Makes DOM content outside the given targets unavailable and returns a
+ * function that restores those changes.
+ */ const ariaHideOutside = (targets, options = {})=>createAriaHideOutsideController(targets, options).dispose;
+
+// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
+//
+// A strict capitalization should uppercase the first letter of each word in the sentence.
+// We only handle the first word.
 function capitalize(string) {
     if (typeof string !== 'string') {
         throw new Error('SPRING: `capitalize(string)` expects a string argument.');
@@ -24,20 +415,20 @@ function capitalize(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-const checkDefaultPrevented = (fc) => {
-    return (e, ...args) => {
-        if (e.defaultPrevented)
-            return;
+/** check is that event preventDefault */ const checkDefaultPrevented = (fc)=>{
+    return (e, ...args)=>{
+        if (e.defaultPrevented) return;
         fc(e, ...args);
     };
 };
 
+
+
 function checkElementName(element, names) {
-    return (isValidElement(element) &&
-        names.indexOf(element.type?.displayName) !== -1);
+    return isValidElement(element) && names.indexOf(element.type?.displayName) !== -1;
 }
 
-const isDeleteKeyboardEvent = (keyboardEvent) => {
+const isDeleteKeyboardEvent = (keyboardEvent)=>{
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
 };
 
@@ -52,115 +443,378 @@ const globalStateClasses = {
     focusVisibleWithin: 'sui-focus-visible-within',
     required: 'sui-required',
     selected: 'sui-selected',
-    dragged: 'sui-dragged',
+    dragged: 'sui-dragged'
 };
 
-const simpleCamelCase = (str) => str
-    .split('-')
-    .map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item)
-    .join('');
+
+/* oxlint-disable sonarjs/cognitive-complexity */ 
+
+/**
+ * simple camel case for better performance, because this is a very open execution function, below is the benchmark of lodash camelCase vs simpleCamelCase and regex camelCase.
+ *
+ * https://www.measurethat.net/Benchmarks/Show/31672/0/regex-vs-javascript-camelcase-long
+ *
+ * https://www.measurethat.net/Benchmarks/Show/12906/0/lodash-camelcase-vs-javascript-camelcase-long
+ */ const simpleCamelCase = (str)=>str.split('-').map((item, index)=>index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item).join('');
 const DEFAULT_PREFIX = 'sui-';
-const useClasses = (prefix, inputClasses, className) => {
-    return useCallback((...classValues) => {
+/**
+ * Custom hook for generating CSS classes based on input parameters.
+ *
+ * pick class from object with prefix of object like `sui-${prefix}-${key}`
+ *
+ * `className` will be apply to the `cls('root')` class.
+ *
+ * camelCase will be used for the key in the inputClasses object.
+ *
+ * and apply to kebabCase in the class name.
+ *
+ * ```tsx
+ * type BaseButtonClasses =
+ *   | 'root'
+ *   | 'content'
+ *   | 'start-slot';
+ *
+ * const cls = useClasses<BaseButtonClasses>('button', {
+ *    root: 'custom-button-root',
+ *    content: 'custom-button-content',
+ *    startSlot: 'custom-button-start-slot',
+ * }, 'custom-root-class');
+ *
+ * <button className={cls('root')}>Button</button> // 'sui-button-root custom-button-root custom-root-class'
+ * <button className={cls('content')}>Button</button> // 'sui-button-content custom-button-content'
+ *
+ * <button className={cls('start-slot')}>Button</button> // 'sui-button-start-slot custom-button-start-slot'
+ * ```
+ */ const useClasses = (prefix, inputClasses, className)=>{
+    return useCallback((...classValues)=>{
         const classList = [];
         const selectedMap = new Map();
         let isRoot = false;
         const hasCustomClasses = inputClasses && Object.keys(inputClasses).length > 0;
-        const applyClass = (classValue) => {
+        const applyClass = (classValue)=>{
             const isDefaultClasses = globalStateClasses[classValue];
             if (isDefaultClasses) {
                 classList.push(isDefaultClasses);
-            }
-            else {
+            } else {
                 classList.push(`${DEFAULT_PREFIX}${prefix}-${classValue}`);
             }
             if (hasCustomClasses) {
+                // add selected class to map for use in inputClasses
                 selectedMap.set(simpleCamelCase(classValue), 1);
             }
         };
-        for (let i = 0; i < classValues.length; i++) {
+        for(let i = 0; i < classValues.length; i++){
             const classValue = classValues[i];
-            if (!classValue)
-                continue;
+            if (!classValue) continue;
             if (typeof classValue === 'string') {
                 if (classValue === 'root') {
                     isRoot = true;
                     classList.push(`${DEFAULT_PREFIX}${prefix}`);
                 }
                 applyClass(classValue);
-            }
-            else {
-                for (const key in classValue) {
+            } else {
+                for(const key in classValue){
                     if (classValue[key]) {
                         applyClass(key);
                     }
                 }
             }
         }
-        selectedMap.forEach((_, key) => {
+        selectedMap.forEach((_, key)=>{
             const inputClassValue = inputClasses?.[key];
             if (inputClassValue) {
                 classList.push(inputClassValue);
             }
         });
         if (isRoot && className) {
+            // add root class and className
             classList.push(className);
         }
         return classList.join(' ');
-    }, [className, inputClasses, prefix]);
+    }, [
+        className,
+        inputClasses,
+        prefix
+    ]);
 };
 
-const getTitle = (text) => {
+
+
+
+
+
+
+
+/**
+ * Combine props object together
+ *
+ * that will group className, classes together
+ * function will auto combine together,
+ * trigger order is `intoProps.someFn(e) => defaultProps.someFn(e)`
+ *
+ * @param baseProps base props you want to combine together
+ * @param newProps want to combine in to props
+ * @param coverPropKeys some prop key you want to cover, not combine when type is function, ex. `ComponentType`
+ *
+ *
+ * @example
+ * ```tsx
+ * combineProps(
+    {
+      children: <A />,
+      value: '1',
+      className: 'a1',
+      classes: {
+        root: 'root1'
+      },
+      count: 1,
+      size: 'large',
+      onClick: fn1
+    },
+    {
+      children: <B />,
+      value: '2',
+      className: 'a2',
+      classes: {
+        root: 'root2'
+      },
+      count: 2,
+      size: undefined,
+      onClick: fn2
+    },
+  )
+  // output result:
+  {
+    children: <B />,
+    value: '2',
+    className: 'a1 a2',
+    classes: {
+      root: 'root1 root2'
+    },
+    count: 2,
+    size: 'large',
+    onClick: (e) => {
+      fn2(e);
+      fn1(e);
+    }
+  }
+ * ```
+ */ const combineProps = (baseProps, newProps, coverPropKeys)=>innerCombineProps({
+        baseProps,
+        newProps,
+        coverPropKeys
+    });
+/**
+ * Combine two classes
+ *
+ * @param baseClasses base classes you want to combine together
+ * @param newClasses new classes want to combine in to props
+ *
+ * @example
+ * ```ts
+ * combineClasses(
+    {
+      root: 'a1',
+      input: 'a1',
+      un1: undefined,
+      un2: 'a4',
+    },
+    {
+      root: 'a1',
+      input: 'a2',
+      un1: 'a3',
+      un2: undefined,
+      un3: 'a5',
+    },
+  )
+  // output result:
+  {
+    root: 'a1 a1',
+    input: 'a1 a2',
+    un1: 'a3',
+    un2: 'a4',
+    un3: 'a5',
+  }
+ * ```
+ */ const combineClasses = (baseClasses, newClasses)=>innerCombineProps({
+        baseProps: baseClasses,
+        newProps: newClasses,
+        combineAllString: true
+    });
+const innerCombineProps = (params)=>{
+    const { baseProps, newProps } = params;
+    if (!newProps || Object.keys(newProps).length === 0) {
+        return baseProps;
+    }
+    const outputProps = mergeChildProps(params);
+    return {
+        ...newProps,
+        ...outputProps
+    };
+};
+function mergeChildProps({ baseProps, newProps, combineAllString, coverPropKeys }) {
+    const result = Object.keys(baseProps || {}).reduce((output, curr)=>{
+        const prop = baseProps[curr];
+        const propTo = newProps[curr];
+        if (propTo !== undefined) {
+            // * all typeof type below
+            // "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"
+            switch(typeof prop){
+                case 'undefined':
+                    output[curr] = propTo;
+                    break;
+                case 'object':
+                    {
+                        if (!isValidElement(propTo) && !isValidElement(prop) && isPlainObject(propTo) && isPlainObject(prop)) {
+                            output[curr] = mergeChildProps({
+                                baseProps: prop,
+                                newProps: propTo || {},
+                                combineAllString: combineAllString || curr === 'classes'
+                            });
+                        } else {
+                            output[curr] = propTo;
+                        }
+                        break;
+                    }
+                case 'string':
+                    if (combineAllString || curr === 'className') {
+                        output[curr] = [
+                            prop,
+                            propTo
+                        ].filter((x)=>typeof x === 'string' && x).join(' ');
+                    } else {
+                        output[curr] = propTo;
+                    }
+                    break;
+                case 'boolean':
+                case 'symbol':
+                case 'bigint':
+                case 'number':
+                    output[curr] = propTo;
+                    break;
+                case 'function':
+                    if (coverPropKeys && coverPropKeys.includes(curr) && propTo) {
+                        output[curr] = propTo;
+                    } else {
+                        output[curr] = (...args)=>{
+                            // * exec outside first
+                            propTo?.(...args);
+                            prop?.(...args);
+                        };
+                    }
+                    break;
+                default:
+            }
+        } else {
+            output[curr] = prop;
+        }
+        return output;
+    }, {});
+    // if result is an empty {} reset that to undefined
+    if (Object.keys(result).length === 0) {
+        return undefined;
+    }
+    return {
+        ...newProps,
+        ...result
+    };
+}
+
+/* oxlint-disable no-console */ 
+function logInDev({ scope, message, level = 'warn', condition = true }) {
+    if (process.env.NODE_ENV !== 'production' && condition && !rcConfiguration.WARNING_IGNORE) {
+        const log = `SPRING [${scope}]: ${message}`;
+        if (process.env.NODE_ENV === 'test' && level === 'error') {
+            throw Error(log);
+        }
+        console[level](log);
+    }
+}
+
+const isRef = (obj)=>{
+    return obj && 'current' in obj;
+};
+
+
+/**
+ * get element from React ref or callback
+ */ const getRefElement = (ref)=>{
+    if (typeof ref === 'function') {
+        return ref();
+    }
+    if (typeof ref === 'object' && isRef(ref)) {
+        return ref.current;
+    }
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+    return ref;
+};
+
+// oxlint-disable-next-line @typescript-eslint/no-explicit-any
+const getTitle = (text)=>{
     return typeof text === 'string' ? text : undefined;
 };
 
-const isSuiElement = (element, suiNames) => {
-    return (React__default.isValidElement(element) &&
-        suiNames.indexOf(element.type.displayName) !== -1);
+
+
+const isSuiElement = (element, suiNames)=>{
+    return react.isValidElement(element) && suiNames.indexOf(element.type.displayName) !== -1;
 };
 
 function isUrl(url) {
+    // oxlint-disable-next-line no-useless-escape
     const exp = /(\b(https?):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
     return url.match(exp);
 }
 
-const isWebKit154 = typeof navigator !== 'undefined' &&
-    /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) &&
-    /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+// * this whole file should be remove after webkit154 issue be fixed
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ *
+ * follow up:
+ * https://github.com/mui/material-ui/pull/31975/files
+ * https://github.com/mui/material-ui/pull/32202/files
+ */ const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+
 
-const omit = (classes, keys) => {
-    return lodashOmit(classes, keys);
+
+/** enhance lodash type */ const omit_omit = (classes, keys)=>{
+    return omit(classes, keys);
 };
 
-function outerSize(el) {
+/**
+ * get that full height and margin with margin
+ * that will ignore transform animation
+ */ function outerSize(el) {
     const style = getComputedStyle(el);
     return {
-        get height() {
-            return (el.offsetHeight +
-                parseInt(style.marginTop, 10) +
-                parseInt(style.marginBottom, 10));
-        },
-        get width() {
-            return (el.offsetWidth +
-                parseInt(style.marginLeft, 10) +
-                parseInt(style.marginRight, 10));
+        get height () {
+            return el.offsetHeight + parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
         },
+        get width () {
+            return el.offsetWidth + parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
+        }
     };
 }
 
-const pick = (classes, keys) => {
-    return lodashPick(classes, keys);
+
+
+
+
+
+/** enhance lodash type */ const pick_pick = (classes, keys)=>{
+    return pick(classes, keys);
 };
 
-function preloadImg(url) {
-    return new Promise((resolve, reject) => {
+/** preload image file */ function preloadImg(url) {
+    return new Promise((resolve, reject)=>{
         const img = new Image();
         img.style.display = 'none';
-        img.onload = () => {
+        img.onload = ()=>{
             document.body.removeChild(img);
             resolve();
         };
-        img.onerror = () => {
+        img.onerror = ()=>{
             document.body.removeChild(img);
             reject();
         };
@@ -169,66 +823,166 @@ function preloadImg(url) {
     });
 }
 
-function removeClassName(target, removeClass, { scanChildren = false, fullMatch = false } = {}) {
+
+/**
+ * remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
+ *
+ * @param target target element reference or element or callback
+ * @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
+ *
+ * @example
+ * ```js
+ * elm => <div class="abc bcd efg abc-def"></div>
+ *
+ * removeClassName(elmRef, 'bcd');
+ *
+ * elm => <div class="abc efg abc-def"></div>
+ *
+ * removeClassName(elmRef, 'abc');
+ * elm => <div class="efg"></div>
+ * ```
+ */ function removeClassName(target, removeClass, { scanChildren = false, fullMatch = false } = {}) {
     const elm = getRefElement(target);
-    if (!elm)
-        return;
+    if (!elm) return;
     if (elm.className.includes(removeClass)) {
         elm.className = cleanClass(elm, removeClass, fullMatch);
     }
     if (scanChildren) {
         const nodes = elm.querySelectorAll(`[class*="${removeClass}"]`);
         if (nodes?.length > 0) {
-            nodes.forEach((node) => (node.className = cleanClass(node, removeClass, fullMatch)));
+            nodes.forEach((node)=>node.className = cleanClass(node, removeClass, fullMatch));
         }
     }
 }
 function cleanClass(elm, removeClass, fullMatch) {
-    return elm.className
-        .trim()
-        .split(/\s+/)
-        .filter((className) => !(fullMatch
-        ? className === removeClass
-        : className.includes(removeClass)))
-        .join(' ');
+    return elm.className.trim().split(/\s+/).filter((className)=>!(fullMatch ? className === removeClass : className.includes(removeClass))).join(' ');
 }
 
-const runKeyHandler = (e, keyHandlers) => {
+/**
+ * Executes the corresponding key handler function based on the provided keyboard event.
+ * If a handler is found for the pressed key, it will be invoked.
+ * Additionally, it prevents any side effects caused by the event, such as page scrolling.
+ *
+ * @param e - The keyboard event.
+ * @param keyHandlers - An object containing key-handler mappings.
+ */ const runKeyHandler = (e, keyHandlers)=>{
     const handler = keyHandlers[e.key];
     if (handler) {
         handler();
+        // if event was handled prevent other side effects (e.g. page scroll)
         e.preventDefault();
     }
 };
 
-function getSelectionPosition(sourceTarget) {
+
+/**
+ * get current input element selection position and is that selectRange state
+ */ function getSelectionPosition(sourceTarget) {
     const input = getRefElement(sourceTarget);
     const currentPosition = input?.selectionStart;
     const currentPositionEnd = input?.selectionEnd;
     const isSelectRange = currentPosition !== currentPositionEnd;
     return {
         isSelectRange,
-        position: { start: currentPosition || 0, end: currentPositionEnd || 0 },
+        position: {
+            start: currentPosition || 0,
+            end: currentPositionEnd || 0
+        }
     };
 }
-function setSelectionPosition(target, options) {
+/**
+ * set input element selection position position,
+ * if you need scroll that into view set `scrollIntoView` as true
+ */ function setSelectionPosition(target, options) {
     const elm = getRefElement(target);
     if (elm && options.start !== null && options.end !== null) {
-        if (options.scrollIntoView)
-            elm.blur();
+        // * use blur and refocus to refocus position into view
+        if (options.scrollIntoView) elm.blur();
         elm.setSelectionRange(options.start, options.end, options.direction);
-        if (options.scrollIntoView)
-            elm.focus();
+        if (options.scrollIntoView) elm.focus();
     }
 }
-function clearWindowSelection() {
+/** clean whole selection */ function clearWindowSelection() {
     if (window?.getSelection) {
         const selection = window.getSelection();
         if (selection) {
+            // Chrome
             selection.empty?.();
+            // Firefox
             selection.removeAllRanges?.();
         }
     }
 }
 
-export { a11yKeyboard, capitalize, checkDefaultPrevented, checkElementName, clearWindowSelection, getRefElement, getSelectionPosition, getTitle, globalStateClasses, isDeleteKeyboardEvent, isSuiElement, isUrl, isWebKit154, omit, outerSize, pick, preloadImg, removeClassName, runKeyHandler, setSelectionPosition, useClasses };
+
+
+/**
+ * Merge tailwind classes with additional class groups for spring-ui
+ */ const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            typography: [
+                {
+                    typography: [
+                        ()=>true
+                    ]
+                }
+            ],
+            'focus-ring-rounded': [
+                'focus-ring-rounded',
+                {
+                    'focus-ring-rounded': [
+                        ()=>true
+                    ]
+                }
+            ],
+            'focus-ring-border': [
+                'focus-ring-border',
+                {
+                    'focus-ring-border': [
+                        ()=>true
+                    ]
+                }
+            ],
+            'focus-ring-border-recoup': [
+                'focus-ring-border-recoup',
+                'no-focus-ring-border-recoup'
+            ],
+            'focus-ring': [
+                {
+                    'focus-ring': [
+                        ()=>true
+                    ]
+                }
+            ]
+        }
+    }
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { a11yKeyboard, ariaHideOutside, capitalize, checkDefaultPrevented, checkElementName, clearWindowSelection, combineClasses, combineProps, createAriaHideOutsideController, getRefElement, getSelectionPosition, getTitle, globalStateClasses, isDeleteKeyboardEvent, isRef, isSuiElement, isUrl, isWebKit154, logInDev, omit_omit as omit, outerSize, ownerWindow, pick_pick as pick, preloadImg, removeClassName, runKeyHandler, setSelectionPosition, twMerge, unstable_ownerDocument as ownerDocument, useClasses };