@portnet/ui 6.0.0 → 6.0.1

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

@@ -0,0 +1,342 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import Box from "@mui/material/Box";
+import { Skeleton, SkeletonDetailHero } from "../components/Skeleton";
+
+/**
+ * SkeletonPageShell — Portnet UI v2 (pattern)
+ *
+ * Route-level `Suspense` fallback: a skeleton of the canonical page skeleton
+ * (Charter §07 / §7.1 bis), sized to match `ActionBar` + `PageContent`.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-02)
+ *
+ * R-P.1 MUST: "Routing avec `React.lazy` + `Suspense`, **fallback skeleton
+ * page**". The library shipped every skeleton PART — `Skeleton`, `SkeletonRow`,
+ * `SkeletonKPI`, `SkeletonDetailHero`, `SkeletonTabContent`, `SkeletonText` —
+ * and `PageBusy`, but nothing that satisfies R-P.1 directly:
+ *
+ *   - `PageBusy` is a full-viewport spinner, and R-8.1 MUST forbids exactly that
+ *     for navigation ("jamais de spinner full-screen sur navigation"). It cannot
+ *     be the route fallback.
+ *   - the parts are shaped for *inside* a page, not for the page frame.
+ *
+ * So every module hand-built a `RoutePageFallback` — observed in
+ * `procuration-portnet-fe` and `procuration-fe`, independently written.
+ *
+ * THE COUPLING IS THE ARGUMENT. To avoid the layout shift a skeleton exists to
+ * prevent, the fallback's padding must equal `ActionBar`'s and `PageContent`'s
+ * exactly. A module can only get that by reading this library's source and
+ * copying literals — which then silently rot the next time either component's
+ * padding changes. Only the library can keep them in lockstep, so only the
+ * library should own it. Values below are copied from the two components in this
+ * same directory; a change there must change them here.
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * Accessibility (R-Sk.3). ONE labelled `aria-busy` region wraps the whole
+ * shell, and every child is an `aria-hidden` `Skeleton` primitive. This
+ * deliberately does NOT compose `SkeletonText` / `SkeletonTabContent`, because
+ * each of those carries its own `aria-busy` + `aria-label`, and nesting live
+ * regions makes a screen reader announce a page load two or three times.
+ *
+ * Dimensions come from density tokens (`--btn-h`, `--input-h`, `--row-h`)
+ * rather than px literals, so the reserved space follows a
+ * `data-density="compact"` switch instead of being 6–8 px wrong under it.
+ *
+ * Usage:
+ *   <Suspense fallback={<SkeletonPageShell variant="list" />}>
+ *     <Outlet />
+ *   </Suspense>
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* ── Copied from ActionBar.tsx / PageContent.tsx in this directory ──────────
+ * If either changes, change these with it. */
+var ACTION_BAR_PADDING = Object.freeze({
+  xs: "var(--s-3)",
+  sm: "var(--s-3) var(--s-4)",
+  lg: "var(--s-3) var(--s-6)"
+});
+var PAGE_CONTENT_PADDING = Object.freeze({
+  xs: "var(--s-3)",
+  sm: "var(--s-4)",
+  lg: "var(--s-6)"
+});
+var FILTER_STRIP_SX = Object.freeze({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--s-3)",
+  padding: "var(--s-4)",
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--r-lg)"
+});
+var TABLE_SHELL_SX = Object.freeze({
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--r-lg)",
+  overflow: "hidden"
+});
+
+/** Filter strip + table rows. */
+function ListBody(_ref) {
+  var rows = _ref.rows;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: FILTER_STRIP_SX,
+      children: [0, 1, 2].map(function (i) {
+        return /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: "1 1 240px",
+            minWidth: 0
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton, {
+            width: "42%",
+            height: 11,
+            style: {
+              marginBottom: "var(--s-2)"
+            }
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            height: "var(--input-h)",
+            radius: 8
+          })]
+        }, i);
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: TABLE_SHELL_SX,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: "flex",
+          gap: "var(--s-4)",
+          padding: "var(--s-3) var(--s-4)",
+          borderBottom: "1px solid var(--border)",
+          background: "var(--bg-subtle)"
+        },
+        children: ["18%", "26%", "14%", "16%", "12%"].map(function (w) {
+          return /*#__PURE__*/_jsx(Skeleton, {
+            width: w,
+            height: 11
+          }, w);
+        })
+      }), Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--s-4)",
+            padding: "0 var(--s-4)",
+            height: "var(--row-h)",
+            borderBottom: "1px solid var(--border)"
+          },
+          children: ["18%", "26%", "14%", "16%", "12%"].map(function (w) {
+            return /*#__PURE__*/_jsx(Skeleton, {
+              width: w,
+              height: 13
+            }, w);
+          })
+        }, i);
+      })]
+    })]
+  });
+}
+
+/** Horizontal stepper + two-column field grid. */
+function FormBody(_ref2) {
+  var rows = _ref2.rows;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--s-4)",
+        padding: "var(--s-4)",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)"
+      },
+      children: [0, 1, 2].map(function (i) {
+        return /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--s-2)",
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton, {
+            width: 24,
+            height: 24,
+            radius: 9999
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: "60%",
+            height: 12
+          })]
+        }, i);
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          md: "1fr 1fr"
+        },
+        gap: "var(--s-4)",
+        padding: "var(--s-5)",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)"
+      },
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Skeleton, {
+            width: "38%",
+            height: 11,
+            style: {
+              marginBottom: "var(--s-2)"
+            }
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            height: "var(--input-h)",
+            radius: 8
+          })]
+        }, i);
+      })
+    })]
+  });
+}
+
+/** Hero card + tab strip + tab content. */
+function DetailBody(_ref3) {
+  var rows = _ref3.rows;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SkeletonDetailHero, {}), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        gap: "var(--s-4)"
+      },
+      children: [0, 1, 2].map(function (i) {
+        return /*#__PURE__*/_jsx(Skeleton, {
+          width: 96,
+          height: 14
+        }, i);
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--s-3)",
+        padding: "var(--s-5)",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-lg)"
+      },
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            gap: "var(--s-4)"
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton, {
+            width: "22%",
+            height: 12
+          }), /*#__PURE__*/_jsx(Skeleton, {
+            width: "".concat(44 + i % 3 * 10, "%"),
+            height: 12
+          })]
+        }, i);
+      })
+    })]
+  });
+}
+function SkeletonPageShell(_ref4) {
+  var _ref4$variant = _ref4.variant,
+    variant = _ref4$variant === void 0 ? "list" : _ref4$variant,
+    _ref4$breadcrumb = _ref4.breadcrumb,
+    breadcrumb = _ref4$breadcrumb === void 0 ? true : _ref4$breadcrumb,
+    _ref4$subtitle = _ref4.subtitle,
+    subtitle = _ref4$subtitle === void 0 ? true : _ref4$subtitle,
+    _ref4$action = _ref4.action,
+    action = _ref4$action === void 0 ? true : _ref4$action,
+    _ref4$rows = _ref4.rows,
+    rows = _ref4$rows === void 0 ? 6 : _ref4$rows,
+    _ref4$loadingLabel = _ref4.loadingLabel,
+    loadingLabel = _ref4$loadingLabel === void 0 ? "Chargement de la page…" : _ref4$loadingLabel,
+    sx = _ref4.sx;
+  var safeRows = Math.max(1, Math.floor(rows));
+  return /*#__PURE__*/_jsxs(Box, {
+    "aria-busy": "true",
+    "aria-label": loadingLabel,
+    sx: _objectSpread({
+      minWidth: 0
+    }, sx),
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        background: "var(--bg)",
+        padding: ACTION_BAR_PADDING
+      },
+      children: [breadcrumb && /*#__PURE__*/_jsx(Skeleton, {
+        width: "34%",
+        height: 12,
+        style: {
+          marginBottom: "var(--s-2)"
+        }
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: {
+            xs: "flex-start",
+            sm: "center"
+          },
+          justifyContent: "space-between",
+          flexWrap: {
+            xs: "wrap",
+            sm: "nowrap"
+          },
+          gap: {
+            xs: "var(--s-2)",
+            sm: "var(--s-4)"
+          }
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          width: "42%",
+          height: 22
+        }), action && /*#__PURE__*/_jsx(Skeleton, {
+          width: 148,
+          height: "var(--btn-h)",
+          radius: 8
+        })]
+      }), subtitle && /*#__PURE__*/_jsx(Skeleton, {
+        width: "56%",
+        height: 13,
+        style: {
+          marginTop: "var(--s-1)"
+        }
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        padding: PAGE_CONTENT_PADDING,
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--s-4)",
+        minWidth: 0
+      },
+      children: [variant === "list" && /*#__PURE__*/_jsx(ListBody, {
+        rows: safeRows
+      }), variant === "form" && /*#__PURE__*/_jsx(FormBody, {
+        rows: safeRows
+      }), variant === "detail" && /*#__PURE__*/_jsx(DetailBody, {
+        rows: safeRows
+      })]
+    })]
+  });
+}
+export default SkeletonPageShell;
+//# sourceMappingURL=SkeletonPageShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonPageShell.js","names":["Box","Skeleton","SkeletonDetailHero","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ACTION_BAR_PADDING","Object","freeze","xs","sm","lg","PAGE_CONTENT_PADDING","FILTER_STRIP_SX","display","flexWrap","gap","padding","background","border","borderRadius","TABLE_SHELL_SX","overflow","ListBody","_ref","rows","children","sx","map","i","flex","minWidth","width","height","style","marginBottom","radius","borderBottom","w","Array","from","length","_","alignItems","FormBody","_ref2","gridTemplateColumns","md","DetailBody","_ref3","flexDirection","concat","SkeletonPageShell","_ref4","_ref4$variant","variant","_ref4$breadcrumb","breadcrumb","_ref4$subtitle","subtitle","_ref4$action","action","_ref4$rows","_ref4$loadingLabel","loadingLabel","safeRows","Math","max","floor","_objectSpread","justifyContent","marginTop"],"sources":["../../../../src/lib/v2/patterns/SkeletonPageShell.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport type { SystemStyleObject } from \"@mui/system\";\r\nimport { Skeleton, SkeletonDetailHero } from \"../components/Skeleton\";\r\n\r\n/**\r\n * SkeletonPageShell — Portnet UI v2 (pattern)\r\n *\r\n * Route-level `Suspense` fallback: a skeleton of the canonical page skeleton\r\n * (Charter §07 / §7.1 bis), sized to match `ActionBar` + `PageContent`.\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-02)\r\n *\r\n * R-P.1 MUST: \"Routing avec `React.lazy` + `Suspense`, **fallback skeleton\r\n * page**\". The library shipped every skeleton PART — `Skeleton`, `SkeletonRow`,\r\n * `SkeletonKPI`, `SkeletonDetailHero`, `SkeletonTabContent`, `SkeletonText` —\r\n * and `PageBusy`, but nothing that satisfies R-P.1 directly:\r\n *\r\n *   - `PageBusy` is a full-viewport spinner, and R-8.1 MUST forbids exactly that\r\n *     for navigation (\"jamais de spinner full-screen sur navigation\"). It cannot\r\n *     be the route fallback.\r\n *   - the parts are shaped for *inside* a page, not for the page frame.\r\n *\r\n * So every module hand-built a `RoutePageFallback` — observed in\r\n * `procuration-portnet-fe` and `procuration-fe`, independently written.\r\n *\r\n * THE COUPLING IS THE ARGUMENT. To avoid the layout shift a skeleton exists to\r\n * prevent, the fallback's padding must equal `ActionBar`'s and `PageContent`'s\r\n * exactly. A module can only get that by reading this library's source and\r\n * copying literals — which then silently rot the next time either component's\r\n * padding changes. Only the library can keep them in lockstep, so only the\r\n * library should own it. Values below are copied from the two components in this\r\n * same directory; a change there must change them here.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * Accessibility (R-Sk.3). ONE labelled `aria-busy` region wraps the whole\r\n * shell, and every child is an `aria-hidden` `Skeleton` primitive. This\r\n * deliberately does NOT compose `SkeletonText` / `SkeletonTabContent`, because\r\n * each of those carries its own `aria-busy` + `aria-label`, and nesting live\r\n * regions makes a screen reader announce a page load two or three times.\r\n *\r\n * Dimensions come from density tokens (`--btn-h`, `--input-h`, `--row-h`)\r\n * rather than px literals, so the reserved space follows a\r\n * `data-density=\"compact\"` switch instead of being 6–8 px wrong under it.\r\n *\r\n * Usage:\r\n *   <Suspense fallback={<SkeletonPageShell variant=\"list\" />}>\r\n *     <Outlet />\r\n *   </Suspense>\r\n */\r\n\r\nexport type SkeletonPageShellVariant = \"list\" | \"form\" | \"detail\";\r\n\r\nexport interface SkeletonPageShellProps {\r\n  /**\r\n   * Which page archetype to mime (R-Sk.2 — \"forme et nombre miment le contenu\r\n   * réel\").\r\n   *\r\n   * - `list`   — filter strip + table rows (listing screens)\r\n   * - `form`   — stepper + two-column field grid (create / edit screens)\r\n   * - `detail` — hero card + tab content (consultation screens)\r\n   *\r\n   * @default \"list\"\r\n   */\r\n  variant?: SkeletonPageShellVariant | undefined;\r\n  /** Reserve the breadcrumb row. @default true */\r\n  breadcrumb?: boolean | undefined;\r\n  /** Reserve the subtitle line. @default true */\r\n  subtitle?: boolean | undefined;\r\n  /** Reserve a primary CTA in the header. @default true */\r\n  action?: boolean | undefined;\r\n  /** Rows in the `list` variant / field pairs in `form`. @default 6 */\r\n  rows?: number | undefined;\r\n  /** Accessible name of the busy region. Localise per host. */\r\n  loadingLabel?: string | undefined;\r\n  /** sx overrides applied to the outer region. */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\n/* ── Copied from ActionBar.tsx / PageContent.tsx in this directory ──────────\r\n * If either changes, change these with it. */\r\nconst ACTION_BAR_PADDING = Object.freeze({\r\n  xs: \"var(--s-3)\",\r\n  sm: \"var(--s-3) var(--s-4)\",\r\n  lg: \"var(--s-3) var(--s-6)\",\r\n});\r\n\r\nconst PAGE_CONTENT_PADDING = Object.freeze({\r\n  xs: \"var(--s-3)\",\r\n  sm: \"var(--s-4)\",\r\n  lg: \"var(--s-6)\",\r\n});\r\n\r\nconst FILTER_STRIP_SX = Object.freeze({\r\n  display: \"flex\",\r\n  flexWrap: \"wrap\",\r\n  gap: \"var(--s-3)\",\r\n  padding: \"var(--s-4)\",\r\n  background: \"var(--surface)\",\r\n  border: \"1px solid var(--border)\",\r\n  borderRadius: \"var(--r-lg)\",\r\n});\r\n\r\nconst TABLE_SHELL_SX = Object.freeze({\r\n  background: \"var(--surface)\",\r\n  border: \"1px solid var(--border)\",\r\n  borderRadius: \"var(--r-lg)\",\r\n  overflow: \"hidden\",\r\n});\r\n\r\n/** Filter strip + table rows. */\r\nfunction ListBody({ rows }: { rows: number }) {\r\n  return (\r\n    <>\r\n      <Box sx={FILTER_STRIP_SX}>\r\n        {[0, 1, 2].map((i) => (\r\n          <Box key={i} sx={{ flex: \"1 1 240px\", minWidth: 0 }}>\r\n            <Skeleton\r\n              width=\"42%\"\r\n              height={11}\r\n              style={{ marginBottom: \"var(--s-2)\" }}\r\n            />\r\n            <Skeleton height=\"var(--input-h)\" radius={8} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n\r\n      <Box sx={TABLE_SHELL_SX}>\r\n        {/* Header band, then rows at the live row height. */}\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            gap: \"var(--s-4)\",\r\n            padding: \"var(--s-3) var(--s-4)\",\r\n            borderBottom: \"1px solid var(--border)\",\r\n            background: \"var(--bg-subtle)\",\r\n          }}\r\n        >\r\n          {[\"18%\", \"26%\", \"14%\", \"16%\", \"12%\"].map((w) => (\r\n            <Skeleton key={w} width={w} height={11} />\r\n          ))}\r\n        </Box>\r\n\r\n        {Array.from({ length: rows }, (_, i) => (\r\n          <Box\r\n            key={i}\r\n            sx={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: \"var(--s-4)\",\r\n              padding: \"0 var(--s-4)\",\r\n              height: \"var(--row-h)\",\r\n              borderBottom: \"1px solid var(--border)\",\r\n            }}\r\n          >\r\n            {[\"18%\", \"26%\", \"14%\", \"16%\", \"12%\"].map((w) => (\r\n              <Skeleton key={w} width={w} height={13} />\r\n            ))}\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </>\r\n  );\r\n}\r\n\r\n/** Horizontal stepper + two-column field grid. */\r\nfunction FormBody({ rows }: { rows: number }) {\r\n  return (\r\n    <>\r\n      <Box\r\n        sx={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          gap: \"var(--s-4)\",\r\n          padding: \"var(--s-4)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n        }}\r\n      >\r\n        {[0, 1, 2].map((i) => (\r\n          <Box\r\n            key={i}\r\n            sx={{ display: \"flex\", alignItems: \"center\", gap: \"var(--s-2)\", flex: 1 }}\r\n          >\r\n            <Skeleton width={24} height={24} radius={9999} />\r\n            <Skeleton width=\"60%\" height={12} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n\r\n      <Box\r\n        sx={{\r\n          display: \"grid\",\r\n          gridTemplateColumns: { xs: \"1fr\", md: \"1fr 1fr\" },\r\n          gap: \"var(--s-4)\",\r\n          padding: \"var(--s-5)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n        }}\r\n      >\r\n        {Array.from({ length: rows }, (_, i) => (\r\n          <Box key={i}>\r\n            <Skeleton\r\n              width=\"38%\"\r\n              height={11}\r\n              style={{ marginBottom: \"var(--s-2)\" }}\r\n            />\r\n            <Skeleton height=\"var(--input-h)\" radius={8} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </>\r\n  );\r\n}\r\n\r\n/** Hero card + tab strip + tab content. */\r\nfunction DetailBody({ rows }: { rows: number }) {\r\n  return (\r\n    <>\r\n      <SkeletonDetailHero />\r\n\r\n      <Box sx={{ display: \"flex\", gap: \"var(--s-4)\" }}>\r\n        {[0, 1, 2].map((i) => (\r\n          <Skeleton key={i} width={96} height={14} />\r\n        ))}\r\n      </Box>\r\n\r\n      <Box\r\n        sx={{\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          gap: \"var(--s-3)\",\r\n          padding: \"var(--s-5)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n        }}\r\n      >\r\n        {Array.from({ length: rows }, (_, i) => (\r\n          <Box key={i} sx={{ display: \"flex\", gap: \"var(--s-4)\" }}>\r\n            <Skeleton width=\"22%\" height={12} />\r\n            <Skeleton width={`${44 + (i % 3) * 10}%`} height={12} />\r\n          </Box>\r\n        ))}\r\n      </Box>\r\n    </>\r\n  );\r\n}\r\n\r\nfunction SkeletonPageShell({\r\n  variant = \"list\",\r\n  breadcrumb = true,\r\n  subtitle = true,\r\n  action = true,\r\n  rows = 6,\r\n  loadingLabel = \"Chargement de la page…\",\r\n  sx,\r\n}: SkeletonPageShellProps) {\r\n  const safeRows = Math.max(1, Math.floor(rows));\r\n\r\n  return (\r\n    <Box\r\n      aria-busy=\"true\"\r\n      aria-label={loadingLabel}\r\n      sx={{ minWidth: 0, ...(sx as SystemStyleObject<Theme>) }}\r\n    >\r\n      {/* ── ActionBar zone ── */}\r\n      <Box sx={{ background: \"var(--bg)\", padding: ACTION_BAR_PADDING }}>\r\n        {breadcrumb && (\r\n          <Skeleton\r\n            width=\"34%\"\r\n            height={12}\r\n            style={{ marginBottom: \"var(--s-2)\" }}\r\n          />\r\n        )}\r\n\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            alignItems: { xs: \"flex-start\", sm: \"center\" },\r\n            justifyContent: \"space-between\",\r\n            flexWrap: { xs: \"wrap\", sm: \"nowrap\" },\r\n            gap: { xs: \"var(--s-2)\", sm: \"var(--s-4)\" },\r\n          }}\r\n        >\r\n          {/* Title: 18px on xs, 22px on sm+, matching ActionBar's h1. */}\r\n          <Skeleton width=\"42%\" height={22} />\r\n          {action && (\r\n            <Skeleton width={148} height=\"var(--btn-h)\" radius={8} />\r\n          )}\r\n        </Box>\r\n\r\n        {subtitle && (\r\n          <Skeleton\r\n            width=\"56%\"\r\n            height={13}\r\n            style={{ marginTop: \"var(--s-1)\" }}\r\n          />\r\n        )}\r\n      </Box>\r\n\r\n      {/* ── PageContent zone ── */}\r\n      <Box\r\n        sx={{\r\n          padding: PAGE_CONTENT_PADDING,\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          gap: \"var(--s-4)\",\r\n          minWidth: 0,\r\n        }}\r\n      >\r\n        {variant === \"list\" && <ListBody rows={safeRows} />}\r\n        {variant === \"form\" && <FormBody rows={safeRows} />}\r\n        {variant === \"detail\" && <DetailBody rows={safeRows} />}\r\n      </Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default SkeletonPageShell;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,179 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import * as React from "react";
+import Box from "@mui/material/Box";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+
+/**
+ * SortableHeader - Portnet UI v2 (pattern)
+ *
+ * Charter R-DG.7 - clickable header, ↑/↓ indicator, multi-sort with order badge.
+ *
+ * Single-sort: click → asc, click again → desc, click again → off.
+ * Multi-sort: shift+click adds a sort, badge shows priority.
+ *
+ *   const [sort, setSort] = useState([{ key: "date", dir: "desc" }]);
+ *   <th>
+ *     <SortableHeader sortKey="date" sort={sort} setSort={setSort}>
+ *       Date
+ *     </SortableHeader>
+ *   </th>
+ *
+ * A11y note (R-Ar.1):
+ *   The trigger is a real <button>, not <div role="button">. WAI-ARIA's
+ *   sortable column header pattern is <th aria-sort="..."><button>Label</button>;
+ *   DataGrid already hoists aria-sort onto the <th> (see getAriaSort below),
+ *   so this component only needs to be a real button.
+ *
+ * NOTE on aria-sort: SortableHeader does NOT set aria-sort. The aria-sort
+ * attribute belongs on the column header element (<th> / <TableCell>) per
+ * WAI-ARIA, NOT on a child interactive element. DataGrid (the canonical
+ * caller) hoists aria-sort onto the TableCell. Custom integrators wrapping
+ * SortableHeader directly in their own <th> must set aria-sort themselves
+ * - see `getAriaSort()` exported below.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SortableHeader(_ref) {
+  var children = _ref.children,
+    sortKey = _ref.sortKey,
+    sort = _ref.sort,
+    setSort = _ref.setSort,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "left" : _ref$align;
+  var entry = sort.find(function (s) {
+    return s.key === sortKey;
+  });
+  var idx = entry ? sort.findIndex(function (s) {
+    return s.key === sortKey;
+  }) : -1;
+  var dir = entry === null || entry === void 0 ? void 0 : entry.dir;
+  var click = function click(e) {
+    var multi = e.shiftKey;
+    setSort(function (prev) {
+      var exists = prev.find(function (s) {
+        return s.key === sortKey;
+      });
+      if (!multi) {
+        if (exists) return exists.dir === "asc" ? [{
+          key: sortKey,
+          dir: "desc"
+        }] : [];
+        return [{
+          key: sortKey,
+          dir: "asc"
+        }];
+      }
+      if (!exists) return [].concat(_toConsumableArray(prev), [{
+        key: sortKey,
+        dir: "asc"
+      }]);
+      if (exists.dir === "asc") return prev.map(function (s) {
+        return s.key === sortKey ? _objectSpread(_objectSpread({}, s), {}, {
+          dir: "desc"
+        }) : s;
+      });
+      return prev.filter(function (s) {
+        return s.key !== sortKey;
+      });
+    });
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    type: "button",
+    onClick: click,
+    sx: {
+      // <button> reset - neutralise UA defaults so the look matches the
+      // surrounding <th> styling.
+      background: "transparent",
+      border: 0,
+      padding: 0,
+      font: "inherit",
+      color: "inherit",
+      // Layout (unchanged from the previous Box-as-div version).
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 0.5,
+      cursor: "pointer",
+      userSelect: "none",
+      justifyContent: align === "right" ? "flex-end" : "flex-start",
+      "&:focus-visible": {
+        outline: "2px solid var(--accent)",
+        outlineOffset: "var(--pui-outline-offset)",
+        borderRadius: "var(--r-sm)"
+      }
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      children: children
+    }), /*#__PURE__*/_jsxs(Box, {
+      component: "span",
+      "aria-hidden": "true",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        color: dir ? "var(--accent)" : "var(--fg-subtle)"
+      },
+      children: [dir === "asc" && /*#__PURE__*/_jsx(ArrowUpwardIcon, {
+        sx: {
+          fontSize: 12
+        }
+      }), dir === "desc" && /*#__PURE__*/_jsx(ArrowDownwardIcon, {
+        sx: {
+          fontSize: 12
+        }
+      }), !dir && /*#__PURE__*/_jsx(UnfoldMoreIcon, {
+        sx: {
+          fontSize: 12
+        }
+      }), sort.length > 1 && idx >= 0 && /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: {
+          // R-T.1 - was 9 px (below charter floor even for captions). 11 px
+          // is the legible-caption sweet spot; the badge is a 1-digit
+          // integer so width impact is negligible.
+          fontSize: 11,
+          fontWeight: "var(--fw-bold)",
+          padding: "1px 5px",
+          marginLeft: 0.25,
+          borderRadius: "var(--r-full)",
+          background: "var(--accent)",
+          color: "var(--accent-fg)",
+          lineHeight: 1.4
+        },
+        children: idx + 1
+      })]
+    })]
+  });
+}
+
+/**
+ * Helper - returns the WAI-ARIA aria-sort token for a column header,
+ * given the current sort state and the column key. Set this on the <th>
+ * (or MUI TableCell) that wraps the SortableHeader.
+ */
+export function getAriaSort(sort, sortKey) {
+  var entry = sort.find(function (s) {
+    return s.key === sortKey;
+  });
+  if (!entry) return "none";
+  return entry.dir === "asc" ? "ascending" : "descending";
+}
+
+/* ── applySort — locale-correct sorting ──────────────────────────────
+ * Extracted to ./_sort (shared with the useSortedRows hook). Re-exported
+ * here so the public call site `import { applySort } from ".../SortableHeader"`
+ * and the patterns barrel are unchanged. */
+export { applySort } from "./_sort";
+export default SortableHeader;
+//# sourceMappingURL=SortableHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableHeader.js","names":["React","Box","ArrowUpwardIcon","ArrowDownwardIcon","UnfoldMoreIcon","jsx","_jsx","jsxs","_jsxs","SortableHeader","_ref","children","sortKey","sort","setSort","_ref$align","align","entry","find","s","key","idx","findIndex","dir","click","e","multi","shiftKey","prev","exists","concat","_toConsumableArray","map","_objectSpread","filter","component","type","onClick","sx","background","border","padding","font","color","display","alignItems","gap","cursor","userSelect","justifyContent","outline","outlineOffset","borderRadius","fontSize","length","fontWeight","marginLeft","lineHeight","getAriaSort","applySort"],"sources":["../../../../src/lib/v2/patterns/SortableHeader.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport ArrowUpwardIcon from \"@mui/icons-material/ArrowUpward\";\r\nimport ArrowDownwardIcon from \"@mui/icons-material/ArrowDownward\";\r\nimport UnfoldMoreIcon from \"@mui/icons-material/UnfoldMore\";\r\nimport type { Alignment, AriaSort, SortDescriptor } from \"../types/common\";\r\n\r\n/**\r\n * SortableHeader - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-DG.7 - clickable header, ↑/↓ indicator, multi-sort with order badge.\r\n *\r\n * Single-sort: click → asc, click again → desc, click again → off.\r\n * Multi-sort: shift+click adds a sort, badge shows priority.\r\n *\r\n *   const [sort, setSort] = useState([{ key: \"date\", dir: \"desc\" }]);\r\n *   <th>\r\n *     <SortableHeader sortKey=\"date\" sort={sort} setSort={setSort}>\r\n *       Date\r\n *     </SortableHeader>\r\n *   </th>\r\n *\r\n * A11y note (R-Ar.1):\r\n *   The trigger is a real <button>, not <div role=\"button\">. WAI-ARIA's\r\n *   sortable column header pattern is <th aria-sort=\"...\"><button>Label</button>;\r\n *   DataGrid already hoists aria-sort onto the <th> (see getAriaSort below),\r\n *   so this component only needs to be a real button.\r\n *\r\n * NOTE on aria-sort: SortableHeader does NOT set aria-sort. The aria-sort\r\n * attribute belongs on the column header element (<th> / <TableCell>) per\r\n * WAI-ARIA, NOT on a child interactive element. DataGrid (the canonical\r\n * caller) hoists aria-sort onto the TableCell. Custom integrators wrapping\r\n * SortableHeader directly in their own <th> must set aria-sort themselves\r\n * - see `getAriaSort()` exported below.\r\n */\r\n\r\nexport interface SortableHeaderProps {\r\n  children: React.ReactNode;\r\n  sortKey: string;\r\n  sort: SortDescriptor[];\r\n  setSort: React.Dispatch<React.SetStateAction<SortDescriptor[]>>;\r\n  align?: Alignment | undefined;\r\n}\r\n\r\nfunction SortableHeader({ children, sortKey, sort, setSort, align = \"left\" }: SortableHeaderProps) {\r\n  const entry = sort.find((s) => s.key === sortKey);\r\n  const idx = entry ? sort.findIndex((s) => s.key === sortKey) : -1;\r\n  const dir = entry?.dir;\r\n\r\n  const click = (e: React.MouseEvent) => {\r\n    const multi = e.shiftKey;\r\n    setSort((prev) => {\r\n      const exists = prev.find((s) => s.key === sortKey);\r\n      if (!multi) {\r\n        if (exists) return exists.dir === \"asc\" ? [{ key: sortKey, dir: \"desc\" }] : [];\r\n        return [{ key: sortKey, dir: \"asc\" }];\r\n      }\r\n      if (!exists) return [...prev, { key: sortKey, dir: \"asc\" }];\r\n      if (exists.dir === \"asc\") return prev.map((s) => (s.key === sortKey ? { ...s, dir: \"desc\" } : s));\r\n      return prev.filter((s) => s.key !== sortKey);\r\n    });\r\n  };\r\n\r\n  return (\r\n    <Box\r\n      component=\"button\"\r\n      type=\"button\"\r\n      onClick={click}\r\n      sx={{\r\n        // <button> reset - neutralise UA defaults so the look matches the\r\n        // surrounding <th> styling.\r\n        background: \"transparent\",\r\n        border: 0,\r\n        padding: 0,\r\n        font: \"inherit\",\r\n        color: \"inherit\",\r\n        // Layout (unchanged from the previous Box-as-div version).\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        gap: 0.5,\r\n        cursor: \"pointer\",\r\n        userSelect: \"none\",\r\n        justifyContent: align === \"right\" ? \"flex-end\" : \"flex-start\",\r\n        \"&:focus-visible\": {\r\n          outline: \"2px solid var(--accent)\",\r\n          outlineOffset: \"var(--pui-outline-offset)\",\r\n          borderRadius: \"var(--r-sm)\",\r\n        },\r\n      }}\r\n    >\r\n      <span>{children}</span>\r\n      <Box\r\n        component=\"span\"\r\n        aria-hidden=\"true\"\r\n        sx={{\r\n          display: \"inline-flex\",\r\n          alignItems: \"center\",\r\n          color: dir ? \"var(--accent)\" : \"var(--fg-subtle)\",\r\n        }}\r\n      >\r\n        {dir === \"asc\"  && <ArrowUpwardIcon sx={{ fontSize: 12 }} />}\r\n        {dir === \"desc\" && <ArrowDownwardIcon sx={{ fontSize: 12 }} />}\r\n        {!dir           && <UnfoldMoreIcon sx={{ fontSize: 12 }} />}\r\n        {sort.length > 1 && idx >= 0 && (\r\n          <Box\r\n            component=\"span\"\r\n            sx={{\r\n              // R-T.1 - was 9 px (below charter floor even for captions). 11 px\r\n              // is the legible-caption sweet spot; the badge is a 1-digit\r\n              // integer so width impact is negligible.\r\n              fontSize: 11,\r\n              fontWeight: \"var(--fw-bold)\",\r\n              padding: \"1px 5px\",\r\n              marginLeft: 0.25,\r\n              borderRadius: \"var(--r-full)\",\r\n              background: \"var(--accent)\",\r\n              color: \"var(--accent-fg)\",\r\n              lineHeight: 1.4,\r\n            }}\r\n          >\r\n            {idx + 1}\r\n          </Box>\r\n        )}\r\n      </Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\n/**\r\n * Helper - returns the WAI-ARIA aria-sort token for a column header,\r\n * given the current sort state and the column key. Set this on the <th>\r\n * (or MUI TableCell) that wraps the SortableHeader.\r\n */\r\nexport function getAriaSort(sort: SortDescriptor[], sortKey: string): AriaSort {\r\n  const entry = sort.find((s) => s.key === sortKey);\r\n  if (!entry) return \"none\";\r\n  return entry.dir === \"asc\" ? \"ascending\" : \"descending\";\r\n}\r\n\r\n/* ── applySort — locale-correct sorting ──────────────────────────────\r\n * Extracted to ./_sort (shared with the useSortedRows hook). Re-exported\r\n * here so the public call site `import { applySort } from \".../SortableHeader\"`\r\n * and the patterns barrel are unchanged. */\r\nexport { applySort } from \"./_sort\";\r\n\r\nexport default SortableHeader;\r\n"],"mappings":"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","ignoreList":[]}