@tedi-design-system/react 19.0.0-rc.3 → 19.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.0.0-rc.3",
+  "version": "19.0.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),N=n=>{const l=[];return o.Children.forEach(n,a=>{if(o.isValidElement(a)){if(a.type===o.Fragment){l.push(...N(a.props.children));return}l.push(a)}}),l},D=e.jsx(I.Icon,{name:"chevron_right",size:16,color:"brand"}),k=n=>{const{children:l,ariaLabel:a,showMoreLabel:w,separator:B=D,className:h}=n,{getCurrentBreakpointProps:C}=P.useBreakpointProps(n.defaultServerBreakpoint),{variant:q="long",maxItems:p,itemsBeforeCollapse:v=1,itemsAfterCollapse:y=1}=C(n),{getLabel:f}=S.useLabels(),x=a??f("breadcrumbs"),L=w??f("breadcrumbs.show-more"),s=N(l);if(s.length===0)return null;if(q==="short"){if(s.length<2)return null;const r=s[s.length-2],i=r.props,c=typeof r.type!="string"&&i.iconLeft===void 0?o.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],h),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:c})})})}const u=Math.max(0,v),m=Math.max(1,y),g=p!==void 0&&s.length>p&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],h),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,i)=>e.jsxs(o.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:i===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((c,_)=>e.jsx(d.Dropdown.Item,{index:_,asChild:!0,children:c},c.key??_))})]})}),i<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:B})]},i))})})};k.displayName="Breadcrumbs";exports.Breadcrumbs=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),S=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),D=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),y=i=>{const o=[];return l.Children.forEach(i,a=>{if(l.isValidElement(a)){if(a.type===l.Fragment){o.push(...y(a.props.children));return}o.push(a)}}),o},E=e.jsx(S.Icon,{name:"chevron_right",size:16,color:"brand"}),N=i=>{const{children:o,ariaLabel:a,showMoreLabel:k,separator:w=E,className:p}=i,{getCurrentBreakpointProps:B}=P.useBreakpointProps(i.defaultServerBreakpoint),{variant:q="long",maxItems:h,itemsBeforeCollapse:v=1,itemsAfterCollapse:C=1}=B(i),{getLabel:f}=D.useLabels(),x=a??f("breadcrumbs"),L=k??f("breadcrumbs.show-more"),s=y(o);if(s.length===0)return null;if(q==="short"){if(s.length<2)return null;const r=s[s.length-2],c=r.props,n=typeof r.type!="string"&&c.iconLeft===void 0?l.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:n})})})}const u=Math.max(0,v),m=Math.max(1,C),g=h!==void 0&&s.length>h&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,c)=>e.jsxs(l.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:c===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((n,_)=>{const I=typeof n.type!="string"?l.cloneElement(n,{noStyle:!0}):n;return e.jsx(d.Dropdown.Item,{index:_,asChild:!0,children:I},n.key??_)})})]})}),c<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:w})]},c))})})};N.displayName="Breadcrumbs";exports.Breadcrumbs=N;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.es.js

@@ -1,37 +1,37 @@
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { cloneElement as E, Fragment as k, Children as P, isValidElement as S } from "react";
-import { Icon as j } from "../../base/icon/icon.es.js";
-import { Button as A } from "../../buttons/button/button.es.js";
+import u from "../../../../../external/classnames/index.es.js";
+import { cloneElement as k, Fragment as C, Children as P, isValidElement as j } from "react";
+import { Icon as A } from "../../base/icon/icon.es.js";
+import { Button as T } from "../../buttons/button/button.es.js";
 import s from "./breadcrumbs.module.scss.es.js";
