@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-JCJGJX7V.js

@@ -0,0 +1,96 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-drag.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var DragContainerContext = createContext(null);
+function DragContainerProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(DragContainerContext.Provider, { value, children });
+}
+function useDragItem(dragId) {
+  const container = useContext(DragContainerContext);
+  if (!container || dragId === void 0) {
+    return { draggable: false, itemProps: {}, handleProps: void 0, dragging: false, dropEdge: null };
+  }
+  const indicator = container.dropIndicator;
+  return {
+    draggable: true,
+    itemProps: container.itemProps(dragId),
+    handleProps: container.handleProps?.(dragId),
+    dragging: container.activeId === dragId,
+    dropEdge: indicator != null && indicator.id === dragId ? indicator.edge : null
+  };
+}
+function DropIndicator({ edge }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      "aria-hidden": true,
+      "data-slot": "drop-indicator",
+      "data-drop-edge": edge,
+      sx: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        // Centred ON the gap rather than inside the card: the item lands
+        // BETWEEN two rows, and a rule sitting within one of them reads as
+        // "into this row" instead.
+        ...edge === "before" ? { top: -2 } : { bottom: -2 },
+        height: 3,
+        borderRadius: 2,
+        bgcolor: "primary.main",
+        pointerEvents: "none",
+        zIndex: 2
+      }
+    }
+  );
+}
+function DragHandle({
+  handleProps,
+  gated,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      "aria-hidden": handleProps ? void 0 : true,
+      "data-testid": testId,
+      ...handleProps,
+      sx: {
+        display: "inline-grid",
+        gridTemplateColumns: "repeat(2, 3px)",
+        gap: "2px",
+        flexShrink: 0,
+        p: 0.5,
+        borderRadius: 1,
+        color: "text.disabled",
+        cursor: gated ? "grab" : "inherit",
+        touchAction: "none",
+        "&:active": { cursor: gated ? "grabbing" : "inherit" },
+        "&:hover": { color: "text.secondary" }
+      },
+      children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "span",
+          sx: { width: 3, height: 3, borderRadius: "50%", bgcolor: "currentColor" }
+        },
+        index
+      ))
+    }
+  );
+}
+
+export {
+  DragContainerProvider,
+  useDragItem,
+  DropIndicator,
+  DragHandle
+};
+//# sourceMappingURL=chunk-JCJGJX7V.js.map

