@wix/site-ui 1.30.0 → 1.32.0

package/dist/8758.js

@@ -0,0 +1,43 @@
+import { isElement, isHTMLElement } from "./3829.js";
+import { contains } from "./4549.js";
+import { TYPEABLE_SELECTOR, FOCUSABLE_ATTRIBUTE } from "./4745.js";
+import { isJSDOM } from "./8971.js";
+function isTargetInsideEnabledTrigger(target, triggerElements) {
+    if (!isElement(target)) return false;
+    const targetElement = target;
+    if (triggerElements.hasElement(targetElement)) return !targetElement.hasAttribute('data-trigger-disabled');
+    for (const [, trigger] of triggerElements.entries())if (contains(trigger, targetElement)) return !trigger.hasAttribute('data-trigger-disabled');
+    return false;
+}
+function isEventTargetWithin(event, node) {
+    if (null == node) return false;
+    if ('composedPath' in event) return event.composedPath().includes(node);
+    const eventAgain = event;
+    return null != eventAgain.target && node.contains(eventAgain.target);
+}
+function isRootElement(element) {
+    return element.matches('html,body');
+}
+function isTypeableElement(element) {
+    return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+}
+function isInteractiveElement(element) {
+    return element?.closest(`button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`) != null;
+}
+function isTypeableCombobox(element) {
+    if (!element) return false;
+    return 'combobox' === element.getAttribute('role') && isTypeableElement(element);
+}
+function matchesFocusVisible(element) {
+    if (!element || isJSDOM) return true;
+    try {
+        return element.matches(':focus-visible');
+    } catch (_e) {
+        return true;
+    }
+}
+function getFloatingFocusElement(floatingElement) {
+    if (!floatingElement) return null;
+    return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) || floatingElement;
+}
+export { getFloatingFocusElement, isEventTargetWithin, isInteractiveElement, isRootElement, isTargetInsideEnabledTrigger, isTypeableCombobox, isTypeableElement, matchesFocusVisible };

package/dist/880.js

