@itwin/itwinui-react 3.12.2 → 3.13.1

package/DEV-esm/utils/components/Resizer.js

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { getBoundedValue, getTranslateValuesFromElement } from '../functions/index.js';
+export const Resizer = (props)=>React.createElement("div", {
+        style: {
+            position: 'absolute',
+            inset: -6,
+            display: 'grid',
+            pointerEvents: 'none'
+        }
+    }, React.createElement(ResizerStyles, null), React.createElement(Resizers, props));
+let Resizers = (props)=>{
+    let { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+    let isResizing = React.useRef(false);
+    let onResizePointerDown = (event)=>{
+        if (!elementRef.current || 0 !== event.button) return;
+        let initialPointerX = event.clientX;
+        let initialPointerY = event.clientY;
+        let [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(elementRef.current);
+        let { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
+        let width = `${initialWidth}px`;
+        let height = `${initialHeight}px`;
+        let translateX = initialTranslateX;
+        let translateY = initialTranslateY;
+        let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        if (Number.isNaN(minWidth)) minWidth = 380;
+        let minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+        let resizer = event.currentTarget.dataset.iuiResizer;
+        let ownerDocument = elementRef.current.ownerDocument || document;
+        let originalUserSelect = ownerDocument.body.style.userSelect;
+        ownerDocument.body.style.userSelect = 'none';
+        let onResizePointerMove = (event)=>{
+            if (!elementRef.current) return;
+            if (!isResizing.current) {
+                isResizing.current = true;
+                onResizeStart?.();
+            }
+            let containerRect = containerRef?.current?.getBoundingClientRect();
+            let clientX = getBoundedValue(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
+            let clientY = getBoundedValue(event.clientY, containerRect?.top ?? 0, containerRect?.bottom ?? ownerDocument.documentElement.clientHeight ?? 0);
+            let diffX = initialPointerX - clientX;
+            let diffY = initialPointerY - clientY;
+            switch(resizer){
+                case 'top-left':
+                    {
+                        let newHeight = initialHeight + diffY;
+                        if (newHeight >= minHeight) {
+                            height = elementRef.current.style.height = `${newHeight}px`;
+                            translateY = initialTranslateY - diffY;
+                        }
+                        let newWidth = initialWidth + diffX;
+                        if (newWidth >= minWidth) {
+                            width = elementRef.current.style.width = `${newWidth}px`;
+                            translateX = initialTranslateX - diffX;
+                        }
+                        elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                        break;
+                    }
+                case 'top':
+                    {
+                        let newHeight = initialHeight + diffY;
+                        if (newHeight < minHeight) break;
+                        height = elementRef.current.style.height = `${newHeight}px`;
+                        translateY = initialTranslateY - diffY;
+                        elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                        break;
+                    }
+                case 'top-right':
+                    {
+                        let newHeight = initialHeight + diffY;
+                        if (newHeight >= minHeight) {
+                            height = elementRef.current.style.height = `${newHeight}px`;
+                            translateY = initialTranslateY - diffY;
+                        }
+                        width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                        elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                        break;
+                    }
+                case 'right':
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                case 'bottom-right':
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                case 'bottom':
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                case 'bottom-left':
+                    {
+                        let newWidth = initialWidth + diffX;
+                        if (newWidth >= minWidth) {
+                            width = elementRef.current.style.width = `${newWidth}px`;
+                            translateX = initialTranslateX - diffX;
+                        }
+                        height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                        elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                        break;
+                    }
+                case 'left':
+                    {
+                        let newWidth = initialWidth + diffX;
+                        if (newWidth < minWidth) break;
+                        width = elementRef.current.style.width = `${newWidth}px`;
+                        height = elementRef.current.style.height = `${initialHeight}px`;
+                        translateX = initialTranslateX - diffX;
+                        elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                        break;
+                    }
+                default:
+                    break;
+            }
+        };
+        ownerDocument.addEventListener('pointermove', onResizePointerMove);
+        ownerDocument.addEventListener('pointerup', ()=>{
+            ownerDocument.removeEventListener('pointermove', onResizePointerMove);
+            if (elementRef.current) {
+                ownerDocument.body.style.userSelect = originalUserSelect;
+                isResizing.current = false;
+                onResizeEnd?.({
+                    width,
+                    height,
+                    transform: `translate(${translateX}px, ${translateY}px)`
+                });
+            }
+        }, {
+            once: true
+        });
+    };
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+        "data-iui-resizer": "top-left",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'nw-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "top",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'n-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "top-right",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'ne-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "right",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'e-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "bottom-right",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'se-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "bottom",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 's-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "bottom-left",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'sw-resize'
+        }
+    }), React.createElement("div", {
+        "data-iui-resizer": "left",
+        onPointerDown: onResizePointerDown,
+        style: {
+            cursor: 'w-resize'
+        }
+    }));
+};
+let ResizerStyles = React.memo(()=>React.createElement("style", null, resizerStyles));
+let resizerStyles = `
+[data-iui-resizer] {
+  pointer-events: auto;
+  grid-area: 1 / 1 / -1 / -1;
+  width: 12px;
+  height: 12px;
+  z-index: 1;
+}
+[data-iui-resizer='top'],
+[data-iui-resizer='bottom'] {
+  height: 8px;
+  width: auto;
+  z-index: 0;
+}
+[data-iui-resizer='left'],
+[data-iui-resizer='right'] {
+  height: auto;
+  width: 8px;
+  z-index: 0;
+}
+[data-iui-resizer^='top'] {
+  align-self: start;
+}
+[data-iui-resizer^='bottom'] {
+  align-self: end;
+}
+[data-iui-resizer$='left'] {
+  justify-self: start;
+}
+[data-iui-resizer$='right'] {
+  justify-self: end;
+}`;

