@stackone/malachite 2.44.0 → 2.46.0

package/dist/components/PopoverParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nexport const PopoverList: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    disabled = false,\n    tooltip,\n}) => {\n    const button = (\n        <button\n            type=\"button\"\n            aria-label={ariaLabel}\n            aria-disabled={disabled || undefined}\n            onClick={disabled ? undefined : onClick}\n            className={`m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`}\n        >\n            {icon}\n        </button>\n    );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","PopoverList","children","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverAction","icon","ariaLabel","onClick","disabled","tooltip","button","FOCUS_RING_INSET","Tooltip"],"mappings":";;;;;AAUO,MAAMA,IAA8C,CAAC,EAAE,OAAAC,GAAO,QAAAC,QACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,oEAAoEC,CAAM;AAAA,IAErF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,MACZC;AAAA,IAAA;AAAA,EAAA;AACL,GAGSI,IAAuD,CAAC,EAAE,UAAAC,EAAA,MACnE,gBAAAF,EAAC,OAAA,EAAI,WAAW,wDAAwDG,CAAY,IAC/E,UAAAD,EAAA,CACL,GAGSE,IAAiBC;AAAA,EAC1B,CAAC,EAAE,UAAAH,EAAA,GAAYI,MACX,gBAAAN,EAAC,OAAA,EAAI,KAAAM,GAAU,WAAW,kCAAkCP,CAAM,QAC7D,UAAAG,EAAA,CACL;AAER;AACAE,EAAe,cAAc;AAEtB,MAAMG,IAAwD,CAAC,EAAE,UAAAL,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,kIACV,UAAAE,EAAA,CACL,GAWSM,IAA8C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AACJ,MAAM;AACF,QAAMC,IACF,gBAAAd;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYU;AAAA,MACZ,iBAAeE,KAAY;AAAA,MAC3B,SAASA,IAAW,SAAYD;AAAA,MAChC,WAAW,0KAA0KC,IAAW,4FAA4F,2MAA2M,IAAIG,CAAgB;AAAA,MAE1f,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGT,SAAOI,IAAU,gBAAAb,EAACgB,GAAA,EAAQ,MAAMH,GAAU,aAAO,IAAaC;AAClE;"}
+{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nexport const PopoverList: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","PopoverList","children","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":";;;;;;;AAYO,MAAMA,IAA8C,CAAC,EAAE,OAAAC,GAAO,QAAAC,QACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,oEAAoEC,CAAM;AAAA,IAErF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,MACZC;AAAA,IAAA;AAAA,EAAA;AACL,GAGSI,IAAuD,CAAC,EAAE,UAAAC,EAAA,MACnE,gBAAAF,EAAC,OAAA,EAAI,WAAW,wDAAwDG,CAAY,IAC/E,UAAAD,EAAA,CACL,GAGSE,IAAiBC;AAAA,EAC1B,CAAC,EAAE,UAAAH,EAAA,GAAYI,MACX,gBAAAN,EAAC,OAAA,EAAI,KAAAM,GAAU,WAAW,kCAAkCP,CAAM,QAC7D,UAAAG,EAAA,CACL;AAER;AACAE,EAAe,cAAc;AAEtB,MAAMG,IAAwD,CAAC,EAAE,UAAAL,QACpE,gBAAAF,EAAC,OAAA,EAAI,WAAU,kIACV,UAAAE,EAAA,CACL,GAaSM,IAA8C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,MAAMC;AAAA,EACN,UAAAC,IAAW;AAAA,EACX,SAAAC;AACJ,MAAM;AACF,QAAMC,IAAOF,IAAW,SAAYG,EAASJ,CAAO,GAC9CK,IAAY,0KAA0KJ,IAAW,4FAA4F,2MAA2M,IAAIK,CAAgB,IAC5fC,IACFJ,MAAS,SACL,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAAe;AAAA,MACA,cAAYL;AAAA,MACZ,SAAS,CAACU,MAAU;AAChB,QAAIC,EAAaD,CAAK,KAAKT,MACvBS,EAAM,eAAA,GACNT,EAAA;AAAA,MAER;AAAA,MACA,WAAW,gBAAgBM,CAAS;AAAA,MAEnC,UAAAR;AAAA,IAAA;AAAA,EAAA,IAGL,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYU;AAAA,MACZ,iBAAeG,KAAY;AAAA,MAC3B,SAASA,IAAW,SAAYF;AAAA,MAChC,WAAAM;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGb,SAAOK,IAAU,gBAAAd,EAACsB,GAAA,EAAQ,MAAMR,GAAU,aAAO,IAAaK;AAClE;"}

package/dist/components/Sidebar.js

@@ -1,45 +1,53 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { useMemo as _, forwardRef as u } from "react";
-import w from "./CustomIcons/CaretLeftIcon.js";
-import S from "./CustomIcons/CaretRightIcon.js";
-import f from "./CustomIcons/ChevronsUpDownIcon.js";
-import g from "./Tooltip.js";
-import { UsageCard as I } from "./UsageCard.js";
-import { isExpanded as R } from "./ariaState.js";
-import { BORDER as m, NO_SCROLLBAR as $ } from "./chromeStyles.js";
-import { FOCUS_RING as x } from "./focusRing.js";
-import { SIDEBAR_WIDTH_PX as b, SidebarContext as k, SIDEBAR_Z_INDEX as h, SIDEBAR_POPOVER_WIDTH_PX as E, useSidebarCollapsed as j } from "./sidebarContext.js";
-const s = () => ({ collapsed: j() }), O = 1, z = 24, v = { width: 8, height: 14 }, C = "fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:pointer-events-none [@media(hover:none)]:group-has-[:focus-visible]/sidebar:pointer-events-auto", D = ({
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { useMemo as R, forwardRef as y } from "react";
+import E from "./CustomIcons/CaretLeftIcon.js";
+import $ from "./CustomIcons/CaretRightIcon.js";
+import N from "./CustomIcons/ChevronsUpDownIcon.js";
+import _ from "./Tooltip.js";
+import b from "./TruncatedTooltip.js";
+import { UsageCard as O } from "./UsageCard.js";
+import { isExpanded as h } from "./ariaState.js";
+import { BORDER as m, NO_SCROLLBAR as T } from "./chromeStyles.js";
+import { FOCUS_RING as u } from "./focusRing.js";
+import { SIDEBAR_WIDTH_PX as g, SidebarContext as j, SIDEBAR_Z_INDEX as v, SIDEBAR_POPOVER_WIDTH_PX as k, SIDEBAR_TOOLTIP_DELAY_S as x, useSidebarCollapsed as A } from "./sidebarContext.js";
+const i = () => ({ collapsed: A() }), D = 1, P = 24, w = { width: 8, height: 14 }, z = "fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100", C = ({
   collapsed: e = !1,
   onToggleCollapse: t,
   expandLabel: a = "Expand menu",
   collapseLabel: c = "Collapse menu",
-  "aria-label": d = "Main",
+  "aria-label": p = "Main",
   children: n
 }) => {
-  const o = e ? a : c, i = _(() => ({ collapsed: e }), [e]), p = e ? b.collapsed : b.expanded;
-  return /* @__PURE__ */ r(k.Provider, { value: i, children: /* @__PURE__ */ l(
+  const l = e ? a : c, s = R(() => ({ collapsed: e }), [e]), o = e ? g.collapsed : g.expanded;
+  return /* @__PURE__ */ r(j.Provider, { value: s, children: /* @__PURE__ */ d(
     "aside",
     {
       className: "group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out",
-      style: { width: p, zIndex: h },
+      style: { width: o, zIndex: v },
       children: [
-        /* @__PURE__ */ r("nav", { "aria-label": d, className: "flex h-full flex-col", children: n }),
-        t && /* @__PURE__ */ r("div", { className: C, style: { left: p - z / 2, zIndex: h + 1 }, children: /* @__PURE__ */ r(g, { text: o, placement: "right", describesTrigger: !1, children: /* @__PURE__ */ r(
-          "button",
+        /* @__PURE__ */ r("nav", { "aria-label": p, className: "flex h-full flex-col", children: n }),
+        t && /* @__PURE__ */ r(
+          "div",
           {
-            type: "button",
-            "aria-label": o,
-            onClick: t,
-            className: `m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${m} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${x}`,
-            children: e ? /* @__PURE__ */ r(S, { size: 12 }) : /* @__PURE__ */ r(w, { size: 12 })
+            className: z,
+            style: { left: o - P / 2, zIndex: v + 1 },
+            children: /* @__PURE__ */ r(_, { text: l, placement: "right", describesTrigger: !1, children: /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                "aria-label": l,
+                onClick: t,
+                className: `m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${m} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${u}`,
+                children: e ? /* @__PURE__ */ r($, { size: 12 }) : /* @__PURE__ */ r(E, { size: 12 })
+              }
+            ) })
           }
-        ) }) })
+        )
       ]
     }
   ) });
-}, P = ({ children: e }) => {
-  const { collapsed: t } = s();
+}, L = ({ children: e }) => {
+  const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
     {
@@ -47,8 +55,8 @@ const s = () => ({ collapsed: j() }), O = 1, z = 24, v = { width: 8, height: 14
       children: e
     }
   );
-}, A = ({ children: e }) => /* @__PURE__ */ r("div", { className: `min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${$}`, children: e }), L = ({ children: e }) => {
-  const { collapsed: t } = s();
+}, B = ({ children: e }) => /* @__PURE__ */ r("div", { className: `min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${T}`, children: e }), G = ({ children: e }) => {
+  const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
     {
@@ -56,20 +64,20 @@ const s = () => ({ collapsed: j() }), O = 1, z = 24, v = { width: 8, height: 14
       children: e
     }
   );
-}, B = ({ children: e }) => /* @__PURE__ */ r("div", { className: "my-[2px] flex flex-col gap-[6px]", children: e }), G = ({ children: e }) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-[6px]", children: e }), T = ({ children: e }) => {
-  const { collapsed: t } = s();
+}, X = ({ children: e }) => /* @__PURE__ */ r("div", { className: "my-[2px] flex flex-col gap-[6px]", children: e }), H = ({ children: e }) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-[6px]", children: e }), U = ({ children: e }) => {
+  const { collapsed: t } = i();
   return /* @__PURE__ */ r("div", { className: `flex pt-5 pb-[18px] ${t ? "justify-center px-3" : "px-4"}`, children: e });
-}, X = ({
+}, V = ({
   children: e,
   "aria-label": t
 }) => {
-  const { collapsed: a } = s();
+  const { collapsed: a } = i();
   return a ? null : /* @__PURE__ */ r("div", { role: "status", "aria-label": t, className: "flex flex-col gap-2 px-3 pt-4", children: e });
-}, H = () => {
-  const { collapsed: e } = s();
+}, F = () => {
+  const { collapsed: e } = i();
   return e ? null : /* @__PURE__ */ r("hr", { className: `m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${m}` });
-}, U = ({ children: e }) => {
-  const { collapsed: t } = s();
+}, M = ({ children: e }) => {
+  const { collapsed: t } = i();
   return /* @__PURE__ */ r(
     "div",
     {
@@ -77,19 +85,19 @@ const s = () => ({ collapsed: j() }), O = 1, z = 24, v = { width: 8, height: 14
       children: e
     }
   );
-}, y = u(
-  ({ logo: e, title: t, subtitle: a, className: c = "", ...d }, n) => {
-    const { collapsed: o } = s();
-    return /* @__PURE__ */ l(
+}, S = y(
+  ({ logo: e, title: t, subtitle: a, titleTooltip: c, subtitleTooltip: p, className: n = "", ...l }, s) => {
+    const { collapsed: o } = i(), f = h(l["aria-expanded"]);
+    return /* @__PURE__ */ d(
       "button",
       {
-        ref: n,
+        ref: s,
         type: "button",
         "aria-label": o ? t : void 0,
-        ...d,
-        className: `group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${o ? "justify-center p-1" : "justify-between px-4 py-[6px]"} ${x} ${c}`.trim(),
+        ...l,
+        className: `group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${o ? "justify-center p-1" : "justify-between px-4 py-[6px]"} ${u} ${n}`.trim(),
         children: [
-          /* @__PURE__ */ l("span", { className: "flex min-w-0 items-center gap-4", children: [
+          /* @__PURE__ */ d("span", { className: "flex min-w-0 items-center gap-4", children: [
             /* @__PURE__ */ r(
               "span",
               {
@@ -98,77 +106,114 @@ const s = () => ({ collapsed: j() }), O = 1, z = 24, v = { width: 8, height: 14
                 children: e
               }
             ),
-            !o && /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-col gap-1", children: [
-              /* @__PURE__ */ r("span", { className: "block truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]", children: t }),
-              a && /* @__PURE__ */ r("span", { className: "block truncate text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: a })
+            !o && /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ r(
+                b,
+                {
+                  text: c ?? t,
+                  placement: "right",
+                  delay: x,
+                  triggerAs: "span",
+                  describesTrigger: !1,
+                  suppressed: f,
+                  className: "text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]",
+                  children: t
+                }
+              ),
+              a && /* @__PURE__ */ r(
+                b,
+                {
+                  text: p ?? a,
+                  placement: "right",
+                  delay: x,
+                  triggerAs: "span",
+                  describesTrigger: !1,
+                  suppressed: f,
+                  className: "text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]",
+                  children: a
+                }
+              )
             ] })
           ] }),
-          !o && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(f, { style: v }) })
+          !o && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(N, { style: w }) })
         ]
       }
     );
   }
 );
-y.displayName = "Sidebar.Switcher";
-const V = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${m} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`, N = u(
-  ({ avatar: e, initials: t, name: a, tooltip: c, className: d = "", ...n }, o) => {
-    const { collapsed: i } = s(), p = /* @__PURE__ */ l(
+S.displayName = "Sidebar.Switcher";
+const W = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${m} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`, I = y(
+  ({ avatar: e, initials: t, name: a, tooltip: c, className: p = "", ...n }, l) => {
+    const { collapsed: s } = i(), o = /* @__PURE__ */ d(
       "button",
       {
-        ref: o,
+        ref: l,
         type: "button",
-        "aria-label": i ? a : void 0,
+        "aria-label": s ? a : void 0,
         ...n,
-        className: `group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${i ? "justify-center p-0" : "justify-between px-2"} ${x} ${d}`.trim(),
+        className: `group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${s ? "justify-center p-0" : "justify-between px-2"} ${u} ${p}`.trim(),
         children: [
-          /* @__PURE__ */ l("span", { className: "flex min-w-0 items-center gap-3", children: [
-            /* @__PURE__ */ r("span", { "aria-hidden": i ? void 0 : !0, className: "flex shrink-0", children: e ?? (t ? /* @__PURE__ */ r("span", { className: V, children: t }) : null) }),
-            !i && /* @__PURE__ */ r("span", { className: "truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]", children: a })
+          /* @__PURE__ */ d("span", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ r("span", { "aria-hidden": s ? void 0 : !0, className: "flex shrink-0", children: e ?? (t ? /* @__PURE__ */ r("span", { className: W, children: t }) : null) }),
+            !s && /* @__PURE__ */ r(
+              b,
+              {
+                text: a ? c ?? a : void 0,
+                placement: "right",
+                delay: x,
+                triggerAs: "span",
+                describesTrigger: !1,
+                suppressed: h(n["aria-expanded"]),
+                className: "min-w-0 text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]",
+                children: a
+              }
+            )
           ] }),
-          !i && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(f, { style: v }) })
+          !s && /* @__PURE__ */ r("span", { className: "flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]", children: /* @__PURE__ */ r(N, { style: w }) })
         ]
       }
     );
-    return i ? /* @__PURE__ */ r(
-      g,
+    return s ? /* @__PURE__ */ r(
+      _,
       {
         text: a ? c ?? a : void 0,
         placement: "right",
+        delay: x,
         describesTrigger: !1,
-        suppressed: R(n["aria-expanded"]),
-        children: p
+        suppressed: h(n["aria-expanded"]),
+        children: o
       }
-    ) : p;
+    ) : o;
   }
 );
-N.displayName = "Sidebar.Account";
-const F = (e) => {
-  const { collapsed: t } = s();
-  return t ? null : /* @__PURE__ */ r("div", { className: "shrink-0 px-3 pt-3 pb-4", children: /* @__PURE__ */ r(I, { ...e }) });
-}, M = ({ children: e }) => /* @__PURE__ */ r(
+I.displayName = "Sidebar.Account";
+const Y = (e) => {
+  const { collapsed: t } = i();
+  return t ? null : /* @__PURE__ */ r("div", { className: "shrink-0 px-3 pt-3 pb-4", children: /* @__PURE__ */ r(O, { ...e }) });
+}, Z = ({ children: e }) => /* @__PURE__ */ r(
   "div",
   {
     className: "flex flex-col",
-    style: { width: E - 2 * O },
+    style: { width: k - 2 * D },
     children: e
   }
-), oe = Object.assign(D, {
-  Header: P,
-  Body: A,
-  Section: L,
-  Group: B,
-  GroupItems: G,
-  Search: T,
-  Notices: X,
-  Divider: H,
-  Footer: U,
-  Switcher: y,
-  Account: N,
-  Usage: F,
-  Panel: M
+), le = Object.assign(C, {
+  Header: L,
+  Body: B,
+  Section: G,
+  Group: X,
+  GroupItems: H,
+  Search: U,
+  Notices: V,
+  Divider: F,
+  Footer: M,
+  Switcher: S,
+  Account: I,
+  Usage: Y,
+  Panel: Z
 });
 export {
-  oe as Sidebar,
-  oe as default
+  le as Sidebar,
+  le as default
 };
 //# sourceMappingURL=Sidebar.js.map

package/dist/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_WIDTH_PX,\n    SIDEBAR_Z_INDEX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\n// Hidden by opacity, not visibility, so the half over the page can be hovered; touch has no hover to reveal it first.\nconst TOGGLE_LAYER =\n    'fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:pointer-events-none [@media(hover:none)]:group-has-[:focus-visible]/sidebar:pointer-events-auto';\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width, zIndex: SIDEBAR_Z_INDEX }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div className={TOGGLE_LAYER} style={{ left: width - TOGGLE_SIZE_PX / 2, zIndex: SIDEBAR_Z_INDEX + 1 }}>\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <span className=\"block truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                                {title}\n                            </span>\n                            {subtitle && (\n                                <span className=\"block truncate text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\">\n                                    {subtitle}\n                                </span>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, a node so `name` can be wrapped (it renders outside the button);\n     *  should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"truncate text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                            {name}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","SIDEBAR_Z_INDEX","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","className","rest","ref","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","isExpanded","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../src/components/Sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport CaretLeftIcon from './CustomIcons/CaretLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport ChevronsUpDownIcon from './CustomIcons/ChevronsUpDownIcon';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport UsageCard, { type UsageCardProps } from './UsageCard';\nimport { isExpanded } from './ariaState';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING } from './focusRing';\nimport {\n    SIDEBAR_POPOVER_WIDTH_PX,\n    SIDEBAR_TOOLTIP_DELAY_S,\n    SIDEBAR_WIDTH_PX,\n    SIDEBAR_Z_INDEX,\n    SidebarContext,\n    useSidebarCollapsed,\n} from './sidebarContext';\n\nconst useSidebar = () => ({ collapsed: useSidebarCollapsed() });\n\nconst POPOVER_BORDER_PX = 1;\nconst TOGGLE_SIZE_PX = 24;\nconst CHEVRONS = { width: 8, height: 14 } as const;\n\nexport interface SidebarProps {\n    collapsed?: boolean;\n    onToggleCollapse?: () => void;\n    expandLabel?: string;\n    collapseLabel?: string;\n    'aria-label'?: string;\n    children: React.ReactNode;\n}\n\n// Hidden by opacity, not visibility, so the half over the page can be hovered; touch always shows it.\nconst TOGGLE_LAYER =\n    'fixed top-[25px] opacity-0 [will-change:opacity] transition-[left,opacity] duration-200 ease-in-out group-hover/sidebar:opacity-100 group-has-[:focus-visible]/sidebar:opacity-100 [@media(hover:none)]:opacity-100';\n\nconst SidebarRoot: React.FC<SidebarProps> = ({\n    collapsed = false,\n    onToggleCollapse,\n    expandLabel = 'Expand menu',\n    collapseLabel = 'Collapse menu',\n    'aria-label': ariaLabel = 'Main',\n    children,\n}) => {\n    const toggleLabel = collapsed ? expandLabel : collapseLabel;\n    const context = useMemo(() => ({ collapsed }), [collapsed]);\n    const width = collapsed ? SIDEBAR_WIDTH_PX.collapsed : SIDEBAR_WIDTH_PX.expanded;\n\n    return (\n        <SidebarContext.Provider value={context}>\n            <aside\n                className=\"group/sidebar fixed top-0 bottom-0 left-0 box-border pt-[9px] bg-[var(--malachite-card-sunken-background,rgb(250,250,250))] transition-[width] duration-200 ease-in-out\"\n                style={{ width, zIndex: SIDEBAR_Z_INDEX }}\n            >\n                <nav aria-label={ariaLabel} className=\"flex h-full flex-col\">\n                    {children}\n                </nav>\n                {onToggleCollapse && (\n                    <div\n                        className={TOGGLE_LAYER}\n                        style={{ left: width - TOGGLE_SIZE_PX / 2, zIndex: SIDEBAR_Z_INDEX + 1 }}\n                    >\n                        <Tooltip text={toggleLabel} placement=\"right\" describesTrigger={false}>\n                            <button\n                                type=\"button\"\n                                aria-label={toggleLabel}\n                                onClick={onToggleCollapse}\n                                className={`m-0 inline-flex size-6 cursor-pointer items-center justify-center rounded-lg border border-solid p-0 ${BORDER} bg-[var(--malachite-card-background,rgb(255,255,255))] text-[var(--malachite-text-secondary,rgb(123,123,123))] [box-shadow:var(--malachite-shadow-default,0px_1px_0px_0px_rgba(0,0,0,0.15))] transition-colors duration-200 hover:border-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:text-[var(--malachite-text-primary,rgb(10,10,10))] ${FOCUS_RING}`}\n                            >\n                                {collapsed ? (\n                                    <CaretRightIcon size={12} />\n                                ) : (\n                                    <CaretLeftIcon size={12} />\n                                )}\n                            </button>\n                        </Tooltip>\n                    </div>\n                )}\n            </aside>\n        </SidebarContext.Provider>\n    );\n};\n\nconst Header: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`box-border flex h-14 shrink-0 items-center border-0 border-b border-solid ${BORDER} py-[6px] ${collapsed ? 'px-1' : 'px-2'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className={`min-h-0 flex-1 overflow-x-hidden overflow-y-auto ${NO_SCROLLBAR}`}>\n        {children}\n    </div>\n);\n\nconst Section: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`flex flex-col gap-[2px] py-[2px] ${collapsed ? 'items-center px-3' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst Group: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"my-[2px] flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst GroupItems: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"flex flex-col gap-[6px]\">{children}</div>\n);\n\nconst Search: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div className={`flex pt-5 pb-[18px] ${collapsed ? 'justify-center px-3' : 'px-4'}`}>\n            {children}\n        </div>\n    );\n};\n\nconst Notices: React.FC<{ children: React.ReactNode; 'aria-label': string }> = ({\n    children,\n    'aria-label': ariaLabel,\n}) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div role=\"status\" aria-label={ariaLabel} className=\"flex flex-col gap-2 px-3 pt-4\">\n            {children}\n        </div>\n    );\n};\n\nconst Divider: React.FC = () => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return <hr className={`m-0 my-2 h-0 shrink-0 border-0 border-t border-solid ${BORDER}`} />;\n};\n\nconst Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n    const { collapsed } = useSidebar();\n    return (\n        <div\n            className={`mt-1 flex shrink-0 border-0 border-t border-solid ${BORDER} py-3 ${collapsed ? 'justify-center px-2' : 'px-4'}`}\n        >\n            {children}\n        </div>\n    );\n};\n\ntype SidebarButtonAttributes = Omit<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    'style' | 'color' | 'children' | 'title' | 'name'\n>;\n\nexport interface SidebarSwitcherProps extends SidebarButtonAttributes {\n    logo: React.ReactNode;\n    title: string;\n    subtitle?: string;\n    /** Shown when `title` is cut off; a node so it can be wrapped. Defaults to `title`. */\n    titleTooltip?: React.ReactNode;\n    /** As `titleTooltip`, for `subtitle`. */\n    subtitleTooltip?: React.ReactNode;\n}\n\nconst Switcher = forwardRef<HTMLButtonElement, SidebarSwitcherProps>(\n    ({ logo, title, subtitle, titleTooltip, subtitleTooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const open = isExpanded(rest['aria-expanded']);\n        return (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? title : undefined}\n                {...rest}\n                className={`group/switcher m-0 box-border flex h-full w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans text-left ${collapsed ? 'justify-center p-1' : 'justify-between px-4 py-[6px]'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-4\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"relative top-[-2.5px] flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-6 [&_img]:object-contain\"\n                    >\n                        {logo}\n                    </span>\n                    {!collapsed && (\n                        <span className=\"flex min-w-0 flex-col gap-1\">\n                            <TruncatedTooltip\n                                text={titleTooltip ?? title}\n                                placement=\"right\"\n                                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                triggerAs=\"span\"\n                                describesTrigger={false}\n                                suppressed={open}\n                                className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[14px] font-medium text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                            >\n                                {title}\n                            </TruncatedTooltip>\n                            {subtitle && (\n                                <TruncatedTooltip\n                                    text={subtitleTooltip ?? subtitle}\n                                    placement=\"right\"\n                                    delay={SIDEBAR_TOOLTIP_DELAY_S}\n                                    triggerAs=\"span\"\n                                    describesTrigger={false}\n                                    suppressed={open}\n                                    className=\"text-[12px] leading-[12px] font-normal text-[var(--malachite-text-secondary,rgb(123,123,123))]\"\n                                >\n                                    {subtitle}\n                                </TruncatedTooltip>\n                            )}\n                        </span>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/switcher:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\nSwitcher.displayName = 'Sidebar.Switcher';\n\nexport interface SidebarAccountProps extends SidebarButtonAttributes {\n    avatar?: React.ReactNode;\n    initials?: string;\n    name: string;\n    /** Collapsed-rail tooltip, and expanded when `name` is cut off; a node so `name` can be wrapped.\n     *  Should read as `name`. Defaults to `name`, `false` hides it; none when `name` is empty. */\n    tooltip?: React.ReactNode;\n}\n\nconst INITIALS = `inline-flex items-center justify-center rounded-[var(--malachite-radius-md,6px)] border border-solid ${BORDER} bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] supports-[color:color-mix(in_srgb,red,red)]:border-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_20%,transparent)] supports-[color:color-mix(in_srgb,red,red)]:bg-[color-mix(in_srgb,var(--malachite-text-placeholder,rgb(187,187,187))_10%,transparent)] px-1 py-[3px] text-[length:var(--malachite-font-size-small,13px)] leading-[12px] font-semibold text-[var(--malachite-text-secondary,rgb(123,123,123))]`;\n\nconst Account = forwardRef<HTMLButtonElement, SidebarAccountProps>(\n    ({ avatar, initials, name, tooltip, className = '', ...rest }, ref) => {\n        const { collapsed } = useSidebar();\n        const button = (\n            <button\n                ref={ref}\n                type=\"button\"\n                aria-label={collapsed ? name : undefined}\n                {...rest}\n                className={`group/account m-0 box-border flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-lg border-0 bg-transparent font-sans ${collapsed ? 'justify-center p-0' : 'justify-between px-2'} ${FOCUS_RING} ${className}`.trim()}\n            >\n                <span className=\"flex min-w-0 items-center gap-3\">\n                    <span aria-hidden={collapsed ? undefined : true} className=\"flex shrink-0\">\n                        {avatar ?? (initials ? <span className={INITIALS}>{initials}</span> : null)}\n                    </span>\n                    {!collapsed && (\n                        <TruncatedTooltip\n                            text={name ? (tooltip ?? name) : undefined}\n                            placement=\"right\"\n                            delay={SIDEBAR_TOOLTIP_DELAY_S}\n                            triggerAs=\"span\"\n                            describesTrigger={false}\n                            suppressed={isExpanded(rest['aria-expanded'])}\n                            className=\"min-w-0 text-[length:var(--malachite-font-size-medium,14px)] leading-[22px] font-semibold text-[var(--malachite-text-primary,rgb(10,10,10))]\"\n                        >\n                            {name}\n                        </TruncatedTooltip>\n                    )}\n                </span>\n                {!collapsed && (\n                    <span className=\"flex shrink-0 text-[var(--malachite-text-secondary,rgb(123,123,123))] transition-colors group-hover/account:text-[var(--malachite-text-primary,rgb(10,10,10))]\">\n                        <ChevronsUpDownIcon style={CHEVRONS} />\n                    </span>\n                )}\n            </button>\n        );\n        return collapsed ? (\n            <Tooltip\n                text={name ? (tooltip ?? name) : undefined}\n                placement=\"right\"\n                delay={SIDEBAR_TOOLTIP_DELAY_S}\n                describesTrigger={false}\n                suppressed={isExpanded(rest['aria-expanded'])}\n            >\n                {button}\n            </Tooltip>\n        ) : (\n            button\n        );\n    },\n);\nAccount.displayName = 'Sidebar.Account';\n\nconst Usage: React.FC<UsageCardProps> = (props) => {\n    const { collapsed } = useSidebar();\n    if (collapsed) {\n        return null;\n    }\n    return (\n        <div className=\"shrink-0 px-3 pt-3 pb-4\">\n            <UsageCard {...props} />\n        </div>\n    );\n};\n\nconst Panel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className=\"flex flex-col\"\n        style={{ width: SIDEBAR_POPOVER_WIDTH_PX - 2 * POPOVER_BORDER_PX }}\n    >\n        {children}\n    </div>\n);\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n    Header,\n    Body,\n    Section,\n    Group,\n    GroupItems,\n    Search,\n    Notices,\n    Divider,\n    Footer,\n    Switcher,\n    Account,\n    Usage,\n    Panel,\n});\n\nexport default Sidebar;\n"],"names":["useSidebar","useSidebarCollapsed","POPOVER_BORDER_PX","TOGGLE_SIZE_PX","CHEVRONS","TOGGLE_LAYER","SidebarRoot","collapsed","onToggleCollapse","expandLabel","collapseLabel","ariaLabel","children","toggleLabel","context","useMemo","width","SIDEBAR_WIDTH_PX","jsx","SidebarContext","jsxs","SIDEBAR_Z_INDEX","Tooltip","BORDER","FOCUS_RING","CaretRightIcon","CaretLeftIcon","Header","Body","NO_SCROLLBAR","Section","Group","GroupItems","Search","Notices","Divider","Footer","Switcher","forwardRef","logo","title","subtitle","titleTooltip","subtitleTooltip","className","rest","ref","open","isExpanded","TruncatedTooltip","SIDEBAR_TOOLTIP_DELAY_S","ChevronsUpDownIcon","INITIALS","Account","avatar","initials","name","tooltip","button","Usage","props","UsageCard","Panel","SIDEBAR_POPOVER_WIDTH_PX","Sidebar"],"mappings":"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"}

package/dist/components/TruncatedTooltip.js

@@ -1,42 +1,43 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useRef as u, useCallback as d } from "react";
-import f from "./Tooltip.js";
-const T = ({
-  text: o,
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as u, useCallback as f } from "react";
+import h from "./Tooltip.js";
+const m = {
+  display: "block",
+  width: "100%",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+}, b = ({
+  text: r,
   children: l,
   delay: i = 0.5,
-  placement: n = "top",
-  className: s = "",
+  placement: s = "top",
+  className: n = "",
   triggerAs: a,
-  describesTrigger: c
+  describesTrigger: c,
+  suppressed: d
 }) => {
-  const r = u(null), p = d(() => {
-    const e = r.current;
+  const t = u(null), p = f(() => {
+    const e = t.current;
     return !!e && e.scrollWidth > e.clientWidth;
   }, []);
-  return /* @__PURE__ */ t(
-    f,
+  return /* @__PURE__ */ o(
+    h,
     {
-      text: o,
+      text: r,
       delay: i,
-      placement: n,
+      placement: s,
       wrapChildren: !1,
       isShrinkable: !0,
       shouldShow: p,
       triggerAs: a,
       describesTrigger: c,
-      children: /* @__PURE__ */ t(
-        "span",
-        {
-          ref: r,
-          className: `block w-full overflow-hidden whitespace-nowrap text-ellipsis ${s}`.trim(),
-          children: l
-        }
-      )
+      suppressed: d,
+      children: /* @__PURE__ */ o("span", { ref: t, className: n || void 0, style: m, children: l })
     }
   );
 };
 export {
-  T as default
+  b as default
 };
 //# sourceMappingURL=TruncatedTooltip.js.map

package/dist/components/TruncatedTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedTooltip.js","sources":["../../src/components/TruncatedTooltip.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport Tooltip from './Tooltip';\n\nexport interface TruncatedTooltipProps {\n    text: React.ReactNode | string;\n    children: React.ReactNode;\n    delay?: number;\n    placement?: 'top' | 'bottom' | 'left' | 'right';\n    className?: string;\n    /** `span` where the tooltip sits inside inline content. Defaults to `div`. */\n    triggerAs?: 'div' | 'span';\n    /** False when `text` repeats the children, which are already in the DOM in full. */\n    describesTrigger?: boolean;\n}\n\n/**\n * TruncatedTooltip renders its children in a single-line truncating container\n * (overflow:hidden + text-overflow:ellipsis + white-space:nowrap) and surfaces\n * the malachite Tooltip only when the content is actually being cut off.\n *\n * Truncation is checked at interaction time (Tooltip's `shouldShow`), not at\n * mount: a mount-time measurement forces a synchronous layout per instance,\n * and in large tables those reads interleave with other components' DOM writes\n * — hundreds of full layout passes per mounted batch (the Safari row-mount\n * stalls of ENG-1168). The ellipsis itself is pure CSS and needs no JS.\n */\nconst TruncatedTooltip: React.FC<TruncatedTooltipProps> = ({\n    text,\n    children,\n    delay = 0.5,\n    placement = 'top',\n    className = '',\n    triggerAs,\n    describesTrigger,\n}) => {\n    const containerRef = useRef<HTMLSpanElement | null>(null);\n\n    // One layout read, on the user's hover/focus — never on the mount path.\n    const isTruncated = useCallback(() => {\n        const el = containerRef.current;\n        return !!el && el.scrollWidth > el.clientWidth;\n    }, []);\n\n    return (\n        <Tooltip\n            text={text}\n            delay={delay}\n            placement={placement}\n            wrapChildren={false}\n            isShrinkable\n            shouldShow={isTruncated}\n            triggerAs={triggerAs}\n            describesTrigger={describesTrigger}\n        >\n            <span\n                ref={containerRef}\n                className={`block w-full overflow-hidden whitespace-nowrap text-ellipsis ${className}`.trim()}\n            >\n                {children}\n            </span>\n        </Tooltip>\n    );\n};\n\nexport default TruncatedTooltip;\n"],"names":["TruncatedTooltip","text","children","delay","placement","className","triggerAs","describesTrigger","containerRef","useRef","isTruncated","useCallback","el","jsx","Tooltip"],"mappings":";;;AA0BA,MAAMA,IAAoD,CAAC;AAAA,EACvD,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,kBAAAC;AACJ,MAAM;AACF,QAAMC,IAAeC,EAA+B,IAAI,GAGlDC,IAAcC,EAAY,MAAM;AAClC,UAAMC,IAAKJ,EAAa;AACxB,WAAO,CAAC,CAACI,KAAMA,EAAG,cAAcA,EAAG;AAAA,EACvC,GAAG,CAAA,CAAE;AAEL,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAAb;AAAA,MACA,OAAAE;AAAA,MACA,WAAAC;AAAA,MACA,cAAc;AAAA,MACd,cAAY;AAAA,MACZ,YAAYM;AAAA,MACZ,WAAAJ;AAAA,MACA,kBAAAC;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAKL;AAAA,UACL,WAAW,gEAAgEH,CAAS,GAAG,KAAA;AAAA,UAEtF,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TruncatedTooltip.js","sources":["../../src/components/TruncatedTooltip.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport Tooltip from './Tooltip';\n\nexport interface TruncatedTooltipProps {\n    text: React.ReactNode | string;\n    children: React.ReactNode;\n    delay?: number;\n    placement?: 'top' | 'bottom' | 'left' | 'right';\n    className?: string;\n    /** `span` where the tooltip sits inside inline content. Defaults to `div`. */\n    triggerAs?: 'div' | 'span';\n    /** False when `text` repeats the children, which are already in the DOM in full. */\n    describesTrigger?: boolean;\n    /** Keeps the tooltip shut, e.g. while the control it sits in has its own popup open. */\n    suppressed?: boolean;\n}\n\n// Inline: in a menu portaled outside the shadow root, utility classes would not apply.\nconst TRUNCATE_STYLE: React.CSSProperties = {\n    display: 'block',\n    width: '100%',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n};\n\n/**\n * TruncatedTooltip renders its children in a single-line truncating container\n * (overflow:hidden + text-overflow:ellipsis + white-space:nowrap) and surfaces\n * the malachite Tooltip only when the content is actually being cut off.\n *\n * Truncation is checked at interaction time (Tooltip's `shouldShow`), not at\n * mount: a mount-time measurement forces a synchronous layout per instance,\n * and in large tables those reads interleave with other components' DOM writes\n * — hundreds of full layout passes per mounted batch (the Safari row-mount\n * stalls of ENG-1168). The ellipsis itself is pure CSS and needs no JS.\n */\nconst TruncatedTooltip: React.FC<TruncatedTooltipProps> = ({\n    text,\n    children,\n    delay = 0.5,\n    placement = 'top',\n    className = '',\n    triggerAs,\n    describesTrigger,\n    suppressed,\n}) => {\n    const containerRef = useRef<HTMLSpanElement | null>(null);\n\n    // One layout read, on the user's hover/focus — never on the mount path.\n    const isTruncated = useCallback(() => {\n        const el = containerRef.current;\n        return !!el && el.scrollWidth > el.clientWidth;\n    }, []);\n\n    return (\n        <Tooltip\n            text={text}\n            delay={delay}\n            placement={placement}\n            wrapChildren={false}\n            isShrinkable\n            shouldShow={isTruncated}\n            triggerAs={triggerAs}\n            describesTrigger={describesTrigger}\n            suppressed={suppressed}\n        >\n            <span ref={containerRef} className={className || undefined} style={TRUNCATE_STYLE}>\n                {children}\n            </span>\n        </Tooltip>\n    );\n};\n\nexport default TruncatedTooltip;\n"],"names":["TRUNCATE_STYLE","TruncatedTooltip","text","children","delay","placement","className","triggerAs","describesTrigger","suppressed","containerRef","useRef","isTruncated","useCallback","el","jsx","Tooltip"],"mappings":";;;AAkBA,MAAMA,IAAsC;AAAA,EACxC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAClB,GAaMC,IAAoD,CAAC;AAAA,EACvD,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AACJ,MAAM;AACF,QAAMC,IAAeC,EAA+B,IAAI,GAGlDC,IAAcC,EAAY,MAAM;AAClC,UAAMC,IAAKJ,EAAa;AACxB,WAAO,CAAC,CAACI,KAAMA,EAAG,cAAcA,EAAG;AAAA,EACvC,GAAG,CAAA,CAAE;AAEL,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAAd;AAAA,MACA,OAAAE;AAAA,MACA,WAAAC;AAAA,MACA,cAAc;AAAA,MACd,cAAY;AAAA,MACZ,YAAYO;AAAA,MACZ,WAAAL;AAAA,MACA,kBAAAC;AAAA,MACA,YAAAC;AAAA,MAEA,UAAA,gBAAAM,EAAC,UAAK,KAAKL,GAAc,WAAWJ,KAAa,QAAW,OAAON,GAC9D,UAAAG,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/actionMenuKeyboard.js

@@ -1,4 +1,8 @@
-const l = (o) => o ? [...o.querySelectorAll('button[role="menuitem"]:not(:disabled)')] : [], s = (o, t) => {
+const l = (o) => o ? [
+  ...o.querySelectorAll(
+    'button[role="menuitem"]:not(:disabled), a[role="menuitem"]'
+  )
+] : [], s = (o, t) => {
   const n = l(o), r = (t === "last" ? n[n.length - 1] : n[0]) ?? o;
   r == null || r.focus({ preventScroll: !0 });
 }, c = (o, t) => ({

package/dist/components/actionMenuKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionMenuKeyboard.js","sources":["../../src/components/actionMenuKeyboard.ts"],"sourcesContent":["import type { ActionMenuPlacement } from './actionMenuTypes';\n\nexport type MenuEdge = 'first' | 'last';\n\nexport const enabledItems = (menu: HTMLElement | null): HTMLButtonElement[] =>\n    menu\n        ? [...menu.querySelectorAll<HTMLButtonElement>('button[role=\"menuitem\"]:not(:disabled)')]\n        : [];\n\nexport const focusEdge = (menu: HTMLElement | null, edge: MenuEdge): void => {\n    const items = enabledItems(menu);\n    const target = (edge === 'last' ? items[items.length - 1] : items[0]) ?? menu;\n    target?.focus({ preventScroll: true });\n};\n\nexport const edgeForTriggerKey = (\n    key: string,\n    placement: ActionMenuPlacement,\n): MenuEdge | undefined =>\n    ({\n        ArrowDown: 'first',\n        ArrowUp: placement.startsWith('top') ? 'last' : undefined,\n        ArrowRight: placement.startsWith('right') ? 'first' : undefined,\n    })[key] as MenuEdge | undefined;\n\nexport const itemForMenuKey = (\n    items: HTMLButtonElement[],\n    current: EventTarget | null,\n    key: string,\n): HTMLButtonElement | undefined => {\n    const index = items.indexOf(current as HTMLButtonElement);\n    const from = index === -1 ? items.length : index;\n    return {\n        ArrowDown: items[(index + 1) % items.length],\n        ArrowUp: items[(from - 1 + items.length) % items.length],\n        Home: items[0],\n        End: items[items.length - 1],\n    }[key];\n};\n"],"names":["enabledItems","menu","focusEdge","edge","items","target","edgeForTriggerKey","key","placement","itemForMenuKey","current","index","from"],"mappings":"AAIO,MAAMA,IAAe,CAACC,MACzBA,IACM,CAAC,GAAGA,EAAK,iBAAoC,wCAAwC,CAAC,IACtF,CAAA,GAEGC,IAAY,CAACD,GAA0BE,MAAyB;AACzE,QAAMC,IAAQJ,EAAaC,CAAI,GACzBI,KAAUF,MAAS,SAASC,EAAMA,EAAM,SAAS,CAAC,IAAIA,EAAM,CAAC,MAAMH;AACzE,EAAAI,KAAA,QAAAA,EAAQ,MAAM,EAAE,eAAe,GAAA;AACnC,GAEaC,IAAoB,CAC7BC,GACAC,OAEC;AAAA,EACG,WAAW;AAAA,EACX,SAASA,EAAU,WAAW,KAAK,IAAI,SAAS;AAAA,EAChD,YAAYA,EAAU,WAAW,OAAO,IAAI,UAAU;AAC1D,GAAGD,CAAG,GAEGE,IAAiB,CAC1BL,GACAM,GACAH,MACgC;AAChC,QAAMI,IAAQP,EAAM,QAAQM,CAA4B,GAClDE,IAAOD,MAAU,KAAKP,EAAM,SAASO;AAC3C,SAAO;AAAA,IACH,WAAWP,GAAOO,IAAQ,KAAKP,EAAM,MAAM;AAAA,IAC3C,SAASA,GAAOQ,IAAO,IAAIR,EAAM,UAAUA,EAAM,MAAM;AAAA,IACvD,MAAMA,EAAM,CAAC;AAAA,IACb,KAAKA,EAAMA,EAAM,SAAS,CAAC;AAAA,EAAA,EAC7BG,CAAG;AACT;"}
+{"version":3,"file":"actionMenuKeyboard.js","sources":["../../src/components/actionMenuKeyboard.ts"],"sourcesContent":["import type { ActionMenuPlacement } from './actionMenuTypes';\n\nexport type MenuEdge = 'first' | 'last';\n\nexport const enabledItems = (menu: HTMLElement | null): HTMLElement[] =>\n    menu\n        ? [\n              ...menu.querySelectorAll<HTMLElement>(\n                  'button[role=\"menuitem\"]:not(:disabled), a[role=\"menuitem\"]',\n              ),\n          ]\n        : [];\n\nexport const focusEdge = (menu: HTMLElement | null, edge: MenuEdge): void => {\n    const items = enabledItems(menu);\n    const target = (edge === 'last' ? items[items.length - 1] : items[0]) ?? menu;\n    target?.focus({ preventScroll: true });\n};\n\nexport const edgeForTriggerKey = (\n    key: string,\n    placement: ActionMenuPlacement,\n): MenuEdge | undefined =>\n    ({\n        ArrowDown: 'first',\n        ArrowUp: placement.startsWith('top') ? 'last' : undefined,\n        ArrowRight: placement.startsWith('right') ? 'first' : undefined,\n    })[key] as MenuEdge | undefined;\n\nexport const itemForMenuKey = (\n    items: HTMLElement[],\n    current: EventTarget | null,\n    key: string,\n): HTMLElement | undefined => {\n    const index = items.indexOf(current as HTMLButtonElement);\n    const from = index === -1 ? items.length : index;\n    return {\n        ArrowDown: items[(index + 1) % items.length],\n        ArrowUp: items[(from - 1 + items.length) % items.length],\n        Home: items[0],\n        End: items[items.length - 1],\n    }[key];\n};\n"],"names":["enabledItems","menu","focusEdge","edge","items","target","edgeForTriggerKey","key","placement","itemForMenuKey","current","index","from"],"mappings":"AAIO,MAAMA,IAAe,CAACC,MACzBA,IACM;AAAA,EACI,GAAGA,EAAK;AAAA,IACJ;AAAA,EAAA;AAER,IACA,CAAA,GAEGC,IAAY,CAACD,GAA0BE,MAAyB;AACzE,QAAMC,IAAQJ,EAAaC,CAAI,GACzBI,KAAUF,MAAS,SAASC,EAAMA,EAAM,SAAS,CAAC,IAAIA,EAAM,CAAC,MAAMH;AACzE,EAAAI,KAAA,QAAAA,EAAQ,MAAM,EAAE,eAAe,GAAA;AACnC,GAEaC,IAAoB,CAC7BC,GACAC,OAEC;AAAA,EACG,WAAW;AAAA,EACX,SAASA,EAAU,WAAW,KAAK,IAAI,SAAS;AAAA,EAChD,YAAYA,EAAU,WAAW,OAAO,IAAI,UAAU;AAC1D,GAAGD,CAAG,GAEGE,IAAiB,CAC1BL,GACAM,GACAH,MAC0B;AAC1B,QAAMI,IAAQP,EAAM,QAAQM,CAA4B,GAClDE,IAAOD,MAAU,KAAKP,EAAM,SAASO;AAC3C,SAAO;AAAA,IACH,WAAWP,GAAOO,IAAQ,KAAKP,EAAM,MAAM;AAAA,IAC3C,SAASA,GAAOQ,IAAO,IAAIR,EAAM,UAAUA,EAAM,MAAM;AAAA,IACvD,MAAMA,EAAM,CAAC;AAAA,IACb,KAAKA,EAAMA,EAAM,SAAS,CAAC;AAAA,EAAA,EAC7BG,CAAG;AACT;"}