-import { useBreakpointProps as T } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as z } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as z } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
 import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
 const v = (l) => {
-  const n = [];
+  const i = [];
   return P.forEach(l, (a) => {
-    if (S(a)) {
-      if (a.type === k) {
-        n.push(...v(a.props.children));
+    if (j(a)) {
+      if (a.type === C) {
+        i.push(...v(a.props.children));
         return;
       }
-      n.push(a);
+      i.push(a);
     }
-  }), n;
-}, D = /* @__PURE__ */ r(j, { name: "chevron_right", size: 16, color: "brand" }), F = (l) => {
-  const { children: n, ariaLabel: a, showMoreLabel: y, separator: B = D, className: u } = l, { getCurrentBreakpointProps: L } = T(l.defaultServerBreakpoint), {
-    variant: w = "long",
+  }), i;
+}, F = /* @__PURE__ */ r(A, { name: "chevron_right", size: 16, color: "brand" }), V = (l) => {
+  const { children: i, ariaLabel: a, showMoreLabel: B, separator: L = F, className: h } = l, { getCurrentBreakpointProps: w } = z(l.defaultServerBreakpoint), {
+    variant: x = "long",
     maxItems: b,
-    itemsBeforeCollapse: x = 1,
-    itemsAfterCollapse: I = 1
-  } = L(l), { getLabel: f } = z(), _ = a ?? f("breadcrumbs"), M = y ?? f("breadcrumbs.show-more"), t = v(n);
+    itemsBeforeCollapse: I = 1,
+    itemsAfterCollapse: M = 1
+  } = w(l), { getLabel: f } = D(), _ = a ?? f("breadcrumbs"), S = B ?? f("breadcrumbs.show-more"), t = v(i);
   if (t.length === 0) return null;
-  if (w === "short") {
+  if (x === "short") {
     if (t.length < 2) return null;
-    const e = t[t.length - 2], i = e.props, o = typeof e.type != "string" && i.iconLeft === void 0 ? E(e, { iconLeft: "arrow_back" }) : e;
-    return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: o }) }) });
+    const e = t[t.length - 2], o = e.props, n = typeof e.type != "string" && o.iconLeft === void 0 ? k(e, { iconLeft: "arrow_back" }) : e;
+    return /* @__PURE__ */ r("nav", { "aria-label": _, className: u(s["tedi-breadcrumbs"], h), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: n }) }) });
   }
-  const m = Math.max(0, x), d = Math.max(1, I), g = b !== void 0 && t.length > b && t.length > m + d ? [
+  const m = Math.max(0, I), d = Math.max(1, M), g = b !== void 0 && t.length > b && t.length > m + d ? [
     ...t.slice(0, m).map((e) => ({ kind: "item", element: e })),
     {
       kind: "ellipsis",
@@ -39,26 +39,29 @@ const v = (l) => {
     },
     ...t.slice(t.length - d).map((e) => ({ kind: "item", element: e }))
   ] : t.map((e) => ({ kind: "item", element: e })), N = g.length - 1;
-  return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: g.map((e, i) => /* @__PURE__ */ p(k, { children: [
+  return /* @__PURE__ */ r("nav", { "aria-label": _, className: u(s["tedi-breadcrumbs"], h), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: g.map((e, o) => /* @__PURE__ */ p(C, { children: [
     e.kind === "item" ? /* @__PURE__ */ r(
       "li",
       {
-        className: h(s["tedi-breadcrumbs__item"], {
-          [s["tedi-breadcrumbs__current"]]: i === N
+        className: u(s["tedi-breadcrumbs__item"], {
+          [s["tedi-breadcrumbs__current"]]: o === N
         }),
         children: e.element
       }
     ) : /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: /* @__PURE__ */ p(c, { children: [
-      /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ p(A, { noStyle: !0, className: s["tedi-breadcrumbs__ellipsis"], children: [
+      /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ p(T, { noStyle: !0, className: s["tedi-breadcrumbs__ellipsis"], children: [
         /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "…" }),
-        /* @__PURE__ */ r("span", { className: "sr-only", children: M })
+        /* @__PURE__ */ r("span", { className: "sr-only", children: S })
       ] }) }),
-      /* @__PURE__ */ r(c.Content, { children: e.hidden.map((o, C) => /* @__PURE__ */ r(c.Item, { index: C, asChild: !0, children: o }, o.key ?? C)) })
+      /* @__PURE__ */ r(c.Content, { children: e.hidden.map((n, y) => {
+        const E = typeof n.type != "string" ? k(n, { noStyle: !0 }) : n;
+        return /* @__PURE__ */ r(c.Item, { index: y, asChild: !0, children: E }, n.key ?? y);
+      }) })
     ] }) }),
-    i < N && /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__separator"], "aria-hidden": "true", children: B })
-  ] }, i)) }) });
+    o < N && /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__separator"], "aria-hidden": "true", children: L })
+  ] }, o)) }) });
 };