package/DEV-esm/utils/components/ShadowRoot.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
+import { useHydration } from '../providers/index.js';
+let isBrowser = 'undefined' != typeof document;
+let supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+let supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
+export const ShadowRoot = ({ children, css })=>{
+    let isHydrating = 'hydrating' === useHydration();
+    if (!isBrowser) return React.createElement("template", {
+        shadowrootmode: 'open'
+    }, css && React.createElement("style", null, css), children);
+    if (supportsDSD && isHydrating) return null;
+    return React.createElement(ClientShadowRoot, {
+        css: css
+    }, children);
+};
+let ClientShadowRoot = ({ children, css })=>{
+    let templateRef = React.useRef(null);
+    let shadowRoot = useShadowRoot(templateRef, {
+        css
+    });
+    let fallbackCss = !supportsAdoptedStylesheets && css ? React.createElement("style", null, css) : null;
+    return shadowRoot ? ReactDOM.createPortal(React.createElement(React.Fragment, null, fallbackCss, children), shadowRoot) : React.createElement("template", {
+        ref: templateRef
+    });
+};
+function useShadowRoot(templateRef, { css = '' }) {
+    let [shadowRoot, setShadowRoot] = React.useState(null);
+    let styleSheet = React.useRef();
+    let latestCss = useLatestRef(css);
+    let latestShadowRoot = useLatestRef(shadowRoot);
+    useLayoutEffect(()=>{
+        let parent = templateRef.current?.parentElement;
+        if (!parent) return;
+        let setupOrReuseShadowRoot = ()=>{
+            if (parent.shadowRoot && null === latestShadowRoot.current) parent.shadowRoot.replaceChildren();
+            let shadow = parent.shadowRoot || parent.attachShadow({
+                mode: 'open'
+            });
+            if (supportsAdoptedStylesheets) {
+                let currentWindow = shadow.ownerDocument.defaultView || globalThis;
+                styleSheet.current = new currentWindow.CSSStyleSheet();
+                shadow.adoptedStyleSheets = [
+                    styleSheet.current
+                ];
+                if (latestCss.current) styleSheet.current.replaceSync(latestCss.current);
+            }
+            ReactDOM.flushSync(()=>setShadowRoot(shadow));
+        };
+        queueMicrotask(()=>{
+            setupOrReuseShadowRoot();
+        });
+        return ()=>void setShadowRoot(null);
+    }, [
+        templateRef,
+        latestCss,
+        latestShadowRoot
+    ]);
+    useLayoutEffect(()=>{
+        if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
+    }, [
+        css
+    ]);
+    return shadowRoot;
+}

