cetec-design-system 1.2.1 → 1.3.0-next.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { forwardRef, useMemo, createElement, createContext, useContext, useLayoutEffect, useState, useRef, useId as useId$1, useEffect, Children, isValidElement, cloneElement, useReducer, useSyncExternalStore, useCallback } from "react";
+import { forwardRef, useMemo, createElement, createContext, useContext, useLayoutEffect, useState, useRef, useId as useId$1, useEffect, Children, isValidElement, useCallback, cloneElement, useReducer, useSyncExternalStore } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import { b as breakpoints, c as containerSizes } from "./cetec-preset-D3bQHejk.js";
@@ -6087,6 +6087,44 @@ const arrow = (options, deps) => ({
   ...arrow$1(options),
   options: [options, deps]
 });
+function useMergeRefs(refs) {
+  const cleanupRef = React.useRef(void 0);
+  const refEffect = React.useCallback((instance) => {
+    const cleanups = refs.map((ref) => {
+      if (ref == null) {
+        return;
+      }
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup == null ? void 0 : refCleanup());
+    };
+  }, refs);
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (value) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
+    };
+  }, refs);
+}
 function sortByDocumentPosition(a2, b) {
   const position = a2.compareDocumentPosition(b);
   if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
@@ -15233,6 +15271,58 @@ const hasMatchingItems = (children, filterContext) => {
     return true;
   });
 };
+function useBlockPointerEventsForHoverPolygon() {
+  const [block, setBlock] = useState(false);
+  useLayoutEffect(() => {
+    const mq = window.matchMedia("(any-pointer: coarse)");
+    const apply = () => {
+      setBlock(!mq.matches);
+    };
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+  return block;
+}
+function findFirstEnabledListIndex(listRef) {
+  const items = listRef.current;
+  if (!(items == null ? void 0 : items.length)) {
+    return null;
+  }
+  for (let i = 0; i < items.length; i++) {
+    const el = items[i];
+    if (!el) {
+      continue;
+    }
+    if (el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true") {
+      continue;
+    }
+    return i;
+  }
+  return null;
+}
+function navigateListMainAxisLoop(listRef, direction, previousIndex) {
+  const items = listRef.current;
+  const len = items.length;
+  if (len === 0) {
+    return previousIndex ?? null;
+  }
+  const isDisabled = (index2) => {
+    const el = items[index2];
+    if (!el) {
+      return true;
+    }
+    return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
+  };
+  let current = previousIndex ?? 0;
+  for (let step = 0; step < len; step++) {
+    current = (current + direction + len) % len;
+    if (!isDisabled(current)) {
+      return current;
+    }
+  }
+  return previousIndex ?? null;
+}
 const defaultGetItemText = ({
   label: label2,
   description
@@ -15274,6 +15364,7 @@ const Menu = (props) => {
     renderNoResults,
     highlightMatches = Boolean(query),
     getItemText = defaultGetItemText,
+    onMenubarEdgeNavigate,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
@@ -15322,6 +15413,7 @@ const Menu = (props) => {
   const listRef = useRef([]);
   const labelsRef = useRef([]);
   const [activeIndex, setActiveIndex] = useState(null);
+  const blockPointerEventsForHoverPolygon = useBlockPointerEventsForHoverPolygon();
   const hover = useHover(floating.context, {
     enabled: hasReference && (triggerInteraction === "hover" || triggerInteraction === "click-and-hover"),
     delay: {
@@ -15329,7 +15421,7 @@ const Menu = (props) => {
       close: triggerCloseDelay
     },
     handleClose: safePolygon({
-      blockPointerEvents: true
+      blockPointerEvents: blockPointerEventsForHoverPolygon
     })
   });
   const click = useClick(floating.context, {
@@ -15395,11 +15487,19 @@ const Menu = (props) => {
     onPopDiginLevel: () => {
       setDiginLevels((prev) => prev.slice(0, -1));
     },
-    diginDepth
+    diginDepth,
+    onMenubarEdgeNavigate
   };
+  const navigateMainAxis = useCallback((direction) => {
+    setActiveIndex(
+      (prev) => navigateListMainAxisLoop(listRef, direction, prev)
+    );
+  }, []);
   const menuListContextValue = {
     activeIndex,
-    getItemProps: (userProps) => getItemProps(userProps)
+    getItemProps: (userProps) => getItemProps(userProps),
+    navigateMainAxis,
+    nestedMenuDepth: 0
   };
   const levels = [{ key: "root", title: "Menu", children }, ...diginLevels];
   const activeLevel = levels[Math.min(diginDepth, levels.length - 1)];
@@ -15579,17 +15679,65 @@ const Menu = (props) => {
     }
   ) }) });
   const shouldRenderInline = inline || !trigger;
+  const triggerRefProp = isValidElement(trigger) ? trigger.props.ref : void 0;
+  const mergedTriggerRef = useMergeRefs([
+    triggerRefProp,
+    floating.refs.setReference
+  ]);
   if (shouldRenderInline) {
     return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: content }) });
   }
