@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/utils/components/Portal.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Portal: function() {
+        return Portal;
+    },
+    portalContainerAtom: function() {
+        return portalContainerAtom;
+    },
+    usePortalTo: function() {
+        return usePortalTo;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _reactdom = _interop_require_wildcard._(require("react-dom"));
+const _useIsClient = require("../hooks/useIsClient.js");
+const _jotai = require("jotai");
+const _ScopeProvider = require("../providers/ScopeProvider.js");
+const portalContainerAtom = (0, _jotai.atom)(void 0);
+const Portal = (props)=>{
+    let { portal = true, children } = props;
+    let isClient = (0, _useIsClient.useIsClient)();
+    let portalTo = usePortalTo(portal);
+    if (!isClient) return null;
+    return portalTo ? _reactdom.createPortal(children, portalTo) : children;
+};
+const usePortalTo = (portal)=>{
+    let [portalContainer] = (0, _ScopeProvider.useScopedAtom)(portalContainerAtom);
+    if ('boolean' == typeof portal) return portal ? portalContainer : null;
+    let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
+    return portalTo ?? portalContainer;
+};

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

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Resizer", {
+    enumerable: true,
+    get: function() {
+        return Resizer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../functions/index.js");
+const Resizer = (props)=>_react.createElement("div", {
+        style: {
+            position: 'absolute',
+            inset: -6,
+            display: 'grid',
+            pointerEvents: 'none'
+        }
+    }, _react.createElement(ResizerStyles, null), _react.createElement(Resizers, props));
+const 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] = (0, _index.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 = (0, _index.getBoundedValue)(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
+            let clientY = (0, _index.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'
+        }
+    }));
+};
+const ResizerStyles = _react.memo(()=>_react.createElement("style", null, resizerStyles));
+const 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-cjs/utils/components/ShadowRoot.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ShadowRoot", {
+    enumerable: true,
+    get: function() {
+        return ShadowRoot;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _reactdom = _interop_require_wildcard._(require("react-dom"));
+const _index = require("../hooks/index.js");
+const _index1 = require("../providers/index.js");
+const isBrowser = 'undefined' != typeof document;
+const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
+const ShadowRoot = ({ children, css })=>{
+    let isHydrating = 'hydrating' === (0, _index1.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);
+};
+const 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 = (0, _index.useLatestRef)(css);
+    let latestShadowRoot = (0, _index.useLatestRef)(shadowRoot);
+    (0, _index.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
+    ]);
+    (0, _index.useLayoutEffect)(()=>{
+        if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
+    }, [
+        css
+    ]);
+    return shadowRoot;
+}

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithCSSTransition", {
+    enumerable: true,
+    get: function() {
+        return WithCSSTransition;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _reacttransitiongroup = require("react-transition-group");
+const _styles = require("../../styles.js");
+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(_reacttransitiongroup.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.styles['iui-enter'],
+            enterActive: _styles.styles['iui-enter-active'],
+            exit: _styles.styles['iui-exit'],
+            exitActive: _styles.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-cjs/utils/components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Resizer.js"), exports);
+_export_star._(require("./FocusTrap.js"), exports);
+_export_star._(require("./InputContainer.js"), exports);
+_export_star._(require("./InputFlexContainer.js"), exports);
+_export_star._(require("./InputWithIcon.js"), exports);
+_export_star._(require("./WithCSSTransition.js"), exports);
+_export_star._(require("./MiddleTextTruncation.js"), exports);
+_export_star._(require("./AutoclearingHiddenLiveRegion.js"), exports);
+_export_star._(require("./Box.js"), exports);
+_export_star._(require("./ButtonBase.js"), exports);
+_export_star._(require("./Portal.js"), exports);
+_export_star._(require("./ShadowRoot.js"), exports);
+_export_star._(require("./LineClamp.js"), exports);
+_export_star._(require("./FieldsetBase.js"), exports);

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SoftBackgrounds: function() {
+        return SoftBackgrounds;
+    },
+    getUserColor: function() {
+        return getUserColor;
+    },
+    isSoftBackground: function() {
+        return isSoftBackground;
+    }
+});
+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)'
+};
+const isSoftBackground = (value)=>Object.keys(SoftBackgrounds).includes(value);
+const USER_COLORS = Object.values(SoftBackgrounds);
+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-cjs/utils/functions/date.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "isBefore", {
+    enumerable: true,
+    get: function() {
+        return isBefore;
+    }
+});
+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-cjs/utils/functions/dev.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createWarningLogger: function() {
+        return createWarningLogger;
+    },
+    isUnitTest: function() {
+        return isUnitTest;
+    }
+});
+const isJest = 'undefined' != typeof jest;
+const isMocha = void 0 !== globalThis.beforeEach && 'function(name,fn){suites[0].beforeEach(name,fn);}' === `${globalThis.beforeEach}`.replace(/\s/g, '');
+const isVitest = void 0 !== globalThis.__vitest_index__;
+const isUnitTest = isJest || isVitest || isMocha;
+const createWarningLogger = isUnitTest ? ()=>()=>{} : ()=>{
+    let logged = false;
+    return (message)=>{
+        if (!logged) {
+            console.warn(message);
+            logged = true;
+        }
+    };
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getDocument: function() {
+        return getDocument;
+    },
+    getTranslateValues: function() {
+        return getTranslateValues;
+    },
+    getTranslateValuesFromElement: function() {
+        return getTranslateValuesFromElement;
+    },
+    getWindow: function() {
+        return getWindow;
+    },
+    mergeEventHandlers: function() {
+        return mergeEventHandlers;
+    }
+});
+const getDocument = ()=>'undefined' == typeof document ? void 0 : document;
+const getWindow = ()=>'undefined' == typeof window ? void 0 : window;
+const mergeEventHandlers = (...callbacks)=>(event)=>{
+        for (let cb of callbacks){
+            cb?.(event);
+            if (event?.defaultPrevented) return;
+        }
+    };
+const getTranslateValuesFromElement = (element)=>{
+    if (!element) return [];
+    let transformValue = getComputedStyle(element).getPropertyValue('transform');
+    return getTranslateValues(transformValue);
+};
+const getTranslateValues = (transformValue)=>{
+    let matrix = new DOMMatrix(transformValue);
+    return [
+        matrix.m41,
+        matrix.m42
+    ];
+};

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getFocusableElements: function() {
+        return getFocusableElements;
+    },
+    getTabbableElements: function() {
+        return getTabbableElements;
+    },
+    useFocusableElements: function() {
+        return useFocusableElements;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../hooks/index.js");
+const tabbableElementsSelector = 'a[href], button, input, textarea, select, details, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+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'));
+};
+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'));
+};
+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 = (0, _index.useLatestRef)(filterProp);
+    let returnValue = _react.useMemo(()=>({
+            focusableElementsRef,
+            focusableElements
+        }), [
+        focusableElementsRef,
+        focusableElements
+    ]);
+    return (0, _index.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-cjs/utils/functions/import.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "importCss", {
+    enumerable: true,
+    get: function() {
+        return importCss;
+    }
+});
+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-cjs/utils/functions/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./date.js"), exports);
+_export_star._(require("./dom.js"), exports);
+_export_star._(require("./colors.js"), exports);
+_export_star._(require("./numbers.js"), exports);
+_export_star._(require("./focusable.js"), exports);
+_export_star._(require("./supports.js"), exports);
+_export_star._(require("./polymorphic.js"), exports);
+_export_star._(require("./import.js"), exports);
+_export_star._(require("./react.js"), exports);
+_export_star._(require("./dev.js"), exports);