package/DEV-esm/utils/components/WithCSSTransition.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { styles } from '../../styles.js';
+export const WithCSSTransition = (props)=>{
+    let { in: visible, dimension = 'height', children, ...rest } = props;
+    let expandedSize = React.useRef(0);
+    let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
+    return React.createElement(CSSTransition, {
+        in: visible,
+        timeout: 200,
+        unmountOnExit: true,
+        onEnter: (node)=>{
+            node.style[`min${dimensionCamelCase}`] = 'initial';
+            node.style[dimension] = '0px';
+        },
+        onEntering: (node)=>{
+            node.style[dimension] = `${expandedSize.current}px`;
+        },
+        onEntered: (node)=>{
+            node.style[`min${dimensionCamelCase}`] = '';
+            node.style[dimension] = '';
+        },
+        onExit: (node)=>{
+            node.style[dimension] = `${expandedSize.current}px`;
+        },
+        onExiting: (node)=>{
+            node.style[`min${dimensionCamelCase}`] = 'initial';
+            node.style[dimension] = '0px';
+        },
+        classNames: {
+            enter: styles['iui-enter'],
+            enterActive: styles['iui-enter-active'],
+            exit: styles['iui-exit'],
+            exitActive: styles['iui-exit-active']
+        },
+        ...rest
+    }, React.isValidElement(children) ? React.cloneElement(children, {
+        ref: (el)=>{
+            if (el) expandedSize.current = el.getBoundingClientRect()[dimension];
+        }
+    }) : React.createElement(React.Fragment, null));
+};

package/DEV-esm/utils/components/index.js

@@ -0,0 +1,14 @@
+export * from './Resizer.js';
+export * from './FocusTrap.js';
+export * from './InputContainer.js';
+export * from './InputFlexContainer.js';
+export * from './InputWithIcon.js';
+export * from './WithCSSTransition.js';
+export * from './MiddleTextTruncation.js';
+export * from './AutoclearingHiddenLiveRegion.js';
+export * from './Box.js';
+export * from './ButtonBase.js';
+export * from './Portal.js';
+export * from './ShadowRoot.js';
+export * from './LineClamp.js';
+export * from './FieldsetBase.js';

package/DEV-esm/utils/functions/colors.js

@@ -0,0 +1,24 @@
+export const SoftBackgrounds = {
+    skyblue: 'var(--iui-color-background-skyblue)',
+    celery: 'var(--iui-color-background-celery)',
+    froly: 'var(--iui-color-background-froly)',
+    steelblue: 'var(--iui-color-background-steelblue)',
+    sunglow: 'var(--iui-color-background-sunglow)',
+    seabuckthorn: 'var(--iui-color-background-seabuckthorn)',
+    montecarlo: 'var(--iui-color-background-montecarlo)',
+    poloblue: 'var(--iui-color-background-poloblue)',
+    bouquet: 'var(--iui-color-background-bouquet)',
+    ash: 'var(--iui-color-background-ash)',
+    oak: 'var(--iui-color-background-oak)'
+};
+export const isSoftBackground = (value)=>Object.keys(SoftBackgrounds).includes(value);
+let USER_COLORS = Object.values(SoftBackgrounds);
+export const getUserColor = (emailOrName)=>{
+    let normalizedString = emailOrName.trim().toLowerCase();
+    let hash = 0;
+    for(let i = 0; i < normalizedString.length; i++){
+        let charCode = normalizedString.charCodeAt(i);
+        hash = (hash + charCode) % USER_COLORS.length;
+    }
+    return USER_COLORS[hash];
+};

package/DEV-esm/utils/functions/date.js

@@ -0,0 +1,8 @@
+export const isBefore = (beforeDate, afterDate)=>{
+    if (!beforeDate || !afterDate) return false;
+    let firstDate = new Date(beforeDate);
+    let secondDate = new Date(afterDate);
+    firstDate && firstDate.setHours(0, 0, 0, 0);
+    secondDate && secondDate.setHours(0, 0, 0, 0);
+    return firstDate < secondDate;
+};

package/DEV-esm/utils/functions/dev.js

@@ -0,0 +1,14 @@
+let isJest = 'undefined' != typeof jest;
+let isMocha = void 0 !== globalThis.beforeEach && 'function(name,fn){suites[0].beforeEach(name,fn);}' === `${globalThis.beforeEach}`.replace(/\s/g, '');
+let isVitest = void 0 !== globalThis.__vitest_index__;
+let isUnitTest = isJest || isVitest || isMocha;
+let createWarningLogger = isUnitTest ? ()=>()=>{} : ()=>{
+    let logged = false;
+    return (message)=>{
+        if (!logged) {
+            console.warn(message);
+            logged = true;
+        }
+    };
+};
+export { isUnitTest, createWarningLogger };

package/DEV-esm/utils/functions/dom.js