+  const triggerExtract = isValidElement(trigger) && trigger.props ? (() => {
+    const {
+      ref: _r,
+      children: _ch,
+      onKeyDown: triggerOnKeyDownProp,
+      ...rest2
+    } = trigger.props;
+    return {
+      rest: rest2,
+      onKeyDown: triggerOnKeyDownProp
+    };
+  })() : {
+    rest: {},
+    onKeyDown: void 0
+  };
+  const triggerPropsForReference = triggerExtract.rest;
+  const triggerOnKeyDown = triggerExtract.onKeyDown;
+  const referencePropsFromFloating = getReferenceProps({
+    ...triggerPropsForReference,
+    ref: mergedTriggerRef
+  });
+  const composedTriggerOnKeyDown = (event) => {
+    if (isOpen && (event.key === "ArrowLeft" || event.key === "ArrowRight") && typeof triggerOnKeyDown === "function") {
+      triggerOnKeyDown(event);
+      return;
+    }
+    const refOnKeyDown = referencePropsFromFloating.onKeyDown;
+    if (typeof refOnKeyDown === "function") {
+      refOnKeyDown(event);
+    }
+    if (typeof triggerOnKeyDown === "function") {
+      triggerOnKeyDown(event);
+    }
+  };
   return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsxs(FloatingNode, { id: nodeId, children: [
     cloneElement(
       trigger,
-      getReferenceProps({
-        ref: floating.refs.setReference
-      })
+      {
+        ...referencePropsFromFloating,
+        onKeyDown: composedTriggerOnKeyDown
+      }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: floating.context, modal: false, children: content }) })
+    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+      FloatingFocusManager,
+      {
+        context: floating.context,
+        modal: false,
+        order: onMenubarEdgeNavigate ? ["reference", "content"] : void 0,
+        children: content
+      }
+    ) })
   ] }) });
 };
 const MenuGroup = (props) => {
@@ -15631,6 +15779,9 @@ const MenuItem = (props) => {
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
+  const restProps = { ...otherProps };
+  const userOnKeyDown = "onKeyDown" in restProps && typeof restProps.onKeyDown === "function" ? restProps.onKeyDown : void 0;
+  delete restProps.onKeyDown;
   const rootContext = useMenuRootContext();
   const tree = useFloatingTree();
   const filterContext = useMenuFilterContext();
@@ -15682,6 +15833,38 @@ const MenuItem = (props) => {
   }) : {
     onClick: handleSelect
   };
+  const { onKeyDown: itemOnKeyDown, ...itemPropsRest } = itemProps;
+  const handleItemKeyDown = (event) => {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      if (href) {
+        itemOnKeyDown == null ? void 0 : itemOnKeyDown(event);
+        return;
+      }
+      const depth = (listContext == null ? void 0 : listContext.nestedMenuDepth) ?? 0;
+      if (event.key === "ArrowLeft" && depth > 0 && (listContext == null ? void 0 : listContext.closeParentSubMenuFlyout)) {
+        event.preventDefault();
+        event.stopPropagation();
+        listContext.closeParentSubMenuFlyout();
+        return;
+      }
+      if (event.key === "ArrowLeft" && depth === 0 && rootContext.onMenubarEdgeNavigate) {
+        event.preventDefault();
+        event.stopPropagation();
+        rootContext.onCloseMenu();
+        rootContext.onMenubarEdgeNavigate(-1);
+        return;
+      }
+      if (event.key === "ArrowRight" && rootContext.onMenubarEdgeNavigate) {
+        event.preventDefault();
+        event.stopPropagation();
+        rootContext.onCloseMenu();
+        rootContext.onMenubarEdgeNavigate(1);
+        return;
+      }
+    }
+    itemOnKeyDown == null ? void 0 : itemOnKeyDown(event);
+    userOnKeyDown == null ? void 0 : userOnKeyDown(event);
+  };
   const role = variant === "checkbox" || variant === "toggle" ? "menuitemcheckbox" : "menuitem";
   const elementProps = href ? {
     as: "a",
@@ -15714,8 +15897,9 @@ const MenuItem = (props) => {
       "data-disabled": disabled,
       "data-active": listContext ? listContext.activeIndex === listItemData.index : false,
       tabIndex: listContext ? listContext.activeIndex === listItemData.index ? 0 : -1 : 0,
-      ...itemProps,
-      ...otherProps,
+      ...itemPropsRest,
+      onKeyDown: handleItemKeyDown,
+      ...restProps,
       children: [
         variant === "checkbox" && /* @__PURE__ */ jsx(
           Checkbox,
@@ -15822,6 +16006,14 @@ const SubMenu = (props) => {
   const [activeIndex, setActiveIndex] = useState(null);
   const floatingListRef = useRef([]);
   const labelsRef = useRef([]);
+  const subMenuTriggerRef = useRef(null);
+  const blockPointerEventsForHoverPolygon = useBlockPointerEventsForHoverPolygon();
+  const openedFromParentArrowRightRef = useRef(false);
+  const keyboardFocusFirstNestedItemRef = useRef(false);
+  const openNestedFromParentKeyboard = useCallback(() => {
+    openedFromParentArrowRightRef.current = true;
+    setOpen(true);
+  }, []);
   const handleOpenChange = (nextOpen, _event, reason) => {
     if (!nextOpen && reason === "focus-out" && resolvedInteraction === "hover" && parentId != null) {
       return;
@@ -15844,7 +16036,7 @@ const SubMenu = (props) => {
     enabled: !disabled && parentId != null,
     delay: { open: 75 },
     handleClose: safePolygon({
-      blockPointerEvents: true
+      blockPointerEvents: blockPointerEventsForHoverPolygon
     })
   });
   const click = useClick(floating.context, {
@@ -15858,7 +16050,15 @@ const SubMenu = (props) => {
     listRef: floatingListRef,
     activeIndex,
     onNavigate: setActiveIndex,
-    nested: true
+    nested: true,
+    // Default nested behavior focuses the first child when the flyout opens
+    // (see Floating UI useListNavigation sync when nested is true). That
+    // steals focus from the submenu trigger so ArrowDown navigates inside the
+    // flyout instead of among sibling rows (Quotes → Orders) in the parent
+    // menu. Keep focus on the trigger until the user opens into the panel with
+    // ArrowRight (handled below and by the nested reference path). After
+    // ArrowRight we set `activeIndex` and focus the first item in a layout effect.
+    focusItemOnOpen: false
   });
   const typeahead = useTypeahead(floating.context, {
     listRef: labelsRef,
@@ -15893,6 +16093,47 @@ const SubMenu = (props) => {
       tree.events.emit("menuopen", { parentId, nodeId });
     }
   }, [tree, open, nodeId, parentId]);
+  useEffect(() => {
+    if (!open) {
+      setActiveIndex(null);
+    }
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open || !openedFromParentArrowRightRef.current) {
+      return;
+    }
+    const applyFirst = () => {
+      const idx = findFirstEnabledListIndex(floatingListRef);
+      if (idx === null) {
+        return false;
+      }
+      openedFromParentArrowRightRef.current = false;
+      keyboardFocusFirstNestedItemRef.current = true;
+      setActiveIndex(idx);
+      return true;
+    };
+    if (!applyFirst()) {
+      requestAnimationFrame(() => {
+        if (!applyFirst()) {
+          openedFromParentArrowRightRef.current = false;
+        }
+      });
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      keyboardFocusFirstNestedItemRef.current = false;
+      return;
+    }
+    if (!keyboardFocusFirstNestedItemRef.current || activeIndex === null) {
+      return;
+    }
+    const el = floatingListRef.current[activeIndex];
+    if (el) {
+      el.focus({ preventScroll: true });
+    }
+    keyboardFocusFirstNestedItemRef.current = false;
+  }, [open, activeIndex]);
   const nestedFilterContext = useMemo(
     () => ({
       query: filterContext.query,
@@ -15902,9 +16143,26 @@ const SubMenu = (props) => {
     }),
     [filterContext]
   );
+  const navigateNestedMainAxis = useCallback((direction) => {
+    setActiveIndex(
+      (prev) => navigateListMainAxisLoop(floatingListRef, direction, prev)
+    );
+  }, []);
+  const closeNestedFlyout = useCallback(() => {
+    setOpen(false);
+    queueMicrotask(() => {
+      var _a;
+      (_a = subMenuTriggerRef.current) == null ? void 0 : _a.focus();
+    });
+  }, []);
+  const parentNestedDepth = (parentListContext == null ? void 0 : parentListContext.nestedMenuDepth) ?? 0;
+  const nestedMenuDepth = parentNestedDepth + 1;
   const nestedListContext = {
     activeIndex,
-    getItemProps: (userProps) => getItemProps(userProps)
+    getItemProps: (userProps) => getItemProps(userProps),
+    navigateMainAxis: navigateNestedMainAxis,
+    nestedMenuDepth,
+    closeParentSubMenuFlyout: closeNestedFlyout
   };
   const floatingStyle = {
     ...floating.floatingStyles,
@@ -15914,20 +16172,57 @@ const SubMenu = (props) => {
     onKeyDown: (event) => {
       if (event.key === "ArrowRight" && !disabled) {
         event.preventDefault();
-        setOpen(true);
+        openNestedFromParentKeyboard();
       }
     }
   }) : {
     onKeyDown: (event) => {
       if (event.key === "ArrowRight" && !disabled) {
         event.preventDefault();
-        setOpen(true);
+        openNestedFromParentKeyboard();
       }
     }
   };
   const referenceProps = getReferenceProps(parentItemProps);
+  const referenceOnKeyDown = referenceProps.onKeyDown;
   const referencePropsWithoutRef = {
-    ...referenceProps
+    ...referenceProps,
+    onKeyDown: (event) => {
+      if (resolvedInteraction !== "digin" && parentListContext) {
+        const depth = parentListContext.nestedMenuDepth ?? 0;
+        if (event.key === "ArrowLeft") {
+          if (open) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            queueMicrotask(() => {
+              var _a;
+              return (_a = subMenuTriggerRef.current) == null ? void 0 : _a.focus();
+            });
+            return;
+          }
+          if (depth === 0 && rootContext.onMenubarEdgeNavigate) {
+            event.preventDefault();
+            event.stopPropagation();
+            rootContext.onCloseMenu();
+            rootContext.onMenubarEdgeNavigate(-1);
+            return;
+          }
+        }
+      }
+      if (resolvedInteraction !== "digin" && (parentListContext == null ? void 0 : parentListContext.navigateMainAxis) && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (open) {
+          setOpen(false);
+        }
+        parentListContext.navigateMainAxis(event.key === "ArrowDown" ? 1 : -1);
+        return;
+      }
+      if (typeof referenceOnKeyDown === "function") {
+        referenceOnKeyDown(event);
+      }
+    }
   };
   if (!isVisible) {
     return null;
@@ -16026,6 +16321,7 @@ const SubMenu = (props) => {
         disabled,
         className: itemClassName.wrapper,
         ref: (node) => {
+          subMenuTriggerRef.current = node;
           listItemData.ref(node);
           floating.refs.setReference(node);
         },
@@ -16076,6 +16372,12 @@ const SubMenu = (props) => {
                 if (event.key === "ArrowLeft") {
                   event.preventDefault();
                   setOpen(false);
+                  queueMicrotask(
+                    () => {
+                      var _a;
+                      return (_a = subMenuTriggerRef.current) == null ? void 0 : _a.focus();
+                    }
+                  );
                 }
               }
             }),