@portnet/ui 6.0.0 → 6.0.1

package/dist/esm/v2/patterns/ColumnsToggle.js

@@ -0,0 +1,301 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Popover from "@mui/material/Popover";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import Button from "../components/Button";
+import { mergeLabels } from "../utils/mergeLabels";
+
+/**
+ * ColumnsToggle - Portnet UI v2 (pattern)
+ *
+ * Companion affordance for DataGrid's `hiddenColumns` prop. Renders
+ * a small toolbar button that opens a popover containing one
+ * checkbox per toggleable column. Toggling a checkbox emits the
+ * new hiddenColumns Set up to the host.
+ *
+ *   <ColumnsToggle
+ *     columns={cols}
+ *     hiddenColumns={hiddenSet}
+ *     onHiddenColumnsChange={setHiddenSet}
+ *     labels={{
+ *       button: "Colonnes",
+ *       title:  "Afficher les colonnes",
+ *       showAll: "Tout afficher",
+ *       hideAll: "Tout masquer",
+ *       countSuffix: (n) => `${n} masquée${n > 1 ? "s" : ""}`,
+ *     }}
+ *   />
+ *
+ * The host owns the columns schema, the hiddenColumns state, and
+ * the change callback. The component is pure presentation — its
+ * only internal state is the popover's anchor element.
+ *
+ * Mental model: checkbox represents VISIBILITY (checked = visible,
+ * not in hiddenSet) — avoids the double-negative trap of "checked
+ * means hidden". Matches what users expect from "show columns" UIs.
+ *
+ * `col.toggleable: false` on a column excludes it from the popover
+ * entirely — useful for identity columns or system-pinned columns
+ * that should not be user-hideable. The DataGrid itself doesn't
+ * read this flag (it filters strictly based on hiddenColumns);
+ * the flag is a contract between the host's schema and this
+ * component.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var DEFAULT_LABELS = Object.freeze({
+  button: "Colonnes",
+  title: "Afficher les colonnes",
+  showAll: "Tout afficher",
+  hideAll: "Tout masquer",
+  countSuffix: function countSuffix(n) {
+    return "".concat(n, " masqu\xE9e").concat(n > 1 ? "s" : "");
+  }
+});
+
+/* SET-1 — Best-effort plain-text extraction from a column header node, used to
+ * build the visibility checkbox's accessible name. A JSX header (icon + text)
+ * would otherwise fall back to the machine `col.key`, making the accessible
+ * name diverge from the visible label (WCAG 2.5.3, label in name). Same shape
+ * as the Chip/Tooltip text extractors; returns "" for icon-only headers.
+ * Exported so DataGridSettingsMenu reuses the identical logic (DGS-1). */
+export function extractHeaderText(node) {
+  if (node == null || node === false) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(extractHeaderText).join(" ").trim();
+  if (/*#__PURE__*/React.isValidElement(node)) {
+    return extractHeaderText(node.props.children);
+  }
+  return "";
+}
+
+/* ── Hoisted sx (D5) ──────────────────────────────────────────────── */
+
+var POPOVER_PAPER_SX = Object.freeze({
+  // Match the rest of the v2 surface — soft radius, subtle border,
+  // shadow consistent with Drawer / Modal.
+  borderRadius: "var(--r-lg)",
+  boxShadow: "var(--shadow-md)",
+  border: "1px solid var(--border)"
+});
+var POPOVER_BODY_SX = Object.freeze({
+  padding: "var(--s-3) var(--s-4)",
+  minWidth: 240,
+  maxHeight: 360,
+  overflowY: "auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--s-1)"
+});
+var POPOVER_TITLE_SX = Object.freeze({
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--fw-semibold)",
+  color: "var(--fg-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+  paddingBottom: "var(--s-2)",
+  borderBottom: "1px solid var(--border)",
+  marginBottom: "var(--s-2)"
+});
+var POPOVER_FOOTER_SX = Object.freeze({
+  display: "flex",
+  justifyContent: "space-between",
+  gap: "var(--s-2)",
+  paddingTop: "var(--s-2)",
+  marginTop: "var(--s-2)",
+  borderTop: "1px solid var(--border)"
+});
+var CHECKBOX_LABEL_SX = Object.freeze({
+  // Override MUI default 16px which is too generous for compact
+  // popover lists. Keeps each row at the ~32px touch-friendly
+  // minimum without padding.
+  marginLeft: 0,
+  marginRight: 0,
+  "& .MuiFormControlLabel-label": {
+    fontSize: "var(--text-sm)",
+    color: "var(--fg)"
+  }
+});
+var BADGE_SX = Object.freeze({
+  marginInlineStart: "var(--s-1)",
+  background: "var(--accent)",
+  color: "var(--accent-fg)",
+  borderRadius: "var(--r-full)",
+  padding: "1px 6px",
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--fw-semibold)",
+  lineHeight: 1.4
+});
+function ColumnsToggle(_ref) {
+  var columns = _ref.columns,
+    hiddenColumns = _ref.hiddenColumns,
+    onHiddenColumnsChange = _ref.onHiddenColumnsChange,
+    labels = _ref.labels;
+  var L = mergeLabels(DEFAULT_LABELS, labels);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchor = _React$useState2[0],
+    setAnchor = _React$useState2[1];
+
+  // Normalise hiddenColumns to a Set for the predicate work below.
+  // Same contract as DataGrid — accepts Set or Array. Memoised so
+  // the popover body doesn't recompute checkbox states on unrelated
+  // renders.
+  var hiddenSet = React.useMemo(function () {
+    return hiddenColumns instanceof Set ? hiddenColumns : new Set(hiddenColumns || []);
+  }, [hiddenColumns]);
+
+  // Toggleable subset — the only columns this UI exposes. System-
+  // pinned columns (col.toggleable === false) are absent from the
+  // popover entirely. Memoised because columns is often passed
+  // inline by hosts (defensive against per-render reference churn).
+  var toggleableColumns = React.useMemo(function () {
+    return columns.filter(function (c) {
+      return c.toggleable !== false;
+    });
+  }, [columns]);
+
+  // Count of currently-hidden columns AMONG the toggleable set
+  // (defensive: a host that pre-hides a column then flips its
+  // toggleable flag to false shouldn't see a stale count).
+  var hiddenCount = React.useMemo(function () {
+    return toggleableColumns.filter(function (c) {
+      return hiddenSet.has(c.key);
+    }).length;
+  }, [toggleableColumns, hiddenSet]);
+  var open = Boolean(anchor);
+  var handleOpen = function handleOpen(e) {
+    return setAnchor(e.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    return setAnchor(null);
+  };
+
+  // Single column toggle — checkbox represents visibility, so
+  // CHECKED means "remove from hiddenSet" (= show).
+  var toggleColumn = function toggleColumn(key) {
+    var next = new Set(hiddenSet);
+    if (next.has(key)) next["delete"](key);else next.add(key);
+    onHiddenColumnsChange(next);
+  };
+  var showAll = function showAll() {
+    return onHiddenColumnsChange(new Set());
+  };
+  var hideAll = function hideAll() {
+    return onHiddenColumnsChange(new Set(toggleableColumns.map(function (c) {
+      return c.key;
+    })));
+  };
+
+  // ARIA label for the trigger — includes the hidden count so
+  // screen readers announce state without relying on the
+  // decorative badge digit. e.g. "Colonnes, 2 masquées".
+  var triggerAriaLabel = hiddenCount > 0 ? "".concat(L.button, ", ").concat(L.countSuffix(hiddenCount)) : L.button;
+
+  // MUI v9: slot bag for Popover paper. Carries the dialog ARIA
+  // contract (role + aria-label) — host-customisable via labels.title.
+  // Memoised so the slotProps reference stays stable when L.title
+  // is unchanged.
+  var popoverSlotProps = React.useMemo(function () {
+    return {
+      paper: {
+        sx: POPOVER_PAPER_SX,
+        // Dialog role so screen readers treat the popover as a
+        // discrete UI region rather than just a tooltip-like
+        // overlay.
+        role: "dialog",
+        "aria-label": L.title
+      }
+    };
+  }, [L.title]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Button, {
+      variant: "ghost",
+      size: "sm",
+      type: "button",
+      icon: /*#__PURE__*/_jsx(ViewColumnIcon, {
+        fontSize: "small"
+      }),
+      onClick: handleOpen,
+      "aria-label": triggerAriaLabel,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      children: [L.button, hiddenCount > 0 && /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: BADGE_SX,
+        "aria-hidden": "true",
+        children: hiddenCount
+      })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: open,
+      anchorEl: anchor,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      slotProps: popoverSlotProps,
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: POPOVER_BODY_SX,
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: "div",
+          sx: POPOVER_TITLE_SX,
+          children: L.title
+        }), toggleableColumns.map(function (col) {
+          var isVisible = !hiddenSet.has(col.key);
+          // SET-1 — accessible name = the header's visible text so it matches
+          // the rendered label (WCAG 2.5.3). Only icon-only headers (no text)
+          // fall back to the raw key. The visual label still renders col.header.
+          var headerText = extractHeaderText(col.header).trim();
+          var labelText = headerText || col.key;
+          return /*#__PURE__*/_jsx(FormControlLabel, {
+            control: /*#__PURE__*/_jsx(Checkbox, {
+              size: "small",
+              checked: isVisible,
+              onChange: function onChange() {
+                return toggleColumn(col.key);
+              },
+              slotProps: {
+                input: {
+                  "aria-label": labelText
+                }
+              }
+            }),
+            label: col.header,
+            sx: CHECKBOX_LABEL_SX
+          }, col.key);
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: POPOVER_FOOTER_SX,
+          children: [/*#__PURE__*/_jsx(Button, {
+            size: "sm",
+            variant: "ghost",
+            type: "button",
+            onClick: showAll,
+            disabled: hiddenCount === 0,
+            children: L.showAll
+          }), /*#__PURE__*/_jsx(Button, {
+            size: "sm",
+            variant: "ghost",
+            type: "button",
+            onClick: hideAll,
+            disabled: hiddenCount === toggleableColumns.length,
+            children: L.hideAll
+          })]
+        })]
+      })
+    })]
+  });
+}
+export default ColumnsToggle;
+//# sourceMappingURL=ColumnsToggle.js.map