@@ -0,0 +1,20 @@
+export const getDocument = ()=>'undefined' == typeof document ? void 0 : document;
+export const getWindow = ()=>'undefined' == typeof window ? void 0 : window;
+export const mergeEventHandlers = (...callbacks)=>(event)=>{
+        for (let cb of callbacks){
+            cb?.(event);
+            if (event?.defaultPrevented) return;
+        }
+    };
+export const getTranslateValuesFromElement = (element)=>{
+    if (!element) return [];
+    let transformValue = getComputedStyle(element).getPropertyValue('transform');
+    return getTranslateValues(transformValue);
+};
+export const getTranslateValues = (transformValue)=>{
+    let matrix = new DOMMatrix(transformValue);
+    return [
+        matrix.m41,
+        matrix.m42
+    ];
+};

package/DEV-esm/utils/functions/focusable.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useSyncExternalStore, useLatestRef } from '../hooks/index.js';
+let tabbableElementsSelector = 'a[href], button, input, textarea, select, details, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+export const getTabbableElements = (container)=>{
+    if (!container) return [];
+    let elements = container.querySelectorAll(tabbableElementsSelector);
+    return Array.from(elements).filter((el)=>!el.hasAttribute('disabled') && !el.classList.contains('iui-disabled') && 'true' !== el.getAttribute('aria-disabled'));
+};
+export const getFocusableElements = (container)=>{
+    if (!container) return [];
+    let elements = container.querySelectorAll(`${tabbableElementsSelector}, [tabindex="-1"]`);
+    return Array.from(elements).filter((el)=>!el.hasAttribute('disabled') && !el.classList.contains('iui-disabled') && 'true' !== el.getAttribute('aria-disabled'));
+};
+export function useFocusableElements(root, extraOptions) {
+    let focusableElementsRef = React.useRef([]);
+    let [focusableElements, setFocusableElements] = React.useState(focusableElementsRef.current);
+    let setFocusableElementsRefAndState = (newFocusableElements)=>{
+        focusableElementsRef.current = newFocusableElements;
+        setFocusableElements(newFocusableElements);
+    };
+    let { filter: filterProp } = extraOptions ?? {};
+    let filter = useLatestRef(filterProp);
+    let returnValue = React.useMemo(()=>({
+            focusableElementsRef,
+            focusableElements
+        }), [
+        focusableElementsRef,
+        focusableElements
+    ]);
+    return useSyncExternalStore(React.useCallback(()=>{
+        if (!root) {
+            setFocusableElementsRefAndState([]);
+            return ()=>{};
+        }
+        updateFocusableElements();
+        let observer = new MutationObserver(()=>updateFocusableElements());
+        observer.observe(root, {
+            childList: true,
+            subtree: true
+        });
+        return ()=>observer.disconnect();
+        function updateFocusableElements() {
+            let newFocusableElements = getFocusableElements(root);
+            if (filter.current) newFocusableElements = filter.current?.(newFocusableElements);
+            setFocusableElementsRefAndState(newFocusableElements);
+        }
+    }, [
+        root,
+        filter
+    ]), ()=>returnValue, ()=>returnValue);
+}

package/DEV-esm/utils/functions/import.js

@@ -0,0 +1,17 @@
+export const importCss = async (url)=>{
+    try {
+        return await new Function(`return import("${url}", { with: { type: "css" } })`)();
+    } catch  {
+        try {
+            return await new Function(`return import("${url}", { assert: { type: "css" } })`)();
+        } catch  {
+            return await fetch(url).then((res)=>res.text()).then((cssText)=>{
+                let stylesheet = new CSSStyleSheet();
+                stylesheet.replaceSync(cssText);
+                return {
+                    default: stylesheet
+                };
+            });
+        }
+    }
+};

package/DEV-esm/utils/functions/index.js

@@ -0,0 +1,10 @@
+export * from './date.js';
+export * from './dom.js';
+export * from './colors.js';
+export * from './numbers.js';
+export * from './focusable.js';
+export * from './supports.js';
+export * from './polymorphic.js';
+export * from './import.js';
+export * from './react.js';
+export * from './dev.js';

package/DEV-esm/utils/functions/numbers.js

@@ -0,0 +1,11 @@
+export const getBoundedValue = (val, min, max)=>Math.min(max, Math.max(min, val));
+export const getRandomValue = (length = 21)=>{
+    let alphabet = "_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    let id = '';
+    for(let i = 0; i < length; i++)id += alphabet[64 * Math.random() | 0];
+    return id;
+};
+export const roundByDPR = (value)=>{
+    let dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};

