@tedi-design-system/react 19.1.2-rc.3 → 19.2.0-rc.1

package/src/tedi/components/overlays/dropdown/dropdown.d.ts

@@ -78,6 +78,14 @@ export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps
      * the user has to press an arrow key to start navigating.
      */
     defaultActiveIndex?: number;
+    /**
+     * Navigation mode — use when the dropdown lists **links** (e.g. collapsed breadcrumbs) rather than
+     * menu commands. Drops the `menu` / `menuitem` roles, `aria-haspopup="menu"` and roving tabindex, so
+     * screen readers announce the items as links and each is a normal Tab stop. Keep it `false` (default)
+     * for action menus.
+     * @default false
+     */
+    navigation?: boolean;
     className?: string;
 }
 export declare const Dropdown: {

package/src/tedi/components/overlays/dropdown/dropdown.es.js

@@ -1,131 +1,139 @@
-import { jsxs as A, jsx as d } from "react/jsx-runtime";
-import { useFloatingNodeId as U, useFloating as q, useInteractions as z, useClick as G, useRole as J, useDismiss as K, useListNavigation as Q, FloatingPortal as V, FloatingFocusManager as X } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import Y from "../../../../../external/classnames/index.es.js";
+import { jsxs as q, jsx as c } from "react/jsx-runtime";
+import { useFloatingNodeId as z, useFloating as G, useInteractions as J, useClick as K, useRole as Q, useDismiss as V, useListNavigation as X, FloatingPortal as Y, FloatingFocusManager as Z } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import ee from "../../../../../external/classnames/index.es.js";
 import e from "react";
-import v from "./dropdown.module.scss.es.js";
-import { DropdownContent as Z } from "./dropdown-content/dropdown-content.es.js";
-import { DropdownContext as ee } from "./dropdown-context.es.js";
-import { resolveDropdownWidth as te } from "./dropdown-helpers.es.js";
-import { DropdownItem as oe } from "./dropdown-item/dropdown-item.es.js";
-import { DropdownSeparator as ne } from "./dropdown-separator/dropdown-separator.es.js";
-import { DropdownTrigger as re } from "./dropdown-trigger/dropdown-trigger.es.js";
-import { useBreakpointProps as ie } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as se } from "../../../providers/label-provider/use-labels.es.js";
-import { autoUpdate as ae } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as le, flip as de, shift as ce } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const me = 4, c = (h) => {
-  var O;
-  const { getCurrentBreakpointProps: F } = ie(h.defaultServerBreakpoint), {
-    children: N,
-    modal: w = !1,
-    divided: R = !1,
-    width: y = "auto",
-    variant: m = "default",
+import h from "./dropdown.module.scss.es.js";
+import { DropdownContent as te } from "./dropdown-content/dropdown-content.es.js";
+import { DropdownContext as oe } from "./dropdown-context.es.js";
+import { resolveDropdownWidth as ne } from "./dropdown-helpers.es.js";
+import { DropdownItem as re } from "./dropdown-item/dropdown-item.es.js";
+import { DropdownSeparator as ie } from "./dropdown-separator/dropdown-separator.es.js";
+import { DropdownTrigger as se } from "./dropdown-trigger/dropdown-trigger.es.js";
+import { useBreakpointProps as ae } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as le } from "../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as de } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as ce, flip as me, shift as ue } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const pe = 4, m = (w) => {
+  var F;
+  const { getCurrentBreakpointProps: N } = ae(w.defaultServerBreakpoint), {
+    children: R,
+    modal: I = !1,
+    divided: y = !1,
+    width: P = "auto",
+    variant: u = "default",
     open: p,
-    defaultOpen: P = !1,
+    defaultOpen: S = !1,
     onOpenChange: s,
     defaultActiveIndex: o,
-    placement: u = "bottom-start",
+    placement: f = "bottom-start",
     maxHeight: a,
-    className: S
-  } = F(h), { getLabel: b } = se(), k = U(), x = e.useRef([]), [l, f] = e.useState(o ?? null), [g, B] = e.useState(null), [_, W] = e.useState(P), t = p ?? _;
+    navigation: l = !1,
+    className: k
+  } = N(w), { getLabel: B } = le(), _ = z(), x = e.useId(), D = e.useRef([]), [d, g] = e.useState(o ?? null), [v, W] = e.useState(null), [E, H] = e.useState(S), t = p ?? E;
   e.useEffect(() => {
-    t || f(o ?? null);
+    t || g(o ?? null);
   }, [t, o]);