@@ -0,0 +1,149 @@
+import { useIsoLayoutEffect } from "./6499.js";
+import { AnimationFrame, useAnimationFrame } from "./8996.js";
+import { useStableCallback } from "./7541.js";
+import * as __rspack_external_react from "react";
+import * as __rspack_external_react_dom_7136dc57 from "react-dom";
+function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) {
+    const [transitionStatus, setTransitionStatus] = __rspack_external_react.useState(open && enableIdleState ? 'idle' : void 0);
+    const [mounted, setMounted] = __rspack_external_react.useState(open);
+    if (open && !mounted) {
+        setMounted(true);
+        setTransitionStatus('starting');
+    }
+    if (!open && mounted && 'ending' !== transitionStatus && !deferEndingState) setTransitionStatus('ending');
+    if (!open && !mounted && 'ending' === transitionStatus) setTransitionStatus(void 0);
+    useIsoLayoutEffect(()=>{
+        if (!open && mounted && 'ending' !== transitionStatus && deferEndingState) {
+            const frame = AnimationFrame.request(()=>{
+                setTransitionStatus('ending');
+            });
+            return ()=>{
+                AnimationFrame.cancel(frame);
+            };
+        }
+    }, [
+        open,
+        mounted,
+        transitionStatus,
+        deferEndingState
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (!open || enableIdleState) return;
+        const frame = AnimationFrame.request(()=>{
+            setTransitionStatus(void 0);
+        });
+        return ()=>{
+            AnimationFrame.cancel(frame);
+        };
+    }, [
+        enableIdleState,
+        open
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (!open || !enableIdleState) return;
+        if (open && mounted && 'idle' !== transitionStatus) setTransitionStatus('starting');
+        const frame = AnimationFrame.request(()=>{
+            setTransitionStatus('idle');
+        });
+        return ()=>{
+            AnimationFrame.cancel(frame);
+        };
+    }, [
+        enableIdleState,
+        open,
+        mounted,
+        transitionStatus
+    ]);
+    return {
+        mounted,
+        setMounted,
+        transitionStatus
+    };
+}
+let stateAttributesMapping_TransitionStatusDataAttributes = /*#__PURE__*/ function(TransitionStatusDataAttributes) {
+    TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
+    TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
+    return TransitionStatusDataAttributes;
+}({});
+const STARTING_HOOK = {
+    [stateAttributesMapping_TransitionStatusDataAttributes.startingStyle]: ''
+};
+const ENDING_HOOK = {
+    [stateAttributesMapping_TransitionStatusDataAttributes.endingStyle]: ''
+};
+const transitionStatusMapping = {
+    transitionStatus (value) {
+        if ('starting' === value) return STARTING_HOOK;
+        if ('ending' === value) return ENDING_HOOK;
+        return null;
+    }
+};
+function resolveRef(maybeRef) {
+    if (null == maybeRef) return maybeRef;
+    return 'current' in maybeRef ? maybeRef.current : maybeRef;
+}
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
+    const frame = useAnimationFrame();
+    return useStableCallback((fnToExecute, signal = null)=>{
+        frame.cancel();
+        const element = resolveRef(elementOrRef);
+        if (null == element) return;
+        const resolvedElement = element;
+        const done = ()=>{
+            __rspack_external_react_dom_7136dc57.flushSync(fnToExecute);
+        };
+        if ('function' != typeof resolvedElement.getAnimations || globalThis.BASE_UI_ANIMATIONS_DISABLED) return void fnToExecute();
+        function exec() {
+            Promise.all(resolvedElement.getAnimations().map((animation)=>animation.finished)).then(()=>{
+                if (!signal?.aborted) done();
+            }).catch(()=>{
+                if (treatAbortedAsFinished) {
+                    if (!signal?.aborted) done();
+                    return;
+                }
+                const currentAnimations = resolvedElement.getAnimations();
+                if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some((animation)=>animation.pending || 'finished' !== animation.playState)) exec();
+            });
+        }
+        if (waitForStartingStyleRemoved) {
+            const startingStyleAttribute = stateAttributesMapping_TransitionStatusDataAttributes.startingStyle;
+            if (!resolvedElement.hasAttribute(startingStyleAttribute)) return void frame.request(exec);
+            const attributeObserver = new MutationObserver(()=>{
+                if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+                    attributeObserver.disconnect();
+                    exec();
+                }
+            });
+            attributeObserver.observe(resolvedElement, {
+                attributes: true,
+                attributeFilter: [
+                    startingStyleAttribute
+                ]
+            });
+            signal?.addEventListener('abort', ()=>attributeObserver.disconnect(), {
+                once: true
+            });
+            return;
+        }
+        frame.request(exec);
+    });
+}
+function useOpenChangeComplete(parameters) {
+    const { enabled = true, open, ref, onComplete: onCompleteParam } = parameters;
+    const onComplete = useStableCallback(onCompleteParam);
+    const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
+    __rspack_external_react.useEffect(()=>{
+        if (!enabled) return;
+        const abortController = new AbortController();
+        runOnceAnimationsFinish(onComplete, abortController.signal);
+        return ()=>{
+            abortController.abort();
+        };
+    }, [
+        enabled,
+        open,
+        onComplete,
+        runOnceAnimationsFinish
+    ]);
+}
+export { resolveRef, stateAttributesMapping_TransitionStatusDataAttributes, transitionStatusMapping, useAnimationsFinished, useOpenChangeComplete, useTransitionStatus };

package/dist/8935.js

@@ -0,0 +1,8 @@
+import * as __rspack_external_react from "react";
+function useForcedRerendering() {
+    const [, setState] = __rspack_external_react.useState({});
+    return __rspack_external_react.useCallback(()=>{
+        setState({});
+    }, []);
+}
+export { useForcedRerendering };

package/dist/8960.js