package/DEV-esm/utils/functions/polymorphic.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useGlobals } from '../hooks/useGlobals.js';
+import { styles } from '../../styles.js';
+let _base = (defaultElement)=>(className, attrs)=>{
+        let Comp = React.forwardRef(({ as = defaultElement, ...props }, ref)=>{
+            props = {
+                ...attrs,
+                ...props,
+                className: getScopedClassName(cx(className, attrs?.className, props.className))
+            };
+            let Element = as || 'div';
+            if ('button' === Element || 'a' === Element || 'input' === Element && 'checkbox' === props.type) {
+                var _props;
+                (_props = props).tabIndex ?? (_props.tabIndex = 0);
+            }
+            useGlobals();
+            return React.createElement(Element, {
+                ref: ref,
+                ...props
+            });
+        });
+        Comp.displayName = getDisplayNameFromClass(className);
+        return Comp;
+    };
+export const polymorphic = new Proxy(_base('div'), {
+    get: (target, prop)=>{
+        if ('string' == typeof prop) return _base(prop);
+        return Reflect.get(target, prop);
+    }
+});
+let getDisplayNameFromClass = (str)=>{
+    let camel = str.replace(/-([a-z])/g, (g)=>g[1].toUpperCase());
+    return camel.substring(3);
+};
+let getScopedClassName = (className = '')=>className.split(' ').map((c)=>c in styles ? styles[c] : c).join(' ') || null;

package/DEV-esm/utils/functions/react.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { mergeRefs } from '../hooks/useMergedRefs.js';
+export const cloneElementWithRef = (children, getProps)=>{
+    if (!children) return null;
+    if (!React.isValidElement(children)) return children;
+    let props = getProps(children);
+    let ref = mergeRefs(...[
+        'ref' in children ? children.ref : null,
+        'ref' in props ? props.ref : null
+    ].filter(Boolean));
+    return React.cloneElement(children, {
+        ...props,
+        ref
+    });
+};

package/DEV-esm/utils/functions/supports.js

@@ -0,0 +1,2 @@
+import { getWindow } from './dom.js';
+export const supportsHas = ()=>getWindow()?.CSS?.supports?.('selector(:has(+ *))');

package/DEV-esm/utils/hooks/index.js

@@ -0,0 +1,16 @@
+export * from './useEventListener.js';
+export * from './useMergedRefs.js';
+export * from './useOverflow.js';
+export * from './useResizeObserver.js';
+export * from './useContainerWidth.js';
+export * from './useGlobals.js';
+export * from './useIntersection.js';
+export * from './useMediaQuery.js';
+export * from './useSafeContext.js';
+export * from './useLatestRef.js';
+export * from './useIsomorphicLayoutEffect.js';
+export * from './useIsClient.js';
+export * from './useId.js';
+export * from './useControlledState.js';
+export * from './useSyncExternalStore.js';
+export * from './useVirtualScroll.js';

package/DEV-esm/utils/hooks/useContainerWidth.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useMergedRefs } from './useMergedRefs.js';
+import { useResizeObserver } from './useResizeObserver.js';
+export const useContainerWidth = (watchResizes = true)=>{
+    let [contentWidth, setContentWidth] = React.useState(0);
+    let ref = React.useCallback((element)=>{
+        if (!element) return;
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    let updateWidth = React.useCallback(({ width })=>setContentWidth(width), []);
+    let [resizeRef, resizeObserver] = useResizeObserver(updateWidth);
+    if (!watchResizes) resizeObserver?.disconnect();
+    let refs = useMergedRefs(ref, watchResizes ? resizeRef : void 0);
+    return [
+        refs,
+        contentWidth
+    ];
+};

package/DEV-esm/utils/hooks/useControlledState.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export const useControlledState = (initialValue, controlledState, setControlledState)=>{
+    let [uncontrolledState, setUncontrolledState] = React.useState(initialValue);
+    let state = React.useMemo(()=>void 0 !== controlledState ? controlledState : uncontrolledState, [
+        controlledState,
+        uncontrolledState
+    ]);
+    let setState = React.useCallback((value)=>{
+        setUncontrolledState(value);
+        setControlledState?.(value);
+    }, [
+        setControlledState,
+        setUncontrolledState
+    ]);
+    return [
+        state,
+        setState
+    ];
+};