package/dist/chunk-JCJGJX7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-drag.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\n\n/**\n * DRAGGING, OWNED BY THE CONTAINER AND NOT BY THE CARD.\n *\n * A card cannot know whether it is draggable. The same `BaseListCard` renders\n * inside a reorderable queue, a read-only report and a board column that moves\n * items between columns — and only the thing holding them knows which. So the\n * container publishes a drag context and every card inside it becomes\n * draggable; a card with no container above it renders exactly as before, with\n * no handle and no listeners.\n *\n * This is a SEAM, not a drag implementation. It carries whatever props the\n * host's library hands out — dnd-kit's `attributes`/`listeners`, react-dnd's\n * connector output, or plain HTML5 `draggable` + `onDragStart` — because\n * picking one of those for every consumer of `@12-apps/ui` is a decision this\n * package has no business making. There is no drag dependency here, and adding\n * one would force it on every app that installs the library.\n */\n\n/** The props a container hands to one item. Deliberately untyped-ish: each DnD library has its own shape. */\nexport type DragItemProps = Record<string, unknown>;\n\nexport interface DragContainerValue {\n  /**\n   * Props for the item's ROOT — the element that moves. dnd-kit wants its\n   * `setNodeRef` and transform style here; HTML5 wants `draggable` and\n   * `onDragStart`.\n   */\n  itemProps: (id: string | number) => DragItemProps;\n  /**\n   * Props for the HANDLE alone, when the container wants drags to start only\n   * from the grip.\n   *\n   * Whole-card dragging breaks the two things a card must still do: selecting\n   * text in it, and hitting the checkbox without the row sliding away. When a\n   * container returns handle props, the card puts them on the grip and leaves\n   * the rest of itself alone.\n   */\n  handleProps?: (id: string | number) => DragItemProps;\n  /** The id currently being dragged, so its card can dim itself. */\n  activeId?: string | number | null;\n  /**\n   * WHERE THE DRAGGED ITEM WOULD LAND — the one thing a drag cannot be honest\n   * without.\n   *\n   * A list that dims the row you picked up and shows nothing else asks you to\n   * guess the outcome and find out by dropping. The marker turns that into a\n   * statement: THIS gap is where it goes.\n   *\n   * Published by the container, not computed by the card, for the same reason\n   * everything else here is: only the thing holding the items knows the\n   * geometry — which one you are over, which edge of it, and whether that\n   * position is legal. A card knows none of that about its neighbours.\n   *\n   * `null` while nothing is being dragged, or while the pointer is over no\n   * valid target.\n   */\n  dropIndicator?: { id: string | number; edge: \"before\" | \"after\" } | null;\n}\n\nconst DragContainerContext = createContext<DragContainerValue | null>(null);\n\n/**\n * Marks everything inside as draggable. Cards read this; nothing else does.\n */\nexport function DragContainerProvider({\n  value,\n  children,\n}: {\n  value: DragContainerValue;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <DragContainerContext.Provider value={value}>{children}</DragContainerContext.Provider>;\n}\n\n/**\n * What one card needs to know about dragging.\n *\n * Returns the inert answer when there is no container OR no `dragId` — a card\n * that forgot its id must not render a handle that does nothing, which is worse\n * than no handle at all.\n */\nexport function useDragItem(dragId: string | number | undefined): {\n  draggable: boolean;\n  itemProps: DragItemProps;\n  handleProps: DragItemProps | undefined;\n  dragging: boolean;\n  /** Which of this card's edges the marker sits on, or null for neither. */\n  dropEdge: \"before\" | \"after\" | null;\n} {\n  const container = useContext(DragContainerContext);\n  if (!container || dragId === undefined) {\n    return { draggable: false, itemProps: {}, handleProps: undefined, dragging: false, dropEdge: null };\n  }\n  const indicator = container.dropIndicator;\n  return {\n    draggable: true,\n    itemProps: container.itemProps(dragId),\n    handleProps: container.handleProps?.(dragId),\n    dragging: container.activeId === dragId,\n    dropEdge: indicator != null && indicator.id === dragId ? indicator.edge : null,\n  };\n}\n\n/**\n * THE DROP MARKER — one rule across the card's edge, drawn where the item lands.\n *\n * Shared by every draggable surface rather than reimplemented per card, so a\n * reorderable list, a board column and a grid of tiles all say the same thing\n * the same way. A consumer wiring its own DnD gets this for free by publishing\n * `dropIndicator`; it never draws the marker itself.\n *\n * ABSOLUTE, AND OUTSIDE THE FLOW ON PURPOSE. A marker that took layout space\n * would push every row below it down by its own height the moment it appeared —\n * the list would twitch as you dragged across it, and the gap you were aiming\n * at would move out from under the pointer. Drawn over the gap instead, nothing\n * reflows.\n *\n * `pointerEvents: none` so it cannot swallow the dragover events that placed it,\n * and `aria-hidden` because the position it reports belongs in a live region the\n * LIST owns — fifty rows each announcing a marker is a screen-reader nightmare.\n */\nexport function DropIndicator({ edge }: { edge: \"before\" | \"after\" }): React.JSX.Element {\n  return (\n    <Box\n      aria-hidden\n      data-slot=\"drop-indicator\"\n      data-drop-edge={edge}\n      sx={{\n        position: \"absolute\",\n        left: 0,\n        right: 0,\n        // Centred ON the gap rather than inside the card: the item lands\n        // BETWEEN two rows, and a rule sitting within one of them reads as\n        // \"into this row\" instead.\n        ...(edge === \"before\" ? { top: -2 } : { bottom: -2 }),\n        height: 3,\n        borderRadius: 2,\n        bgcolor: \"primary.main\",\n        pointerEvents: \"none\",\n        zIndex: 2,\n      }}\n    />\n  );\n}\n\n/**\n * The grip. Six dots, the convention everywhere, drawn rather than imported so\n * this costs no icon dependency.\n *\n * `cursor: grab` on the handle only when the container gates drags to it —\n * otherwise the whole card carries the cursor and the handle is just an\n * affordance saying so.\n */\nexport function DragHandle({\n  handleProps,\n  gated,\n  testId,\n}: {\n  handleProps: DragItemProps | undefined;\n  gated: boolean;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden={handleProps ? undefined : true}\n      data-testid={testId}\n      {...handleProps}\n      sx={{\n        display: \"inline-grid\",\n        gridTemplateColumns: \"repeat(2, 3px)\",\n        gap: \"2px\",\n        flexShrink: 0,\n        p: 0.5,\n        borderRadius: 1,\n        color: \"text.disabled\",\n        cursor: gated ? \"grab\" : \"inherit\",\n        touchAction: \"none\",\n        \"&:active\": { cursor: gated ? \"grabbing\" : \"inherit\" },\n        \"&:hover\": { color: \"text.secondary\" },\n      }}\n    >\n      {Array.from({ length: 6 }).map((_, index) => (\n        <Box\n          key={index}\n          component=\"span\"\n          sx={{ width: 3, height: 3, borderRadius: \"50%\", bgcolor: \"currentColor\" }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,eAAe,kBAAkC;AA2EjD;AAZT,IAAM,uBAAuB,cAAyC,IAAI;AAKnE,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGsB;AACpB,SAAO,oBAAC,qBAAqB,UAArB,EAA8B,OAAe,UAAS;AAChE;AASO,SAAS,YAAY,QAO1B;AACA,QAAM,YAAY,WAAW,oBAAoB;AACjD,MAAI,CAAC,aAAa,WAAW,QAAW;AACtC,WAAO,EAAE,WAAW,OAAO,WAAW,CAAC,GAAG,aAAa,QAAW,UAAU,OAAO,UAAU,KAAK;AAAA,EACpG;AACA,QAAM,YAAY,UAAU;AAC5B,SAAO;AAAA,IACL,WAAW;AAAA,IACX,WAAW,UAAU,UAAU,MAAM;AAAA,IACrC,aAAa,UAAU,cAAc,MAAM;AAAA,IAC3C,UAAU,UAAU,aAAa;AAAA,IACjC,UAAU,aAAa,QAAQ,UAAU,OAAO,SAAS,UAAU,OAAO;AAAA,EAC5E;AACF;AAoBO,SAAS,cAAc,EAAE,KAAK,GAAoD;AACvF,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA;AAAA;AAAA;AAAA,QAIP,GAAI,SAAS,WAAW,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,GAAG;AAAA,QACnD,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,SAAS;AAAA,QACT,eAAe;AAAA,QACf,QAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa,cAAc,SAAY;AAAA,MACvC,eAAa;AAAA,MACZ,GAAG;AAAA,MACJ,IAAI;AAAA,QACF,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,cAAc;AAAA,QACd,OAAO;AAAA,QACP,QAAQ,QAAQ,SAAS;AAAA,QACzB,aAAa;AAAA,QACb,YAAY,EAAE,QAAQ,QAAQ,aAAa,UAAU;AAAA,QACrD,WAAW,EAAE,OAAO,iBAAiB;AAAA,MACvC;AAAA,MAEC,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACjC;AAAA,QAACA;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,OAAO,SAAS,eAAe;AAAA;AAAA,QAFnE;AAAA,MAGP,CACD;AAAA;AAAA,EACH;AAEJ;","names":["default"]}

package/dist/chunk-JE6RZ5L6.js

@@ -0,0 +1,157 @@
+import {
+  usePwaInstall
+} from "./chunk-5GMHJ7Y5.js";
+import {
+  installPromptStyles
+} from "./chunk-GY62N32G.js";
+
+// src/components/utility/InstallPrompt/InstallPrompt.tsx
+import Close from "@mui/icons-material/Close";
+import InstallMobile from "@mui/icons-material/InstallMobile";
+import IosShare from "@mui/icons-material/IosShare";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledInstallPrompt = styled(Box)(({ theme }) => installPromptStyles(theme));
+var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `install-prompt-${suffix}`;
+var IosInstructions = ({ copy, instructions, dataTestId }) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    className: "install-prompt-description",
+    variant: "body2",
+    component: "div",
+    "data-testid": testIdFor(dataTestId, "ios-instructions"),
+    sx: { display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap" },
+    children: instructions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      copy.iosTapBefore,
+      " ",
+      /* @__PURE__ */ jsx(IosShare, { fontSize: "small", "aria-label": copy.shareLabel }),
+      " ",
+      copy.iosTapAfter
+    ] })
+  }
+);
+var InstallPromptBody = ({ copy, icon, title, description, iosInstructions, platform, dataTestId }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Box, { className: "install-prompt-icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(InstallMobile, {}) }),
+  /* @__PURE__ */ jsxs(Box, { className: "install-prompt-content", children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "install-prompt-title",
+        variant: "subtitle2",
+        component: "div",
+        "data-testid": testIdFor(dataTestId, "title"),
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "install-prompt-description",
+        variant: "body2",
+        component: "div",
+        "data-testid": testIdFor(dataTestId, "description"),
+        children: description
+      }
+    ),
+    platform === "ios" && /* @__PURE__ */ jsx(IosInstructions, { copy, instructions: iosInstructions, dataTestId })
+  ] })
+] });
+var InstallPromptActions = ({ platform, installLabel, dismissLabel, onInstallClick, onDismissClick, dataTestId }) => /* @__PURE__ */ jsxs(Box, { className: "install-prompt-actions", children: [
+  platform === "prompt" && /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "contained",
+      onClick: onInstallClick,
+      "data-testid": testIdFor(dataTestId, "install"),
+      children: installLabel
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      onClick: onDismissClick,
+      "aria-label": dismissLabel,
+      "data-testid": testIdFor(dataTestId, "dismiss"),
+      children: /* @__PURE__ */ jsx(Close, { fontSize: "small" })
+    }
+  )
+] });
+var InstallPrompt = React.forwardRef(
+  ({
+    copy,
+    description,
+    iosInstructions,
+    icon,
+    onInstall,
+    onDismiss,
+    storageKey,
+    dismissForDays,
+    className,
+    "data-testid": dataTestId = "install-prompt",
+    ...props
+  }, ref) => {
+    const { canInstall, platform, promptInstall, dismiss } = usePwaInstall({
+      storageKey,
+      dismissForDays
+    });
+    const handleInstall = React.useCallback(() => {
+      void promptInstall().then((outcome) => onInstall?.(outcome));
+    }, [promptInstall, onInstall]);
+    const handleDismiss = React.useCallback(() => {
+      dismiss();
+      onDismiss?.();
+    }, [dismiss, onDismiss]);
+    if (!canInstall) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledInstallPrompt,
+      {
+        ref,
+        className,
+        role: "region",
+        "aria-label": copy.title,
+        "data-testid": dataTestId,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            InstallPromptBody,
+            {
+              icon,
+              copy,
+              title: copy.title,
+              description,
+              iosInstructions,
+              platform,
+              dataTestId
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InstallPromptActions,
+            {
+              platform,
+              installLabel: copy.installLabel,
+              dismissLabel: copy.dismissLabel,
+              onInstallClick: handleInstall,
+              onDismissClick: handleDismiss,
+              dataTestId
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InstallPrompt.displayName = "InstallPrompt";
+
+export {
+  InstallPrompt
+};
+//# sourceMappingURL=chunk-JE6RZ5L6.js.map

package/dist/chunk-JE6RZ5L6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/InstallPrompt/InstallPrompt.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport InstallMobile from '@mui/icons-material/InstallMobile';\nimport IosShare from '@mui/icons-material/IosShare';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { installPromptStyles } from './InstallPrompt.styles';\nimport type { InstallPlatform, InstallPromptProps } from './InstallPrompt.types';\nimport { usePwaInstall } from './usePwaInstall';\nimport type { InstallPromptCopy } from '../../../copy';\n\nconst StyledInstallPrompt = styled(Box)(({ theme }) => installPromptStyles(theme));\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : `install-prompt-${suffix}`;\n\n/**\n * The iOS branch renders instructions rather than a button, because Safari\n * exposes no API to open its own Add to Home Screen sheet. A button here would\n * be a control that does nothing when pressed.\n */\nconst IosInstructions: React.FC<{\n  copy: InstallPromptCopy;\n  instructions?: React.ReactNode;\n  dataTestId?: string;\n}> = ({ copy, instructions, dataTestId }) => (\n  <Typography\n    className=\"install-prompt-description\"\n    variant=\"body2\"\n    component=\"div\"\n    data-testid={testIdFor(dataTestId, 'ios-instructions')}\n    sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}\n  >\n    {instructions ?? (\n      <>\n        {copy.iosTapBefore} <IosShare fontSize=\"small\" aria-label={copy.shareLabel} />{' '}\n        {copy.iosTapAfter}\n      </>\n    )}\n  </Typography>\n);\n\nconst InstallPromptBody: React.FC<{\n  copy: InstallPromptCopy;\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n  iosInstructions?: React.ReactNode;\n  platform: InstallPlatform;\n  dataTestId?: string;\n}> = ({ copy, icon, title, description, iosInstructions, platform, dataTestId }) => (\n  <>\n    <Box className=\"install-prompt-icon\" aria-hidden=\"true\">\n      {icon ?? <InstallMobile />}\n    </Box>\n\n    <Box className=\"install-prompt-content\">\n      <Typography\n        className=\"install-prompt-title\"\n        variant=\"subtitle2\"\n        component=\"div\"\n        data-testid={testIdFor(dataTestId, 'title')}\n      >\n        {title}\n      </Typography>\n\n      {description && (\n        <Typography\n          className=\"install-prompt-description\"\n          variant=\"body2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'description')}\n        >\n          {description}\n        </Typography>\n      )}\n\n      {platform === 'ios' && (\n        <IosInstructions copy={copy} instructions={iosInstructions} dataTestId={dataTestId} />\n      )}\n    </Box>\n  </>\n);\n\nconst InstallPromptActions: React.FC<{\n  platform: InstallPlatform;\n  installLabel: string;\n  dismissLabel: string;\n  onInstallClick: () => void;\n  onDismissClick: () => void;\n  dataTestId?: string;\n}> = ({ platform, installLabel, dismissLabel, onInstallClick, onDismissClick, dataTestId }) => (\n  <Box className=\"install-prompt-actions\">\n    {platform === 'prompt' && (\n      <Button\n        size=\"small\"\n        variant=\"contained\"\n        onClick={onInstallClick}\n        data-testid={testIdFor(dataTestId, 'install')}\n      >\n        {installLabel}\n      </Button>\n    )}\n\n    <IconButton\n      size=\"small\"\n      onClick={onDismissClick}\n      aria-label={dismissLabel}\n      data-testid={testIdFor(dataTestId, 'dismiss')}\n    >\n      <Close fontSize=\"small\" />\n    </IconButton>\n  </Box>\n);\n\n/**\n * A dismissible invitation to install the app, rendered only when the browser\n * is actually able to install it and the user has not recently said no.\n *\n * Returns `null` in every other case — already installed, dismissed, or a\n * browser with no install route at all — so it is safe to mount unconditionally\n * in a layout rather than gating it at the call site.\n *\n * Every string is REQUIRED host config (`copy`): this package stays\n * locale-neutral and the consuming app supplies its own wording. There is no\n * English default to fall through to, so a missing word is a typecheck failure\n * rather than an English sentence in a pt-BR store.\n */\nexport const InstallPrompt = React.forwardRef<HTMLDivElement, InstallPromptProps>(\n  (\n    {\n      copy,\n      description,\n      iosInstructions,\n      icon,\n      onInstall,\n      onDismiss,\n      storageKey,\n      dismissForDays,\n      className,\n      'data-testid': dataTestId = 'install-prompt',\n      ...props\n    },\n    ref,\n  ) => {\n    const { canInstall, platform, promptInstall, dismiss } = usePwaInstall({\n      storageKey,\n      dismissForDays,\n    });\n\n    const handleInstall = React.useCallback(() => {\n      void promptInstall().then((outcome) => onInstall?.(outcome));\n    }, [promptInstall, onInstall]);\n\n    const handleDismiss = React.useCallback(() => {\n      dismiss();\n      onDismiss?.();\n    }, [dismiss, onDismiss]);\n\n    if (!canInstall) {\n      return null;\n    }\n\n    return (\n      <StyledInstallPrompt\n        ref={ref}\n        className={className}\n        role=\"region\"\n        aria-label={copy.title}\n        data-testid={dataTestId}\n        {...props}\n      >\n        <InstallPromptBody\n          icon={icon}\n          copy={copy}\n          title={copy.title}\n          description={description}\n          iosInstructions={iosInstructions}\n          platform={platform}\n          dataTestId={dataTestId}\n        />\n\n        <InstallPromptActions\n          platform={platform}\n          installLabel={copy.installLabel}\n          dismissLabel={copy.dismissLabel}\n          onInstallClick={handleInstall}\n          onDismissClick={handleDismiss}\n          dataTestId={dataTestId}\n        />\n      </StyledInstallPrompt>\n    );\n  },\n);\n\nInstallPrompt.displayName = 'InstallPrompt';\n"],"mappings":"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","names":[]}

package/dist/chunk-JIEEUHNS.js

@@ -0,0 +1,161 @@
+import {
+  CategoryPanelSurface
+} from "./chunk-LMXWI3DD.js";
+import {
+  CategoryPanel
+} from "./chunk-LWYXMCX6.js";
+import {
+  useCategoryCommit
+} from "./chunk-VN6Z6F7R.js";
+import {
+  CategoryTrigger
+} from "./chunk-XQ2BNVXL.js";
+import {
+  METRICS
+} from "./chunk-XCT2ZLA6.js";
+import {
+  useCategorySelect
+} from "./chunk-HQBXB5QB.js";
+import {
+  summarizeSelection
+} from "./chunk-DVTCZR3K.js";
+import {
+  useCategoryKeyHandler
+} from "./chunk-QBJVRPTF.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-VZO7VREP.js";
+
+// src/components/form/CategorySelect/CategorySelect.tsx
+import { useEffect, useMemo, useRef } from "react";
+import { useTheme } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function appliedIds(props) {
+  if (props.mode === "single") return props.value ? [props.value] : [];
+  return props.value;
+}
+function draftChanged(draft, applied) {
+  return draft.size !== applied.length || applied.some((id) => !draft.has(id));
+}
+function singleLabel(groups, value) {
+  if (!value) return void 0;
+  const asCategory = groups.find((group) => group.category.id === value);
+  if (asCategory) return asCategory.category.name;
+  const owner = groups.find((group) => group.subcategories.some((sub2) => sub2.id === value));
+  const sub = owner?.subcategories.find((candidate) => candidate.id === value);
+  return sub && owner ? `${owner.category.name} \u203A ${sub.name}` : void 0;
+}
+function resolveConfig(props) {
+  const single = props.mode === "single";
+  return {
+    single,
+    placeholder: props.placeholder ?? (single ? props.copy.placeholderSingle : props.copy.placeholderMulti),
+    disabled: props.disabled ?? false,
+    loading: props.loading ?? false,
+    fullWidth: props.fullWidth ?? false,
+    showCounts: props.showCounts ?? false,
+    allowParentSelection: props.allowParentSelection ?? false,
+    dataTestId: props.dataTestId ?? "category-select"
+  };
+}
+function usePanelFocus(open, activeIndex, searchInputRef, listRef) {
+  useEffect(() => {
+    if (!open) return void 0;
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [open, searchInputRef]);
+  useEffect(() => {
+    if (activeIndex < 0) return;
+    const rows = listRef.current?.querySelectorAll('[role="option"], [role="button"]');
+    rows?.[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, listRef]);
+}
+function CategorySelect(props) {
+  const { options, label, error, onCreateCategory, copy } = props;
+  const {
+    single,
+    placeholder,
+    disabled,
+    loading,
+    fullWidth,
+    showCounts,
+    allowParentSelection,
+    dataTestId
+  } = resolveConfig(props);
+  const theme = useTheme();
+  const sheet = useMediaQuery(theme.breakpoints.down(METRICS.sheetBreakpoint));
+  const applied = appliedIds(props);
+  const state = useCategorySelect({ options, selected: applied });
+  const searchInputRef = useRef(null);
+  const listRef = useRef(null);
+  usePanelFocus(state.open, state.activeIndex, searchInputRef, listRef);
+  const chips = useMemo(
+    () => summarizeSelection(state.allGroups, state.draft),
+    [state.allGroups, state.draft]
+  );
+  const rowIds = useMemo(() => state.rows.map((row) => row.id), [state.rows]);
+  const actions = useCategoryCommit({ props, state, single, allowParentSelection });
+  const onKeyDown = useCategoryKeyHandler({ state, single, allowParentSelection, actions });
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, error: Boolean(error), children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      CategoryTrigger,
+      {
+        copy,
+        placeholder,
+        selectionLabel: props.mode === "single" ? singleLabel(state.allGroups, props.value) : void 0,
+        count: single ? void 0 : applied.length,
+        open: state.open,
+        disabled,
+        fullWidth,
+        onOpen: state.openPanel,
+        onClear: applied.length > 0 ? actions.clearSelection : void 0,
+        triggerRef: state.triggerRef,
+        dataTestId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CategoryPanelSurface,
+      {
+        open: state.open,
+        sheet,
+        anchorEl: state.triggerRef.current,
+        onClose: actions.cancel,
+        children: /* @__PURE__ */ jsx(
+          CategoryPanel,
+          {
+            copy,
+            state,
+            chips,
+            rowIds,
+            changed: draftChanged(state.draft, applied),
+            single,
+            sheet,
+            loading,
+            showCounts,
+            allowParentSelection,
+            ariaLabel: label ?? placeholder,
+            onKeyDown,
+            onActivateCategory: actions.activateCategory,
+            onActivateSubcategory: actions.activateSubcategory,
+            onApply: actions.commit,
+            onCancel: actions.cancel,
+            onCreateCategory,
+            searchInputRef,
+            listRef,
+            dataTestId
+          }
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
+  ] });
+}
+
+export {
+  CategorySelect
+};
+//# sourceMappingURL=chunk-JIEEUHNS.js.map

package/dist/chunk-JIEEUHNS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategorySelect.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\n\nimport { summarizeSelection } from './category-tree';\nimport { CategoryPanel } from './CategoryPanel';\nimport { CategoryPanelSurface } from './CategoryPanelSurface';\nimport { CategoryTrigger } from './CategoryTrigger';\nimport { METRICS } from './CategorySelect.styles';\nimport type { CategoryGroup, CategorySelectProps } from './CategorySelect.types';\nimport { useCategoryCommit } from './useCategoryCommit';\nimport { useCategoryKeyHandler } from './useCategoryKeyHandler';\nimport { useCategorySelect } from './useCategorySelect';\nimport { FormControl, FormLabel, FormMessage } from '../Form';\n\n/** The applied selection, always as an array — the two modes differ in shape. */\nfunction appliedIds(props: CategorySelectProps): string[] {\n  if (props.mode === 'single') return props.value ? [props.value] : [];\n  return props.value;\n}\n\n/** True when the draft differs from what is already applied. */\nfunction draftChanged(draft: ReadonlySet<string>, applied: readonly string[]): boolean {\n  return draft.size !== applied.length || applied.some((id) => !draft.has(id));\n}\n\n/** \"Pai › Filha\" for a chosen id, so the trigger carries its context. */\nfunction singleLabel(groups: CategoryGroup[], value: string | null): string | undefined {\n  if (!value) return undefined;\n  const asCategory = groups.find((group) => group.category.id === value);\n  if (asCategory) return asCategory.category.name;\n  const owner = groups.find((group) => group.subcategories.some((sub) => sub.id === value));\n  const sub = owner?.subcategories.find((candidate) => candidate.id === value);\n  return sub && owner ? `${owner.category.name} › ${sub.name}` : undefined;\n}\n\n/** The optional props, resolved once so the component body stays branch-free. */\ninterface ResolvedConfig {\n  single: boolean;\n  placeholder: string;\n  disabled: boolean;\n  loading: boolean;\n  fullWidth: boolean;\n  showCounts: boolean;\n  allowParentSelection: boolean;\n  dataTestId: string;\n}\n\nfunction resolveConfig(props: CategorySelectProps): ResolvedConfig {\n  const single = props.mode === 'single';\n  return {\n    single,\n    placeholder: props.placeholder ?? (single ? props.copy.placeholderSingle : props.copy.placeholderMulti),\n    disabled: props.disabled ?? false,\n    loading: props.loading ?? false,\n    fullWidth: props.fullWidth ?? false,\n    showCounts: props.showCounts ?? false,\n    allowParentSelection: props.allowParentSelection ?? false,\n    dataTestId: props.dataTestId ?? 'category-select',\n  };\n}\n\n/** Focus the search box on open, and keep the keyboard cursor in view. */\nfunction usePanelFocus(\n  open: boolean,\n  activeIndex: number,\n  searchInputRef: React.RefObject<HTMLInputElement | null>,\n  listRef: React.RefObject<HTMLDivElement | null>,\n): void {\n  // The first thing an admin does with ten categories is type; focusing here\n  // saves the extra click every single time the panel opens.\n  useEffect(() => {\n    if (!open) return undefined;\n    const frame = requestAnimationFrame(() => searchInputRef.current?.focus());\n    return () => cancelAnimationFrame(frame);\n  }, [open, searchInputRef]);\n\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const rows = listRef.current?.querySelectorAll('[role=\"option\"], [role=\"button\"]');\n    rows?.[activeIndex]?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, listRef]);\n}\n\n/**\n * A hierarchical category picker: categories as the frame, subcategories as the\n * thing you choose.\n *\n * Two modes off one component. `multi` is the FILTER — ticks accumulate in a\n * draft and reach `onChange` only on Apply, so the list behind the panel does not\n * reload on every click. `single` is the \"move to…\" picker, where choosing a row\n * commits immediately because there is nothing to batch.\n *\n * The tree opens fully expanded: nothing a search could match is hidden behind a\n * disclosure. Selected categories pin above the list so they survive scrolling\n * and searching, search is accent-insensitive (`agua` finds `Águas`), and the\n * whole tree is keyboard-drivable — ↑↓ to move, → to open, ← to close, Space to\n * mark, Enter to apply, Esc to cancel.\n *\n * Under {@link METRICS.sheetBreakpoint} the panel becomes a bottom sheet, which\n * is the only way a 290px-tall list stays usable one-handed.\n */\nexport function CategorySelect(props: CategorySelectProps): React.JSX.Element {\n  const { options, label, error, onCreateCategory, copy } = props;\n  const {\n    single,\n    placeholder,\n    disabled,\n    loading,\n    fullWidth,\n    showCounts,\n    allowParentSelection,\n    dataTestId,\n  } = resolveConfig(props);\n\n  const theme = useTheme();\n  const sheet = useMediaQuery(theme.breakpoints.down(METRICS.sheetBreakpoint));\n  const applied = appliedIds(props);\n\n  const state = useCategorySelect({ options, selected: applied });\n  const searchInputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  usePanelFocus(state.open, state.activeIndex, searchInputRef, listRef);\n\n  const chips = useMemo(\n    () => summarizeSelection(state.allGroups, state.draft),\n    [state.allGroups, state.draft],\n  );\n  const rowIds = useMemo(() => state.rows.map((row) => row.id), [state.rows]);\n\n  const actions = useCategoryCommit({ props, state, single, allowParentSelection });\n  const onKeyDown = useCategoryKeyHandler({ state, single, allowParentSelection, actions });\n\n  return (\n    <FormControl fullWidth={fullWidth} error={Boolean(error)}>\n      {label && <FormLabel error={Boolean(error)}>{label}</FormLabel>}\n      <CategoryTrigger copy={copy}\n        placeholder={placeholder}\n        selectionLabel={\n          props.mode === 'single' ? singleLabel(state.allGroups, props.value) : undefined\n        }\n        count={single ? undefined : applied.length}\n        open={state.open}\n        disabled={disabled}\n        fullWidth={fullWidth}\n        onOpen={state.openPanel}\n        onClear={applied.length > 0 ? actions.clearSelection : undefined}\n        triggerRef={state.triggerRef}\n        dataTestId={dataTestId}\n      />\n      <CategoryPanelSurface\n        open={state.open}\n        sheet={sheet}\n        anchorEl={state.triggerRef.current}\n        onClose={actions.cancel}\n      >\n        <CategoryPanel copy={copy}\n          state={state}\n          chips={chips}\n          rowIds={rowIds}\n          changed={draftChanged(state.draft, applied)}\n          single={single}\n          sheet={sheet}\n          loading={loading}\n          showCounts={showCounts}\n          allowParentSelection={allowParentSelection}\n          ariaLabel={label ?? placeholder}\n          onKeyDown={onKeyDown}\n          onActivateCategory={actions.activateCategory}\n          onActivateSubcategory={actions.activateSubcategory}\n          onApply={actions.commit}\n          onCancel={actions.cancel}\n          onCreateCategory={onCreateCategory}\n          searchInputRef={searchInputRef}\n          listRef={listRef}\n          dataTestId={dataTestId}\n        />\n      </CategoryPanelSurface>\n      {error && <FormMessage error dataTestId={`${dataTestId}-message`}>{error}</FormMessage>}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,WAAW,SAAS,cAAc;AAC3C,SAAS,gBAAgB;AACzB,OAAO,mBAAmB;AAoItB,SACY,KADZ;AAtHJ,SAAS,WAAW,OAAsC;AACxD,MAAI,MAAM,SAAS,SAAU,QAAO,MAAM,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC;AACnE,SAAO,MAAM;AACf;AAGA,SAAS,aAAa,OAA4B,SAAqC;AACrF,SAAO,MAAM,SAAS,QAAQ,UAAU,QAAQ,KAAK,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;AAC7E;AAGA,SAAS,YAAY,QAAyB,OAA0C;AACtF,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,aAAa,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,OAAO,KAAK;AACrE,MAAI,WAAY,QAAO,WAAW,SAAS;AAC3C,QAAM,QAAQ,OAAO,KAAK,CAAC,UAAU,MAAM,cAAc,KAAK,CAACA,SAAQA,KAAI,OAAO,KAAK,CAAC;AACxF,QAAM,MAAM,OAAO,cAAc,KAAK,CAAC,cAAc,UAAU,OAAO,KAAK;AAC3E,SAAO,OAAO,QAAQ,GAAG,MAAM,SAAS,IAAI,WAAM,IAAI,IAAI,KAAK;AACjE;AAcA,SAAS,cAAc,OAA4C;AACjE,QAAM,SAAS,MAAM,SAAS;AAC9B,SAAO;AAAA,IACL;AAAA,IACA,aAAa,MAAM,gBAAgB,SAAS,MAAM,KAAK,oBAAoB,MAAM,KAAK;AAAA,IACtF,UAAU,MAAM,YAAY;AAAA,IAC5B,SAAS,MAAM,WAAW;AAAA,IAC1B,WAAW,MAAM,aAAa;AAAA,IAC9B,YAAY,MAAM,cAAc;AAAA,IAChC,sBAAsB,MAAM,wBAAwB;AAAA,IACpD,YAAY,MAAM,cAAc;AAAA,EAClC;AACF;AAGA,SAAS,cACP,MACA,aACA,gBACA,SACM;AAGN,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,QAAQ,sBAAsB,MAAM,eAAe,SAAS,MAAM,CAAC;AACzE,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,MAAM,cAAc,CAAC;AAEzB,YAAU,MAAM;AACd,QAAI,cAAc,EAAG;AACrB,UAAM,OAAO,QAAQ,SAAS,iBAAiB,kCAAkC;AACjF,WAAO,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,EAC1D,GAAG,CAAC,aAAa,OAAO,CAAC;AAC3B;AAoBO,SAAS,eAAe,OAA+C;AAC5E,QAAM,EAAE,SAAS,OAAO,OAAO,kBAAkB,KAAK,IAAI;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,KAAK;AAEvB,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,cAAc,MAAM,YAAY,KAAK,QAAQ,eAAe,CAAC;AAC3E,QAAM,UAAU,WAAW,KAAK;AAEhC,QAAM,QAAQ,kBAAkB,EAAE,SAAS,UAAU,QAAQ,CAAC;AAC9D,QAAM,iBAAiB,OAAgC,IAAI;AAC3D,QAAM,UAAU,OAA8B,IAAI;AAClD,gBAAc,MAAM,MAAM,MAAM,aAAa,gBAAgB,OAAO;AAEpE,QAAM,QAAQ;AAAA,IACZ,MAAM,mBAAmB,MAAM,WAAW,MAAM,KAAK;AAAA,IACrD,CAAC,MAAM,WAAW,MAAM,KAAK;AAAA,EAC/B;AACA,QAAM,SAAS,QAAQ,MAAM,MAAM,KAAK,IAAI,CAAC,QAAQ,IAAI,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC;AAE1E,QAAM,UAAU,kBAAkB,EAAE,OAAO,OAAO,QAAQ,qBAAqB,CAAC;AAChF,QAAM,YAAY,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,QAAQ,CAAC;AAExF,SACE,qBAAC,eAAY,WAAsB,OAAO,QAAQ,KAAK,GACpD;AAAA,aAAS,oBAAC,aAAU,OAAO,QAAQ,KAAK,GAAI,iBAAM;AAAA,IACnD;AAAA,MAAC;AAAA;AAAA,QAAgB;AAAA,QACf;AAAA,QACA,gBACE,MAAM,SAAS,WAAW,YAAY,MAAM,WAAW,MAAM,KAAK,IAAI;AAAA,QAExE,OAAO,SAAS,SAAY,QAAQ;AAAA,QACpC,MAAM,MAAM;AAAA,QACZ;AAAA,QACA;AAAA,QACA,QAAQ,MAAM;AAAA,QACd,SAAS,QAAQ,SAAS,IAAI,QAAQ,iBAAiB;AAAA,QACvD,YAAY,MAAM;AAAA,QAClB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ;AAAA,QACA,UAAU,MAAM,WAAW;AAAA,QAC3B,SAAS,QAAQ;AAAA,QAEjB;AAAA,UAAC;AAAA;AAAA,YAAc;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,aAAa,MAAM,OAAO,OAAO;AAAA,YAC1C;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,SAAS;AAAA,YACpB;AAAA,YACA,oBAAoB,QAAQ;AAAA,YAC5B,uBAAuB,QAAQ;AAAA,YAC/B,SAAS,QAAQ;AAAA,YACjB,UAAU,QAAQ;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,SAAS,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,UAAU,YAAa,iBAAM;AAAA,KAC3E;AAEJ;","names":["sub"]}

package/dist/chunk-JMVIIKII.js

@@ -0,0 +1,98 @@
+// src/components/layout/ContentToolbar/ColumnsMenu.tsx
+import ColumnsIcon from "@mui/icons-material/ViewColumnRounded";
+import Box from "@mui/material/Box/index.js";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import ListSubheader from "@mui/material/ListSubheader/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ColumnRow({
+  option,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      "data-testid": testId,
+      onClick: () => onToggle(option.id, !option.visible),
+      disabled: option.locked,
+      sx: { gap: 1 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: option.visible,
+            size: "small",
+            disableRipple: true,
+            sx: { p: 0, pointerEvents: "none" },
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: option.label })
+      ]
+    }
+  );
+}
+function ColumnsMenu({
+  columns,
+  onToggle,
+  title = "Columns",
+  ariaLabel = "Toggle columns",
+  "data-testid": testId
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "data-testid": testId,
+        "aria-label": ariaLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: {
+          width: 32,
+          height: 32,
+          borderRadius: 1,
+          color: "text.secondary",
+          bgcolor: open ? "action.selected" : "transparent"
+        },
+        children: /* @__PURE__ */ jsx(ColumnsIcon, { sx: { fontSize: 16 } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 200 } } },
+        children: [
+          /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 1.5, py: 0.75, fontSize: "0.75rem", fontWeight: 600, color: "text.primary", lineHeight: 1.5 }, children: title }),
+          columns.map((option) => /* @__PURE__ */ jsx(
+            ColumnRow,
+            {
+              option,
+              onToggle,
+              testId: testId ? `${testId}-${option.id}` : void 0
+            },
+            option.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  ColumnsMenu
+};
+//# sourceMappingURL=chunk-JMVIIKII.js.map

package/dist/chunk-JMVIIKII.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ColumnsMenu.tsx"],"sourcesContent":["'use client';\n\nimport ColumnsIcon from '@mui/icons-material/ViewColumnRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport React, { useState } from 'react';\n\nimport type { ColumnVisibilityOption, ColumnsMenuProps } from './ContentToolbar.types';\n\n/** One column checkbox row; toggling never closes the menu. */\nfunction ColumnRow({\n  option,\n  onToggle,\n  testId,\n}: {\n  option: ColumnVisibilityOption;\n  onToggle: (id: string, visible: boolean) => void;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <MenuItem\n      data-testid={testId}\n      onClick={() => onToggle(option.id, !option.visible)}\n      disabled={option.locked}\n      sx={{ gap: 1 }}\n    >\n      <Checkbox\n        checked={option.visible}\n        size=\"small\"\n        disableRipple\n        sx={{ p: 0, pointerEvents: 'none' }}\n        tabIndex={-1}\n      />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {option.label}\n      </Box>\n    </MenuItem>\n  );\n}\n\n/**\n * Stateless column-visibility selector: a neutral icon button (matching\n * {@link FilterTrigger}/{@link SortByDropdown}) opening a checkbox list of the\n * hideable columns. Purely presentational — the caller owns the visibility state\n * and is notified via `onToggle`. The menu stays open while toggling so several\n * columns can be flipped at once.\n */\nexport function ColumnsMenu({\n  columns,\n  onToggle,\n  title = 'Columns',\n  ariaLabel = 'Toggle columns',\n  'data-testid': testId,\n}: ColumnsMenuProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const close = (): void => setAnchorEl(null);\n\n  return (\n    <>\n      <IconButton\n        size=\"small\"\n        data-testid={testId}\n        aria-label={ariaLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{\n          width: 32,\n          height: 32,\n          borderRadius: 1,\n          color: 'text.secondary',\n          bgcolor: open ? 'action.selected' : 'transparent',\n        }}\n      >\n        <ColumnsIcon sx={{ fontSize: 16 }} />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={close}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: 200 } } }}\n      >\n        <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: '0.75rem', fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>\n          {title}\n        </ListSubheader>\n        {columns.map((option) => (\n          <ColumnRow\n            key={option.id}\n            option={option}\n            onToggle={onToggle}\n            testId={testId ? `${testId}-${option.id}` : undefined}\n          />\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"mappings":";AAEA,OAAO,iBAAiB;AACxB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAgB,gBAAgB;AAe5B,SAuCA,UAjCE,KANF;AAVJ,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,SAAS,MAAM,SAAS,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MAClD,UAAU,OAAO;AAAA,MACjB,IAAI,EAAE,KAAK,EAAE;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,OAAO;AAAA,YAChB,MAAK;AAAA,YACL,eAAa;AAAA,YACb,IAAI,EAAE,GAAG,GAAG,eAAe,OAAO;AAAA,YAClC,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,OAAO,GACjE,iBAAO,OACV;AAAA;AAAA;AAAA,EACF;AAEJ;AASO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,GAAwC;AACtC,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,QAAQ,MAAY,YAAY,IAAI;AAE1C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS,CAAC,UAAU,YAAY,MAAM,aAAa;AAAA,QACnD,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,OAAO;AAAA,UACP,SAAS,OAAO,oBAAoB;AAAA,QACtC;AAAA,QAEA,8BAAC,eAAY,IAAI,EAAE,UAAU,GAAG,GAAG;AAAA;AAAA,IACrC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,cAAc,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,QACxD,iBAAiB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,QACxD,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,IAAI,EAAE,EAAE;AAAA,QAE9C;AAAA,8BAAC,iBAAc,IAAI,EAAE,IAAI,KAAK,IAAI,MAAM,UAAU,WAAW,YAAY,KAAK,OAAO,gBAAgB,YAAY,IAAI,GAClH,iBACH;AAAA,UACC,QAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA,QAAQ,SAAS,GAAG,MAAM,IAAI,OAAO,EAAE,KAAK;AAAA;AAAA,YAHvC,OAAO;AAAA,UAId,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}