@@ -0,0 +1,22 @@
+import { jsxs } from "react/jsx-runtime";
+import { useFloatingPortalNode } from "./4388.js";
+import * as __rspack_external_react from "react";
+import * as __rspack_external_react_dom_7136dc57 from "react-dom";
+const FloatingPortalLite_FloatingPortalLite = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { children, container, className, render, style, ...elementProps } = componentProps;
+    const { portalNode, portalSubtree } = useFloatingPortalNode({
+        container,
+        ref: forwardedRef,
+        componentProps,
+        elementProps
+    });
+    if (!portalSubtree && !portalNode) return null;
+    return /*#__PURE__*/ jsxs(__rspack_external_react.Fragment, {
+        children: [
+            portalSubtree,
+            portalNode && /*#__PURE__*/ __rspack_external_react_dom_7136dc57.createPortal(children, portalNode)
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) FloatingPortalLite_FloatingPortalLite.displayName = "FloatingPortalLite";
+export { FloatingPortalLite_FloatingPortalLite };

package/dist/8971.js

@@ -0,0 +1,40 @@
+const hasNavigator = "u" > typeof navigator;
+const nav = getNavigatorData();
+const platform = getPlatform();
+const userAgent = getUserAgent();
+const isWebKit = "u" > typeof CSS && CSS.supports ? CSS.supports('-webkit-backdrop-filter:none') : false;
+const isIOS = 'MacIntel' === nav.platform && nav.maxTouchPoints > 1 ? true : /iP(hone|ad|od)|iOS/.test(nav.platform);
+const isFirefox = hasNavigator && /firefox/i.test(userAgent);
+const isSafari = hasNavigator && /apple/i.test(navigator.vendor);
+hasNavigator && /Edg/i.test(userAgent);
+const isAndroid = hasNavigator && /android/i.test(platform) || /android/i.test(userAgent);
+const isMac = hasNavigator && platform.toLowerCase().startsWith('mac') && !navigator.maxTouchPoints;
+const isJSDOM = userAgent.includes('jsdom/');
+function getNavigatorData() {
+    if (!hasNavigator) return {
+        platform: '',
+        maxTouchPoints: -1
+    };
+    const uaData = navigator.userAgentData;
+    if (uaData?.platform) return {
+        platform: uaData.platform,
+        maxTouchPoints: navigator.maxTouchPoints
+    };
+    return {
+        platform: navigator.platform ?? '',
+        maxTouchPoints: navigator.maxTouchPoints ?? -1
+    };
+}
+function getUserAgent() {
+    if (!hasNavigator) return '';
+    const uaData = navigator.userAgentData;
+    if (uaData && Array.isArray(uaData.brands)) return uaData.brands.map(({ brand, version })=>`${brand}/${version}`).join(' ');
+    return navigator.userAgent;
+}
+function getPlatform() {
+    if (!hasNavigator) return '';
+    const uaData = navigator.userAgentData;
+    if (uaData?.platform) return uaData.platform;
+    return navigator.platform ?? '';
+}
+export { isAndroid, isFirefox, isIOS, isJSDOM, isMac, isSafari, isWebKit };

package/dist/8979.js

@@ -0,0 +1,10 @@
+import { esm_formatErrorMessage } from "./8272.js";
+import * as __rspack_external_react from "react";
+const CheckboxGroupContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) CheckboxGroupContext.displayName = "CheckboxGroupContext";
+function useCheckboxGroupContext(optional = true) {
+    const context = __rspack_external_react.useContext(CheckboxGroupContext);
+    if (void 0 === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: CheckboxGroupContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup>.' : esm_formatErrorMessage(3));
+    return context;
+}
+export { CheckboxGroupContext, useCheckboxGroupContext };

package/dist/8996.js

@@ -0,0 +1,71 @@
+import { useRefWithInit } from "./8272.js";
+import { useOnMount } from "./2861.js";
+const EMPTY = null;
+let LAST_RAF = globalThis.requestAnimationFrame;
+class Scheduler {
+    callbacks = [];
+    callbacksCount = 0;
+    nextId = 1;
+    startId = 1;
+    isScheduled = false;
+    tick = (timestamp)=>{
+        this.isScheduled = false;
+        const currentCallbacks = this.callbacks;
+        const currentCallbacksCount = this.callbacksCount;
+        this.callbacks = [];
+        this.callbacksCount = 0;
+        this.startId = this.nextId;
+        if (currentCallbacksCount > 0) for(let i = 0; i < currentCallbacks.length; i += 1)currentCallbacks[i]?.(timestamp);
+    };
+    request(fn) {
+        const id = this.nextId;
+        this.nextId += 1;
+        this.callbacks.push(fn);
+        this.callbacksCount += 1;
+        const didRAFChange = 'production' !== process.env.NODE_ENV && LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
+        if (!this.isScheduled || didRAFChange) {
+            requestAnimationFrame(this.tick);
+            this.isScheduled = true;
+        }
+        return id;
+    }
+    cancel(id) {
+        const index = id - this.startId;
+        if (index < 0 || index >= this.callbacks.length) return;
+        this.callbacks[index] = null;
+        this.callbacksCount -= 1;
+    }
+}
+const scheduler = new Scheduler();
+class AnimationFrame {
+    static create() {
+        return new AnimationFrame();
+    }
+    static request(fn) {
+        return scheduler.request(fn);
+    }
+    static cancel(id) {
+        return scheduler.cancel(id);
+    }
+    currentId = EMPTY;
+    request(fn) {
+        this.cancel();
+        this.currentId = scheduler.request(()=>{
+            this.currentId = EMPTY;
+            fn();
+        });
+    }
+    cancel = ()=>{
+        if (this.currentId !== EMPTY) {
+            scheduler.cancel(this.currentId);
+            this.currentId = EMPTY;
+        }
+    };
+    disposeEffect = ()=>this.cancel;
+}
+function useAnimationFrame() {
+    const timeout = useRefWithInit(AnimationFrame.create).current;
+    useOnMount(timeout.disposeEffect);
+    return timeout;
+}
+export { AnimationFrame, useAnimationFrame };

package/dist/904.js

@@ -0,0 +1,121 @@
+import { isMac, isSafari } from "./8971.js";
+import { useTimeout } from "./42.js";
+import { getWindow, isHTMLElement, isElement } from "./3829.js";
+import { getTarget, contains, activeElement } from "./4549.js";
+import { ownerDocument } from "./9829.js";
+import { mergeCleanups } from "./4495.js";
+import { addEventListener } from "./4723.js";
+import { triggerPress, triggerFocus, escapeKey } from "./2418.js";
+import { matchesFocusVisible, isTypeableElement, isTargetInsideEnabledTrigger } from "./8758.js";
+import { createChangeEventDetails } from "./4768.js";
+import { createAttribute } from "./5992.js";
+import * as __rspack_external_react from "react";
+const isMacSafari = isMac && isSafari;
+function useFocus(context, props = {}) {
+    const { enabled = true, delay } = props;
+    const store = 'rootStore' in context ? context.rootStore : context;
+    const { events, dataRef } = store.context;
+    const blockFocusRef = __rspack_external_react.useRef(false);
+    const blockedReferenceRef = __rspack_external_react.useRef(null);
+    const keyboardModalityRef = __rspack_external_react.useRef(true);
+    const timeout = useTimeout();
+    __rspack_external_react.useEffect(()=>{
+        const domReference = store.select('domReferenceElement');
+        if (!enabled) return;
+        const win = getWindow(domReference);
+        function onBlur() {
+            const currentDomReference = store.select('domReferenceElement');
+            if (!store.select('open') && isHTMLElement(currentDomReference) && currentDomReference === activeElement(ownerDocument(currentDomReference))) blockFocusRef.current = true;
+        }
+        function onKeyDown() {
+            keyboardModalityRef.current = true;
+        }
+        function onPointerDown() {
+            keyboardModalityRef.current = false;
+        }
+        return mergeCleanups(addEventListener(win, 'blur', onBlur), isMacSafari && addEventListener(win, 'keydown', onKeyDown, true), isMacSafari && addEventListener(win, 'pointerdown', onPointerDown, true));
+    }, [
+        store,
+        enabled
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        if (!enabled) return;
+        function onOpenChangeLocal(details) {
+            if (details.reason === triggerPress || details.reason === escapeKey) {
+                const referenceElement = store.select('domReferenceElement');
+                if (isElement(referenceElement)) {
+                    blockedReferenceRef.current = referenceElement;
+                    blockFocusRef.current = true;
+                }
+            }
+        }
+        events.on('openchange', onOpenChangeLocal);
+        return ()=>{
+            events.off('openchange', onOpenChangeLocal);
+        };
+    }, [
+        events,
+        enabled,
+        store
+    ]);
+    const reference = __rspack_external_react.useMemo(()=>{
+        function resetBlockedFocus() {
+            blockFocusRef.current = false;
+            blockedReferenceRef.current = null;
+        }
+        return {
+            onMouseLeave () {
+                resetBlockedFocus();
+            },
+            onFocus (event) {
+                const focusTarget = event.currentTarget;
+                if (blockFocusRef.current) {
+                    if (blockedReferenceRef.current === focusTarget) return;
+                    resetBlockedFocus();
+                }
+                const target = getTarget(event.nativeEvent);
+                if (isElement(target)) {
+                    if (isMacSafari && !event.relatedTarget) {
+                        if (!keyboardModalityRef.current && !isTypeableElement(target)) return;
+                    } else if (!matchesFocusVisible(target)) return;
+                }
+                const movedFromOtherEnabledTrigger = isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
+                const { nativeEvent, currentTarget } = event;
+                const delayValue = 'function' == typeof delay ? delay() : delay;
+                if (store.select('open') && movedFromOtherEnabledTrigger || 0 === delayValue || void 0 === delayValue) return void store.setOpen(true, createChangeEventDetails(triggerFocus, nativeEvent, currentTarget));
+                timeout.start(delayValue, ()=>{
+                    if (blockFocusRef.current) return;
+                    store.setOpen(true, createChangeEventDetails(triggerFocus, nativeEvent, currentTarget));
+                });
+            },
+            onBlur (event) {
+                resetBlockedFocus();
+                const relatedTarget = event.relatedTarget;
+                const nativeEvent = event.nativeEvent;
+                const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && 'outside' === relatedTarget.getAttribute('data-type');
+                timeout.start(0, ()=>{
+                    const domReference = store.select('domReferenceElement');
+                    const activeEl = activeElement(ownerDocument(domReference));
+                    if (!relatedTarget && activeEl === domReference) return;
+                    if (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || contains(domReference, activeEl) || movedToFocusGuard) return;
+                    const nextFocusedElement = relatedTarget ?? activeEl;
+                    if (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) return;
+                    store.setOpen(false, createChangeEventDetails(triggerFocus, nativeEvent));
+                });
+            }
+        };
+    }, [
+        dataRef,
+        delay,
+        store,
+        timeout
+    ]);
+    return __rspack_external_react.useMemo(()=>enabled ? {
+            reference,
+            trigger: reference
+        } : {}, [
+        enabled,
+        reference
+    ]);
+}
+export { useFocus };

package/dist/9048.js

@@ -0,0 +1,52 @@
+import { useLabelableContext } from "./1477.js";
+import { useBaseUiId } from "./6046.js";
+import { useRefWithInit, NOOP } from "./8272.js";
+import { useStableCallback } from "./7541.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import { isElement } from "./3829.js";
+import * as __rspack_external_react from "react";
+function useLabelableId(params = {}) {
+    const { id, implicit = false, controlRef } = params;
+    const { controlId, registerControlId } = useLabelableContext();
+    const defaultId = useBaseUiId(id);
+    const controlIdForEffect = implicit ? controlId : void 0;
+    const controlSourceRef = useRefWithInit(()=>Symbol('labelable-control'));
+    const hasRegisteredRef = __rspack_external_react.useRef(false);
+    const hadExplicitIdRef = __rspack_external_react.useRef(null != id);
+    const unregisterControlId = useStableCallback(()=>{
+        if (!hasRegisteredRef.current || registerControlId === NOOP) return;
+        hasRegisteredRef.current = false;
+        registerControlId(controlSourceRef.current, void 0);
+    });
+    useIsoLayoutEffect(()=>{
+        if (registerControlId === NOOP) return;
+        let nextId;
+        if (implicit) {
+            const elem = controlRef?.current;
+            nextId = isElement(elem) && null != elem.closest('label') ? id ?? null : controlIdForEffect ?? defaultId;
+        } else if (null != id) {
+            hadExplicitIdRef.current = true;
+            nextId = id;
+        } else {
+            if (!hadExplicitIdRef.current) return void unregisterControlId();
+            nextId = defaultId;
+        }
+        if (void 0 === nextId) return void unregisterControlId();
+        hasRegisteredRef.current = true;
+        registerControlId(controlSourceRef.current, nextId);
+    }, [
+        id,
+        controlRef,
+        controlIdForEffect,
+        registerControlId,
+        implicit,
+        defaultId,
+        controlSourceRef,
+        unregisterControlId
+    ]);
+    __rspack_external_react.useEffect(()=>unregisterControlId, [
+        unregisterControlId
+    ]);
+    return controlId ?? defaultId;
+}
+export { useLabelableId };