@stackone/malachite 2.64.0 → 2.66.0

package/dist/components/NavItem.js

@@ -1,162 +1,201 @@
-import { jsx as e, jsxs as b, Fragment as w } from "react/jsx-runtime";
-import U, { forwardRef as W } from "react";
-import V from "./CustomIcons/CaretRightIcon.js";
-import X from "./Tooltip.js";
-import { isExpanded as Y } from "./ariaState.js";
-import { paintOnChild as q } from "./asChild.js";
-import { chainHandler as J, composeRefs as M, elementRef as Q } from "./composeRefs.js";
-import { FOCUS_RING_INSET as Z } from "./focusRing.js";
-import { resolveRel as ee } from "./linkRel.js";
-import { safeHref as ae } from "./safeHref.js";
-import { SIDEBAR_TOOLTIP_DELAY_S as re } from "./sidebarContext.js";
-const te = "group relative flex items-center box-border no-underline border-0 m-0 cursor-pointer select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200", I = {
+import { jsx as e, jsxs as h, Fragment as C } from "react/jsx-runtime";
+import Q, { forwardRef as Z, useId as ee } from "react";
+import ae from "./CustomIcons/CaretRightIcon.js";
+import te from "./Tooltip.js";
+import { isExpanded as re } from "./ariaState.js";
+import { paintOnChild as ne } from "./asChild.js";
+import { chainHandler as oe, composeRefs as ie, elementRef as se } from "./composeRefs.js";
+import { FOCUS_RING_INSET as ce } from "./focusRing.js";
+import { resolveRel as le } from "./linkRel.js";
+import { safeHref as de } from "./safeHref.js";
+import { SIDEBAR_TOOLTIP_DELAY_S as me } from "./sidebarContext.js";
+const pe = "group relative flex items-center box-border no-underline border-0 m-0 select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200", K = {
   item: "w-full min-h-[37px] gap-3 py-[10px] px-3",
   compact: "w-full min-h-9 gap-3 py-2 px-3",
   subitem: "w-full gap-3 py-2 pr-3 pl-9",
   collapsed: "w-9 h-[37px] shrink-0 justify-center p-0"
-}, ie = "bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]", ne = {
+}, he = "bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]", ge = {
   idle: "bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]",
-  active: `${ie} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,
+  active: `${he} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,
   activeChild: "bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]",
-  danger: "bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]"
-}, oe = {
+  danger: "bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]",
+  disabled: "bg-transparent text-[var(--malachite-text-dimmed,rgb(161,161,161))]"
+}, be = {
   idle: "bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]",
   active: "bg-[var(--malachite-accent-foreground,rgb(2,122,66))]",
   activeChild: "bg-[var(--malachite-accent-foreground,rgb(2,122,66))]",
-  danger: "bg-[var(--malachite-text-destructive,rgb(237,53,54))]"
-}, $ = "inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!", se = {
+  danger: "bg-[var(--malachite-text-destructive,rgb(237,53,54))]",
+  disabled: "bg-[var(--malachite-text-placeholder,rgb(187,187,187))]"
+}, L = "inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!", z = "var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))", ue = {
   "--malachite-ctx-tag-cursor": "pointer",
-  "--malachite-ctx-tag-ground": "var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))"
-}, le = W((j, f) => {
+  "--malachite-ctx-tag-ground": z
+}, fe = {
+  "--malachite-ctx-tag-cursor": "not-allowed",
+  "--malachite-ctx-tag-ground": z
+}, ve = (t) => {
+  t.preventDefault(), t.stopPropagation();
+}, xe = [
+  "onPointerDown",
+  "onMouseDown",
+  "onPointerEnter",
+  "onPointerOver",
+  "onMouseEnter",
+  "onMouseOver"
+], Ne = /* @__PURE__ */ new Set(["Enter", " "]), ye = /* @__PURE__ */ new Set(["Enter", " ", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"]), we = (t) => {
+  const c = t["aria-haspopup"] !== void 0 || t["aria-expanded"] !== void 0, l = c ? ye : Ne, { onKeyDown: o } = t, i = { ...t };
+  for (const d of xe)
+    delete i[d];
+  return c && delete i.onFocus, i.onKeyDown = o ? (d) => {
+    l.has(d.key) || o(d);
+  } : void 0, i;
+}, B = { display: "block" }, Oe = Z((t, c) => {
   const {
     label: l,
-    icon: c,
-    active: O = !1,
-    hasActiveChild: A = !1,
-    collapsed: d = !1,
-    variant: u = "item",
-    size: z = "medium",
-    danger: S = !1,
-    trailing: _,
-    badge: t,
-    badgeLabel: r,
-    tag: T,
-    disclosure: m,
-    tooltip: L,
-    accessibleLabel: D,
-    className: H = "",
-    asChild: B,
-    ...v
-  } = j, E = S ? "danger" : O ? "active" : A ? "activeChild" : "idle", G = u === "subitem", K = d ? I.collapsed : I[u === "item" && z === "small" ? "compact" : u], x = `${te} ${K} ${ne[E]} ${Z} ${H}`.trim(), p = d ? L ?? (typeof l == "string" ? l : void 0) : void 0, P = p ? [p, r].filter(Boolean).join(", ") : void 0, i = D ?? (d ? P : void 0), k = v, R = O ? "page" : k["aria-current"], N = d ? /* @__PURE__ */ b(w, { children: [
-    c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $, children: c }),
-    !i && /* @__PURE__ */ b("span", { className: "sr-only", children: [
+    icon: o,
+    active: i = !1,
+    hasActiveChild: d = !1,
+    collapsed: N = !1,
+    variant: E = "item",
+    size: G = "medium",
+    danger: H = !1,
+    trailing: k,
+    badge: g,
+    badgeLabel: m,
+    tag: R,
+    disclosure: y,
+    tooltip: U,
+    accessibleLabel: F,
+    className: M = "",
+    asChild: V,
+    disabled: r = !1,
+    disabledReason: D,
+    ..._
+  } = t, I = ee(), p = r && D ? D : void 0, S = r && "disabled" || H && "danger" || i && "active" || d && "activeChild" || "idle", Y = E === "subitem", W = N ? K.collapsed : K[E === "item" && G === "small" ? "compact" : E], T = `${pe} ${r ? "cursor-not-allowed" : "cursor-pointer"} ${W} ${ge[S]} ${ce} ${M}`.trim(), b = N ? U ?? (typeof l == "string" ? l : void 0) : void 0, X = b ? [b, m].filter(Boolean).join(", ") : void 0, u = F ?? (N ? X : void 0), P = _, $ = i ? "page" : P["aria-current"], w = N ? /* @__PURE__ */ h(C, { children: [
+    o && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: L, children: o }),
+    !u && /* @__PURE__ */ h("span", { className: "sr-only", children: [
       l,
-      r && `, ${r}`
+      m && `, ${m}`
     ] }),
-    t && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: "pointer-events-none absolute top-1 right-1 flex",
-        children: t
+        children: g
       }
     )
-  ] }) : /* @__PURE__ */ b(w, { children: [
-    G ? /* @__PURE__ */ e(
+  ] }) : /* @__PURE__ */ h(C, { children: [
+    Y ? /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
-        className: `absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${oe[E]}`
+        className: `absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${be[S]}`
       }
-    ) : c && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $, children: c }),
-    /* @__PURE__ */ b("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+    ) : o && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: L, children: o }),
+    /* @__PURE__ */ h("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
       /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: l }),
-      T && /* @__PURE__ */ e("span", { className: "flex shrink-0", style: se, children: T })
+      R && /* @__PURE__ */ e(
+        "span",
+        {
+          className: "flex shrink-0",
+          style: r ? fe : ue,
+          children: R
+        }
+      )
     ] }),
-    t && /* @__PURE__ */ e("span", { "aria-hidden": r ? !0 : void 0, className: "flex shrink-0", children: t }),
-    t && r && !i && /* @__PURE__ */ e("span", { className: "sr-only", children: r }),
-    _ && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: _ }),
-    m && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e("span", { "aria-hidden": m ? !0 : void 0, className: "flex shrink-0", children: g }),
+    g && m && !u && /* @__PURE__ */ e("span", { className: "sr-only", children: m }),
+    k && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center", children: k }),
+    y && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: "flex shrink-0 items-center",
         style: {
-          transform: m === "expanded" ? "rotate(90deg)" : void 0,
+          transform: y === "expanded" ? "rotate(90deg)" : void 0,
           transition: "transform 0.2s"
         },