package/dist/esm/v2/patterns/ColumnsToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsToggle.js","names":["React","Box","Popover","Checkbox","FormControlLabel","ViewColumnIcon","Button","mergeLabels","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULT_LABELS","Object","freeze","button","title","showAll","hideAll","countSuffix","n","concat","extractHeaderText","node","String","Array","isArray","map","join","trim","isValidElement","props","children","POPOVER_PAPER_SX","borderRadius","boxShadow","border","POPOVER_BODY_SX","padding","minWidth","maxHeight","overflowY","display","flexDirection","gap","POPOVER_TITLE_SX","fontSize","fontWeight","color","textTransform","letterSpacing","paddingBottom","borderBottom","marginBottom","POPOVER_FOOTER_SX","justifyContent","paddingTop","marginTop","borderTop","CHECKBOX_LABEL_SX","marginLeft","marginRight","BADGE_SX","marginInlineStart","background","lineHeight","ColumnsToggle","_ref","columns","hiddenColumns","onHiddenColumnsChange","labels","L","_React$useState","useState","_React$useState2","_slicedToArray","anchor","setAnchor","hiddenSet","useMemo","Set","toggleableColumns","filter","c","toggleable","hiddenCount","has","key","length","open","Boolean","handleOpen","e","currentTarget","handleClose","toggleColumn","next","add","triggerAriaLabel","popoverSlotProps","paper","sx","role","variant","size","type","icon","onClick","component","anchorEl","onClose","anchorOrigin","vertical","horizontal","transformOrigin","slotProps","col","isVisible","headerText","header","labelText","control","checked","onChange","input","label","disabled"],"sources":["../../../../src/lib/v2/patterns/ColumnsToggle.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Popover from \"@mui/material/Popover\";\r\nimport Checkbox from \"@mui/material/Checkbox\";\r\nimport FormControlLabel from \"@mui/material/FormControlLabel\";\r\nimport ViewColumnIcon from \"@mui/icons-material/ViewColumn\";\r\nimport Button from \"../components/Button\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport type { DataGridColumn } from \"../types/datagrid\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * ColumnsToggle - Portnet UI v2 (pattern)\r\n *\r\n * Companion affordance for DataGrid's `hiddenColumns` prop. Renders\r\n * a small toolbar button that opens a popover containing one\r\n * checkbox per toggleable column. Toggling a checkbox emits the\r\n * new hiddenColumns Set up to the host.\r\n *\r\n *   <ColumnsToggle\r\n *     columns={cols}\r\n *     hiddenColumns={hiddenSet}\r\n *     onHiddenColumnsChange={setHiddenSet}\r\n *     labels={{\r\n *       button: \"Colonnes\",\r\n *       title:  \"Afficher les colonnes\",\r\n *       showAll: \"Tout afficher\",\r\n *       hideAll: \"Tout masquer\",\r\n *       countSuffix: (n) => `${n} masquée${n > 1 ? \"s\" : \"\"}`,\r\n *     }}\r\n *   />\r\n *\r\n * The host owns the columns schema, the hiddenColumns state, and\r\n * the change callback. The component is pure presentation — its\r\n * only internal state is the popover's anchor element.\r\n *\r\n * Mental model: checkbox represents VISIBILITY (checked = visible,\r\n * not in hiddenSet) — avoids the double-negative trap of \"checked\r\n * means hidden\". Matches what users expect from \"show columns\" UIs.\r\n *\r\n * `col.toggleable: false` on a column excludes it from the popover\r\n * entirely — useful for identity columns or system-pinned columns\r\n * that should not be user-hideable. The DataGrid itself doesn't\r\n * read this flag (it filters strictly based on hiddenColumns);\r\n * the flag is a contract between the host's schema and this\r\n * component.\r\n */\r\n\r\nexport interface ColumnsToggleLabels {\r\n  button?: string | undefined;\r\n  title?: string | undefined;\r\n  showAll?: string | undefined;\r\n  hideAll?: string | undefined;\r\n  countSuffix?: ((n: number) => string) | undefined;\r\n}\r\n\r\nexport interface ColumnsToggleProps {\r\n  columns: ReadonlyArray<Pick<DataGridColumn<unknown>, \"key\" | \"header\" | \"toggleable\">>;\r\n  hiddenColumns?: Set<string> | string[] | undefined;\r\n  onHiddenColumnsChange: (hidden: Set<string>) => void;\r\n  labels?: ColumnsToggleLabels | undefined;\r\n}\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  button:       \"Colonnes\",\r\n  title:        \"Afficher les colonnes\",\r\n  showAll:      \"Tout afficher\",\r\n  hideAll:      \"Tout masquer\",\r\n  countSuffix:  (n: number) => `${n} masquée${n > 1 ? \"s\" : \"\"}`,\r\n});\r\n\r\n/* SET-1 — Best-effort plain-text extraction from a column header node, used to\r\n * build the visibility checkbox's accessible name. A JSX header (icon + text)\r\n * would otherwise fall back to the machine `col.key`, making the accessible\r\n * name diverge from the visible label (WCAG 2.5.3, label in name). Same shape\r\n * as the Chip/Tooltip text extractors; returns \"\" for icon-only headers.\r\n * Exported so DataGridSettingsMenu reuses the identical logic (DGS-1). */\r\nexport function extractHeaderText(node: React.ReactNode): string {\r\n  if (node == null || node === false) return \"\";\r\n  if (typeof node === \"string\" || typeof node === \"number\") return String(node);\r\n  if (Array.isArray(node)) return node.map(extractHeaderText).join(\" \").trim();\r\n  if (React.isValidElement(node)) {\r\n    return extractHeaderText((node.props as { children?: React.ReactNode }).children);\r\n  }\r\n  return \"\";\r\n}\r\n\r\n/* ── Hoisted sx (D5) ──────────────────────────────────────────────── */\r\n\r\nconst POPOVER_PAPER_SX = Object.freeze({\r\n  // Match the rest of the v2 surface — soft radius, subtle border,\r\n  // shadow consistent with Drawer / Modal.\r\n  borderRadius: \"var(--r-lg)\",\r\n  boxShadow: \"var(--shadow-md)\",\r\n  border: \"1px solid var(--border)\",\r\n});\r\n\r\nconst POPOVER_BODY_SX = Object.freeze({\r\n  padding: \"var(--s-3) var(--s-4)\",\r\n  minWidth: 240,\r\n  maxHeight: 360,\r\n  overflowY: \"auto\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: \"var(--s-1)\",\r\n} satisfies SxProps<Theme>);\r\n\r\nconst POPOVER_TITLE_SX = Object.freeze({\r\n  fontSize: \"var(--text-xs)\",\r\n  fontWeight: \"var(--fw-semibold)\",\r\n  color: \"var(--fg-muted)\",\r\n  textTransform: \"uppercase\",\r\n  letterSpacing: \"0.04em\",\r\n  paddingBottom: \"var(--s-2)\",\r\n  borderBottom: \"1px solid var(--border)\",\r\n  marginBottom: \"var(--s-2)\",\r\n} satisfies SxProps<Theme>);\r\n\r\nconst POPOVER_FOOTER_SX = Object.freeze({\r\n  display: \"flex\",\r\n  justifyContent: \"space-between\",\r\n  gap: \"var(--s-2)\",\r\n  paddingTop: \"var(--s-2)\",\r\n  marginTop: \"var(--s-2)\",\r\n  borderTop: \"1px solid var(--border)\",\r\n} satisfies SxProps<Theme>);\r\n\r\nconst CHECKBOX_LABEL_SX = Object.freeze({\r\n  // Override MUI default 16px which is too generous for compact\r\n  // popover lists. Keeps each row at the ~32px touch-friendly\r\n  // minimum without padding.\r\n  marginLeft: 0,\r\n  marginRight: 0,\r\n  \"& .MuiFormControlLabel-label\": {\r\n    fontSize: \"var(--text-sm)\",\r\n    color: \"var(--fg)\",\r\n  },\r\n});\r\n\r\nconst BADGE_SX = Object.freeze({\r\n  marginInlineStart: \"var(--s-1)\",\r\n  background: \"var(--accent)\",\r\n  color: \"var(--accent-fg)\",\r\n  borderRadius: \"var(--r-full)\",\r\n  padding: \"1px 6px\",\r\n  fontSize: \"var(--text-xs)\",\r\n  fontWeight: \"var(--fw-semibold)\",\r\n  lineHeight: 1.4,\r\n});\r\n\r\nfunction ColumnsToggle({\r\n  columns,\r\n  hiddenColumns,\r\n  onHiddenColumnsChange,\r\n  labels,\r\n}: ColumnsToggleProps) {\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n  const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);\r\n\r\n  // Normalise hiddenColumns to a Set for the predicate work below.\r\n  // Same contract as DataGrid — accepts Set or Array. Memoised so\r\n  // the popover body doesn't recompute checkbox states on unrelated\r\n  // renders.\r\n  const hiddenSet = React.useMemo(\r\n    () =>\r\n      hiddenColumns instanceof Set\r\n        ? hiddenColumns\r\n        : new Set(hiddenColumns || []),\r\n    [hiddenColumns]\r\n  );\r\n\r\n  // Toggleable subset — the only columns this UI exposes. System-\r\n  // pinned columns (col.toggleable === false) are absent from the\r\n  // popover entirely. Memoised because columns is often passed\r\n  // inline by hosts (defensive against per-render reference churn).\r\n  const toggleableColumns = React.useMemo(\r\n    () => columns.filter((c) => c.toggleable !== false),\r\n    [columns]\r\n  );\r\n\r\n  // Count of currently-hidden columns AMONG the toggleable set\r\n  // (defensive: a host that pre-hides a column then flips its\r\n  // toggleable flag to false shouldn't see a stale count).\r\n  const hiddenCount = React.useMemo(\r\n    () => toggleableColumns.filter((c) => hiddenSet.has(c.key)).length,\r\n    [toggleableColumns, hiddenSet]\r\n  );\r\n\r\n  const open = Boolean(anchor);\r\n\r\n  const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => setAnchor(e.currentTarget);\r\n  const handleClose = () => setAnchor(null);\r\n\r\n  // Single column toggle — checkbox represents visibility, so\r\n  // CHECKED means \"remove from hiddenSet\" (= show).\r\n  const toggleColumn = (key: string) => {\r\n    const next = new Set(hiddenSet);\r\n    if (next.has(key)) next.delete(key);\r\n    else next.add(key);\r\n    onHiddenColumnsChange(next);\r\n  };\r\n\r\n  const showAll = () => onHiddenColumnsChange(new Set<string>());\r\n  const hideAll = () =>\r\n    onHiddenColumnsChange(new Set(toggleableColumns.map((c) => c.key)));\r\n\r\n  // ARIA label for the trigger — includes the hidden count so\r\n  // screen readers announce state without relying on the\r\n  // decorative badge digit. e.g. \"Colonnes, 2 masquées\".\r\n  const triggerAriaLabel =\r\n    hiddenCount > 0 ? `${L.button}, ${L.countSuffix(hiddenCount)}` : L.button;\r\n\r\n  // MUI v9: slot bag for Popover paper. Carries the dialog ARIA\r\n  // contract (role + aria-label) — host-customisable via labels.title.\r\n  // Memoised so the slotProps reference stays stable when L.title\r\n  // is unchanged.\r\n  const popoverSlotProps = React.useMemo(\r\n    () => ({\r\n      paper: {\r\n        sx: POPOVER_PAPER_SX,\r\n        // Dialog role so screen readers treat the popover as a\r\n        // discrete UI region rather than just a tooltip-like\r\n        // overlay.\r\n        role: \"dialog\",\r\n        \"aria-label\": L.title,\r\n      },\r\n    }),\r\n    [L.title]\r\n  );\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        variant=\"ghost\"\r\n        size=\"sm\"\r\n        type=\"button\"\r\n        icon={<ViewColumnIcon fontSize=\"small\" />}\r\n        onClick={handleOpen}\r\n        aria-label={triggerAriaLabel}\r\n        aria-haspopup=\"dialog\"\r\n        aria-expanded={open}\r\n      >\r\n        {L.button}\r\n        {hiddenCount > 0 && (\r\n          <Box component=\"span\" sx={BADGE_SX} aria-hidden=\"true\">\r\n            {hiddenCount}\r\n          </Box>\r\n        )}\r\n      </Button>\r\n\r\n      <Popover\r\n        open={open}\r\n        anchorEl={anchor}\r\n        onClose={handleClose}\r\n        anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\r\n        transformOrigin={{ vertical: \"top\", horizontal: \"right\" }}\r\n        slotProps={popoverSlotProps}\r\n      >\r\n        <Box sx={POPOVER_BODY_SX}>\r\n          <Box component=\"div\" sx={POPOVER_TITLE_SX}>\r\n            {L.title}\r\n          </Box>\r\n\r\n          {toggleableColumns.map((col) => {\r\n            const isVisible = !hiddenSet.has(col.key);\r\n            // SET-1 — accessible name = the header's visible text so it matches\r\n            // the rendered label (WCAG 2.5.3). Only icon-only headers (no text)\r\n            // fall back to the raw key. The visual label still renders col.header.\r\n            const headerText = extractHeaderText(col.header).trim();\r\n            const labelText = headerText || col.key;\r\n            return (\r\n              <FormControlLabel\r\n                key={col.key}\r\n                control={\r\n                  <Checkbox\r\n                    size=\"small\"\r\n                    checked={isVisible}\r\n                    onChange={() => toggleColumn(col.key)}\r\n                    slotProps={{\r\n                      input: { \"aria-label\": labelText },\r\n                    }}\r\n                  />\r\n                }\r\n                label={col.header}\r\n                sx={CHECKBOX_LABEL_SX}\r\n              />\r\n            );\r\n          })}\r\n\r\n          <Box sx={POPOVER_FOOTER_SX}>\r\n            <Button\r\n              size=\"sm\"\r\n              variant=\"ghost\"\r\n              type=\"button\"\r\n              onClick={showAll}\r\n              disabled={hiddenCount === 0}\r\n            >\r\n              {L.showAll}\r\n            </Button>\r\n            <Button\r\n              size=\"sm\"\r\n              variant=\"ghost\"\r\n              type=\"button\"\r\n              onClick={hideAll}\r\n              disabled={hiddenCount === toggleableColumns.length}\r\n            >\r\n              {L.hideAll}\r\n            </Button>\r\n          </Box>\r\n        </Box>\r\n      </Popover>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default ColumnsToggle;\r\n"],"mappings":"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","ignoreList":[]}