-F.displayName = "Breadcrumbs";
+V.displayName = "Breadcrumbs";
 export {
-  F as Breadcrumbs
+  V as Breadcrumbs
 };

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),K=require("../../../../../../external/classnames/index.cjs.js"),R=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),S=({children:c,onClick:t,disabled:n,active:w,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:y=!1,className:_,role:s,...l})=>{const{getItemProps:v,listItemsRef:b,setOpen:f,activeIndex:x,divided:I,variant:a}=R.useDropdownContext(),g=o?"div":"button",q=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},D=e=>{if(n)return;const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(d){d.click();return}o?t==null||t(e):(t==null||t(e),p&&f(!1))},P=e=>{if(!n&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');d?d.click():t==null||t(e),!o&&p&&f(!1)}},m={ref(e){typeof u=="number"&&(b.current[u]=e)},tabIndex:x===u?0:-1,className:K.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:w,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:I,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:a==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:a==="tree"&&y},_),style:q(i),onClick:D,onKeyDown:P,...l},j=o&&p===!1?{...m,role:s}:v({role:s??"menuitem",disabled:o?void 0:n,...m});return T.jsx(g,{...j,children:c})};exports.DropdownItem=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),U=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),D=require("../../../../../../external/classnames/index.cjs.js"),m=require("react"),z=require("../dropdown-context.cjs.js"),u=require("./dropdown-item.module.scss.cjs.js"),g=(n,t)=>r=>{n==null||n(r),r.defaultPrevented||t==null||t(r)},A=({children:n,onClick:t,disabled:r,active:x,index:d,indent:p,asChild:s=!1,closeOnSelect:f=!0,isParent:I=!1,className:b,role:y,...q})=>{const{getItemProps:R,listItemsRef:P,setOpen:a,activeIndex:k,divided:E,variant:l}=z.useDropdownContext(),K=s?"div":"button",c=s&&f!==!1&&m.isValidElement(n),w=e=>{typeof d=="number"&&(P.current[d]=e)},N=m.isValidElement(n)?n.ref:void 0,T=U.useMergeRefs([w,N]),j=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},V=e=>{if(r){e.preventDefault();return}const o=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(o){o.click();return}t==null||t(e),(!s||c)&&f&&a(!1)},M=e=>{if(r){(e.key==="Enter"||e.key===" ")&&e.preventDefault();return}if(e.key==="Enter"||e.key===" "){const o=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(o){e.preventDefault(),o.click(),!s&&f&&a(!1);return}if(c){e.preventDefault(),e.currentTarget.click();return}e.preventDefault(),t==null||t(e),!s&&f&&a(!1)}},_={ref:w,tabIndex:k===d?0:-1,className:D.default(u.default["tedi-dropdown__item"],{[u.default["tedi-dropdown__item--active"]]:x,[u.default["tedi-dropdown__item--disabled"]]:r,[u.default["tedi-dropdown__item--divided"]]:E,[u.default["tedi-dropdown__item--indent"]]:p,[u.default["tedi-dropdown__item--tree-item"]]:l==="tree"&&p,[u.default["tedi-dropdown__item--tree-parent"]]:l==="tree"&&I},b),style:j(p),onClick:V,onKeyDown:M,...q},v=s&&f===!1?{..._,role:y}:R({role:y??"menuitem",disabled:s?void 0:r,..._});if(c){const e=n,o=e.props,i=v;return m.cloneElement(e,{...i,ref:T,className:D.default(i.className,o.className),style:{...i.style,...o.style},"aria-disabled":r||void 0,tabIndex:r?-1:i.tabIndex,onClick:g(i.onClick,o.onClick),onKeyDown:g(i.onKeyDown,o.onKeyDown)})}return S.jsx(K,{...v,children:n})};exports.DropdownItem=A;

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

@@ -34,10 +34,14 @@ export type DropdownItemProps = {
      */
     indent?: number;
     /**
-     * When `true`, renders a plain `<div>` instead of a `<button>`.
-     * Useful when wrapping form controls like `<Checkbox>` or `<Radio>` that already handle their own events.
-     * **Warning:** When `asChild={true}`, the item is no longer focusable via keyboard navigation
-     * unless the child element itself is focusable.
+     * Render the item as its child element instead of a `<button>`.
+     *
+     * - **Navigable child (default `closeOnSelect`)** — e.g. a `Link`: the item props (`role`,
+     *   roving `tabindex`, handlers, styles) are merged directly onto the child so it becomes the
+     *   single focusable `menuitem`. This avoids a focusable wrapper *and* a focusable child (a
+     *   double Tab stop) and keeps the role and accessible name on one element.
+     * - **Form control (`closeOnSelect={false}`)** — e.g. a `Checkbox` / `Radio`: the child is
+     *   wrapped in a plain `<div>` menuitem that forwards activation to the inner control.
      *
      * @default false
      */

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

@@ -1,70 +1,101 @@
-import { jsx as T } from "react/jsx-runtime";
-import j from "../../../../../../external/classnames/index.es.js";
-import { useDropdownContext as E } from "../dropdown-context.es.js";
-import r from "./dropdown-item.module.scss.es.js";
-const l = ({
-  children: y,
-  onClick: t,
-  disabled: n,
-  active: _,
-  index: d,
-  indent: i,
-  asChild: o = !1,
-  closeOnSelect: s = !0,
-  isParent: w = !1,
-  className: c,
-  role: m,
-  ...v
+import { jsx as $ } from "react/jsx-runtime";
+import { useMergeRefs as z } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import D from "../../../../../../external/classnames/index.es.js";
+import { isValidElement as I, cloneElement as A } from "react";
+import { useDropdownContext as B } from "../dropdown-context.es.js";
+import p from "./dropdown-item.module.scss.es.js";
+const b = (n, e) => (o) => {
+  n == null || n(o), o.defaultPrevented || e == null || e(o);
+}, W = ({
+  children: n,
+  onClick: e,
+  disabled: o,
+  active: g,
+  index: m,
+  indent: u,
+  asChild: s = !1,
+  closeOnSelect: i = !0,
+  isParent: l = !1,
+  className: x,
+  role: d,
+  ...k
 }) => {
-  const { getItemProps: b, listItemsRef: x, setOpen: f, activeIndex: D, divided: I, variant: u } = E(), g = o ? "div" : "button", P = (e) => typeof e != "number" || e <= 0 ? {} : {
-    "--dropdown-indent-level": e,
-    "--dropdown-indent": `${e}rem`
-  }, q = (e) => {
-    if (n) return;
-    const p = e.currentTarget.querySelector(
+  const { getItemProps: K, listItemsRef: N, setOpen: a, activeIndex: P, divided: R, variant: y } = B(), E = s ? "div" : "button", c = s && i !== !1 && I(n), w = (t) => {
+    typeof m == "number" && (N.current[m] = t);
+  }, T = I(n) ? n.ref : void 0, q = z([w, T]), V = (t) => typeof t != "number" || t <= 0 ? {} : {
+    "--dropdown-indent-level": t,
+    "--dropdown-indent": `${t}rem`
+  }, j = (t) => {
+    if (o) {
+      t.preventDefault();
+      return;
+    }
+    const r = t.currentTarget.querySelector(
       'input[type="checkbox"], input[type="radio"]'
     );
-    if (p) {
-      p.click();
+    if (r) {
+      r.click();
+      return;
+    }
+    e == null || e(t), (!s || c) && i && a(!1);
+  }, M = (t) => {
+    if (o) {
+      (t.key === "Enter" || t.key === " ") && t.preventDefault();
       return;
     }
-    o ? t == null || t(e) : (t == null || t(e), s && f(!1));
-  }, K = (e) => {
-    if (!n && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      const p = e.currentTarget.querySelector(
+    if (t.key === "Enter" || t.key === " ") {
+      const r = t.currentTarget.querySelector(
         'input[type="checkbox"], input[type="radio"]'
       );
-      p ? p.click() : t == null || t(e), !o && s && f(!1);
+      if (r) {
+        t.preventDefault(), r.click(), !s && i && a(!1);
+        return;
+      }
+      if (c) {
+        t.preventDefault(), t.currentTarget.click();
+        return;
+      }
+      t.preventDefault(), e == null || e(t), !s && i && a(!1);
     }
-  }, a = {
-    ref(e) {
-      typeof d == "number" && (x.current[d] = e);
-    },
-    tabIndex: D === d ? 0 : -1,
-    className: j(
-      r["tedi-dropdown__item"],
+  }, v = {
+    ref: w,
+    tabIndex: P === m ? 0 : -1,
+    className: D(
+      p["tedi-dropdown__item"],
       {
-        [r["tedi-dropdown__item--active"]]: _,
-        [r["tedi-dropdown__item--disabled"]]: n,
-        [r["tedi-dropdown__item--divided"]]: I,
-        [r["tedi-dropdown__item--indent"]]: i,
-        [r["tedi-dropdown__item--tree-item"]]: u === "tree" && i,
-        [r["tedi-dropdown__item--tree-parent"]]: u === "tree" && w
+        [p["tedi-dropdown__item--active"]]: g,
+        [p["tedi-dropdown__item--disabled"]]: o,
+        [p["tedi-dropdown__item--divided"]]: R,
+        [p["tedi-dropdown__item--indent"]]: u,
+        [p["tedi-dropdown__item--tree-item"]]: y === "tree" && u,
+        [p["tedi-dropdown__item--tree-parent"]]: y === "tree" && l
       },
-      c
+      x
     ),
-    style: P(i),
-    onClick: q,
-    onKeyDown: K,
+    style: V(u),
+    onClick: j,
+    onKeyDown: M,
+    ...k
+  }, _ = s && i === !1 ? { ...v, role: d } : K({
+    role: d ?? "menuitem",
+    disabled: s ? void 0 : o,
     ...v
-  }, N = o && s === !1 ? { ...a, role: m } : b({
-    role: m ?? "menuitem",
-    disabled: o ? void 0 : n,
-    ...a
   });
-  return /* @__PURE__ */ T(g, { ...N, children: y });
+  if (c) {
+    const t = n, r = t.props, f = _;
+    return A(t, {
+      ...f,
+      ref: q,
+      className: D(f.className, r.className),
+      style: { ...f.style, ...r.style },
+      "aria-disabled": o || void 0,
+      tabIndex: o ? -1 : f.tabIndex,
+      onClick: b(f.onClick, r.onClick),
+      onKeyDown: b(f.onKeyDown, r.onKeyDown)
+    });
+  }
+  return /* @__PURE__ */ $(E, { ..._, children: n });
 };
 export {
-  l as DropdownItem
+  W as DropdownItem
 };