@portnet/ui 6.0.1 → 6.0.3

package/dist/v2/patterns/BulkActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActionBar.js","names":["React","_interopRequireWildcard","require","_Box","_interopRequireDefault","_Button","_mergeLabels","_jsxRuntime","obj","__esModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Symbol","iterator","constructor","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","toPrimitive","undefined","res","TypeError","Number","DEFAULT_LABELS","freeze","selection","n","concat","toolbarAria","clear","BulkActionBar","_ref","_ref$count","count","onClear","_ref$actions","actions","label","labels","L","mergeLabels","text","overlayHover","dividerOverlay","jsxs","role","sx","position","bottom","left","transform","zIndex","display","alignItems","flexWrap","justifyContent","maxWidth","gap","padding","background","color","borderRadius","boxShadow","children","jsx","fontSize","fontWeight","fontVariantNumeric","width","height","map","a","size","variant","icon","onClick","disabled","_default","exports"],"sources":["../../../src/lib/v2/patterns/BulkActionBar.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Button from \"../components/Button\";\r\nimport type { ButtonProps } from \"../components/Button\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * BulkActionBar - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-DG.8 - sélection multiple → bulk bar sticky bottom-center.\r\n * Affiche le compteur d'éléments sélectionnés + boutons d'actions + désélection.\r\n *\r\n *   <BulkActionBar\r\n *     count={selected.size}\r\n *     onClear={() => setSelected(new Set())}\r\n *     actions={[\r\n *       { label: \"Exporter\",  icon: <DownloadIcon />, onClick: exportSel },\r\n *       { label: \"Archiver\",  icon: <ArchiveIcon />,  onClick: archiveSel },\r\n *       { label: \"Supprimer\", icon: <DeleteIcon />,   onClick: deleteSel, variant: \"danger\" },\r\n *     ]}\r\n *   />\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   <BulkActionBar labels={{\r\n *     selection:   (n) => `${n} item${n === 1 ? \"\" : \"s\"} selected`,\r\n *     toolbarAria: \"Bulk actions\",\r\n *     clear:       \"Clear selection\",\r\n *   }} ... />\r\n *\r\n *   `selection` is a function so consumers can plug in proper plural\r\n *   rules (Intl.PluralRules, ICU MessageFormat, i18next, …).\r\n *\r\n * A11y note (R-A.1):\r\n *   The selection count is rendered inside a polite live region so that\r\n *   updates (\"3 éléments sélectionnés\" → \"5 éléments sélectionnés\") are\r\n *   announced to screen-reader users without stealing focus.\r\n *\r\n * Responsive note (R-RS / WCAG 1.4.10):\r\n *   The bar is centre-anchored (left:50% / translateX(-50%)). Without a\r\n *   width cap a long action set would push its ends off both screen\r\n *   edges on a phone. maxWidth caps it to the viewport and flexWrap lets\r\n *   surplus actions wrap to a second centred row instead of overflowing.\r\n */\r\n\r\nexport interface BulkAction {\r\n  label: React.ReactNode;\r\n  onClick?: (() => void) | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  variant?: ButtonProps[\"variant\"] | undefined;\r\n  disabled?: boolean | undefined;\r\n}\r\n\r\nexport interface BulkActionBarLabels {\r\n  selection?: ((n: number) => React.ReactNode) | undefined;\r\n  toolbarAria?: string | undefined;\r\n  clear?: React.ReactNode | undefined;\r\n}\r\n\r\nexport interface BulkActionBarProps {\r\n  count?: number | undefined;\r\n  onClear?: (() => void) | undefined;\r\n  actions?: BulkAction[] | undefined;\r\n  /** Legacy prop: a pre-formatted node override of the count text.\r\n   *  Wins over labels.selection when both are passed. */\r\n  label?: React.ReactNode | undefined;\r\n  labels?: BulkActionBarLabels | undefined;\r\n}\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  selection:   (n: number) => `${n} élément${n > 1 ? \"s\" : \"\"} sélectionné${n > 1 ? \"s\" : \"\"}`,\r\n  toolbarAria: \"Actions sur la sélection\",\r\n  clear:       \"Désélectionner\",\r\n});\r\n\r\nfunction BulkActionBar({ count = 0, onClear, actions = [], label, labels }: BulkActionBarProps) {\r\n  if (count <= 0) return null;\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n  // Legacy `label` prop wins over labels.selection for back-compat.\r\n  const text = label != null ? label : L.selection(count);\r\n\r\n  // R-AI.1 - currentColor-derived overlays so hover & divider auto-adapt\r\n  // to the bar's fg-inverse value (was hard-coded white rgba).\r\n  const overlayHover   = \"color-mix(in srgb, currentColor 15%, transparent)\";\r\n  const dividerOverlay = \"color-mix(in srgb, currentColor 22%, transparent)\";\r\n\r\n  return (\r\n    <Box\r\n      role=\"toolbar\"\r\n      aria-label={L.toolbarAria}\r\n      sx={{\r\n        position: \"fixed\",\r\n        bottom: \"var(--s-5)\",\r\n        left: \"50%\",\r\n        transform: \"translateX(-50%)\",\r\n        zIndex: \"var(--z-bulk)\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        // R-RS — centre-anchored bar must never exceed the viewport, and\r\n        // surplus actions wrap rather than spilling past the screen edges.\r\n        flexWrap: \"wrap\",\r\n        justifyContent: \"center\",\r\n        maxWidth: \"calc(100vw - var(--s-4) * 2)\",\r\n        gap: 1.5,\r\n        padding: \"var(--s-2) var(--s-2) var(--s-2) var(--s-4)\",\r\n        background: \"var(--fg)\",\r\n        color: \"var(--fg-inverse)\",\r\n        borderRadius: \"var(--r-full)\",\r\n        boxShadow: \"var(--shadow-lg)\",\r\n      }}\r\n    >\r\n      <Box\r\n        // R-A.1 - polite live region so SR users hear each count change\r\n        // without losing context. aria-atomic ensures the full sentence is\r\n        // re-read on update, not just the diff.\r\n        role=\"status\"\r\n        aria-live=\"polite\"\r\n        aria-atomic=\"true\"\r\n        sx={{\r\n          fontSize: \"var(--text-sm)\",\r\n          fontWeight: \"var(--fw-semibold)\",\r\n          fontVariantNumeric: \"tabular-nums\",\r\n        }}\r\n      >\r\n        {text}\r\n      </Box>\r\n      {/* Vertical divider — width:1 / height:24 are divider geometry,\r\n          not a spacing concern. */}\r\n      <Box sx={{ width: 1, height: 24, background: dividerOverlay }} />\r\n      {actions.map((a, i) => (\r\n        <Button\r\n          key={i}\r\n          size=\"sm\"\r\n          variant={a.variant || \"ghost\"}\r\n          icon={a.icon}\r\n          onClick={a.onClick}\r\n          disabled={a.disabled}\r\n          sx={{\r\n            // Danger keeps its own palette; every other variant is forced\r\n            // to the inverse foreground with a currentColor hover overlay.\r\n            // (JS set color/\"&:hover\" to undefined on danger; under\r\n            // exactOptionalPropertyTypes that's present-with-undefined for\r\n            // the csstype color + selector value, so it's folded into one\r\n            // conditional spread — behaviour-identical.)\r\n            ...(a.variant !== \"danger\"\r\n              ? {\r\n                  color: \"var(--fg-inverse) !important\",\r\n                  \"&:hover\": { background: overlayHover },\r\n                }\r\n              : {}),\r\n          }}\r\n        >\r\n          {a.label}\r\n        </Button>\r\n      ))}\r\n      {onClear && (\r\n        <Button\r\n          size=\"sm\"\r\n          variant=\"ghost\"\r\n          onClick={onClear}\r\n          sx={{\r\n            color: \"var(--fg-inverse) !important\",\r\n            \"&:hover\": { background: overlayHover },\r\n          }}\r\n        >\r\n          {L.clear}\r\n        </Button>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default BulkActionBar;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BulkActionBar.js","names":["React","_interopRequireWildcard","require","_Box","_interopRequireDefault","_Button","_mergeLabels","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_LABELS","freeze","selection","toolbarAria","clear","BulkActionBar","count","onClear","actions","label","labels","L","mergeLabels","text","overlayHover","dividerOverlay","jsxs","role","sx","position","bottom","left","transform","zIndex","display","alignItems","flexWrap","justifyContent","maxWidth","gap","padding","background","color","borderRadius","boxShadow","children","jsx","fontSize","fontWeight","fontVariantNumeric","width","height","map","a","size","variant","icon","onClick","disabled","_default","exports"],"sources":["../../../src/lib/v2/patterns/BulkActionBar.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Button from \"../components/Button\";\r\nimport type { ButtonProps } from \"../components/Button\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * BulkActionBar - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-DG.8 - sélection multiple → bulk bar sticky bottom-center.\r\n * Affiche le compteur d'éléments sélectionnés + boutons d'actions + désélection.\r\n *\r\n *   <BulkActionBar\r\n *     count={selected.size}\r\n *     onClear={() => setSelected(new Set())}\r\n *     actions={[\r\n *       { label: \"Exporter\",  icon: <DownloadIcon />, onClick: exportSel },\r\n *       { label: \"Archiver\",  icon: <ArchiveIcon />,  onClick: archiveSel },\r\n *       { label: \"Supprimer\", icon: <DeleteIcon />,   onClick: deleteSel, variant: \"danger\" },\r\n *     ]}\r\n *   />\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   <BulkActionBar labels={{\r\n *     selection:   (n) => `${n} item${n === 1 ? \"\" : \"s\"} selected`,\r\n *     toolbarAria: \"Bulk actions\",\r\n *     clear:       \"Clear selection\",\r\n *   }} ... />\r\n *\r\n *   `selection` is a function so consumers can plug in proper plural\r\n *   rules (Intl.PluralRules, ICU MessageFormat, i18next, …).\r\n *\r\n * A11y note (R-A.1):\r\n *   The selection count is rendered inside a polite live region so that\r\n *   updates (\"3 éléments sélectionnés\" → \"5 éléments sélectionnés\") are\r\n *   announced to screen-reader users without stealing focus.\r\n *\r\n * Responsive note (R-RS / WCAG 1.4.10):\r\n *   The bar is centre-anchored (left:50% / translateX(-50%)). Without a\r\n *   width cap a long action set would push its ends off both screen\r\n *   edges on a phone. maxWidth caps it to the viewport and flexWrap lets\r\n *   surplus actions wrap to a second centred row instead of overflowing.\r\n */\r\n\r\nexport interface BulkAction {\r\n  label: React.ReactNode;\r\n  onClick?: (() => void) | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  variant?: ButtonProps[\"variant\"] | undefined;\r\n  disabled?: boolean | undefined;\r\n}\r\n\r\nexport interface BulkActionBarLabels {\r\n  selection?: ((n: number) => React.ReactNode) | undefined;\r\n  toolbarAria?: string | undefined;\r\n  clear?: React.ReactNode | undefined;\r\n}\r\n\r\nexport interface BulkActionBarProps {\r\n  count?: number | undefined;\r\n  onClear?: (() => void) | undefined;\r\n  actions?: BulkAction[] | undefined;\r\n  /** Legacy prop: a pre-formatted node override of the count text.\r\n   *  Wins over labels.selection when both are passed. */\r\n  label?: React.ReactNode | undefined;\r\n  labels?: BulkActionBarLabels | undefined;\r\n}\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  selection:   (n: number) => `${n} élément${n > 1 ? \"s\" : \"\"} sélectionné${n > 1 ? \"s\" : \"\"}`,\r\n  toolbarAria: \"Actions sur la sélection\",\r\n  clear:       \"Désélectionner\",\r\n});\r\n\r\nfunction BulkActionBar({ count = 0, onClear, actions = [], label, labels }: BulkActionBarProps) {\r\n  if (count <= 0) return null;\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n  // Legacy `label` prop wins over labels.selection for back-compat.\r\n  const text = label != null ? label : L.selection(count);\r\n\r\n  // R-AI.1 - currentColor-derived overlays so hover & divider auto-adapt\r\n  // to the bar's fg-inverse value (was hard-coded white rgba).\r\n  const overlayHover   = \"color-mix(in srgb, currentColor 15%, transparent)\";\r\n  const dividerOverlay = \"color-mix(in srgb, currentColor 22%, transparent)\";\r\n\r\n  return (\r\n    <Box\r\n      role=\"toolbar\"\r\n      aria-label={L.toolbarAria}\r\n      sx={{\r\n        position: \"fixed\",\r\n        bottom: \"var(--s-5)\",\r\n        left: \"50%\",\r\n        transform: \"translateX(-50%)\",\r\n        zIndex: \"var(--z-bulk)\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        // R-RS — centre-anchored bar must never exceed the viewport, and\r\n        // surplus actions wrap rather than spilling past the screen edges.\r\n        flexWrap: \"wrap\",\r\n        justifyContent: \"center\",\r\n        maxWidth: \"calc(100vw - var(--s-4) * 2)\",\r\n        gap: 1.5,\r\n        padding: \"var(--s-2) var(--s-2) var(--s-2) var(--s-4)\",\r\n        background: \"var(--fg)\",\r\n        color: \"var(--fg-inverse)\",\r\n        borderRadius: \"var(--r-full)\",\r\n        boxShadow: \"var(--shadow-lg)\",\r\n      }}\r\n    >\r\n      <Box\r\n        // R-A.1 - polite live region so SR users hear each count change\r\n        // without losing context. aria-atomic ensures the full sentence is\r\n        // re-read on update, not just the diff.\r\n        role=\"status\"\r\n        aria-live=\"polite\"\r\n        aria-atomic=\"true\"\r\n        sx={{\r\n          fontSize: \"var(--text-sm)\",\r\n          fontWeight: \"var(--fw-semibold)\",\r\n          fontVariantNumeric: \"tabular-nums\",\r\n        }}\r\n      >\r\n        {text}\r\n      </Box>\r\n      {/* Vertical divider — width:1 / height:24 are divider geometry,\r\n          not a spacing concern. */}\r\n      <Box sx={{ width: 1, height: 24, background: dividerOverlay }} />\r\n      {actions.map((a, i) => (\r\n        <Button\r\n          key={i}\r\n          size=\"sm\"\r\n          variant={a.variant || \"ghost\"}\r\n          icon={a.icon}\r\n          onClick={a.onClick}\r\n          disabled={a.disabled}\r\n          sx={{\r\n            // Danger keeps its own palette; every other variant is forced\r\n            // to the inverse foreground with a currentColor hover overlay.\r\n            // (JS set color/\"&:hover\" to undefined on danger; under\r\n            // exactOptionalPropertyTypes that's present-with-undefined for\r\n            // the csstype color + selector value, so it's folded into one\r\n            // conditional spread — behaviour-identical.)\r\n            ...(a.variant !== \"danger\"\r\n              ? {\r\n                  color: \"var(--fg-inverse) !important\",\r\n                  \"&:hover\": { background: overlayHover },\r\n                }\r\n              : {}),\r\n          }}\r\n        >\r\n          {a.label}\r\n        </Button>\r\n      ))}\r\n      {onClear && (\r\n        <Button\r\n          size=\"sm\"\r\n          variant=\"ghost\"\r\n          onClick={onClear}\r\n          sx={{\r\n            color: \"var(--fg-inverse) !important\",\r\n            \"&:hover\": { background: overlayHover },\r\n          }}\r\n        >\r\n          {L.clear}\r\n        </Button>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default BulkActionBar;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/v2/patterns/ChartFigure.d.ts

@@ -0,0 +1,124 @@
+import * as React from "react";
+import type { SectionHeaderLevel } from "../components/SectionHeader";
+/**
+ * ChartFigure — a chart, its title, and its TEXT EQUIVALENT (pattern)
+ *
+ * Usage:
+ *
+ *   <ChartFigure
+ *     title="Dossiers par type de demande"
+ *     caption="Admission : 128 dossiers (64 %). Renouvellement : 72 (36 %)."
+ *   >
+ *     <HighchartsReact highcharts={Highcharts} options={options} />
+ *   </ChartFigure>
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-55)
+ *
+ * `tokens/chart` states the obligation and provides nothing to meet it, in its
+ * own words: "COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes
+ * slices distinguishable; it does not make a chart accessible. Every consumer
+ * still owes a legend with text labels, and a text equivalent of the data —
+ * 1.1.1 for the chart as a whole."
+ *
+ * A rule stated without a component to carry it gets met by whoever remembers
+ * it. So the same three-part assembly was written per screen — a `Surface`, a
+ * `SectionHeader`, and a paragraph of numbers under the canvas — and it is the
+ * third part that goes missing first, because it is the only one nobody SEES
+ * missing. A chart with no text equivalent looks finished.
+ *
+ * `caption` is therefore REQUIRED, not optional. That is the whole design
+ * decision of this component: a chart rendered through here cannot ship without
+ * its numbers in text. Making it optional would reproduce, one layer up, the
+ * situation this closes.
+ *
+ * Observed in `autorisation-admis-pour-conforme-fe` (Area 5): three bilan
+ * screens repeating Surface + SectionHeader + an `aria-hidden` canvas + a
+ * caption paragraph, with the caption's own styling (`--text-xs`,
+ * `--fg-subtle`) copied along with it.
+ *
+ * `Surface`'s docblock already points here: "Surface deliberately has NO title,
+ * NO actions and NO header. A titled section is FormSection; a metric tile is
+ * KPICard […]. Those compose this."
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * WHY THE CANVAS IS `aria-hidden`. A chart renderer emits dozens of SVG text
+ * nodes — axis ticks, slice percentages, tooltips — which a screen reader walks
+ * one by one, in visual order, with no structure. That is noise, not
+ * information, and it is WORSE than silence because it takes minutes to get
+ * through. The canvas is hidden and the `figcaption` speaks for it.
+ *
+ * COROLLARY, and it is a hard constraint: do NOT put interactive controls
+ * inside. `aria-hidden` on a focusable ancestor produces an element that can be
+ * tabbed to and cannot be announced, which fails WCAG 4.1.2 more plainly than
+ * the noise it was meant to avoid. A period selector or an export button goes
+ * OUTSIDE this component. (A renderer's own accessibility module, which builds
+ * a proper keyboard-navigable data table, is a different story — a consumer
+ * enabling one should pass `hideCanvasFromScreenReaders={false}` and own the
+ * result.)
+ *
+ * The caption is VISIBLE, deliberately, and not a visually-hidden string: the
+ * numbers under a chart help the reader who can see it too — that is the whole
+ * point of a `figcaption` — and a caption nobody can see is a caption nobody
+ * notices has gone stale.
+ *
+ * ── THE CANVAS IS FAULT-ISOLATED (ISO/IEC 25010 § Reliability) ────
+ *
+ * The chart slot is wrapped in `SectionErrorBoundary`. Hosting a THIRD-PARTY
+ * renderer is what this component is for, and that renderer is fed aggregates
+ * from a back-end whose wire models declare every field optional — the exact
+ * situation `SectionErrorBoundary`'s own header describes: "an `articles` field
+ * arriving as an object where `.map` is called". React's default behaviour on a
+ * render exception is to unmount the WHOLE tree, so one malformed series took
+ * down the entire page, KPI strip and data table included — the table that
+ * carries the same numbers the chart was drawing.
+ *
+ * With the boundary, a failing chart shows a banner INSIDE its own card, and
+ * everything around it keeps working. The `figcaption` survives too, which
+ * matters more here than anywhere else: the caption holds the figures in text,
+ * so the reader still gets the DATA when the drawing is gone.
+ *
+ * The boundary sits ABOVE the `aria-hidden` canvas wrapper, not inside it —
+ * placed inside, its error banner would inherit that `aria-hidden` and no
+ * screen reader would announce the failure. A sighted user would see the
+ * breakage; a blind user would get silence.
+ *
+ * Not opt-out. A host rendering a hand-written inline SVG gains nothing from
+ * the boundary but loses nothing either — an unconditional guarantee is worth
+ * more than a prop nobody remembers to pass.
+ */
+export interface ChartFigureProps {
+    /**
+     * Visible heading of the figure. Keep the chart renderer's own `title` option
+     * EMPTY and use this: real HTML text is selectable, translatable, sized by
+     * the token scale, and reachable by a screen reader — an SVG title is none of
+     * those. Two titles is the failure this prop exists to prevent.
+     */
+    title: React.ReactNode;
+    /**
+     * The text equivalent of the data (WCAG 1.1.1). REQUIRED — see the header.
+     * Give the figures, not a description of the chart: "Approuvés : 128 (64 %)"
+     * tells a reader what the slices say; "répartition des statuts" does not.
+     */
+    caption: React.ReactNode;
+    /** The chart itself. */
+    children?: React.ReactNode | undefined;
+    /** Heading level. Default `"h3"` — one below the page's `ActionBar` h1. */
+    level?: SectionHeaderLevel | undefined;
+    /**
+     * Height reserved for the canvas before the chart paints (R-R.4, anti-CLS).
+     * Pass it when the renderer sizes itself from its container, otherwise the
+     * caption jumps down the page on first render.
+     */
+    minHeight?: number | string | undefined;
+    /**
+     * Escape hatch for a renderer that exposes its own accessible data table.
+     * Defaults to `true`; setting it to `false` un-hides the canvas and hands the
+     * screen-reader experience to that renderer. The caption stays required.
+     */
+    hideCanvasFromScreenReaders?: boolean | undefined;
+    className?: string | undefined;
+}
+declare function ChartFigure({ title, caption, children, level, minHeight, hideCanvasFromScreenReaders, className, }: ChartFigureProps): React.JSX.Element;
+export default ChartFigure;
+//# sourceMappingURL=ChartFigure.d.ts.map

package/dist/v2/patterns/ChartFigure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartFigure.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/patterns/ChartFigure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AAEH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAY,EACZ,SAAS,EACT,2BAAkC,EAClC,SAAS,GACV,EAAE,gBAAgB,qBAmDlB;AAED,eAAe,WAAW,CAAC"}

package/dist/v2/patterns/ChartFigure.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _SectionErrorBoundary = _interopRequireDefault(require("../components/SectionErrorBoundary"));
+var _SectionHeader = _interopRequireDefault(require("../components/SectionHeader"));
+var _Surface = _interopRequireDefault(require("../components/Surface"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ChartFigure — a chart, its title, and its TEXT EQUIVALENT (pattern)
+ *
+ * Usage:
+ *
+ *   <ChartFigure
+ *     title="Dossiers par type de demande"
+ *     caption="Admission : 128 dossiers (64 %). Renouvellement : 72 (36 %)."
+ *   >
+ *     <HighchartsReact highcharts={Highcharts} options={options} />
+ *   </ChartFigure>
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-55)
+ *
+ * `tokens/chart` states the obligation and provides nothing to meet it, in its
+ * own words: "COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes
+ * slices distinguishable; it does not make a chart accessible. Every consumer
+ * still owes a legend with text labels, and a text equivalent of the data —
+ * 1.1.1 for the chart as a whole."
+ *
+ * A rule stated without a component to carry it gets met by whoever remembers
+ * it. So the same three-part assembly was written per screen — a `Surface`, a
+ * `SectionHeader`, and a paragraph of numbers under the canvas — and it is the
+ * third part that goes missing first, because it is the only one nobody SEES
+ * missing. A chart with no text equivalent looks finished.
+ *
+ * `caption` is therefore REQUIRED, not optional. That is the whole design
+ * decision of this component: a chart rendered through here cannot ship without
+ * its numbers in text. Making it optional would reproduce, one layer up, the
+ * situation this closes.
+ *
+ * Observed in `autorisation-admis-pour-conforme-fe` (Area 5): three bilan
+ * screens repeating Surface + SectionHeader + an `aria-hidden` canvas + a
+ * caption paragraph, with the caption's own styling (`--text-xs`,
+ * `--fg-subtle`) copied along with it.
+ *
+ * `Surface`'s docblock already points here: "Surface deliberately has NO title,
+ * NO actions and NO header. A titled section is FormSection; a metric tile is
+ * KPICard […]. Those compose this."
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * WHY THE CANVAS IS `aria-hidden`. A chart renderer emits dozens of SVG text
+ * nodes — axis ticks, slice percentages, tooltips — which a screen reader walks
+ * one by one, in visual order, with no structure. That is noise, not
+ * information, and it is WORSE than silence because it takes minutes to get
+ * through. The canvas is hidden and the `figcaption` speaks for it.
+ *
+ * COROLLARY, and it is a hard constraint: do NOT put interactive controls
+ * inside. `aria-hidden` on a focusable ancestor produces an element that can be
+ * tabbed to and cannot be announced, which fails WCAG 4.1.2 more plainly than
+ * the noise it was meant to avoid. A period selector or an export button goes
+ * OUTSIDE this component. (A renderer's own accessibility module, which builds
+ * a proper keyboard-navigable data table, is a different story — a consumer
+ * enabling one should pass `hideCanvasFromScreenReaders={false}` and own the
+ * result.)
+ *
+ * The caption is VISIBLE, deliberately, and not a visually-hidden string: the
+ * numbers under a chart help the reader who can see it too — that is the whole
+ * point of a `figcaption` — and a caption nobody can see is a caption nobody
+ * notices has gone stale.
+ *
+ * ── THE CANVAS IS FAULT-ISOLATED (ISO/IEC 25010 § Reliability) ────
+ *
+ * The chart slot is wrapped in `SectionErrorBoundary`. Hosting a THIRD-PARTY
+ * renderer is what this component is for, and that renderer is fed aggregates
+ * from a back-end whose wire models declare every field optional — the exact
+ * situation `SectionErrorBoundary`'s own header describes: "an `articles` field
+ * arriving as an object where `.map` is called". React's default behaviour on a
+ * render exception is to unmount the WHOLE tree, so one malformed series took
+ * down the entire page, KPI strip and data table included — the table that
+ * carries the same numbers the chart was drawing.
+ *
+ * With the boundary, a failing chart shows a banner INSIDE its own card, and
+ * everything around it keeps working. The `figcaption` survives too, which
+ * matters more here than anywhere else: the caption holds the figures in text,
+ * so the reader still gets the DATA when the drawing is gone.
+ *
+ * The boundary sits ABOVE the `aria-hidden` canvas wrapper, not inside it —
+ * placed inside, its error banner would inherit that `aria-hidden` and no
+ * screen reader would announce the failure. A sighted user would see the
+ * breakage; a blind user would get silence.
+ *
+ * Not opt-out. A host rendering a hand-written inline SVG gains nothing from
+ * the boundary but loses nothing either — an unconditional guarantee is worth
+ * more than a prop nobody remembers to pass.
+ */
+
+function ChartFigure({
+  title,
+  caption,
+  children,
+  level = "h3",
+  minHeight,
+  hideCanvasFromScreenReaders = true,
+  className
+}) {
+  return (
+    /*#__PURE__*/
+    /* `figure` + `figcaption` is the native pairing for "content plus its
+       description", so the association needs no ARIA. Rendered THROUGH
+       `Surface` via its `component` prop rather than nested inside it — one
+       element instead of two, and the card padding lands on the figure itself.
+       `margin: 0` because the UA stylesheet gives a figure large margins. */
+    (0, _jsxRuntime.jsxs)(_Surface.default, {
+      component: "figure",
+      padding: "default",
+      elevation: "xs",
+      sx: {
+        margin: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--s-3)"
+      },
+      ...(className !== undefined ? {
+        className
+      } : {}),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.default, {
+        level: level,
+        title: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionErrorBoundary.default, {
+        ...(typeof title === "string" ? {
+          title
+        } : {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ...(hideCanvasFromScreenReaders ? {
+            "aria-hidden": true
+          } : {}),
+          style: minHeight !== undefined ? {
+            minHeight
+          } : {},
+          children: children
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("figcaption", {
+        style: {
+          fontSize: "var(--text-xs)",
+          lineHeight: "var(--lh-normal)",
+          color: "var(--fg-subtle)"
+        },
+        children: caption
+      })]
+    })
+  );
+}
+var _default = exports.default = ChartFigure;
+//# sourceMappingURL=ChartFigure.js.map

package/dist/v2/patterns/ChartFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartFigure.js","names":["React","_interopRequireWildcard","require","_SectionErrorBoundary","_interopRequireDefault","_SectionHeader","_Surface","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChartFigure","title","caption","children","level","minHeight","hideCanvasFromScreenReaders","className","jsxs","component","padding","elevation","sx","margin","display","flexDirection","gap","undefined","jsx","style","fontSize","lineHeight","color","_default","exports"],"sources":["../../../src/lib/v2/patterns/ChartFigure.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport SectionErrorBoundary from \"../components/SectionErrorBoundary\";\r\nimport SectionHeader from \"../components/SectionHeader\";\r\nimport Surface from \"../components/Surface\";\r\nimport type { SectionHeaderLevel } from \"../components/SectionHeader\";\r\n\r\n/**\r\n * ChartFigure — a chart, its title, and its TEXT EQUIVALENT (pattern)\r\n *\r\n * Usage:\r\n *\r\n *   <ChartFigure\r\n *     title=\"Dossiers par type de demande\"\r\n *     caption=\"Admission : 128 dossiers (64 %). Renouvellement : 72 (36 %).\"\r\n *   >\r\n *     <HighchartsReact highcharts={Highcharts} options={options} />\r\n *   </ChartFigure>\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-55)\r\n *\r\n * `tokens/chart` states the obligation and provides nothing to meet it, in its\r\n * own words: \"COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). This palette makes\r\n * slices distinguishable; it does not make a chart accessible. Every consumer\r\n * still owes a legend with text labels, and a text equivalent of the data —\r\n * 1.1.1 for the chart as a whole.\"\r\n *\r\n * A rule stated without a component to carry it gets met by whoever remembers\r\n * it. So the same three-part assembly was written per screen — a `Surface`, a\r\n * `SectionHeader`, and a paragraph of numbers under the canvas — and it is the\r\n * third part that goes missing first, because it is the only one nobody SEES\r\n * missing. A chart with no text equivalent looks finished.\r\n *\r\n * `caption` is therefore REQUIRED, not optional. That is the whole design\r\n * decision of this component: a chart rendered through here cannot ship without\r\n * its numbers in text. Making it optional would reproduce, one layer up, the\r\n * situation this closes.\r\n *\r\n * Observed in `autorisation-admis-pour-conforme-fe` (Area 5): three bilan\r\n * screens repeating Surface + SectionHeader + an `aria-hidden` canvas + a\r\n * caption paragraph, with the caption's own styling (`--text-xs`,\r\n * `--fg-subtle`) copied along with it.\r\n *\r\n * `Surface`'s docblock already points here: \"Surface deliberately has NO title,\r\n * NO actions and NO header. A titled section is FormSection; a metric tile is\r\n * KPICard […]. Those compose this.\"\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * WHY THE CANVAS IS `aria-hidden`. A chart renderer emits dozens of SVG text\r\n * nodes — axis ticks, slice percentages, tooltips — which a screen reader walks\r\n * one by one, in visual order, with no structure. That is noise, not\r\n * information, and it is WORSE than silence because it takes minutes to get\r\n * through. The canvas is hidden and the `figcaption` speaks for it.\r\n *\r\n * COROLLARY, and it is a hard constraint: do NOT put interactive controls\r\n * inside. `aria-hidden` on a focusable ancestor produces an element that can be\r\n * tabbed to and cannot be announced, which fails WCAG 4.1.2 more plainly than\r\n * the noise it was meant to avoid. A period selector or an export button goes\r\n * OUTSIDE this component. (A renderer's own accessibility module, which builds\r\n * a proper keyboard-navigable data table, is a different story — a consumer\r\n * enabling one should pass `hideCanvasFromScreenReaders={false}` and own the\r\n * result.)\r\n *\r\n * The caption is VISIBLE, deliberately, and not a visually-hidden string: the\r\n * numbers under a chart help the reader who can see it too — that is the whole\r\n * point of a `figcaption` — and a caption nobody can see is a caption nobody\r\n * notices has gone stale.\r\n *\r\n * ── THE CANVAS IS FAULT-ISOLATED (ISO/IEC 25010 § Reliability) ────\r\n *\r\n * The chart slot is wrapped in `SectionErrorBoundary`. Hosting a THIRD-PARTY\r\n * renderer is what this component is for, and that renderer is fed aggregates\r\n * from a back-end whose wire models declare every field optional — the exact\r\n * situation `SectionErrorBoundary`'s own header describes: \"an `articles` field\r\n * arriving as an object where `.map` is called\". React's default behaviour on a\r\n * render exception is to unmount the WHOLE tree, so one malformed series took\r\n * down the entire page, KPI strip and data table included — the table that\r\n * carries the same numbers the chart was drawing.\r\n *\r\n * With the boundary, a failing chart shows a banner INSIDE its own card, and\r\n * everything around it keeps working. The `figcaption` survives too, which\r\n * matters more here than anywhere else: the caption holds the figures in text,\r\n * so the reader still gets the DATA when the drawing is gone.\r\n *\r\n * The boundary sits ABOVE the `aria-hidden` canvas wrapper, not inside it —\r\n * placed inside, its error banner would inherit that `aria-hidden` and no\r\n * screen reader would announce the failure. A sighted user would see the\r\n * breakage; a blind user would get silence.\r\n *\r\n * Not opt-out. A host rendering a hand-written inline SVG gains nothing from\r\n * the boundary but loses nothing either — an unconditional guarantee is worth\r\n * more than a prop nobody remembers to pass.\r\n */\r\n\r\nexport interface ChartFigureProps {\r\n  /**\r\n   * Visible heading of the figure. Keep the chart renderer's own `title` option\r\n   * EMPTY and use this: real HTML text is selectable, translatable, sized by\r\n   * the token scale, and reachable by a screen reader — an SVG title is none of\r\n   * those. Two titles is the failure this prop exists to prevent.\r\n   */\r\n  title: React.ReactNode;\r\n  /**\r\n   * The text equivalent of the data (WCAG 1.1.1). REQUIRED — see the header.\r\n   * Give the figures, not a description of the chart: \"Approuvés : 128 (64 %)\"\r\n   * tells a reader what the slices say; \"répartition des statuts\" does not.\r\n   */\r\n  caption: React.ReactNode;\r\n  /** The chart itself. */\r\n  children?: React.ReactNode | undefined;\r\n  /** Heading level. Default `\"h3\"` — one below the page's `ActionBar` h1. */\r\n  level?: SectionHeaderLevel | undefined;\r\n  /**\r\n   * Height reserved for the canvas before the chart paints (R-R.4, anti-CLS).\r\n   * Pass it when the renderer sizes itself from its container, otherwise the\r\n   * caption jumps down the page on first render.\r\n   */\r\n  minHeight?: number | string | undefined;\r\n  /**\r\n   * Escape hatch for a renderer that exposes its own accessible data table.\r\n   * Defaults to `true`; setting it to `false` un-hides the canvas and hands the\r\n   * screen-reader experience to that renderer. The caption stays required.\r\n   */\r\n  hideCanvasFromScreenReaders?: boolean | undefined;\r\n  className?: string | undefined;\r\n}\r\n\r\nfunction ChartFigure({\r\n  title,\r\n  caption,\r\n  children,\r\n  level = \"h3\",\r\n  minHeight,\r\n  hideCanvasFromScreenReaders = true,\r\n  className,\r\n}: ChartFigureProps) {\r\n  return (\r\n    /* `figure` + `figcaption` is the native pairing for \"content plus its\r\n       description\", so the association needs no ARIA. Rendered THROUGH\r\n       `Surface` via its `component` prop rather than nested inside it — one\r\n       element instead of two, and the card padding lands on the figure itself.\r\n       `margin: 0` because the UA stylesheet gives a figure large margins. */\r\n    <Surface\r\n      component=\"figure\"\r\n      padding=\"default\"\r\n      elevation=\"xs\"\r\n      sx={{\r\n        margin: 0,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: \"var(--s-3)\",\r\n      }}\r\n      {...(className !== undefined ? { className } : {})}\r\n    >\r\n      <SectionHeader level={level} title={title} />\r\n\r\n      {/* La frontière enveloppe le canevas AU-DESSUS du `div` `aria-hidden`, et\r\n          l'ordre n'est pas indifférent : placée à l'intérieur, sa bannière\r\n          d'erreur hériterait de l'`aria-hidden` du canevas et aucun lecteur\r\n          d'écran ne l'annoncerait — un voyant verrait la panne, un non-voyant\r\n          n'entendrait rien. Ici, le canevas reste masqué aux technologies\r\n          d'assistance ET l'erreur leur parvient.\r\n\r\n          `title` n'est transmis que s'il est une chaîne : `SectionErrorBoundary`\r\n          nomme la panne dans sa bannière et dans le journal, et un nœud JSX n'y\r\n          a pas sa place. */}\r\n      <SectionErrorBoundary {...(typeof title === \"string\" ? { title } : {})}>\r\n        <div\r\n          {...(hideCanvasFromScreenReaders ? { \"aria-hidden\": true } : {})}\r\n          style={minHeight !== undefined ? { minHeight } : {}}\r\n        >\r\n          {children}\r\n        </div>\r\n      </SectionErrorBoundary>\r\n\r\n      <figcaption\r\n        style={{\r\n          fontSize: \"var(--text-xs)\",\r\n          lineHeight: \"var(--lh-normal)\",\r\n          color: \"var(--fg-subtle)\",\r\n        }}\r\n      >\r\n        {caption}\r\n      </figcaption>\r\n    </Surface>\r\n  );\r\n}\r\n\r\nexport default ChartFigure;\r\n"],"mappings":"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","ignoreList":[]}