@wix/site-ui 1.30.0 → 1.31.0

package/dist/6588.js

@@ -0,0 +1,382 @@
+import { jsx as jsx_runtime_jsx } from "react/jsx-runtime";
+import { EMPTY_OBJECT, useRenderElement, esm_formatErrorMessage } from "./8272.js";
+import { getEmptyRootContext } from "./4922.js";
+import { useHoverFloatingInteraction } from "./3056.js";
+import { getNodeChildren, useDismiss } from "./5992.js";
+import { getTarget, contains, activeElement } from "./4549.js";
+import { CompositeRoot } from "./9087.js";
+import { useBaseUiId } from "./6046.js";
+import { useFloatingParentNodeId, FloatingTree, FloatingNode, useFloatingTree, useFloatingNodeId } from "./285.js";
+import { createChangeEventDetails } from "./4768.js";
+import { focusOut, outsidePress, triggerHover, linkPress } from "./2418.js";
+import { CompositeItem } from "./951.js";
+import { getCssDimensions } from "./7642.js";
+import { useControlled } from "./8527.js";
+import { useOpenChangeComplete, useTransitionStatus } from "./880.js";
+import { useStableCallback } from "./7541.js";
+import { ownerDocument } from "./9829.js";
+import { isHTMLElement } from "./3829.js";
+import * as __rspack_external_react from "react";
+const NavigationMenuRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) NavigationMenuRootContext.displayName = "NavigationMenuRootContext";
+if ('production' !== process.env.NODE_ENV) NavigationMenuRootContext.displayName = 'NavigationMenuRootContext';
+function useNavigationMenuRootContext(optional) {
+    const context = __rspack_external_react.useContext(NavigationMenuRootContext);
+    if (void 0 === context && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: NavigationMenuRootContext is missing. Navigation Menu parts must be placed within <NavigationMenu.Root>.' : esm_formatErrorMessage(41));
+    return context;
+}
+const NavigationMenuTreeContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) NavigationMenuTreeContext.displayName = "NavigationMenuTreeContext";
+function useNavigationMenuTreeContext() {
+    return __rspack_external_react.useContext(NavigationMenuTreeContext);
+}
+const NAVIGATION_MENU_TRIGGER_IDENTIFIER = 'data-base-ui-navigation-menu-trigger';
+const NavigationMenuDismissContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) NavigationMenuDismissContext.displayName = "NavigationMenuDismissContext";
+function useNavigationMenuDismissContext() {
+    return __rspack_external_react.useContext(NavigationMenuDismissContext);
+}
+const NavigationMenuList_NavigationMenuList = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const nodeId = useNavigationMenuTreeContext();
+    const { orientation, open, floatingRootContext, positionerElement, value, closeDelay, viewportElement, nested } = useNavigationMenuRootContext();
+    const fallbackContext = __rspack_external_react.useMemo(()=>getEmptyRootContext(), []);
+    const context = floatingRootContext || fallbackContext;
+    const interactionsEnabled = positionerElement ? true : !value;
+    const hoverInteractionsEnabled = positionerElement || viewportElement ? true : !value;
+    useHoverFloatingInteraction(context, {
+        enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
+        closeDelay,
+        nodeId
+    });
+    const dismiss = useDismiss(context, {
+        enabled: interactionsEnabled,
+        outsidePressEvent: 'intentional',
+        outsidePress (event) {
+            const target = getTarget(event);
+            const closestNavigationMenuTrigger = target?.closest(`[${NAVIGATION_MENU_TRIGGER_IDENTIFIER}]`);
+            return null === closestNavigationMenuTrigger;
+        }
+    });
+    const dismissProps = floatingRootContext ? dismiss : void 0;
+    const state = {
+        open
+    };
+    const defaultProps = nested ? EMPTY_OBJECT : {
+        onKeyDown (event) {
+            const shouldStop = 'horizontal' === orientation && ('ArrowLeft' === event.key || 'ArrowRight' === event.key) || 'vertical' === orientation && ('ArrowUp' === event.key || 'ArrowDown' === event.key);
+            if (shouldStop) event.stopPropagation();
+        }
+    };
+    const props = [
+        dismissProps?.floating || EMPTY_OBJECT,
+        defaultProps,
+        {
+            'aria-orientation': void 0
+        },
+        elementProps
+    ];
+    const element = useRenderElement('ul', componentProps, {
+        state,
+        ref: forwardedRef,
+        props,
+        enabled: nested
+    });
+    if (nested) return /*#__PURE__*/ jsx_runtime_jsx(NavigationMenuDismissContext.Provider, {
+        value: dismissProps,
+        children: element
+    });
+    return /*#__PURE__*/ jsx_runtime_jsx(NavigationMenuDismissContext.Provider, {
+        value: dismissProps,
+        children: /*#__PURE__*/ jsx_runtime_jsx(CompositeRoot, {
+            render: render,
+            className: className,
+            style: style,
+            state: state,
+            refs: [
+                forwardedRef
+            ],
+            props: props,
+            loopFocus: false,
+            orientation: orientation,
+            tag: "ul"
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) NavigationMenuList_NavigationMenuList.displayName = "NavigationMenuList";
+const NavigationMenuItemContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) NavigationMenuItemContext.displayName = "NavigationMenuItemContext";
+function useNavigationMenuItemContext() {
+    const value = __rspack_external_react.useContext(NavigationMenuItemContext);
+    if (!value) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: NavigationMenuItem parts must be used within a <NavigationMenu.Item>.' : esm_formatErrorMessage(39));
+    return value;
+}
+const NavigationMenuItem_NavigationMenuItem = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, value: valueProp, ...elementProps } = componentProps;
+    const fallbackValue = useBaseUiId();
+    const value = valueProp ?? fallbackValue;
+    const element = useRenderElement('li', componentProps, {
+        ref: forwardedRef,
+        props: elementProps
+    });
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            value
+        }), [
+        value
+    ]);
+    return /*#__PURE__*/ jsx_runtime_jsx(NavigationMenuItemContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) NavigationMenuItem_NavigationMenuItem.displayName = "NavigationMenuItem";
+function isOutsideMenuEvent({ currentTarget, relatedTarget }, params) {
+    const { popupElement, rootRef, tree, nodeId } = params;
+    const nodeChildrenContains = tree ? getNodeChildren(tree.nodesRef.current, nodeId).some((node)=>contains(node.context?.elements.floating, relatedTarget)) : [];
+    if (!popupElement) return !contains(rootRef.current, relatedTarget) && !nodeChildrenContains;
+    return !contains(popupElement, currentTarget) && !contains(popupElement, relatedTarget) && !contains(rootRef.current, relatedTarget) && !nodeChildrenContains && !(contains(popupElement, relatedTarget) && relatedTarget?.hasAttribute('data-base-ui-focus-guard'));
+}
+const NavigationMenuLink_NavigationMenuLink = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, active = false, closeOnClick = false, style, ...elementProps } = componentProps;
+    const { setValue, popupElement, positionerElement, rootRef } = useNavigationMenuRootContext();
+    const nodeId = useNavigationMenuTreeContext();
+    const tree = useFloatingTree();
+    const state = {
+        active
+    };
+    const defaultProps = {
+        'aria-current': active ? 'page' : void 0,
+        tabIndex: void 0,
+        onClick (event) {
+            if (closeOnClick) setValue(null, createChangeEventDetails(linkPress, event.nativeEvent));
+        },
+        onBlur (event) {
+            if (positionerElement && popupElement && isOutsideMenuEvent({
+                currentTarget: event.currentTarget,
+                relatedTarget: event.relatedTarget
+            }, {
+                popupElement,
+                rootRef,
+                tree,
+                nodeId
+            })) setValue(null, createChangeEventDetails(focusOut, event.nativeEvent));
+        }
+    };
+    return /*#__PURE__*/ jsx_runtime_jsx(CompositeItem, {
+        tag: "a",
+        render: render,
+        className: className,
+        style: style,
+        state: state,
+        refs: [
+            forwardedRef
+        ],
+        props: [
+            defaultProps,
+            elementProps
+        ]
+    });
+});
+if ("production" !== process.env.NODE_ENV) NavigationMenuLink_NavigationMenuLink.displayName = "NavigationMenuLink";
+let NavigationMenuPopupCssVars_NavigationMenuPopupCssVars = /*#__PURE__*/ function(NavigationMenuPopupCssVars) {
+    NavigationMenuPopupCssVars["popupWidth"] = "--popup-width";
+    NavigationMenuPopupCssVars["popupHeight"] = "--popup-height";
+    return NavigationMenuPopupCssVars;
+}({});
+let NavigationMenuPositionerCssVars_NavigationMenuPositionerCssVars = /*#__PURE__*/ function(NavigationMenuPositionerCssVars) {
+    NavigationMenuPositionerCssVars["availableWidth"] = "--available-width";
+    NavigationMenuPositionerCssVars["availableHeight"] = "--available-height";
+    NavigationMenuPositionerCssVars["anchorWidth"] = "--anchor-width";
+    NavigationMenuPositionerCssVars["anchorHeight"] = "--anchor-height";
+    NavigationMenuPositionerCssVars["transformOrigin"] = "--transform-origin";
+    NavigationMenuPositionerCssVars["positionerWidth"] = "--positioner-width";
+    NavigationMenuPositionerCssVars["positionerHeight"] = "--positioner-height";
+    return NavigationMenuPositionerCssVars;
+}({});
+const blockedReturnFocusReasons = new Set([
+    triggerHover,
+    outsidePress,
+    focusOut
+]);
+function setSharedFixedSize(popupElement, positionerElement) {
+    const { width, height } = getCssDimensions(popupElement);
+    if (0 === width || 0 === height) return;
+    popupElement.style.setProperty(NavigationMenuPopupCssVars_NavigationMenuPopupCssVars.popupWidth, `${width}px`);
+    popupElement.style.setProperty(NavigationMenuPopupCssVars_NavigationMenuPopupCssVars.popupHeight, `${height}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars_NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars_NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+}
+const NavigationMenuRoot_NavigationMenuRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { defaultValue = null, value: valueParam, onValueChange, actionsRef, delay = 50, closeDelay = 50, orientation = 'horizontal', onOpenChangeComplete } = componentProps;
+    const nested = null != useFloatingParentNodeId();
+    const parentRootContext = useNavigationMenuRootContext(true);
+    const [value, setValueUnwrapped] = useControlled({
+        controlled: valueParam,
+        default: defaultValue,
+        name: 'NavigationMenu',
+        state: 'value'
+    });
+    const open = null != value;
+    const closeReasonRef = __rspack_external_react.useRef(void 0);
+    const rootRef = __rspack_external_react.useRef(null);
+    const [positionerElement, setPositionerElement] = __rspack_external_react.useState(null);
+    const [popupElement, setPopupElement] = __rspack_external_react.useState(null);
+    const [viewportElement, setViewportElement] = __rspack_external_react.useState(null);
+    const [viewportTargetElement, setViewportTargetElement] = __rspack_external_react.useState(null);
+    const [activationDirection, setActivationDirection] = __rspack_external_react.useState(null);
+    const [floatingRootContext, setFloatingRootContext] = __rspack_external_react.useState(void 0);
+    const [viewportInert, setViewportInert] = __rspack_external_react.useState(false);
+    const prevTriggerElementRef = __rspack_external_react.useRef(null);
+    const currentContentRef = __rspack_external_react.useRef(null);
+    const beforeInsideRef = __rspack_external_react.useRef(null);
+    const afterInsideRef = __rspack_external_react.useRef(null);
+    const beforeOutsideRef = __rspack_external_react.useRef(null);
+    const afterOutsideRef = __rspack_external_react.useRef(null);
+    const popupAutoSizeResetRef = __rspack_external_react.useRef({
+        abortController: null,
+        owner: null
+    });
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+    __rspack_external_react.useEffect(()=>{
+        setViewportInert(false);
+    }, [
+        value
+    ]);
+    const setValue = useStableCallback((nextValue, eventDetails)=>{
+        if (!nextValue) {
+            closeReasonRef.current = eventDetails.reason;
+            setActivationDirection(null);
+            setFloatingRootContext(void 0);
+            if (positionerElement && popupElement) setSharedFixedSize(popupElement, positionerElement);
+        }
+        if (nextValue !== value) onValueChange?.(nextValue, eventDetails);
+        if (eventDetails.isCanceled) return;
+        setValueUnwrapped(nextValue);
+        if (nested && !nextValue && eventDetails.reason === linkPress && parentRootContext) parentRootContext.setValue(null, eventDetails);
+    });
+    const handleUnmount = useStableCallback(()=>{
+        const doc = ownerDocument(rootRef.current);
+        const activeEl = activeElement(doc);
+        const isReturnFocusBlocked = closeReasonRef.current ? blockedReturnFocusReasons.has(closeReasonRef.current) : false;
+        if (!isReturnFocusBlocked && isHTMLElement(prevTriggerElementRef.current) && (activeEl === ownerDocument(popupElement).body || contains(popupElement, activeEl)) && popupElement) {
+            prevTriggerElementRef.current.focus({
+                preventScroll: true
+            });
+            prevTriggerElementRef.current = void 0;
+        }
+        setMounted(false);
+        onOpenChangeComplete?.(false);
+        setActivationDirection(null);
+        setFloatingRootContext(void 0);
+        currentContentRef.current = null;
+        closeReasonRef.current = void 0;
+    });
+    useOpenChangeComplete({
+        enabled: !actionsRef,
+        open,
+        ref: {
+            current: popupElement
+        },
+        onComplete () {
+            if (!open) handleUnmount();
+        }
+    });
+    useOpenChangeComplete({
+        enabled: !actionsRef,
+        open,
+        ref: {
+            current: viewportTargetElement
+        },
+        onComplete () {
+            if (!open) handleUnmount();
+        }
+    });
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            open,
+            value,
+            setValue,
+            mounted,
+            transitionStatus,
+            positionerElement,
+            setPositionerElement,
+            popupElement,
+            setPopupElement,
+            viewportElement,
+            setViewportElement,
+            viewportTargetElement,
+            setViewportTargetElement,
+            activationDirection,
+            setActivationDirection,
+            floatingRootContext,
+            setFloatingRootContext,
+            currentContentRef,
+            nested,
+            rootRef,
+            beforeInsideRef,
+            afterInsideRef,
+            beforeOutsideRef,
+            afterOutsideRef,
+            prevTriggerElementRef,
+            popupAutoSizeResetRef,
+            delay,
+            closeDelay,
+            orientation,
+            viewportInert,
+            setViewportInert
+        }), [
+        open,
+        value,
+        setValue,
+        mounted,
+        transitionStatus,
+        positionerElement,
+        popupElement,
+        viewportElement,
+        viewportTargetElement,
+        activationDirection,
+        floatingRootContext,
+        nested,
+        delay,
+        closeDelay,
+        orientation,
+        viewportInert
+    ]);
+    const jsx = /*#__PURE__*/ jsx_runtime_jsx(NavigationMenuRootContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx_runtime_jsx(TreeContext, {
+            componentProps: componentProps,
+            forwardedRef: forwardedRef,
+            children: componentProps.children
+        })
+    });
+    if (!nested) return /*#__PURE__*/ jsx_runtime_jsx(FloatingTree, {
+        children: jsx
+    });
+    return jsx;
+});
+if ("production" !== process.env.NODE_ENV) NavigationMenuRoot_NavigationMenuRoot.displayName = "NavigationMenuRoot";
+function TreeContext(props) {
+    const { className, render, defaultValue, value: valueParam, onValueChange, actionsRef, delay, closeDelay, orientation, onOpenChangeComplete, style, ...elementProps } = props.componentProps;
+    const nodeId = useFloatingNodeId();
+    const { rootRef, nested, open } = useNavigationMenuRootContext();
+    const state = {
+        open,
+        nested
+    };
+    const element = useRenderElement(nested ? 'div' : 'nav', props.componentProps, {
+        state,
+        ref: [
+            props.forwardedRef,
+            rootRef
+        ],
+        props: elementProps
+    });
+    return /*#__PURE__*/ jsx_runtime_jsx(NavigationMenuTreeContext.Provider, {
+        value: nodeId,
+        children: /*#__PURE__*/ jsx_runtime_jsx(FloatingNode, {
+            id: nodeId,
+            children: element
+        })
+    });
+}
+export { NAVIGATION_MENU_TRIGGER_IDENTIFIER, NavigationMenuItem_NavigationMenuItem, NavigationMenuLink_NavigationMenuLink, NavigationMenuList_NavigationMenuList, NavigationMenuPopupCssVars_NavigationMenuPopupCssVars, NavigationMenuPositionerCssVars_NavigationMenuPositionerCssVars, NavigationMenuRoot_NavigationMenuRoot, isOutsideMenuEvent, useNavigationMenuDismissContext, useNavigationMenuItemContext, useNavigationMenuRootContext, useNavigationMenuTreeContext };

package/dist/6706.js

@@ -0,0 +1,16 @@
+import { useBaseUiId } from "./6046.js";
+import { useIsoLayoutEffect } from "./6499.js";
+function useRegisteredLabelId(idProp, setLabelId) {
+    const id = useBaseUiId(idProp);
+    useIsoLayoutEffect(()=>{
+        setLabelId(id);
+        return ()=>{
+            setLabelId(void 0);
+        };
+    }, [
+        id,
+        setLabelId
+    ]);
+    return id;
+}
+export { useRegisteredLabelId };

package/dist/6825.js

@@ -0,0 +1,7 @@
+function getDefaultLabelId(id) {
+    return null == id ? void 0 : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+    return fieldLabelId ?? localLabelId;
+}
+export { getDefaultLabelId, resolveAriaLabelledBy };