-        children: /* @__PURE__ */ e(V, { size: 14 })
+        children: /* @__PURE__ */ e(ae, { size: 14 })
       }
     )
-  ] });
-  let h;
-  if (B) {
-    const { children: n, ...o } = v, y = q(n, x, void 0, N), a = n.props, g = Object.fromEntries(
-      Object.entries(o).map(
-        ([s, C]) => s.startsWith("on") && typeof C == "function" && typeof a[s] == "function" ? [
-          s,
-          J(
-            a[s],
-            C
+  ] }), q = p ? /* @__PURE__ */ h(C, { children: [
+    w,
+    /* @__PURE__ */ e("span", { id: I, hidden: !0, children: p })
+  ] }) : w;
+  let O;
+  if (V) {
+    const { children: f, ...v } = _, A = ne(f, T, void 0, w), s = f.props, a = Object.fromEntries(
+      Object.entries(v).map(
+        ([n, x]) => n.startsWith("on") && typeof x == "function" && typeof s[n] == "function" ? [
+          n,
+          oe(
+            s[n],
+            x
           )
-        ] : [s, C]
+        ] : [n, x]
       )
     );
-    h = U.cloneElement(y, {
-      ...g,
-      ref: M(Q(n), f),
-      "aria-current": R ?? a["aria-current"],
-      "aria-label": i ?? o["aria-label"] ?? a["aria-label"]
+    O = Q.cloneElement(A, {
+      ...a,
+      ref: ie(se(f), c),
+      "aria-current": $ ?? s["aria-current"],
+      "aria-label": u ?? v["aria-label"] ?? s["aria-label"]
     });
   } else {
     const {
-      href: n,
-      target: o,
-      rel: y,
-      ...a
-    } = v, g = ae(n);
-    h = g !== void 0 ? /* @__PURE__ */ e(
+      href: f,
+      target: v,
+      rel: A,
+      ...s
+    } = _, a = r ? we(s) : s, n = r ? void 0 : de(f), x = [a["aria-describedby"], p && I].filter(Boolean).join(" ") || void 0;
+    O = n !== void 0 ? /* @__PURE__ */ e(
       "a",
       {
         ...a,
-        ref: f,
-        href: g,
-        target: o,
-        rel: ee(y, o),
-        "aria-current": R,
-        "aria-label": i ?? a["aria-label"],
-        className: x,
-        children: N
+        ref: c,
+        href: n,
+        target: v,
+        rel: le(A, v),
+        "aria-current": $,
+        "aria-label": u ?? a["aria-label"],
+        className: T,
+        children: w
       }
     ) : /* @__PURE__ */ e(
       "button",
       {
         ...a,
-        ref: f,
+        ref: c,
         type: "button",
-        "aria-expanded": a["aria-expanded"] ?? (m ? m === "expanded" : void 0),
-        "aria-label": i ?? a["aria-label"],
-        className: x,
-        children: N
+        "aria-expanded": a["aria-expanded"] ?? (y ? y === "expanded" : void 0),
+        "aria-label": u ?? a["aria-label"],
+        "aria-disabled": r || a["aria-disabled"],
+        "aria-describedby": x,
+        onClick: r ? ve : a.onClick,
+        className: T,
+        children: q
       }
     );
   }
-  const F = Y(k["aria-expanded"]);
-  return p ? /* @__PURE__ */ e(
-    X,
+  const J = re(P["aria-expanded"]), j = b && p ? /* @__PURE__ */ h(C, { children: [
+    /* @__PURE__ */ e("span", { style: B, children: b }),
+    /* @__PURE__ */ e("span", { style: B, children: p })
+  ] }) : b ?? p;
+  return j ? /* @__PURE__ */ e(
+    te,
     {
-      text: p,
+      text: j,
       placement: "right",
-      delay: re,
+      delay: me,
       describesTrigger: !1,
-      suppressed: F,
-      children: h
+      suppressed: J,
+      children: O
     }
-  ) : h;
+  ) : O;
 });
-le.displayName = "NavItem";
+Oe.displayName = "NavItem";
 export {
-  le as NavItem,
-  le as default
+  Oe as NavItem,
+  Oe as default
 };
 //# sourceMappingURL=NavItem.js.map

package/dist/components/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../../src/components/NavItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport Tooltip from './Tooltip';\nimport { isExpanded } from './ariaState';\nimport { paintOnChild } from './asChild';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { SIDEBAR_TOOLTIP_DELAY_S } from './sidebarContext';\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLElement>,\n    'children' | 'className' | 'style' | 'color' | 'title'\n>;\n\ninterface NavItemBaseProps extends NativeProps {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    active?: boolean;\n    hasActiveChild?: boolean;\n    collapsed?: boolean;\n    variant?: 'item' | 'subitem';\n    size?: 'medium' | 'small';\n    danger?: boolean;\n    trailing?: React.ReactNode;\n    badge?: React.ReactNode;\n    badgeLabel?: string;\n    tag?: React.ReactNode;\n    disclosure?: 'expanded' | 'collapsed';\n    tooltip?: string;\n    accessibleLabel?: string;\n    className?: string;\n}\n\nexport interface NavItemLinkProps extends NavItemBaseProps {\n    asChild?: false;\n    href?: string;\n    target?: string;\n    rel?: string;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface NavItemAsChildProps extends NavItemBaseProps {\n    asChild: true;\n    children: React.ReactElement;\n    href?: never;\n    target?: never;\n    rel?: never;\n    disclosure?: never;\n}\n\nexport type NavItemProps = NavItemLinkProps | NavItemAsChildProps;\n\nconst ROW =\n    'group relative flex items-center box-border no-underline border-0 m-0 cursor-pointer select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200';\n\nconst SHAPE = {\n    item: 'w-full min-h-[37px] gap-3 py-[10px] px-3',\n    compact: 'w-full min-h-9 gap-3 py-2 px-3',\n    subitem: 'w-full gap-3 py-2 pr-3 pl-9',\n    collapsed: 'w-9 h-[37px] shrink-0 justify-center p-0',\n} as const;\n\nconst ACTIVE_BACKGROUND =\n    'bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]';\n\nconst TONE = {\n    idle: 'bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: `${ACTIVE_BACKGROUND} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,\n    activeChild:\n        'bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst DOT_TONE = {\n    idle: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    activeChild: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-[var(--malachite-text-destructive,rgb(237,53,54))]',\n} as const;\n\nconst ICON = 'inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!';\n\n/*\n * What a `Tag` on the row reads: the pointer every row shows (`inherit` would not do, since a\n * custom property set to it inherits itself), and the ground the row rests on, so the tag keeps\n * one colour while the row is hovered or current. `--malachite-ctx-navitem-ground` is a context\n * channel the container sets (`Sidebar` does), not a theme token; elsewhere, a card.\n */\nconst TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'pointer',\n    '--malachite-ctx-tag-ground':\n        'var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))',\n} as React.CSSProperties;\n\nconst NavItem = forwardRef<HTMLElement, NavItemProps>((props, ref) => {\n    const {\n        label,\n        icon,\n        active = false,\n        hasActiveChild = false,\n        collapsed = false,\n        variant = 'item',\n        size = 'medium',\n        danger = false,\n        trailing,\n        badge,\n        badgeLabel,\n        tag,\n        disclosure,\n        tooltip,\n        accessibleLabel,\n        className = '',\n        asChild,\n        ...rest\n    } = props;\n\n    const tone = danger ? 'danger' : active ? 'active' : hasActiveChild ? 'activeChild' : 'idle';\n    const isSubitem = variant === 'subitem';\n    const shapeKey = variant === 'item' && size === 'small' ? 'compact' : variant;\n    const shape = collapsed ? SHAPE.collapsed : SHAPE[shapeKey];\n    const rowClass = `${ROW} ${shape} ${TONE[tone]} ${FOCUS_RING_INSET} ${className}`.trim();\n\n    const tooltipText = collapsed\n        ? (tooltip ?? (typeof label === 'string' ? label : undefined))\n        : undefined;\n    const collapsedName = tooltipText\n        ? [tooltipText, badgeLabel].filter(Boolean).join(', ')\n        : undefined;\n    const ariaLabel = accessibleLabel ?? (collapsed ? collapsedName : undefined);\n    const native = rest as NativeProps;\n    const ariaCurrent = active ? 'page' : native['aria-current'];\n\n    const content = collapsed ? (\n        <>\n            {icon && (\n                <span aria-hidden=\"true\" className={ICON}>\n                    {icon}\n                </span>\n            )}\n            {!ariaLabel && (\n                <span className=\"sr-only\">\n                    {label}\n                    {badgeLabel && `, ${badgeLabel}`}\n                </span>\n            )}\n            {badge && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute top-1 right-1 flex\"\n                >\n                    {badge}\n                </span>\n            )}\n        </>\n    ) : (\n        <>\n            {isSubitem ? (\n                <span\n                    aria-hidden=\"true\"\n                    className={`absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${DOT_TONE[tone]}`}\n                />\n            ) : (\n                icon && (\n                    <span aria-hidden=\"true\" className={ICON}>\n                        {icon}\n                    </span>\n                )\n            )}\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <span className=\"min-w-0 truncate\">{label}</span>\n                {tag && (\n                    <span className=\"flex shrink-0\" style={TAG_CONTEXT}>\n                        {tag}\n                    </span>\n                )}\n            </span>\n            {badge && (\n                <span aria-hidden={badgeLabel ? true : undefined} className=\"flex shrink-0\">\n                    {badge}\n                </span>\n            )}\n            {badge && badgeLabel && !ariaLabel && <span className=\"sr-only\">{badgeLabel}</span>}\n            {trailing && <span className=\"flex shrink-0 items-center\">{trailing}</span>}\n            {disclosure && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"flex shrink-0 items-center\"\n                    style={{\n                        transform: disclosure === 'expanded' ? 'rotate(90deg)' : undefined,\n                        transition: 'transform 0.2s',\n                    }}\n                >\n                    <CaretRightIcon size={14} />\n                </span>\n            )}\n        </>\n    );\n\n    let element: React.ReactElement;\n    if (asChild) {\n        const { children, ...childNative } = rest as NativeProps & {\n            children: React.ReactElement<Record<string, unknown>>;\n        };\n        const painted = paintOnChild(children, rowClass, undefined, content);\n        const childProps = children.props;\n        const chained = Object.fromEntries(\n            Object.entries(childNative).map(([key, value]) =>\n                key.startsWith('on') &&\n                typeof value === 'function' &&\n                typeof childProps[key] === 'function'\n                    ? [\n                          key,\n                          chainHandler(\n                              childProps[key] as (event: React.SyntheticEvent) => void,\n                              value as (event: React.SyntheticEvent) => void,\n                          ),\n                      ]\n                    : [key, value],\n            ),\n        );\n        element = React.cloneElement(painted, {\n            ...chained,\n            ref: composeRefs(elementRef<HTMLElement>(children), ref),\n            'aria-current': ariaCurrent ?? childProps['aria-current'],\n            'aria-label': ariaLabel ?? childNative['aria-label'] ?? childProps['aria-label'],\n        } as Record<string, unknown>);\n    } else {\n        const {\n            href: rawHref,\n            target,\n            rel,\n            ...linkNative\n        } = rest as NativeProps & Pick<NavItemLinkProps, 'href' | 'target' | 'rel'>;\n        const href = safeHref(rawHref);\n        element =\n            href !== undefined ? (\n                <a\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </a>\n            ) : (\n                <button\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-expanded={\n                        linkNative['aria-expanded'] ??\n                        (disclosure ? disclosure === 'expanded' : undefined)\n                    }\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </button>\n            );\n    }\n\n    const popupOpen = isExpanded(native['aria-expanded']);\n\n    return tooltipText ? (\n        <Tooltip\n            text={tooltipText}\n            placement=\"right\"\n            delay={SIDEBAR_TOOLTIP_DELAY_S}\n            describesTrigger={false}\n            suppressed={popupOpen}\n        >\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n});\n\nNavItem.displayName = 'NavItem';\n\nexport { NavItem };\nexport default NavItem;\n"],"names":["ROW","SHAPE","ACTIVE_BACKGROUND","TONE","DOT_TONE","ICON","TAG_CONTEXT","NavItem","forwardRef","props","ref","label","icon","active","hasActiveChild","collapsed","variant","size","danger","trailing","badge","badgeLabel","tag","disclosure","tooltip","accessibleLabel","className","asChild","rest","tone","isSubitem","shape","rowClass","FOCUS_RING_INSET","tooltipText","collapsedName","ariaLabel","native","ariaCurrent","content","jsxs","Fragment","jsx","CaretRightIcon","element","children","childNative","painted","paintOnChild","childProps","chained","key","value","chainHandler","React","composeRefs","elementRef","rawHref","target","rel","linkNative","href","safeHref","resolveRel","popupOpen","isExpanded","Tooltip","SIDEBAR_TOOLTIP_DELAY_S"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../../src/components/NavItem.tsx"],"sourcesContent":["import React, { forwardRef, useId } from 'react';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport Tooltip from './Tooltip';\nimport { isExpanded } from './ariaState';\nimport { paintOnChild } from './asChild';\nimport { chainHandler, composeRefs, elementRef } from './composeRefs';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { resolveRel } from './linkRel';\nimport { safeHref } from './safeHref';\nimport { SIDEBAR_TOOLTIP_DELAY_S } from './sidebarContext';\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLElement>,\n    'children' | 'className' | 'style' | 'color' | 'title'\n>;\n\ninterface NavItemBaseProps extends NativeProps {\n    label: React.ReactNode;\n    icon?: React.ReactNode;\n    active?: boolean;\n    hasActiveChild?: boolean;\n    collapsed?: boolean;\n    variant?: 'item' | 'subitem';\n    size?: 'medium' | 'small';\n    danger?: boolean;\n    trailing?: React.ReactNode;\n    badge?: React.ReactNode;\n    badgeLabel?: string;\n    tag?: React.ReactNode;\n    disclosure?: 'expanded' | 'collapsed';\n    tooltip?: string;\n    accessibleLabel?: string;\n    className?: string;\n}\n\nexport interface NavItemLinkProps extends NavItemBaseProps {\n    asChild?: false;\n    /** Leaves the row focusable but inert: `aria-disabled`, no hover, no click or navigation. */\n    disabled?: boolean;\n    /** Why a `disabled` row is unavailable: its tooltip and its accessible description. */\n    disabledReason?: string;\n    href?: string;\n    target?: string;\n    rel?: string;\n    onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface NavItemAsChildProps extends NavItemBaseProps {\n    asChild: true;\n    children: React.ReactElement;\n    disabled?: never;\n    disabledReason?: never;\n    href?: never;\n    target?: never;\n    rel?: never;\n    disclosure?: never;\n}\n\nexport type NavItemProps = NavItemLinkProps | NavItemAsChildProps;\n\nconst ROW =\n    'group relative flex items-center box-border no-underline border-0 m-0 select-none text-left font-sans font-medium text-[length:var(--malachite-font-size-small,13px)] leading-[17px] rounded-[var(--malachite-radius-xl,12px)] transition-[background-color,color] duration-200';\n\nconst SHAPE = {\n    item: 'w-full min-h-[37px] gap-3 py-[10px] px-3',\n    compact: 'w-full min-h-9 gap-3 py-2 px-3',\n    subitem: 'w-full gap-3 py-2 pr-3 pl-9',\n    collapsed: 'w-9 h-[37px] shrink-0 justify-center p-0',\n} as const;\n\nconst ACTIVE_BACKGROUND =\n    'bg-[var(--malachite-accent-background-glass,rgba(0,175,102,0.08))] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-accent-background,rgb(0,175,102))_12%,transparent)]';\n\nconst TONE = {\n    idle: 'bg-transparent text-[var(--malachite-text-secondary,rgb(123,123,123))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: `${ACTIVE_BACKGROUND} text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]`,\n    activeChild:\n        'bg-transparent text-[var(--malachite-accent-foreground,rgb(2,122,66))] hover:bg-[var(--malachite-buttonlist-hover-background,rgb(245,245,245))] hover:text-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-transparent text-[var(--malachite-text-destructive,rgb(237,53,54))] hover:bg-[var(--malachite-error-background-glass,rgba(197,63,63,0.08))] hover:text-[var(--malachite-text-destructive,rgb(237,53,54))]',\n    disabled: 'bg-transparent text-[var(--malachite-text-dimmed,rgb(161,161,161))]',\n} as const;\n\nconst DOT_TONE = {\n    idle: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))] group-hover:bg-[var(--malachite-text-primary,rgb(10,10,10))]',\n    active: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    activeChild: 'bg-[var(--malachite-accent-foreground,rgb(2,122,66))]',\n    danger: 'bg-[var(--malachite-text-destructive,rgb(237,53,54))]',\n    disabled: 'bg-[var(--malachite-text-placeholder,rgb(187,187,187))]',\n} as const;\n\nconst ICON = 'inline-flex shrink-0 items-center justify-center size-4 [&_svg]:size-4!';\n\n/*\n * What a `Tag` on the row reads: the pointer every row shows (`inherit` would not do, since a\n * custom property set to it inherits itself), and the ground the row rests on, so the tag keeps\n * one colour while the row is hovered or current. `--malachite-ctx-navitem-ground` is a context\n * channel the container sets (`Sidebar` does), not a theme token; elsewhere, a card.\n */\nconst TAG_GROUND = 'var(--malachite-ctx-navitem-ground, var(--malachite-card-background, #ffffff))';\nconst TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'pointer',\n    '--malachite-ctx-tag-ground': TAG_GROUND,\n} as React.CSSProperties;\nconst DISABLED_TAG_CONTEXT = {\n    '--malachite-ctx-tag-cursor': 'not-allowed',\n    '--malachite-ctx-tag-ground': TAG_GROUND,\n} as React.CSSProperties;\n\nconst swallowClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n};\n\nconst PRESS_AND_HOVER = [\n    'onPointerDown',\n    'onMouseDown',\n    'onPointerEnter',\n    'onPointerOver',\n    'onMouseEnter',\n    'onMouseOver',\n] as const;\nconst ACTIVATION_KEYS = new Set(['Enter', ' ']);\nconst POPUP_KEYS = new Set(['Enter', ' ', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft']);\n\n// Popover and ActionMenu open from the press, hover, focus and arrow-key handlers they clone on.\nconst inertHandlers = (props: NativeProps): NativeProps => {\n    const isPopupTrigger =\n        props['aria-haspopup'] !== undefined || props['aria-expanded'] !== undefined;\n    const ignored = isPopupTrigger ? POPUP_KEYS : ACTIVATION_KEYS;\n    const { onKeyDown } = props;\n    const inert: NativeProps = { ...props };\n    for (const key of PRESS_AND_HOVER) {\n        delete inert[key];\n    }\n    if (isPopupTrigger) {\n        delete inert.onFocus;\n    }\n    inert.onKeyDown = onKeyDown\n        ? (event) => {\n              if (!ignored.has(event.key)) {\n                  onKeyDown(event);\n              }\n          }\n        : undefined;\n    return inert;\n};\n\n/** Portalled to `document.body`, outside the shadow sheet, so it is laid out inline. */\nconst BLOCK: React.CSSProperties = { display: 'block' };\n\nconst NavItem = forwardRef<HTMLElement, NavItemProps>((props, ref) => {\n    const {\n        label,\n        icon,\n        active = false,\n        hasActiveChild = false,\n        collapsed = false,\n        variant = 'item',\n        size = 'medium',\n        danger = false,\n        trailing,\n        badge,\n        badgeLabel,\n        tag,\n        disclosure,\n        tooltip,\n        accessibleLabel,\n        className = '',\n        asChild,\n        disabled = false,\n        disabledReason,\n        ...rest\n    } = props;\n    const reasonId = useId();\n    const reason = disabled && disabledReason ? disabledReason : undefined;\n\n    const tone =\n        (disabled && 'disabled') ||\n        (danger && 'danger') ||\n        (active && 'active') ||\n        (hasActiveChild && 'activeChild') ||\n        'idle';\n    const isSubitem = variant === 'subitem';\n    const shapeKey = variant === 'item' && size === 'small' ? 'compact' : variant;\n    const shape = collapsed ? SHAPE.collapsed : SHAPE[shapeKey];\n    const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n    const rowClass =\n        `${ROW} ${cursor} ${shape} ${TONE[tone]} ${FOCUS_RING_INSET} ${className}`.trim();\n\n    const tooltipText = collapsed\n        ? (tooltip ?? (typeof label === 'string' ? label : undefined))\n        : undefined;\n    const collapsedName = tooltipText\n        ? [tooltipText, badgeLabel].filter(Boolean).join(', ')\n        : undefined;\n    const ariaLabel = accessibleLabel ?? (collapsed ? collapsedName : undefined);\n    const native = rest as NativeProps;\n    const ariaCurrent = active ? 'page' : native['aria-current'];\n\n    const content = collapsed ? (\n        <>\n            {icon && (\n                <span aria-hidden=\"true\" className={ICON}>\n                    {icon}\n                </span>\n            )}\n            {!ariaLabel && (\n                <span className=\"sr-only\">\n                    {label}\n                    {badgeLabel && `, ${badgeLabel}`}\n                </span>\n            )}\n            {badge && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute top-1 right-1 flex\"\n                >\n                    {badge}\n                </span>\n            )}\n        </>\n    ) : (\n        <>\n            {isSubitem ? (\n                <span\n                    aria-hidden=\"true\"\n                    className={`absolute left-[14px] top-1/2 -mt-[2px] size-1 rounded-full transition-colors duration-200 ${DOT_TONE[tone]}`}\n                />\n            ) : (\n                icon && (\n                    <span aria-hidden=\"true\" className={ICON}>\n                        {icon}\n                    </span>\n                )\n            )}\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n                <span className=\"min-w-0 truncate\">{label}</span>\n                {tag && (\n                    <span\n                        className=\"flex shrink-0\"\n                        style={disabled ? DISABLED_TAG_CONTEXT : TAG_CONTEXT}\n                    >\n                        {tag}\n                    </span>\n                )}\n            </span>\n            {badge && (\n                <span aria-hidden={badgeLabel ? true : undefined} className=\"flex shrink-0\">\n                    {badge}\n                </span>\n            )}\n            {badge && badgeLabel && !ariaLabel && <span className=\"sr-only\">{badgeLabel}</span>}\n            {trailing && <span className=\"flex shrink-0 items-center\">{trailing}</span>}\n            {disclosure && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"flex shrink-0 items-center\"\n                    style={{\n                        transform: disclosure === 'expanded' ? 'rotate(90deg)' : undefined,\n                        transition: 'transform 0.2s',\n                    }}\n                >\n                    <CaretRightIcon size={14} />\n                </span>\n            )}\n        </>\n    );\n    // The tooltip mounts only once shown, so the first focus needs the reason in its own node.\n    const described = reason ? (\n        <>\n            {content}\n            <span id={reasonId} hidden>\n                {reason}\n            </span>\n        </>\n    ) : (\n        content\n    );\n\n    let element: React.ReactElement;\n    if (asChild) {\n        const { children, ...childNative } = rest as NativeProps & {\n            children: React.ReactElement<Record<string, unknown>>;\n        };\n        const painted = paintOnChild(children, rowClass, undefined, content);\n        const childProps = children.props;\n        const chained = Object.fromEntries(\n            Object.entries(childNative).map(([key, value]) =>\n                key.startsWith('on') &&\n                typeof value === 'function' &&\n                typeof childProps[key] === 'function'\n                    ? [\n                          key,\n                          chainHandler(\n                              childProps[key] as (event: React.SyntheticEvent) => void,\n                              value as (event: React.SyntheticEvent) => void,\n                          ),\n                      ]\n                    : [key, value],\n            ),\n        );\n        element = React.cloneElement(painted, {\n            ...chained,\n            ref: composeRefs(elementRef<HTMLElement>(children), ref),\n            'aria-current': ariaCurrent ?? childProps['aria-current'],\n            'aria-label': ariaLabel ?? childNative['aria-label'] ?? childProps['aria-label'],\n        } as Record<string, unknown>);\n    } else {\n        const {\n            href: rawHref,\n            target,\n            rel,\n            ...forwarded\n        } = rest as NativeProps & Pick<NavItemLinkProps, 'href' | 'target' | 'rel'>;\n        const linkNative = disabled ? inertHandlers(forwarded) : forwarded;\n        const href = disabled ? undefined : safeHref(rawHref);\n        const describedBy =\n            [linkNative['aria-describedby'], reason && reasonId].filter(Boolean).join(' ') ||\n            undefined;\n        element =\n            href !== undefined ? (\n                <a\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    className={rowClass}\n                >\n                    {content}\n                </a>\n            ) : (\n                <button\n                    {...linkNative}\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-expanded={\n                        linkNative['aria-expanded'] ??\n                        (disclosure ? disclosure === 'expanded' : undefined)\n                    }\n                    aria-label={ariaLabel ?? linkNative['aria-label']}\n                    aria-disabled={disabled || linkNative['aria-disabled']}\n                    aria-describedby={describedBy}\n                    onClick={disabled ? swallowClick : linkNative.onClick}\n                    className={rowClass}\n                >\n                    {described}\n                </button>\n            );\n    }\n\n    const popupOpen = isExpanded(native['aria-expanded']);\n    const tooltipContent =\n        tooltipText && reason ? (\n            <>\n                <span style={BLOCK}>{tooltipText}</span>\n                <span style={BLOCK}>{reason}</span>\n            </>\n        ) : (\n            (tooltipText ?? reason)\n        );\n\n    return tooltipContent ? (\n        <Tooltip\n            text={tooltipContent}\n            placement=\"right\"\n            delay={SIDEBAR_TOOLTIP_DELAY_S}\n            describesTrigger={false}\n            suppressed={popupOpen}\n        >\n            {element}\n        </Tooltip>\n    ) : (\n        element\n    );\n});\n\nNavItem.displayName = 'NavItem';\n\nexport { NavItem };\nexport default NavItem;\n"],"names":["ROW","SHAPE","ACTIVE_BACKGROUND","TONE","DOT_TONE","ICON","TAG_GROUND","TAG_CONTEXT","DISABLED_TAG_CONTEXT","swallowClick","event","PRESS_AND_HOVER","ACTIVATION_KEYS","POPUP_KEYS","inertHandlers","props","isPopupTrigger","ignored","onKeyDown","inert","key","BLOCK","NavItem","forwardRef","ref","label","icon","active","hasActiveChild","collapsed","variant","size","danger","trailing","badge","badgeLabel","tag","disclosure","tooltip","accessibleLabel","className","asChild","disabled","disabledReason","rest","reasonId","useId","reason","tone","isSubitem","shape","rowClass","FOCUS_RING_INSET","tooltipText","collapsedName","ariaLabel","native","ariaCurrent","content","jsxs","Fragment","jsx","CaretRightIcon","described","element","children","childNative","painted","paintOnChild","childProps","chained","value","chainHandler","React","composeRefs","elementRef","rawHref","target","rel","forwarded","linkNative","href","safeHref","describedBy","resolveRel","popupOpen","isExpanded","tooltipContent","Tooltip","SIDEBAR_TOOLTIP_DELAY_S"],"mappings":"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"}