@flanksource/clicky-ui 0.3.35 → 0.3.37

package/dist/data/DataTableMenuSections.cjs

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("./Icon.cjs");
+const UiResizeVertical = require("../icons/components/UiResizeVertical.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
+const UiRows = require("../icons/components/UiRows.cjs");
+const UiListFlat = require("../icons/components/UiListFlat.cjs");
+const UiListDashes = require("../icons/components/UiListDashes.cjs");
+const UiDesktop = require("../icons/components/UiDesktop.cjs");
+const UiSun = require("../icons/components/UiSun.cjs");
+const UiMoon = require("../icons/components/UiMoon.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const DENSITY_OPTIONS = [
+  { value: "compact", icon: UiRows.UiRows, label: "Compact" },
+  { value: "comfortable", icon: UiListFlat.UiListFlat, label: "Comfortable" },
+  { value: "spacious", icon: UiListDashes.UiListDashes, label: "Spacious" }
+];
+function groupMenuActions(actions) {
+  const groups = [];
+  for (const action of actions) {
+    const section = action.section ?? "Download";
+    let group = groups.find((g) => g.section === section);
+    if (!group) {
+      group = { section, actions: [] };
+      groups.push(group);
+    }
+    group.actions.push(action);
+  }
+  return groups;
+}
+function MenuActionSection({
+  actions,
+  separated,
+  onClose,
+  size = "menu"
+}) {
+  const groups = groupMenuActions(actions);
+  const [openSubmenu, setOpenSubmenu] = react.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        (separated || index > 0) && "mt-1 border-t border-border pt-1"
+      ),
+      children: [
+        group.section && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group.section }),
+        group.actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+          MenuActionItem,
+          {
+            action,
+            submenu: (openSubmenu == null ? void 0 : openSubmenu.id) === action.id ? openSubmenu : null,
+            onOpenSubmenu: setOpenSubmenu,
+            onClose,
+            size
+          },
+          action.id
+        ))
+      ]
+    },
+    group.section
+  )) });
+}
+function MenuActionItem({
+  action,
+  submenu,
+  onOpenSubmenu,
+  onClose,
+  size
+}) {
+  const hasDescription = Boolean(action.description);
+  const children = action.children ?? [];
+  const isSubmenu = children.length > 0;
+  const openFrom = (element) => {
+    const rect = element.getBoundingClientRect();
+    const width = 224;
+    const x = rect.right + width > window.innerWidth ? rect.left - width : rect.right;
+    onOpenSubmenu({ id: action.id, x, y: rect.top });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": isSubmenu ? "menu" : void 0,
+        "aria-expanded": isSubmenu ? submenu != null : void 0,
+        disabled: action.disabled,
+        className: utils.cn(
+          "flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+          hasDescription ? "items-start" : "items-center",
+          size === "sheet" && "min-h-10 py-2 text-sm",
+          action.disabled && "cursor-not-allowed opacity-50",
+          submenu && "bg-accent text-accent-foreground"
+        ),
+        onClick: (event) => {
+          if (action.disabled) return;
+          if (isSubmenu) {
+            if (submenu) onOpenSubmenu(null);
+            else openFrom(event.currentTarget);
+            return;
+          }
+          action.onSelect();
+          onClose();
+        },
+        children: [
+          action.icon && /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: action.icon,
+              className: utils.cn(
+                "shrink-0 text-sm",
+                hasDescription && "mt-0.5",
+                action.iconClassName ?? "text-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn(hasDescription && "font-medium"), children: action.label }),
+            action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
+          ] }),
+          isSubmenu && /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: UiChevronRight.UiChevronRight,
+              className: "shrink-0 text-sm text-muted-foreground"
+            }
+          )
+        ]
+      }
+    ),
+    isSubmenu && submenu && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "menu",
+        "aria-label": typeof action.label === "string" ? action.label : "Submenu",
+        className: "fixed z-50 max-h-[calc(100vh-1rem)] min-w-[14rem] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
+        style: { left: submenu.x, top: submenu.y },
+        children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          MenuActionItem,
+          {
+            action: child,
+            submenu: null,
+            onOpenSubmenu,
+            onClose,
+            size
+          },
+          child.id
+        ))
+      }
+    )
+  ] });
+}
+function DensityMenuSection({
+  densityOverride,
+  separated,
+  onDensityChange,
+  size = "menu"
+}) {
+  const current = densityOverride ?? "inherit";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Density" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": current === "inherit",
+        className: densityMenuItemClassName(current === "inherit", size),
+        onClick: () => onDensityChange(void 0),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: UiResizeVertical.UiResizeVertical,
+              className: "text-sm text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: "Use page density" }),
+          current === "inherit" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+        ]
+      }
+    ),
+    DENSITY_OPTIONS.map((option) => {
+      const active = current === option.value;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active, size),
+          onClick: () => onDensityChange(option.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: option.icon,
+                className: "text-sm text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
+function densityMenuItemClassName(active, size) {
+  return utils.cn(
+    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+    size === "sheet" && "min-h-10 py-2 text-sm",
+    active && "text-foreground"
+  );
+}
+const THEME_MENU_OPTIONS = [
+  { value: "system", icon: UiDesktop.UiDesktop, label: "Use system theme" },
+  { value: "light", icon: UiSun.UiSun, label: "Light" },
+  { value: "dark", icon: UiMoon.UiMoon, label: "Dark" }
+];
+function ThemeMenuSection({
+  value,
+  separated,
+  onChange,
+  size = "menu"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Theme" }),
+    THEME_MENU_OPTIONS.map((option) => {
+      const active = value === option.value;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active, size),
+          onClick: () => onChange(option.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: option.icon,
+                className: "text-sm text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
+exports.DensityMenuSection = DensityMenuSection;
+exports.MenuActionSection = MenuActionSection;
+exports.ThemeMenuSection = ThemeMenuSection;
+//# sourceMappingURL=DataTableMenuSections.cjs.map

package/dist/data/DataTableMenuSections.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableMenuSections.cjs","sources":["../../src/data/DataTableMenuSections.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { type Density } from \"../hooks/use-density\";\nimport { type Theme } from \"../hooks/use-theme\";\nimport {\n  UiCheck,\n  UiChevronRight,\n  UiDesktop,\n  UiListDashes,\n  UiListFlat,\n  UiMoon,\n  UiResizeVertical,\n  UiRows,\n  UiSun,\n} from \"../icons\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { DataTableMenuAction } from \"./DataTable\";\n\n// Shared by every section rendered inside the table's ⋯ preferences surface:\n// \"menu\" is the existing desktop floating menu (unchanged rows), \"sheet\" is\n// the mobile Modal sheet, whose rows grow to a 40px touch target.\nexport type MenuSectionSize = \"menu\" | \"sheet\";\n\nconst DENSITY_OPTIONS: Array<{\n  value: Density;\n  icon: StaticIconComponent;\n  label: string;\n}> = [\n  { value: \"compact\", icon: UiRows, label: \"Compact\" },\n  { value: \"comfortable\", icon: UiListFlat, label: \"Comfortable\" },\n  { value: \"spacious\", icon: UiListDashes, label: \"Spacious\" },\n];\n\n// Groups menu actions by their `section` heading, preserving the order each\n// section first appears. Actions without a section fall under \"Download\" so the\n// existing download menu is unchanged.\nfunction groupMenuActions(\n  actions: DataTableMenuAction[],\n): { section: string; actions: DataTableMenuAction[] }[] {\n  const groups: { section: string; actions: DataTableMenuAction[] }[] = [];\n  for (const action of actions) {\n    const section = action.section ?? \"Download\";\n    let group = groups.find((g) => g.section === section);\n    if (!group) {\n      group = { section, actions: [] };\n      groups.push(group);\n    }\n    group.actions.push(action);\n  }\n  return groups;\n}\n\nexport function MenuActionSection({\n  actions,\n  separated,\n  onClose,\n  size = \"menu\",\n}: {\n  actions: DataTableMenuAction[];\n  separated: boolean;\n  onClose: () => void;\n  size?: MenuSectionSize;\n}) {\n  const groups = groupMenuActions(actions);\n  // Which submenu is open, if any. One at a time: hovering a sibling takes the\n  // flyout with it, which is what every menu does and what stops two levels\n  // from being open over each other.\n  const [openSubmenu, setOpenSubmenu] = useState<{\n    id: string;\n    x: number;\n    y: number;\n  } | null>(null);\n\n  return (\n    <>\n      {groups.map((group, index) => (\n        <div\n          key={group.section}\n          className={cn(\n            (separated || index > 0) && \"mt-1 border-t border-border pt-1\",\n          )}\n        >\n          {group.section && (\n            <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              {group.section}\n            </div>\n          )}\n          {group.actions.map((action) => (\n            <MenuActionItem\n              key={action.id}\n              action={action}\n              submenu={openSubmenu?.id === action.id ? openSubmenu : null}\n              onOpenSubmenu={setOpenSubmenu}\n              onClose={onClose}\n              size={size}\n            />\n          ))}\n        </div>\n      ))}\n    </>\n  );\n}\n\nfunction MenuActionItem({\n  action,\n  submenu,\n  onOpenSubmenu,\n  onClose,\n  size,\n}: {\n  action: DataTableMenuAction;\n  submenu: { id: string; x: number; y: number } | null;\n  onOpenSubmenu: (state: { id: string; x: number; y: number } | null) => void;\n  onClose: () => void;\n  size: MenuSectionSize;\n}) {\n  const hasDescription = Boolean(action.description);\n  const children = action.children ?? [];\n  const isSubmenu = children.length > 0;\n\n  const openFrom = (element: HTMLElement) => {\n    const rect = element.getBoundingClientRect();\n    // Flip to the left when the flyout would run off the right edge, using the\n    // same minimum width the panel below is given.\n    const width = 224;\n    const x =\n      rect.right + width > window.innerWidth ? rect.left - width : rect.right;\n    onOpenSubmenu({ id: action.id, x, y: rect.top });\n  };\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        aria-haspopup={isSubmenu ? \"menu\" : undefined}\n        aria-expanded={isSubmenu ? submenu != null : undefined}\n        disabled={action.disabled}\n        className={cn(\n          \"flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\",\n          hasDescription ? \"items-start\" : \"items-center\",\n          size === \"sheet\" && \"min-h-10 py-2 text-sm\",\n          action.disabled && \"cursor-not-allowed opacity-50\",\n          submenu && \"bg-accent text-accent-foreground\",\n        )}\n        onClick={(event) => {\n          if (action.disabled) return;\n          // Click, never hover: a flyout that opens on the way past is one the\n          // user did not ask for, and it covers the rows they were reaching for.\n          if (isSubmenu) {\n            if (submenu) onOpenSubmenu(null);\n            else openFrom(event.currentTarget);\n            return;\n          }\n          action.onSelect();\n          onClose();\n        }}\n      >\n        {action.icon && (\n          <Icon\n            icon={action.icon}\n            className={cn(\n              \"shrink-0 text-sm\",\n              hasDescription && \"mt-0.5\",\n              action.iconClassName ?? \"text-muted-foreground\",\n            )}\n          />\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <span className={cn(hasDescription && \"font-medium\")}>\n            {action.label}\n          </span>\n          {action.description && (\n            <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n              {action.description}\n            </span>\n          )}\n        </span>\n        {isSubmenu && (\n          <Icon\n            icon={UiChevronRight}\n            className=\"shrink-0 text-sm text-muted-foreground\"\n          />\n        )}\n      </button>\n\n      {isSubmenu && submenu && (\n        <div\n          role=\"menu\"\n          aria-label={\n            typeof action.label === \"string\" ? action.label : \"Submenu\"\n          }\n          className=\"fixed z-50 max-h-[calc(100vh-1rem)] min-w-[14rem] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5\"\n          style={{ left: submenu.x, top: submenu.y }}\n        >\n          {children.map((child) => (\n            <MenuActionItem\n              key={child.id}\n              action={child}\n              submenu={null}\n              onOpenSubmenu={onOpenSubmenu}\n              onClose={onClose}\n              size={size}\n            />\n          ))}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport function DensityMenuSection({\n  densityOverride,\n  separated,\n  onDensityChange,\n  size = \"menu\",\n}: {\n  densityOverride: Density | undefined;\n  separated: boolean;\n  onDensityChange: (density: Density | undefined) => void;\n  size?: MenuSectionSize;\n}) {\n  const current = densityOverride ?? \"inherit\";\n\n  return (\n    <div className={cn(separated && \"mt-1 border-t border-border pt-1\")}>\n      <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n        Density\n      </div>\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        aria-checked={current === \"inherit\"}\n        className={densityMenuItemClassName(current === \"inherit\", size)}\n        onClick={() => onDensityChange(undefined)}\n      >\n        <Icon\n          icon={UiResizeVertical}\n          className=\"text-sm text-muted-foreground\"\n        />\n        <span className=\"min-w-0 flex-1 truncate\">Use page density</span>\n        {current === \"inherit\" ? (\n          <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n        ) : (\n          <span className=\"inline-block h-4 w-4\" aria-hidden />\n        )}\n      </button>\n      {DENSITY_OPTIONS.map((option) => {\n        const active = current === option.value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={active}\n            className={densityMenuItemClassName(active, size)}\n            onClick={() => onDensityChange(option.value)}\n          >\n            <Icon\n              icon={option.icon}\n              className=\"text-sm text-muted-foreground\"\n            />\n            <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n            {active ? (\n              <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n            ) : (\n              <span className=\"inline-block h-4 w-4\" aria-hidden />\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean, size: MenuSectionSize) {\n  return cn(\n    \"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\",\n    size === \"sheet\" && \"min-h-10 py-2 text-sm\",\n    active && \"text-foreground\",\n  );\n}\n\nconst THEME_MENU_OPTIONS: Array<{\n  value: Theme;\n  icon: StaticIconComponent;\n  label: string;\n}> = [\n  { value: \"system\", icon: UiDesktop, label: \"Use system theme\" },\n  { value: \"light\", icon: UiSun, label: \"Light\" },\n  { value: \"dark\", icon: UiMoon, label: \"Dark\" },\n];\n\nexport function ThemeMenuSection({\n  value,\n  separated,\n  onChange,\n  size = \"menu\",\n}: {\n  value: Theme;\n  separated: boolean;\n  onChange: (theme: Theme) => void;\n  size?: MenuSectionSize;\n}) {\n  return (\n    <div className={cn(separated && \"mt-1 border-t border-border pt-1\")}>\n      <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n        Theme\n      </div>\n      {THEME_MENU_OPTIONS.map((option) => {\n        const active = value === option.value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={active}\n            className={densityMenuItemClassName(active, size)}\n            onClick={() => onChange(option.value)}\n          >\n            <Icon\n              icon={option.icon}\n              className=\"text-sm text-muted-foreground\"\n            />\n            <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n            {active ? (\n              <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n            ) : (\n              <span className=\"inline-block h-4 w-4\" aria-hidden />\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["UiRows","UiListFlat","UiListDashes","useState","jsx","Fragment","jsxs","cn","Icon","UiChevronRight","UiResizeVertical","UiCheck","UiDesktop","UiSun","UiMoon"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,kBAID;AAAA,EACH,EAAE,OAAO,WAAW,MAAMA,OAAAA,QAAQ,OAAO,UAAA;AAAA,EACzC,EAAE,OAAO,eAAe,MAAMC,WAAAA,YAAY,OAAO,cAAA;AAAA,EACjD,EAAE,OAAO,YAAY,MAAMC,aAAAA,cAAc,OAAO,WAAA;AAClD;AAKA,SAAS,iBACP,SACuD;AACvD,QAAM,SAAgE,CAAA;AACtE,aAAW,UAAU,SAAS;AAC5B,UAAM,UAAU,OAAO,WAAW;AAClC,QAAI,QAAQ,OAAO,KAAK,CAAC,MAAM,EAAE,YAAY,OAAO;AACpD,QAAI,CAAC,OAAO;AACV,cAAQ,EAAE,SAAS,SAAS,GAAC;AAC7B,aAAO,KAAK,KAAK;AAAA,IACnB;AACA,UAAM,QAAQ,KAAK,MAAM;AAAA,EAC3B;AACA,SAAO;AACT;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAKG;AACD,QAAM,SAAS,iBAAiB,OAAO;AAIvC,QAAM,CAAC,aAAa,cAAc,IAAIC,MAAAA,SAI5B,IAAI;AAEd,SACEC,2BAAAA,IAAAC,WAAAA,UAAA,EACG,UAAA,OAAO,IAAI,CAAC,OAAO,UAClBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAWC,MAAAA;AAAAA,SACR,aAAa,QAAQ,MAAM;AAAA,MAAA;AAAA,MAG7B,UAAA;AAAA,QAAA,MAAM,WACLH,2BAAAA,IAAC,OAAA,EAAI,WAAU,yDACZ,gBAAM,SACT;AAAA,QAED,MAAM,QAAQ,IAAI,CAAC,WAClBA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,UAAS,2CAAa,QAAO,OAAO,KAAK,cAAc;AAAA,YACvD,eAAe;AAAA,YACf;AAAA,YACA;AAAA,UAAA;AAAA,UALK,OAAO;AAAA,QAAA,CAOf;AAAA,MAAA;AAAA,IAAA;AAAA,IAnBI,MAAM;AAAA,EAAA,CAqBd,GACH;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,iBAAiB,QAAQ,OAAO,WAAW;AACjD,QAAM,WAAW,OAAO,YAAY,CAAA;AACpC,QAAM,YAAY,SAAS,SAAS;AAEpC,QAAM,WAAW,CAAC,YAAyB;AACzC,UAAM,OAAO,QAAQ,sBAAA;AAGrB,UAAM,QAAQ;AACd,UAAM,IACJ,KAAK,QAAQ,QAAQ,OAAO,aAAa,KAAK,OAAO,QAAQ,KAAK;AACpE,kBAAc,EAAE,IAAI,OAAO,IAAI,GAAG,GAAG,KAAK,KAAK;AAAA,EACjD;AAEA,SACEE,2BAAAA,KAAAD,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe,YAAY,SAAS;AAAA,QACpC,iBAAe,YAAY,WAAW,OAAO;AAAA,QAC7C,UAAU,OAAO;AAAA,QACjB,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA,iBAAiB,gBAAgB;AAAA,UACjC,SAAS,WAAW;AAAA,UACpB,OAAO,YAAY;AAAA,UACnB,WAAW;AAAA,QAAA;AAAA,QAEb,SAAS,CAAC,UAAU;AAClB,cAAI,OAAO,SAAU;AAGrB,cAAI,WAAW;AACb,gBAAI,uBAAuB,IAAI;AAAA,gBAC1B,UAAS,MAAM,aAAa;AACjC;AAAA,UACF;AACA,iBAAO,SAAA;AACP,kBAAA;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,UAAA,OAAO,QACNH,2BAAAA;AAAAA,YAACI,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAM,OAAO;AAAA,cACb,WAAWD,MAAAA;AAAAA,gBACT;AAAA,gBACA,kBAAkB;AAAA,gBAClB,OAAO,iBAAiB;AAAA,cAAA;AAAA,YAC1B;AAAA,UAAA;AAAA,UAGJD,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,YAAAF,2BAAAA,IAAC,UAAK,WAAWG,SAAG,kBAAkB,aAAa,GAChD,iBAAO,OACV;AAAA,YACC,OAAO,eACNH,2BAAAA,IAAC,UAAK,WAAU,8CACb,iBAAO,YAAA,CACV;AAAA,UAAA,GAEJ;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAACI,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAMC,eAAAA;AAAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,aAAa,WACZL,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cACE,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ;AAAA,QAEpD,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,QAAQ,GAAG,KAAK,QAAQ,EAAA;AAAA,QAEtC,UAAA,SAAS,IAAI,CAAC,UACbA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UALK,MAAM;AAAA,QAAA,CAOd;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAKG;AACD,QAAM,UAAU,mBAAmB;AAEnC,yCACG,OAAA,EAAI,WAAWG,MAAAA,GAAG,aAAa,kCAAkC,GAChE,UAAA;AAAA,IAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,yDAAwD,UAAA,WAEvE;AAAA,IACAE,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc,YAAY;AAAA,QAC1B,WAAW,yBAAyB,YAAY,WAAW,IAAI;AAAA,QAC/D,SAAS,MAAM,gBAAgB,MAAS;AAAA,QAExC,UAAA;AAAA,UAAAF,2BAAAA;AAAAA,YAACI,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAME,iBAAAA;AAAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZN,2BAAAA,IAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,oBAAgB;AAAA,UACzD,YAAY,YACXA,2BAAAA,IAACI,KAAAA,MAAA,EAAK,MAAMG,QAAAA,SAAS,WAAU,0BAAA,CAA0B,IAEzDP,2BAAAA,IAAC,QAAA,EAAK,WAAU,wBAAuB,eAAW,KAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtD,gBAAgB,IAAI,CAAC,WAAW;AAC/B,YAAM,SAAS,YAAY,OAAO;AAClC,aACEE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAW,yBAAyB,QAAQ,IAAI;AAAA,UAChD,SAAS,MAAM,gBAAgB,OAAO,KAAK;AAAA,UAE3C,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAACI,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAM,OAAO;AAAA,gBACb,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZJ,2BAAAA,IAAC,QAAA,EAAK,WAAU,2BAA2B,iBAAO,OAAM;AAAA,YACvD,SACCA,2BAAAA,IAACI,KAAAA,MAAA,EAAK,MAAMG,QAAAA,SAAS,WAAU,0BAAA,CAA0B,IAEzDP,2BAAAA,IAAC,QAAA,EAAK,WAAU,wBAAuB,eAAW,KAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAfhD,OAAO;AAAA,MAAA;AAAA,IAmBlB,CAAC;AAAA,EAAA,GACH;AAEJ;AAEA,SAAS,yBAAyB,QAAiB,MAAuB;AACxE,SAAOG,MAAAA;AAAAA,IACL;AAAA,IACA,SAAS,WAAW;AAAA,IACpB,UAAU;AAAA,EAAA;AAEd;AAEA,MAAM,qBAID;AAAA,EACH,EAAE,OAAO,UAAU,MAAMK,UAAAA,WAAW,OAAO,mBAAA;AAAA,EAC3C,EAAE,OAAO,SAAS,MAAMC,MAAAA,OAAO,OAAO,QAAA;AAAA,EACtC,EAAE,OAAO,QAAQ,MAAMC,OAAAA,QAAQ,OAAO,OAAA;AACxC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAKG;AACD,yCACG,OAAA,EAAI,WAAWP,MAAAA,GAAG,aAAa,kCAAkC,GAChE,UAAA;AAAA,IAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,yDAAwD,UAAA,SAEvE;AAAA,IACC,mBAAmB,IAAI,CAAC,WAAW;AAClC,YAAM,SAAS,UAAU,OAAO;AAChC,aACEE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAW,yBAAyB,QAAQ,IAAI;AAAA,UAChD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,UAEpC,UAAA;AAAA,YAAAF,2BAAAA;AAAAA,cAACI,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAM,OAAO;AAAA,gBACb,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZJ,2BAAAA,IAAC,QAAA,EAAK,WAAU,2BAA2B,iBAAO,OAAM;AAAA,YACvD,SACCA,2BAAAA,IAACI,KAAAA,MAAA,EAAK,MAAMG,QAAAA,SAAS,WAAU,0BAAA,CAA0B,IAEzDP,2BAAAA,IAAC,QAAA,EAAK,WAAU,wBAAuB,eAAW,KAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAfhD,OAAO;AAAA,MAAA;AAAA,IAmBlB,CAAC;AAAA,EAAA,GACH;AAEJ;;;;"}

package/dist/data/DataTableMenuSections.d.ts

@@ -0,0 +1,23 @@
+import { Density } from '../hooks/use-density';
+import { Theme } from '../hooks/use-theme';
+import { DataTableMenuAction } from './DataTable';
+export type MenuSectionSize = "menu" | "sheet";
+export declare function MenuActionSection({ actions, separated, onClose, size, }: {
+    actions: DataTableMenuAction[];
+    separated: boolean;
+    onClose: () => void;
+    size?: MenuSectionSize;
+}): import("react").JSX.Element;
+export declare function DensityMenuSection({ densityOverride, separated, onDensityChange, size, }: {
+    densityOverride: Density | undefined;
+    separated: boolean;
+    onDensityChange: (density: Density | undefined) => void;
+    size?: MenuSectionSize;
+}): import("react").JSX.Element;
+export declare function ThemeMenuSection({ value, separated, onChange, size, }: {
+    value: Theme;
+    separated: boolean;
+    onChange: (theme: Theme) => void;
+    size?: MenuSectionSize;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DataTableMenuSections.d.ts.map

package/dist/data/DataTableMenuSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableMenuSections.d.ts","sourceRoot":"","sources":["../../src/data/DataTableMenuSections.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAahD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AA+B/C,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,SAAS,EACT,OAAO,EACP,IAAa,GACd,EAAE;IACD,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,+BAuCA;AA8GD,wBAAgB,kBAAkB,CAAC,EACjC,eAAe,EACf,SAAS,EACT,eAAe,EACf,IAAa,GACd,EAAE;IACD,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,+BAoDA;AAoBD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAa,GACd,EAAE;IACD,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,+BAgCA"}

package/dist/data/DataTableMenuSections.js

@@ -0,0 +1,263 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "./Icon.js";
+import { UiResizeVertical } from "../icons/components/UiResizeVertical.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiRows } from "../icons/components/UiRows.js";
+import { UiListFlat } from "../icons/components/UiListFlat.js";
+import { UiListDashes } from "../icons/components/UiListDashes.js";
+import { UiDesktop } from "../icons/components/UiDesktop.js";
+import { UiSun } from "../icons/components/UiSun.js";
+import { UiMoon } from "../icons/components/UiMoon.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
+const DENSITY_OPTIONS = [
+  { value: "compact", icon: UiRows, label: "Compact" },
+  { value: "comfortable", icon: UiListFlat, label: "Comfortable" },
+  { value: "spacious", icon: UiListDashes, label: "Spacious" }
+];
+function groupMenuActions(actions) {
+  const groups = [];
+  for (const action of actions) {
+    const section = action.section ?? "Download";
+    let group = groups.find((g) => g.section === section);
+    if (!group) {
+      group = { section, actions: [] };
+      groups.push(group);
+    }
+    group.actions.push(action);
+  }
+  return groups;
+}
+function MenuActionSection({
+  actions,
+  separated,
+  onClose,
+  size = "menu"
+}) {
+  const groups = groupMenuActions(actions);
+  const [openSubmenu, setOpenSubmenu] = useState(null);
+  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        (separated || index > 0) && "mt-1 border-t border-border pt-1"
+      ),
+      children: [
+        group.section && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group.section }),
+        group.actions.map((action) => /* @__PURE__ */ jsx(
+          MenuActionItem,
+          {
+            action,
+            submenu: (openSubmenu == null ? void 0 : openSubmenu.id) === action.id ? openSubmenu : null,
+            onOpenSubmenu: setOpenSubmenu,
+            onClose,
+            size
+          },
+          action.id
+        ))
+      ]
+    },
+    group.section
+  )) });
+}
+function MenuActionItem({
+  action,
+  submenu,
+  onOpenSubmenu,
+  onClose,
+  size
+}) {
+  const hasDescription = Boolean(action.description);
+  const children = action.children ?? [];
+  const isSubmenu = children.length > 0;
+  const openFrom = (element) => {
+    const rect = element.getBoundingClientRect();
+    const width = 224;
+    const x = rect.right + width > window.innerWidth ? rect.left - width : rect.right;
+    onOpenSubmenu({ id: action.id, x, y: rect.top });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": isSubmenu ? "menu" : void 0,
+        "aria-expanded": isSubmenu ? submenu != null : void 0,
+        disabled: action.disabled,
+        className: cn(
+          "flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+          hasDescription ? "items-start" : "items-center",
+          size === "sheet" && "min-h-10 py-2 text-sm",
+          action.disabled && "cursor-not-allowed opacity-50",
+          submenu && "bg-accent text-accent-foreground"
+        ),
+        onClick: (event) => {
+          if (action.disabled) return;
+          if (isSubmenu) {
+            if (submenu) onOpenSubmenu(null);
+            else openFrom(event.currentTarget);
+            return;
+          }
+          action.onSelect();
+          onClose();
+        },
+        children: [
+          action.icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: action.icon,
+              className: cn(
+                "shrink-0 text-sm",
+                hasDescription && "mt-0.5",
+                action.iconClassName ?? "text-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(hasDescription && "font-medium"), children: action.label }),
+            action.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: action.description })
+          ] }),
+          isSubmenu && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UiChevronRight,
+              className: "shrink-0 text-sm text-muted-foreground"
+            }
+          )
+        ]
+      }
+    ),
+    isSubmenu && submenu && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "menu",
+        "aria-label": typeof action.label === "string" ? action.label : "Submenu",
+        className: "fixed z-50 max-h-[calc(100vh-1rem)] min-w-[14rem] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
+        style: { left: submenu.x, top: submenu.y },
+        children: children.map((child) => /* @__PURE__ */ jsx(
+          MenuActionItem,
+          {
+            action: child,
+            submenu: null,
+            onOpenSubmenu,
+            onClose,
+            size
+          },
+          child.id
+        ))
+      }
+    )
+  ] });
+}
+function DensityMenuSection({
+  densityOverride,
+  separated,
+  onDensityChange,
+  size = "menu"
+}) {
+  const current = densityOverride ?? "inherit";
+  return /* @__PURE__ */ jsxs("div", { className: cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Density" }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": current === "inherit",
+        className: densityMenuItemClassName(current === "inherit", size),
+        onClick: () => onDensityChange(void 0),
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UiResizeVertical,
+              className: "text-sm text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: "Use page density" }),
+          current === "inherit" ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+        ]
+      }
+    ),
+    DENSITY_OPTIONS.map((option) => {
+      const active = current === option.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active, size),
+          onClick: () => onDensityChange(option.value),
+          children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: option.icon,
+                className: "text-sm text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
+function densityMenuItemClassName(active, size) {
+  return cn(
+    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+    size === "sheet" && "min-h-10 py-2 text-sm",
+    active && "text-foreground"
+  );
+}
+const THEME_MENU_OPTIONS = [
+  { value: "system", icon: UiDesktop, label: "Use system theme" },
+  { value: "light", icon: UiSun, label: "Light" },
+  { value: "dark", icon: UiMoon, label: "Dark" }
+];
+function ThemeMenuSection({
+  value,
+  separated,
+  onChange,
+  size = "menu"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Theme" }),
+    THEME_MENU_OPTIONS.map((option) => {
+      const active = value === option.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active, size),
+          onClick: () => onChange(option.value),
+          children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: option.icon,
+                className: "text-sm text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
+export {
+  DensityMenuSection,
+  MenuActionSection,
+  ThemeMenuSection
+};
+//# sourceMappingURL=DataTableMenuSections.js.map

package/dist/data/DataTableMenuSections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableMenuSections.js","sources":["../../src/data/DataTableMenuSections.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { type Density } from \"../hooks/use-density\";\nimport { type Theme } from \"../hooks/use-theme\";\nimport {\n  UiCheck,\n  UiChevronRight,\n  UiDesktop,\n  UiListDashes,\n  UiListFlat,\n  UiMoon,\n  UiResizeVertical,\n  UiRows,\n  UiSun,\n} from \"../icons\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport type { DataTableMenuAction } from \"./DataTable\";\n\n// Shared by every section rendered inside the table's ⋯ preferences surface:\n// \"menu\" is the existing desktop floating menu (unchanged rows), \"sheet\" is\n// the mobile Modal sheet, whose rows grow to a 40px touch target.\nexport type MenuSectionSize = \"menu\" | \"sheet\";\n\nconst DENSITY_OPTIONS: Array<{\n  value: Density;\n  icon: StaticIconComponent;\n  label: string;\n}> = [\n  { value: \"compact\", icon: UiRows, label: \"Compact\" },\n  { value: \"comfortable\", icon: UiListFlat, label: \"Comfortable\" },\n  { value: \"spacious\", icon: UiListDashes, label: \"Spacious\" },\n];\n\n// Groups menu actions by their `section` heading, preserving the order each\n// section first appears. Actions without a section fall under \"Download\" so the\n// existing download menu is unchanged.\nfunction groupMenuActions(\n  actions: DataTableMenuAction[],\n): { section: string; actions: DataTableMenuAction[] }[] {\n  const groups: { section: string; actions: DataTableMenuAction[] }[] = [];\n  for (const action of actions) {\n    const section = action.section ?? \"Download\";\n    let group = groups.find((g) => g.section === section);\n    if (!group) {\n      group = { section, actions: [] };\n      groups.push(group);\n    }\n    group.actions.push(action);\n  }\n  return groups;\n}\n\nexport function MenuActionSection({\n  actions,\n  separated,\n  onClose,\n  size = \"menu\",\n}: {\n  actions: DataTableMenuAction[];\n  separated: boolean;\n  onClose: () => void;\n  size?: MenuSectionSize;\n}) {\n  const groups = groupMenuActions(actions);\n  // Which submenu is open, if any. One at a time: hovering a sibling takes the\n  // flyout with it, which is what every menu does and what stops two levels\n  // from being open over each other.\n  const [openSubmenu, setOpenSubmenu] = useState<{\n    id: string;\n    x: number;\n    y: number;\n  } | null>(null);\n\n  return (\n    <>\n      {groups.map((group, index) => (\n        <div\n          key={group.section}\n          className={cn(\n            (separated || index > 0) && \"mt-1 border-t border-border pt-1\",\n          )}\n        >\n          {group.section && (\n            <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n              {group.section}\n            </div>\n          )}\n          {group.actions.map((action) => (\n            <MenuActionItem\n              key={action.id}\n              action={action}\n              submenu={openSubmenu?.id === action.id ? openSubmenu : null}\n              onOpenSubmenu={setOpenSubmenu}\n              onClose={onClose}\n              size={size}\n            />\n          ))}\n        </div>\n      ))}\n    </>\n  );\n}\n\nfunction MenuActionItem({\n  action,\n  submenu,\n  onOpenSubmenu,\n  onClose,\n  size,\n}: {\n  action: DataTableMenuAction;\n  submenu: { id: string; x: number; y: number } | null;\n  onOpenSubmenu: (state: { id: string; x: number; y: number } | null) => void;\n  onClose: () => void;\n  size: MenuSectionSize;\n}) {\n  const hasDescription = Boolean(action.description);\n  const children = action.children ?? [];\n  const isSubmenu = children.length > 0;\n\n  const openFrom = (element: HTMLElement) => {\n    const rect = element.getBoundingClientRect();\n    // Flip to the left when the flyout would run off the right edge, using the\n    // same minimum width the panel below is given.\n    const width = 224;\n    const x =\n      rect.right + width > window.innerWidth ? rect.left - width : rect.right;\n    onOpenSubmenu({ id: action.id, x, y: rect.top });\n  };\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        aria-haspopup={isSubmenu ? \"menu\" : undefined}\n        aria-expanded={isSubmenu ? submenu != null : undefined}\n        disabled={action.disabled}\n        className={cn(\n          \"flex w-full gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\",\n          hasDescription ? \"items-start\" : \"items-center\",\n          size === \"sheet\" && \"min-h-10 py-2 text-sm\",\n          action.disabled && \"cursor-not-allowed opacity-50\",\n          submenu && \"bg-accent text-accent-foreground\",\n        )}\n        onClick={(event) => {\n          if (action.disabled) return;\n          // Click, never hover: a flyout that opens on the way past is one the\n          // user did not ask for, and it covers the rows they were reaching for.\n          if (isSubmenu) {\n            if (submenu) onOpenSubmenu(null);\n            else openFrom(event.currentTarget);\n            return;\n          }\n          action.onSelect();\n          onClose();\n        }}\n      >\n        {action.icon && (\n          <Icon\n            icon={action.icon}\n            className={cn(\n              \"shrink-0 text-sm\",\n              hasDescription && \"mt-0.5\",\n              action.iconClassName ?? \"text-muted-foreground\",\n            )}\n          />\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <span className={cn(hasDescription && \"font-medium\")}>\n            {action.label}\n          </span>\n          {action.description && (\n            <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n              {action.description}\n            </span>\n          )}\n        </span>\n        {isSubmenu && (\n          <Icon\n            icon={UiChevronRight}\n            className=\"shrink-0 text-sm text-muted-foreground\"\n          />\n        )}\n      </button>\n\n      {isSubmenu && submenu && (\n        <div\n          role=\"menu\"\n          aria-label={\n            typeof action.label === \"string\" ? action.label : \"Submenu\"\n          }\n          className=\"fixed z-50 max-h-[calc(100vh-1rem)] min-w-[14rem] max-w-[calc(100vw-1rem)] overflow-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5\"\n          style={{ left: submenu.x, top: submenu.y }}\n        >\n          {children.map((child) => (\n            <MenuActionItem\n              key={child.id}\n              action={child}\n              submenu={null}\n              onOpenSubmenu={onOpenSubmenu}\n              onClose={onClose}\n              size={size}\n            />\n          ))}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport function DensityMenuSection({\n  densityOverride,\n  separated,\n  onDensityChange,\n  size = \"menu\",\n}: {\n  densityOverride: Density | undefined;\n  separated: boolean;\n  onDensityChange: (density: Density | undefined) => void;\n  size?: MenuSectionSize;\n}) {\n  const current = densityOverride ?? \"inherit\";\n\n  return (\n    <div className={cn(separated && \"mt-1 border-t border-border pt-1\")}>\n      <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n        Density\n      </div>\n      <button\n        type=\"button\"\n        role=\"menuitemradio\"\n        aria-checked={current === \"inherit\"}\n        className={densityMenuItemClassName(current === \"inherit\", size)}\n        onClick={() => onDensityChange(undefined)}\n      >\n        <Icon\n          icon={UiResizeVertical}\n          className=\"text-sm text-muted-foreground\"\n        />\n        <span className=\"min-w-0 flex-1 truncate\">Use page density</span>\n        {current === \"inherit\" ? (\n          <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n        ) : (\n          <span className=\"inline-block h-4 w-4\" aria-hidden />\n        )}\n      </button>\n      {DENSITY_OPTIONS.map((option) => {\n        const active = current === option.value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={active}\n            className={densityMenuItemClassName(active, size)}\n            onClick={() => onDensityChange(option.value)}\n          >\n            <Icon\n              icon={option.icon}\n              className=\"text-sm text-muted-foreground\"\n            />\n            <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n            {active ? (\n              <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n            ) : (\n              <span className=\"inline-block h-4 w-4\" aria-hidden />\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean, size: MenuSectionSize) {\n  return cn(\n    \"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none\",\n    size === \"sheet\" && \"min-h-10 py-2 text-sm\",\n    active && \"text-foreground\",\n  );\n}\n\nconst THEME_MENU_OPTIONS: Array<{\n  value: Theme;\n  icon: StaticIconComponent;\n  label: string;\n}> = [\n  { value: \"system\", icon: UiDesktop, label: \"Use system theme\" },\n  { value: \"light\", icon: UiSun, label: \"Light\" },\n  { value: \"dark\", icon: UiMoon, label: \"Dark\" },\n];\n\nexport function ThemeMenuSection({\n  value,\n  separated,\n  onChange,\n  size = \"menu\",\n}: {\n  value: Theme;\n  separated: boolean;\n  onChange: (theme: Theme) => void;\n  size?: MenuSectionSize;\n}) {\n  return (\n    <div className={cn(separated && \"mt-1 border-t border-border pt-1\")}>\n      <div className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n        Theme\n      </div>\n      {THEME_MENU_OPTIONS.map((option) => {\n        const active = value === option.value;\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={active}\n            className={densityMenuItemClassName(active, size)}\n            onClick={() => onChange(option.value)}\n          >\n            <Icon\n              icon={option.icon}\n              className=\"text-sm text-muted-foreground\"\n            />\n            <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n            {active ? (\n              <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n            ) : (\n              <span className=\"inline-block h-4 w-4\" aria-hidden />\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}