cetec-design-system 3.5.0-0 → 3.5.1-0

package/dist/index.js

@@ -18338,6 +18338,52 @@ const hasMatchingItems = (children, filterContext) => {
     return true;
   });
 };
+const findSubMenuKeyPath = (children, target, trail = []) => {
+  for (const childNode of Children.toArray(children)) {
+    if (!isValidElement(childNode)) {
+      continue;
+    }
+    const child = childNode;
+    const componentType = getComponentType(child);
+    const nextTrail = [...trail, String(child.key)];
+    if (componentType === MENU_COMPONENT_TYPES.subMenu) {
+      if (child.props.children === target) {
+        return nextTrail;
+      }
+      const nested = findSubMenuKeyPath(
+        child.props.children,
+        target,
+        nextTrail
+      );
+      if (nested) {
+        return nested;
+      }
+    } else if (componentType === MENU_COMPONENT_TYPES.group) {
+      const nested = findSubMenuKeyPath(
+        child.props.children,
+        target,
+        nextTrail
+      );
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+  return null;
+};
+const findSubMenuChildren = (children, keyPath) => {
+  const [key, ...rest] = keyPath;
+  if (key === void 0) {
+    return children;
+  }
+  const match = Children.toArray(children).find(
+    (childNode) => isValidElement(childNode) && String(childNode.key) === key
+  );
+  if (!match) {
+    return void 0;
+  }
+  return findSubMenuChildren(match.props.children, rest);
+};
 const getHighlightedTextParts = (value, query) => {
   if (!query.trim()) {
     return [{ text: value, match: false }];
@@ -18402,6 +18448,8 @@ function navigateListMainAxisLoop(listRef, direction, previousIndex) {
   }
   return previousIndex ?? null;
 }
+const focusableInLevelSelector = 'input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),a[href],[tabindex]:not([tabindex="-1"])';
+const isTextEntryTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLInputElement && !["button", "checkbox", "submit", "reset"].includes(target.type));
 const defaultGetItemText = ({
   label: label2,
   description
@@ -18509,6 +18557,7 @@ const Menu = (props) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(nextOpen);
   };
+  const diginFocusIntentRef = useRef(null);
   const [diginLevels, setDiginLevels] = useState([]);
   const [wrapperSize, setWrapperSize] = useState({
     width: null,
@@ -18551,7 +18600,10 @@ const Menu = (props) => {
   const focus = useFocus(floating.context, {
     enabled: hasReference && triggerInteraction === "focus"
   });
-  const dismiss = useDismiss(floating.context, { enabled: hasReference });
+  const dismiss = useDismiss(floating.context, {
+    enabled: hasReference,
+    escapeKey: diginDepth === 0
+  });
   const role = useRole(floating.context, { role: "menu" });
   const listNavigation = useListNavigation(floating.context, {
     listRef,
@@ -18577,7 +18629,11 @@ const Menu = (props) => {
     }),
     [filterMode, getItemText, highlightMatches, query]
   );
-  const activeLevelChildren = ((_a = diginLevels[diginLevels.length - 1]) == null ? void 0 : _a.children) ?? children;
+  const liveDiginLevels = diginLevels.map((level) => ({
+    ...level,
+    children: (level.path && findSubMenuChildren(children, level.path)) ?? level.children
+  }));
+  const activeLevelChildren = ((_a = liveDiginLevels[liveDiginLevels.length - 1]) == null ? void 0 : _a.children) ?? children;
   const hasVisibleResults = hasMatchingItems(
     activeLevelChildren,
     filterContextValue
@@ -18593,6 +18649,8 @@ const Menu = (props) => {
       setDiginLevels([]);
     },
     onPushDiginLevel: (title, levelChildren) => {
+      const returnIndex = activeIndex;
+      diginFocusIntentRef.current = "first";
       setDiginLevels((prev) => {
         const activeLevel2 = prev[prev.length - 1];
         if (activeLevel2 && activeLevel2.title === title && activeLevel2.children === levelChildren) {
@@ -18603,29 +18661,169 @@ const Menu = (props) => {
           {
             key: `${title}-${prev.length}`,
             title,
-            children: levelChildren
+            children: levelChildren,
+            returnIndex,
+            path: findSubMenuKeyPath(children, levelChildren)
           }
         ];
       });
     },
     onPopDiginLevel: () => {
+      const poppedLevel = diginLevels[diginLevels.length - 1];
+      if (!poppedLevel) {
+        return;
+      }
+      diginFocusIntentRef.current = { index: poppedLevel.returnIndex };
       setDiginLevels((prev) => prev.slice(0, -1));
     },
     diginDepth,
     onMenubarEdgeNavigate
   };
+  useEffect(() => {
+    const intent = diginFocusIntentRef.current;
+    if (!intent) {
+      return;
+    }
+    diginFocusIntentRef.current = null;
+    setActiveIndex(null);
+    let timer;
+    const focusLevel = (attemptsLeft) => {
+      var _a2;
+      const levelElement = activeLevelRef.current;
+      const index2 = intent === "first" ? findFirstEnabledListIndex(listRef) : intent.index;
+      const item = index2 === null ? null : listRef.current[index2];
+      if (item && item.isConnected && (levelElement == null ? void 0 : levelElement.contains(item)) && !item.hasAttribute("disabled")) {
+        item.focus({ preventScroll: true });
+        (_a2 = item.scrollIntoView) == null ? void 0 : _a2.call(item, { block: "nearest" });
+        setActiveIndex(index2);
+        return;
+      }
+      if (attemptsLeft > 0) {
+        timer = setTimeout(() => focusLevel(attemptsLeft - 1), 16);
+        return;
+      }
+      const focusables = Array.from(
+        (levelElement == null ? void 0 : levelElement.querySelectorAll(focusableInLevelSelector)) ?? []
+      );
+      const fallback = focusables.find((element) => !element.matches("[data-menu-back]")) ?? focusables[0];
+      fallback == null ? void 0 : fallback.focus({ preventScroll: true });
+    };
+    timer = setTimeout(() => focusLevel(3), 0);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [diginDepth]);
+  const keepsFocusOnTrigger = Boolean(onMenubarEdgeNavigate) || triggerInteraction === "focus";
+  useEffect(() => {
+    if (!hasReference || !isOpen || activeIndex === null || keepsFocusOnTrigger) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      const referenceElement = floating.elements.domReference;
+      const floatingElement = floating.elements.floating;
+      const activeElement2 = document.activeElement;
+      const focusIsStranded = Boolean(referenceElement) && (activeElement2 === referenceElement || activeElement2 === document.body);
+      const item = listRef.current[activeIndex];
+      if (focusIsStranded && (item == null ? void 0 : item.isConnected) && (floatingElement == null ? void 0 : floatingElement.contains(item))) {
+        item.focus({ preventScroll: true });
+      }
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [
+    activeIndex,
+    floating.elements.domReference,
+    floating.elements.floating,
+    hasReference,
+    isOpen,
+    keepsFocusOnTrigger
+  ]);
+  const isComposingRef = useRef(false);
+  useEffect(() => {
+    let compositionTimeout;
+    const handleCompositionStart = () => {
+      clearTimeout(compositionTimeout);
+      isComposingRef.current = true;
+    };
+    const handleCompositionEnd = () => {
+      compositionTimeout = setTimeout(() => {
+        isComposingRef.current = false;
+      }, 5);
+    };
+    document.addEventListener("compositionstart", handleCompositionStart);
+    document.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      clearTimeout(compositionTimeout);
+      document.removeEventListener("compositionstart", handleCompositionStart);
+      document.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, []);
+  useEffect(() => {
+    if (diginDepth === 0) {
+      return;
+    }
+    const handleEscape = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing || isComposingRef.current) {
+        return;
+      }
+      const activeElement2 = document.activeElement;
+      const referenceElement = floating.elements.domReference;
+      const floatingElement = floating.elements.floating;
+      const focusIsInMenu = hasReference && activeElement2 === document.body || Boolean(floatingElement == null ? void 0 : floatingElement.contains(activeElement2)) || Boolean(referenceElement == null ? void 0 : referenceElement.contains(activeElement2));
+      if (!focusIsInMenu) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      rootContextValue.onPopDiginLevel();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  });
+  const handleLevelsKeyDown = (event) => {
+    if (event.key !== "Escape" && event.key !== "Tab" && isTextEntryTarget(event.target)) {
+      event.stopPropagation();
+    }
+  };
+  const handleDiginKeyDown = (event) => {
+    if (diginDepth > 0 && event.key === "ArrowLeft" && !event.defaultPrevented) {
+      event.preventDefault();
+      event.stopPropagation();
+      rootContextValue.onPopDiginLevel();
+    }
+  };
   const navigateMainAxis = useCallback((direction) => {
     setActiveIndex(
       (prev) => navigateListMainAxisLoop(listRef, direction, prev)
     );
   }, []);
+  const [firstEnabledIndex, setFirstEnabledIndex] = useState(
+    null
+  );
+  useEffect(() => {
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) {
+        return;
+      }
+      const next = findFirstEnabledListIndex(listRef);
+      setFirstEnabledIndex((previous) => previous === next ? previous : next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
   const menuListContextValue = {
     activeIndex,
+    tabbableIndex: activeIndex ?? firstEnabledIndex,
     getItemProps: (userProps) => getItemProps(userProps),
     navigateMainAxis,
     nestedMenuDepth: 0
   };
-  const levels = [{ key: "root", title: "Menu", children }, ...diginLevels];
+  const levels = [{ key: "root", title: "Menu", children }, ...liveDiginLevels];
   const activeLevel = levels[Math.min(diginDepth, levels.length - 1)];
   const levelCount = levels.length;
   const trackWidthPercent = levelCount * 100;
@@ -18691,6 +18889,10 @@ const Menu = (props) => {
     isMenuVisible,
     shouldUseDiginSizing
   ]);
+  useLayoutEffect(() => {
+    var _a2;
+    (_a2 = sizeProbeRef.current) == null ? void 0 : _a2.querySelectorAll("[id]").forEach((element) => element.removeAttribute("id"));
+  });
   const diginWrapperStyle = shouldUseDiginSizing && wrapperSize.width && wrapperSize.height ? {
     width: `${wrapperSize.width}px`,
     height: `${wrapperSize.height}px`
@@ -18707,120 +18909,130 @@ const Menu = (props) => {
       ...dsComponent("Menu"),
       ref: floating.refs.setFloating,
       className: cx(classes.wrapper, className),
-      ...getFloatingProps(),
+      ...getFloatingProps({ onKeyDown: handleDiginKeyDown }),
       ...otherProps,
       style: floatingStyle,
       children: [
         !hasVisibleResults && /* @__PURE__ */ jsx(Box, { className: classes.noResults, children: renderNoResults ?? /* @__PURE__ */ jsx(Text, { textStyle: "body.sm", children: "No results found" }) }),
-        hasVisibleResults && /* @__PURE__ */ jsxs(Box, { className: classes.levelsViewport, children: [
-          shouldUseDiginSizing && /* @__PURE__ */ jsx(
-            Box,
-            {
-              ref: sizeProbeRef,
-              className: classes.sizeProbe,
-              "aria-hidden": true,
-              style: diginSizeProbeStyle,
-              children: /* @__PURE__ */ jsxs(Box, { className: classes.level, children: [
-                diginDepth > 0 && /* @__PURE__ */ jsxs(
-                  Box,
-                  {
-                    as: "button",
-                    type: "button",
-                    className: classes.backHeader,
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "caret-left", fill: "icon" }),
-                      activeLevel.title
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box, { className: listClassName, children: withLevelScopedKeys(
-                  activeLevel.children,
-                  `${activeLevel.key}-probe`
-                ) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: classes.levelsTrack,
-              style: {
-                width: `${trackWidthPercent}%`,
-                transform: `translateX(-${trackTranslatePercent}%)`
-              },
-              children: levels.map((level, index2) => {
-                const isActiveLevel = index2 === diginDepth;
-                const levelChildren = withLevelScopedKeys(
-                  level.children,
-                  level.key
-                );
-                if (!isActiveLevel) {
-                  return /* @__PURE__ */ jsxs(
-                    Box,
-                    {
-                      className: classes.level,
-                      style: {
-                        flex: `0 0 ${levelWidthPercent}%`
-                      },
-                      "aria-hidden": true,
-                      children: [
-                        index2 > 0 && /* @__PURE__ */ jsxs(
-                          Box,
-                          {
-                            as: "button",
-                            type: "button",
-                            className: classes.backHeader,
-                            onClick: rootContextValue.onPopDiginLevel,
-                            children: [
-                              /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
-                              level.title
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
-                      ]
-                    },
-                    level.key
-                  );
-                }
-                return /* @__PURE__ */ jsx(
-                  MenuListProvider,
-                  {
-                    value: menuListContextValue,
-                    children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children: /* @__PURE__ */ jsxs(
+        hasVisibleResults && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: classes.levelsViewport,
+            onKeyDown: handleLevelsKeyDown,
+            children: [
+              shouldUseDiginSizing && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  ref: sizeProbeRef,
+                  className: classes.sizeProbe,
+                  "aria-hidden": true,
+                  inert: true,
+                  style: diginSizeProbeStyle,
+                  children: /* @__PURE__ */ jsxs(Box, { className: classes.level, children: [
+                    diginDepth > 0 && /* @__PURE__ */ jsxs(
                       Box,
                       {
-                        ref: activeLevelRef,
-                        className: classes.level,
-                        style: {
-                          flex: `0 0 ${levelWidthPercent}%`
-                        },
+                        as: "button",
+                        type: "button",
+                        className: classes.backHeader,
                         children: [
-                          index2 > 0 && /* @__PURE__ */ jsxs(
-                            Box,
-                            {
-                              as: "button",
-                              type: "button",
-                              ref: activeBackHeaderRef,
-                              className: classes.backHeader,
-                              onClick: rootContextValue.onPopDiginLevel,
-                              children: [
-                                /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
-                                level.title
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
+                          /* @__PURE__ */ jsx(Icon, { name: "caret-left", fill: "icon" }),
+                          activeLevel.title
                         ]
                       }
+                    ),
+                    /* @__PURE__ */ jsx(Box, { className: listClassName, children: withLevelScopedKeys(
+                      activeLevel.children,
+                      `${activeLevel.key}-probe`
                     ) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: classes.levelsTrack,
+                  style: {
+                    width: `${trackWidthPercent}%`,
+                    transform: `translateX(-${trackTranslatePercent}%)`
                   },
-                  level.key
-                );
-              })
-            }
-          )
-        ] })
+                  children: levels.map((level, index2) => {
+                    const isActiveLevel = index2 === diginDepth;
+                    const levelChildren = withLevelScopedKeys(
+                      level.children,
+                      level.key
+                    );
+                    if (!isActiveLevel) {
+                      return /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          className: classes.level,
+                          style: {
+                            flex: `0 0 ${levelWidthPercent}%`
+                          },
+                          "aria-hidden": true,
+                          inert: true,
+                          children: [
+                            index2 > 0 && /* @__PURE__ */ jsxs(
+                              Box,
+                              {
+                                as: "button",
+                                type: "button",
+                                className: classes.backHeader,
+                                onClick: rootContextValue.onPopDiginLevel,
+                                children: [
+                                  /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
+                                  level.title
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
+                          ]
+                        },
+                        level.key
+                      );
+                    }
+                    return /* @__PURE__ */ jsx(
+                      MenuListProvider,
+                      {
+                        value: menuListContextValue,
+                        children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children: /* @__PURE__ */ jsxs(
+                          Box,
+                          {
+                            ref: activeLevelRef,
+                            className: classes.level,
+                            style: {
+                              flex: `0 0 ${levelWidthPercent}%`
+                            },
+                            children: [
+                              index2 > 0 && /* @__PURE__ */ jsxs(
+                                Box,
+                                {
+                                  as: "button",
+                                  type: "button",
+                                  ref: activeBackHeaderRef,
+                                  "data-menu-back": "",
+                                  className: classes.backHeader,
+                                  onClick: rootContextValue.onPopDiginLevel,
+                                  children: [
+                                    /* @__PURE__ */ jsx(Icon, { name: "caret-left" }),
+                                    level.title
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Box, { className: listClassName, children: levelChildren })
+                            ]
+                          }
+                        ) })
+                      },
+                      level.key
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   ) }) });
@@ -19143,6 +19355,12 @@ const MenuItem = (props) => {
   };
   const { onKeyDown: itemOnKeyDown, ...itemPropsRest } = itemProps;
   const handleItemKeyDown = (event) => {
+    if (event.key === "ArrowLeft" && rootContext.diginDepth > 0 && ((listContext == null ? void 0 : listContext.nestedMenuDepth) ?? 0) === 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      rootContext.onPopDiginLevel();
+      return;
+    }
     if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
       if (href) {
         itemOnKeyDown == null ? void 0 : itemOnKeyDown(event);
@@ -19204,7 +19422,7 @@ const MenuItem = (props) => {
       "data-selected": selected,
       "data-disabled": disabled,
       "data-active": listContext ? listContext.activeIndex === listItemData.index : false,
-      tabIndex: listContext ? listContext.activeIndex === listItemData.index ? 0 : -1 : 0,
+      tabIndex: listContext ? (listContext.tabbableIndex ?? listContext.activeIndex) === listItemData.index ? 0 : -1 : 0,
       ...itemPropsRest,
       onKeyDown: handleItemKeyDown,
       ...restProps,
@@ -19444,7 +19662,7 @@ const SubMenu = (props) => {
       return true;
     };
     if (!applyFirst()) {
-      requestAnimationFrame(() => {
+      setTimeout(() => {
         if (!applyFirst()) {
           openedFromParentArrowRightRef.current = false;
         }
@@ -19613,7 +19831,7 @@ const SubMenu = (props) => {
         "data-selected": selected,
         "data-disabled": disabled,
         "data-active": parentListContext ? parentListContext.activeIndex === listItemData.index : false,
-        tabIndex: parentListContext ? parentListContext.activeIndex === listItemData.index ? 0 : -1 : 0,
+        tabIndex: parentListContext ? (parentListContext.tabbableIndex ?? parentListContext.activeIndex) === listItemData.index ? 0 : -1 : 0,
         ...diginButtonProps,
         type: "button",
         children: [
@@ -19674,7 +19892,7 @@ const SubMenu = (props) => {
         "data-selected": selected,
         "data-disabled": disabled,
         "data-active": parentListContext ? parentListContext.activeIndex === listItemData.index : false,
-        tabIndex: parentListContext ? parentListContext.activeIndex === listItemData.index ? 0 : -1 : 0,
+        tabIndex: parentListContext ? (parentListContext.tabbableIndex ?? parentListContext.activeIndex) === listItemData.index ? 0 : -1 : 0,
         ...referencePropsWithoutRef,
         type: "button",
         children: [