-  const I = e.useCallback(
+  const O = e.useCallback(
     (i) => {
-      p === void 0 && W(i), s == null || s(i);
+      p === void 0 && H(i), s == null || s(i);
     },
     [p, s]
-  ), E = q({
-    nodeId: k,
+  ), L = G({
+    nodeId: _,
     open: t,
-    placement: u,
-    onOpenChange: I,
-    middleware: [le(me), de(), ce()],
-    whileElementsMounted: ae
-  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, D = z([
-    G(n),
-    J(n, { role: "menu" }),
+    placement: f,
+    onOpenChange: O,
+    middleware: [ce(pe), me(), ue()],
+    whileElementsMounted: de
+  }), { context: n, refs: r, x: M, y: T, strategy: $ } = L, C = J([
     K(n),
-    Q(n, {
-      listRef: x,
-      activeIndex: l,
-      onNavigate: f,
+    // In navigation mode the popup is a list of links, not a menu — disable the menu role and the
+    // roving-tabindex list navigation so items stay plain, tabbable links.
+    Q(n, { role: "menu", enabled: !l }),
+    V(n),
+    X(n, {
+      listRef: D,
+      activeIndex: d,
+      onNavigate: g,
       loop: !0,
       selectedIndex: o ?? null,
-      focusItemOnOpen: o !== null ? !0 : "auto"
+      focusItemOnOpen: o !== null ? !0 : "auto",
+      enabled: !l
     })
-  ]), T = {
+  ]), j = {
     open: t,
-    setOpen: I,
+    setOpen: O,
     refs: r,
-    listItemsRef: x,
-    activeIndex: l,
-    setActiveIndex: f,
-    placement: u,
-    content: g,
-    setContent: B,
-    divided: R,
-    variant: m,
-    ...D
-  }, $ = (O = r.reference.current) == null ? void 0 : O.getBoundingClientRect().width, j = e.useMemo(() => {
+    listItemsRef: D,
+    activeIndex: d,
+    setActiveIndex: g,
+    placement: f,
+    content: v,
+    setContent: W,
+    divided: y,
+    variant: u,
+    navigation: l,
+    contentId: x,
+    ...C
+  }, A = (F = r.reference.current) == null ? void 0 : F.getBoundingClientRect().width, U = e.useMemo(() => {
     const i = r.reference.current;
     if (!i) return;
-    const C = i.offsetParent;
-    if (C)
-      return C.getBoundingClientRect().width;
+    const b = i.offsetParent;
+    if (b)
+      return b.getBoundingClientRect().width;
   }, [r.reference.current]);
-  return /* @__PURE__ */ A(ee.Provider, { value: T, children: [
-    N,
-    /* @__PURE__ */ d(V, { children: t && /* @__PURE__ */ d(
-      X,
+  return /* @__PURE__ */ q(oe.Provider, { value: j, children: [
+    R,
+    /* @__PURE__ */ c(Y, { children: t && /* @__PURE__ */ c(
+      Z,
       {
         context: n,
-        modal: w,
-        visuallyHiddenDismiss: w ? b("close") : !1,
-        children: /* @__PURE__ */ d(
+        modal: I,
+        visuallyHiddenDismiss: I ? B("close") : !1,
+        children: /* @__PURE__ */ c(
           "div",
           {
-            ...D.getFloatingProps({
+            ...C.getFloatingProps({
               ref: r.setFloating,
-              className: Y(
-                v["tedi-dropdown"],
-                { [v[`tedi-dropdown--${m}`]]: m === "tree" },
-                S
+              className: ee(
+                h["tedi-dropdown"],
+                { [h[`tedi-dropdown--${u}`]]: u === "tree" },
+                k
               ),
               style: {
-                position: M,
-                left: H ?? 0,
-                top: L ?? 0,
-                width: te(y, $, j)
+                position: $,
+                left: M ?? 0,
+                top: T ?? 0,
+                width: ne(P, A, U)
               },
-              role: "menu",
-              "aria-orientation": "vertical",
-              "aria-activedescendant": l !== null ? `dropdown-item-${l}` : void 0
+              ...l ? { id: x } : {
+                role: "menu",
+                "aria-orientation": "vertical",
+                "aria-activedescendant": d !== null ? `dropdown-item-${d}` : void 0
+              }
             }),
-            "data-placement": u,
+            "data-placement": f,
             "data-state": t ? "open" : "closed",
-            children: a !== void 0 ? /* @__PURE__ */ d(
+            children: a !== void 0 ? /* @__PURE__ */ c(
               "div",
               {
-                className: v["tedi-dropdown__scroll"],
+                className: h["tedi-dropdown__scroll"],
                 role: "group",
                 tabIndex: 0,
                 style: { maxHeight: typeof a == "number" ? `${a}px` : a },
-                children: g
+                children: v
               }
-            ) : g
+            ) : v
           }
         )
       }
     ) })
   ] });
 };
-c.Trigger = re;
-c.Content = Z;
-c.Item = oe;
-c.Separator = ne;
+m.Trigger = se;
+m.Content = te;
+m.Item = re;
+m.Separator = ie;
 export {
-  c as Dropdown
+  m as Dropdown
 };