@portnet/ui 6.0.2 → 6.0.3

package/dist/esm/v2/components/Segmented.js

@@ -1,9 +1,3 @@
-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 _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); }
 import * as React from "react";
 import Box from "@mui/material/Box";
 
@@ -45,20 +39,17 @@ import Box from "@mui/material/Box";
  *   pattern aren't surprised).
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Segmented(_ref) {
-  var _options$selectedInde;
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    options = _ref.options,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "md" : _ref$size,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    ariaLabel = _ref["aria-label"],
-    ariaLabelledBy = _ref["aria-labelledby"],
-    sx = _ref.sx;
+function Segmented({
+  value,
+  onChange,
+  options,
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  sx
+}) {
   if (process.env["NODE_ENV"] !== "production") {
     if (!ariaLabel && !ariaLabelledBy) {
       // eslint-disable-next-line no-console
@@ -66,45 +57,38 @@ function Segmented(_ref) {
     }
     if (options.length < 2 || options.length > 4) {
       // eslint-disable-next-line no-console
-      console.warn("[@portnet/ui v2] <Segmented> with ".concat(options.length, " options - charter R-Sel.2 says 2-4. ") + "Below 2: drop the control. Above 4: use <Select> or <Tabs>.");
+      console.warn(`[@portnet/ui v2] <Segmented> with ${options.length} options - charter R-Sel.2 says 2-4. ` + "Below 2: drop the control. Above 4: use <Select> or <Tabs>.");
     }
   }
-  var refs = React.useRef([]);
+  const refs = React.useRef([]);
 
   // Index of the currently-selected option drives aria-checked + styling.
-  var selectedIndex = Math.max(0, options.findIndex(function (o) {
-    return o.value === value;
-  }));
+  const selectedIndex = Math.max(0, options.findIndex(o => o.value === value));
 
   // SEG-1 — Roving tabindex target. Per WAI-ARIA only ONE option is tabbable;
   // normally that's the selected one, but if the current value points at a
   // disabled option we fall back to the first enabled option so the group is
   // still reachable by Tab (WCAG 2.1.1). -1 when every option is disabled.
-  var tabbableIndex = !((_options$selectedInde = options[selectedIndex]) !== null && _options$selectedInde !== void 0 && _options$selectedInde.disabled) ? selectedIndex : options.findIndex(function (o) {
-    return !o.disabled;
-  });
-  var focusOption = function focusOption(i) {
-    var node = refs.current[i];
+  const tabbableIndex = !options[selectedIndex]?.disabled ? selectedIndex : options.findIndex(o => !o.disabled);
+  const focusOption = i => {
+    const node = refs.current[i];
     if (node) node.focus();
   };
-  var move = function move(delta) {
-    var len = options.length;
-    var next = selectedIndex;
-    for (var step = 0; step < len; step += 1) {
-      var _options$next;
+  const move = delta => {
+    const len = options.length;
+    let next = selectedIndex;
+    for (let step = 0; step < len; step += 1) {
       next = (next + delta + len) % len;
-      if (!((_options$next = options[next]) !== null && _options$next !== void 0 && _options$next.disabled)) break;
+      if (!options[next]?.disabled) break;
     }
-    var target = options[next];
+    const target = options[next];
     if (target && !target.disabled) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(target.value);
+      onChange?.(target.value);
       // schedule focus to land after React commits the new selectedIndex
-      requestAnimationFrame(function () {
-        return focusOption(next);
-      });
+      requestAnimationFrame(() => focusOption(next));
     }
   };
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     if (disabled) return;
     switch (e.key) {
       case "ArrowRight":
@@ -120,36 +104,24 @@ function Segmented(_ref) {
       case "Home":
         {
           e.preventDefault();
-          var first = options.findIndex(function (o) {
-            return !o.disabled;
-          });
-          var opt = first >= 0 ? options[first] : undefined;
+          const first = options.findIndex(o => !o.disabled);
+          const opt = first >= 0 ? options[first] : undefined;
           if (opt) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(opt.value);
-            requestAnimationFrame(function () {
-              return focusOption(first);
-            });
+            onChange?.(opt.value);
+            requestAnimationFrame(() => focusOption(first));
           }
           break;
         }
       case "End":
         {
           e.preventDefault();
-          var _loop = function _loop(i) {
-            var opt = options[i];
+          for (let i = options.length - 1; i >= 0; i -= 1) {
+            const opt = options[i];
             if (opt && !opt.disabled) {
-              onChange === null || onChange === void 0 ? void 0 : onChange(opt.value);
-              requestAnimationFrame(function () {
-                return focusOption(i);
-              });
-              return {
-                v: void 0
-              };
+              onChange?.(opt.value);
+              requestAnimationFrame(() => focusOption(i));
+              return;
             }
-          };
-          for (var i = options.length - 1; i >= 0; i -= 1) {
-            var _ret = _loop(i);
-            if (_typeof(_ret) === "object") return _ret.v;
           }
           break;
         }
@@ -157,10 +129,10 @@ function Segmented(_ref) {
       case "Enter":
         {
           // R-K.1 - Space/Enter re-affirm the focused (= selected) option.
-          var _opt = options[selectedIndex];
-          if (_opt && !_opt.disabled) {
+          const opt = options[selectedIndex];
+          if (opt && !opt.disabled) {
             e.preventDefault();
-            onChange === null || onChange === void 0 ? void 0 : onChange(_opt.value);
+            onChange?.(opt.value);
           }
           break;
         }
@@ -173,16 +145,16 @@ function Segmented(_ref) {
   // mirrors the +2 button padding offset in createPortnetTheme — all
   // small interactive elements add a 2 px breathing offset to the
   // base grid for visual rhythm.
-  var padY = size === "sm" ? "var(--s-1)" : "calc(var(--s-1) + 2px)";
-  var padX = size === "sm" ? "calc(var(--s-2) + 2px)" : "var(--s-3)";
-  var fontSize = size === "sm" ? "var(--text-xs)" : "var(--text-sm)";
+  const padY = size === "sm" ? "var(--s-1)" : "calc(var(--s-1) + 2px)";
+  const padX = size === "sm" ? "calc(var(--s-2) + 2px)" : "var(--s-3)";
+  const fontSize = size === "sm" ? "var(--text-xs)" : "var(--text-sm)";
   return /*#__PURE__*/_jsx(Box, {
     role: "radiogroup",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-disabled": disabled || undefined,
     onKeyDown: handleKeyDown,
-    sx: _objectSpread({
+    sx: {
       display: "inline-flex",
       width: fullWidth ? "100%" : "auto",
       padding: "2px",
@@ -190,13 +162,14 @@ function Segmented(_ref) {
       border: "1px solid var(--border)",
       borderRadius: "var(--r-md)",
       gap: "2px",
-      opacity: disabled ? 0.55 : 1
-    }, sx),
-    children: options.map(function (opt, i) {
-      var isSelected = i === selectedIndex;
-      var isDisabled = disabled || opt.disabled;
+      opacity: disabled ? 0.55 : 1,
+      ...sx
+    },
+    children: options.map((opt, i) => {
+      const isSelected = i === selectedIndex;
+      const isDisabled = disabled || opt.disabled;
       return /*#__PURE__*/_jsxs(Box, {
-        ref: function ref(el) {
+        ref: el => {
           refs.current[i] = el;
         },
         role: "radio",
@@ -204,9 +177,9 @@ function Segmented(_ref) {
         "aria-disabled": isDisabled || undefined,
         "aria-label": opt["aria-label"],
         tabIndex: i === tabbableIndex && !isDisabled ? 0 : -1,
-        onClick: function onClick() {
+        onClick: () => {
           if (isDisabled || isSelected) return;
-          onChange === null || onChange === void 0 ? void 0 : onChange(opt.value);
+          onChange?.(opt.value);
         },
         sx: {
           flex: fullWidth ? 1 : "0 0 auto",
@@ -214,9 +187,9 @@ function Segmented(_ref) {
           alignItems: "center",
           justifyContent: "center",
           gap: 0.75,
-          padding: "".concat(padY, " ").concat(padX),
+          padding: `${padY} ${padX}`,
           borderRadius: "calc(var(--r-md) - 2px)",
-          fontSize: fontSize,
+          fontSize,
           fontWeight: isSelected ? "var(--fw-semibold)" : "var(--fw-medium)",
           color: isSelected ? "var(--fg)" : "var(--fg-muted)",
           background: isSelected ? "var(--surface)" : "transparent",
@@ -225,10 +198,12 @@ function Segmented(_ref) {
           userSelect: "none",
           whiteSpace: "nowrap",
           transition: "background var(--duration-fast, 80ms) ease, color var(--duration-fast, 80ms) ease",
-          "&:hover": _objectSpread({}, !isSelected && !isDisabled ? {
-            background: "var(--bg-hover)",
-            color: "var(--fg)"
-          } : {}),
+          "&:hover": {
+            ...(!isSelected && !isDisabled ? {
+              background: "var(--bg-hover)",
+              color: "var(--fg)"
+            } : {})
+          },
           "&:focus-visible": {
             outline: "2px solid var(--accent)",
             outlineOffset: "var(--pui-outline-offset)"

package/dist/esm/v2/components/Segmented.js.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.js","names":["React","Box","jsx","_jsx","jsxs","_jsxs","Segmented","_ref","_options$selectedInde","value","onChange","options","_ref$size","size","_ref$fullWidth","fullWidth","_ref$disabled","disabled","ariaLabel","ariaLabelledBy","sx","process","env","console","warn","length","concat","refs","useRef","selectedIndex","Math","max","findIndex","o","tabbableIndex","focusOption","i","node","current","focus","move","delta","len","next","step","_options$next","target","requestAnimationFrame","handleKeyDown","e","key","preventDefault","first","opt","undefined","_loop","v","_ret","_typeof","padY","padX","fontSize","role","onKeyDown","_objectSpread","display","width","padding","background","border","borderRadius","gap","opacity","children","map","isSelected","isDisabled","ref","el","tabIndex","onClick","flex","alignItems","justifyContent","fontWeight","color","boxShadow","cursor","userSelect","whiteSpace","transition","outline","outlineOffset","icon","component","label"],"sources":["../../../../src/lib/v2/components/Segmented.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\n\r\n/**\r\n * Segmented - Portnet UI v2\r\n *\r\n * Charter §03 · Component \"Segmented control\". Single-selection input\r\n * for 2-4 mutually exclusive options. Use when Radio would feel\r\n * overweighted (R-Sel.2). For panel switching use <Tabs> instead.\r\n *\r\n *   <Segmented\r\n *     value={density}\r\n *     onChange={setDensity}\r\n *     options={[\r\n *       { value: \"comfortable\", label: \"Confort\" },\r\n *       { value: \"compact\",     label: \"Compact\" },\r\n *     ]}\r\n *     aria-label=\"Densité d'affichage\"\r\n *   />\r\n *\r\n *   With icons (icon-only is allowed but each option MUST then have its\r\n *   own aria-label):\r\n *\r\n *   <Segmented\r\n *     value={view} onChange={setView}\r\n *     options={[\r\n *       { value: \"list\", icon: <ViewListIcon />,    \"aria-label\": \"Liste\" },\r\n *       { value: \"grid\", icon: <ViewModuleIcon />, \"aria-label\": \"Grille\" },\r\n *     ]}\r\n *     aria-label=\"Mode d'affichage\"\r\n *   />\r\n *\r\n * A11y note (R-K.1):\r\n *   role=\"radiogroup\" + role=\"radio\" with roving tabindex per WAI-ARIA.\r\n *   Arrow keys move focus AND auto-select (selection follows focus).\r\n *   Space/Enter re-affirm the focused option (no-op under auto-select,\r\n *   but consumes the keystroke so automated a11y audits don't flag the\r\n *   role and so users following the alternative WAI-ARIA radiogroup\r\n *   pattern aren't surprised).\r\n */\r\n\r\nexport type SegmentedValue = string | number;\r\n\r\nexport interface SegmentedOption {\r\n  value: SegmentedValue;\r\n  label?: React.ReactNode | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  disabled?: boolean | undefined;\r\n  \"aria-label\"?: string | undefined;\r\n}\r\n\r\nexport interface SegmentedProps {\r\n  value: SegmentedValue;\r\n  onChange?: ((value: SegmentedValue) => void) | undefined;\r\n  options: SegmentedOption[];\r\n  size?: \"sm\" | \"md\" | undefined;\r\n  fullWidth?: boolean | undefined;\r\n  disabled?: boolean | undefined;\r\n  \"aria-label\"?: string | undefined;\r\n  \"aria-labelledby\"?: string | undefined;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction Segmented({\r\n  value,\r\n  onChange,\r\n  options,\r\n  size = \"md\",\r\n  fullWidth = false,\r\n  disabled = false,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  sx,\r\n}: SegmentedProps) {\r\n  if (process.env[\"NODE_ENV\"] !== \"production\") {\r\n    if (!ariaLabel && !ariaLabelledBy) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        \"[@portnet/ui v2] <Segmented> requires aria-label or aria-labelledby on the radiogroup.\"\r\n      );\r\n    }\r\n    if (options.length < 2 || options.length > 4) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        `[@portnet/ui v2] <Segmented> with ${options.length} options - charter R-Sel.2 says 2-4. ` +\r\n        \"Below 2: drop the control. Above 4: use <Select> or <Tabs>.\"\r\n      );\r\n    }\r\n  }\r\n\r\n  const refs = React.useRef<Array<HTMLDivElement | null>>([]);\r\n\r\n  // Index of the currently-selected option drives aria-checked + styling.\r\n  const selectedIndex = Math.max(\r\n    0,\r\n    options.findIndex((o) => o.value === value)\r\n  );\r\n\r\n  // SEG-1 — Roving tabindex target. Per WAI-ARIA only ONE option is tabbable;\r\n  // normally that's the selected one, but if the current value points at a\r\n  // disabled option we fall back to the first enabled option so the group is\r\n  // still reachable by Tab (WCAG 2.1.1). -1 when every option is disabled.\r\n  const tabbableIndex = !options[selectedIndex]?.disabled\r\n    ? selectedIndex\r\n    : options.findIndex((o) => !o.disabled);\r\n\r\n  const focusOption = (i: number) => {\r\n    const node = refs.current[i];\r\n    if (node) node.focus();\r\n  };\r\n\r\n  const move = (delta: number) => {\r\n    const len = options.length;\r\n    let next = selectedIndex;\r\n    for (let step = 0; step < len; step += 1) {\r\n      next = (next + delta + len) % len;\r\n      if (!options[next]?.disabled) break;\r\n    }\r\n    const target = options[next];\r\n    if (target && !target.disabled) {\r\n      onChange?.(target.value);\r\n      // schedule focus to land after React commits the new selectedIndex\r\n      requestAnimationFrame(() => focusOption(next));\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (disabled) return;\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        move(+1);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        move(-1);\r\n        break;\r\n      case \"Home\": {\r\n        e.preventDefault();\r\n        const first = options.findIndex((o) => !o.disabled);\r\n        const opt = first >= 0 ? options[first] : undefined;\r\n        if (opt) {\r\n          onChange?.(opt.value);\r\n          requestAnimationFrame(() => focusOption(first));\r\n        }\r\n        break;\r\n      }\r\n      case \"End\": {\r\n        e.preventDefault();\r\n        for (let i = options.length - 1; i >= 0; i -= 1) {\r\n          const opt = options[i];\r\n          if (opt && !opt.disabled) {\r\n            onChange?.(opt.value);\r\n            requestAnimationFrame(() => focusOption(i));\r\n            return;\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case \" \":\r\n      case \"Enter\": {\r\n        // R-K.1 - Space/Enter re-affirm the focused (= selected) option.\r\n        const opt = options[selectedIndex];\r\n        if (opt && !opt.disabled) {\r\n          e.preventDefault();\r\n          onChange?.(opt.value);\r\n        }\r\n        break;\r\n      }\r\n      default:\r\n    }\r\n  };\r\n\r\n  // Per-option padding pulled from the spacing scale (var(--s-1) = 4 px,\r\n  // var(--s-2) = 8 px). The \"+2\" on the small horizontal padding\r\n  // mirrors the +2 button padding offset in createPortnetTheme — all\r\n  // small interactive elements add a 2 px breathing offset to the\r\n  // base grid for visual rhythm.\r\n  const padY = size === \"sm\" ? \"var(--s-1)\" : \"calc(var(--s-1) + 2px)\";\r\n  const padX = size === \"sm\" ? \"calc(var(--s-2) + 2px)\" : \"var(--s-3)\";\r\n  const fontSize = size === \"sm\" ? \"var(--text-xs)\" : \"var(--text-sm)\";\r\n\r\n  return (\r\n    <Box\r\n      role=\"radiogroup\"\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-disabled={disabled || undefined}\r\n      onKeyDown={handleKeyDown}\r\n      sx={{\r\n        display: \"inline-flex\",\r\n        width: fullWidth ? \"100%\" : \"auto\",\r\n        padding: \"2px\",\r\n        background: \"var(--bg-subtle)\",\r\n        border: \"1px solid var(--border)\",\r\n        borderRadius: \"var(--r-md)\",\r\n        gap: \"2px\",\r\n        opacity: disabled ? 0.55 : 1,\r\n        ...sx,\r\n      }}\r\n    >\r\n      {options.map((opt, i) => {\r\n        const isSelected = i === selectedIndex;\r\n        const isDisabled = disabled || opt.disabled;\r\n        return (\r\n          <Box\r\n            key={opt.value}\r\n            ref={(el) => { refs.current[i] = el as HTMLDivElement | null; }}\r\n            role=\"radio\"\r\n            aria-checked={isSelected}\r\n            aria-disabled={isDisabled || undefined}\r\n            aria-label={opt[\"aria-label\"]}\r\n            tabIndex={i === tabbableIndex && !isDisabled ? 0 : -1}\r\n            onClick={() => {\r\n              if (isDisabled || isSelected) return;\r\n              onChange?.(opt.value);\r\n            }}\r\n            sx={{\r\n              flex: fullWidth ? 1 : \"0 0 auto\",\r\n              display: \"inline-flex\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"center\",\r\n              gap: 0.75,\r\n              padding: `${padY} ${padX}`,\r\n              borderRadius: \"calc(var(--r-md) - 2px)\",\r\n              fontSize,\r\n              fontWeight: isSelected ? \"var(--fw-semibold)\" : \"var(--fw-medium)\",\r\n              color: isSelected ? \"var(--fg)\" : \"var(--fg-muted)\",\r\n              background: isSelected ? \"var(--surface)\" : \"transparent\",\r\n              boxShadow: isSelected ? \"var(--shadow-xs)\" : \"none\",\r\n              cursor: isDisabled ? \"not-allowed\" : isSelected ? \"default\" : \"pointer\",\r\n              userSelect: \"none\",\r\n              whiteSpace: \"nowrap\",\r\n              transition:\r\n                \"background var(--duration-fast, 80ms) ease, color var(--duration-fast, 80ms) ease\",\r\n              \"&:hover\": {\r\n                ...(!isSelected && !isDisabled\r\n                  ? { background: \"var(--bg-hover)\", color: \"var(--fg)\" }\r\n                  : {}),\r\n              },\r\n              \"&:focus-visible\": {\r\n                outline: \"2px solid var(--accent)\",\r\n                outlineOffset: \"var(--pui-outline-offset)\",\r\n              },\r\n            }}\r\n          >\r\n            {opt.icon && (\r\n              <Box\r\n                component=\"span\"\r\n                aria-hidden=\"true\"\r\n                sx={{ display: \"inline-flex\", color: \"currentColor\" }}\r\n              >\r\n                {opt.icon}\r\n              </Box>\r\n            )}\r\n            {opt.label && <Box component=\"span\">{opt.label}</Box>}\r\n          </Box>\r\n        );\r\n      })}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default Segmented;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Segmented.js","names":["React","Box","jsx","_jsx","jsxs","_jsxs","Segmented","value","onChange","options","size","fullWidth","disabled","ariaLabel","ariaLabelledBy","sx","process","env","console","warn","length","refs","useRef","selectedIndex","Math","max","findIndex","o","tabbableIndex","focusOption","i","node","current","focus","move","delta","len","next","step","target","requestAnimationFrame","handleKeyDown","e","key","preventDefault","first","opt","undefined","padY","padX","fontSize","role","onKeyDown","display","width","padding","background","border","borderRadius","gap","opacity","children","map","isSelected","isDisabled","ref","el","tabIndex","onClick","flex","alignItems","justifyContent","fontWeight","color","boxShadow","cursor","userSelect","whiteSpace","transition","outline","outlineOffset","icon","component","label"],"sources":["../../../../src/lib/v2/components/Segmented.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\n\r\n/**\r\n * Segmented - Portnet UI v2\r\n *\r\n * Charter §03 · Component \"Segmented control\". Single-selection input\r\n * for 2-4 mutually exclusive options. Use when Radio would feel\r\n * overweighted (R-Sel.2). For panel switching use <Tabs> instead.\r\n *\r\n *   <Segmented\r\n *     value={density}\r\n *     onChange={setDensity}\r\n *     options={[\r\n *       { value: \"comfortable\", label: \"Confort\" },\r\n *       { value: \"compact\",     label: \"Compact\" },\r\n *     ]}\r\n *     aria-label=\"Densité d'affichage\"\r\n *   />\r\n *\r\n *   With icons (icon-only is allowed but each option MUST then have its\r\n *   own aria-label):\r\n *\r\n *   <Segmented\r\n *     value={view} onChange={setView}\r\n *     options={[\r\n *       { value: \"list\", icon: <ViewListIcon />,    \"aria-label\": \"Liste\" },\r\n *       { value: \"grid\", icon: <ViewModuleIcon />, \"aria-label\": \"Grille\" },\r\n *     ]}\r\n *     aria-label=\"Mode d'affichage\"\r\n *   />\r\n *\r\n * A11y note (R-K.1):\r\n *   role=\"radiogroup\" + role=\"radio\" with roving tabindex per WAI-ARIA.\r\n *   Arrow keys move focus AND auto-select (selection follows focus).\r\n *   Space/Enter re-affirm the focused option (no-op under auto-select,\r\n *   but consumes the keystroke so automated a11y audits don't flag the\r\n *   role and so users following the alternative WAI-ARIA radiogroup\r\n *   pattern aren't surprised).\r\n */\r\n\r\nexport type SegmentedValue = string | number;\r\n\r\nexport interface SegmentedOption {\r\n  value: SegmentedValue;\r\n  label?: React.ReactNode | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  disabled?: boolean | undefined;\r\n  \"aria-label\"?: string | undefined;\r\n}\r\n\r\nexport interface SegmentedProps {\r\n  value: SegmentedValue;\r\n  onChange?: ((value: SegmentedValue) => void) | undefined;\r\n  options: SegmentedOption[];\r\n  size?: \"sm\" | \"md\" | undefined;\r\n  fullWidth?: boolean | undefined;\r\n  disabled?: boolean | undefined;\r\n  \"aria-label\"?: string | undefined;\r\n  \"aria-labelledby\"?: string | undefined;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction Segmented({\r\n  value,\r\n  onChange,\r\n  options,\r\n  size = \"md\",\r\n  fullWidth = false,\r\n  disabled = false,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  sx,\r\n}: SegmentedProps) {\r\n  if (process.env[\"NODE_ENV\"] !== \"production\") {\r\n    if (!ariaLabel && !ariaLabelledBy) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        \"[@portnet/ui v2] <Segmented> requires aria-label or aria-labelledby on the radiogroup.\"\r\n      );\r\n    }\r\n    if (options.length < 2 || options.length > 4) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        `[@portnet/ui v2] <Segmented> with ${options.length} options - charter R-Sel.2 says 2-4. ` +\r\n        \"Below 2: drop the control. Above 4: use <Select> or <Tabs>.\"\r\n      );\r\n    }\r\n  }\r\n\r\n  const refs = React.useRef<Array<HTMLDivElement | null>>([]);\r\n\r\n  // Index of the currently-selected option drives aria-checked + styling.\r\n  const selectedIndex = Math.max(\r\n    0,\r\n    options.findIndex((o) => o.value === value)\r\n  );\r\n\r\n  // SEG-1 — Roving tabindex target. Per WAI-ARIA only ONE option is tabbable;\r\n  // normally that's the selected one, but if the current value points at a\r\n  // disabled option we fall back to the first enabled option so the group is\r\n  // still reachable by Tab (WCAG 2.1.1). -1 when every option is disabled.\r\n  const tabbableIndex = !options[selectedIndex]?.disabled\r\n    ? selectedIndex\r\n    : options.findIndex((o) => !o.disabled);\r\n\r\n  const focusOption = (i: number) => {\r\n    const node = refs.current[i];\r\n    if (node) node.focus();\r\n  };\r\n\r\n  const move = (delta: number) => {\r\n    const len = options.length;\r\n    let next = selectedIndex;\r\n    for (let step = 0; step < len; step += 1) {\r\n      next = (next + delta + len) % len;\r\n      if (!options[next]?.disabled) break;\r\n    }\r\n    const target = options[next];\r\n    if (target && !target.disabled) {\r\n      onChange?.(target.value);\r\n      // schedule focus to land after React commits the new selectedIndex\r\n      requestAnimationFrame(() => focusOption(next));\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (disabled) return;\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        move(+1);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        move(-1);\r\n        break;\r\n      case \"Home\": {\r\n        e.preventDefault();\r\n        const first = options.findIndex((o) => !o.disabled);\r\n        const opt = first >= 0 ? options[first] : undefined;\r\n        if (opt) {\r\n          onChange?.(opt.value);\r\n          requestAnimationFrame(() => focusOption(first));\r\n        }\r\n        break;\r\n      }\r\n      case \"End\": {\r\n        e.preventDefault();\r\n        for (let i = options.length - 1; i >= 0; i -= 1) {\r\n          const opt = options[i];\r\n          if (opt && !opt.disabled) {\r\n            onChange?.(opt.value);\r\n            requestAnimationFrame(() => focusOption(i));\r\n            return;\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case \" \":\r\n      case \"Enter\": {\r\n        // R-K.1 - Space/Enter re-affirm the focused (= selected) option.\r\n        const opt = options[selectedIndex];\r\n        if (opt && !opt.disabled) {\r\n          e.preventDefault();\r\n          onChange?.(opt.value);\r\n        }\r\n        break;\r\n      }\r\n      default:\r\n    }\r\n  };\r\n\r\n  // Per-option padding pulled from the spacing scale (var(--s-1) = 4 px,\r\n  // var(--s-2) = 8 px). The \"+2\" on the small horizontal padding\r\n  // mirrors the +2 button padding offset in createPortnetTheme — all\r\n  // small interactive elements add a 2 px breathing offset to the\r\n  // base grid for visual rhythm.\r\n  const padY = size === \"sm\" ? \"var(--s-1)\" : \"calc(var(--s-1) + 2px)\";\r\n  const padX = size === \"sm\" ? \"calc(var(--s-2) + 2px)\" : \"var(--s-3)\";\r\n  const fontSize = size === \"sm\" ? \"var(--text-xs)\" : \"var(--text-sm)\";\r\n\r\n  return (\r\n    <Box\r\n      role=\"radiogroup\"\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-disabled={disabled || undefined}\r\n      onKeyDown={handleKeyDown}\r\n      sx={{\r\n        display: \"inline-flex\",\r\n        width: fullWidth ? \"100%\" : \"auto\",\r\n        padding: \"2px\",\r\n        background: \"var(--bg-subtle)\",\r\n        border: \"1px solid var(--border)\",\r\n        borderRadius: \"var(--r-md)\",\r\n        gap: \"2px\",\r\n        opacity: disabled ? 0.55 : 1,\r\n        ...sx,\r\n      }}\r\n    >\r\n      {options.map((opt, i) => {\r\n        const isSelected = i === selectedIndex;\r\n        const isDisabled = disabled || opt.disabled;\r\n        return (\r\n          <Box\r\n            key={opt.value}\r\n            ref={(el) => { refs.current[i] = el as HTMLDivElement | null; }}\r\n            role=\"radio\"\r\n            aria-checked={isSelected}\r\n            aria-disabled={isDisabled || undefined}\r\n            aria-label={opt[\"aria-label\"]}\r\n            tabIndex={i === tabbableIndex && !isDisabled ? 0 : -1}\r\n            onClick={() => {\r\n              if (isDisabled || isSelected) return;\r\n              onChange?.(opt.value);\r\n            }}\r\n            sx={{\r\n              flex: fullWidth ? 1 : \"0 0 auto\",\r\n              display: \"inline-flex\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"center\",\r\n              gap: 0.75,\r\n              padding: `${padY} ${padX}`,\r\n              borderRadius: \"calc(var(--r-md) - 2px)\",\r\n              fontSize,\r\n              fontWeight: isSelected ? \"var(--fw-semibold)\" : \"var(--fw-medium)\",\r\n              color: isSelected ? \"var(--fg)\" : \"var(--fg-muted)\",\r\n              background: isSelected ? \"var(--surface)\" : \"transparent\",\r\n              boxShadow: isSelected ? \"var(--shadow-xs)\" : \"none\",\r\n              cursor: isDisabled ? \"not-allowed\" : isSelected ? \"default\" : \"pointer\",\r\n              userSelect: \"none\",\r\n              whiteSpace: \"nowrap\",\r\n              transition:\r\n                \"background var(--duration-fast, 80ms) ease, color var(--duration-fast, 80ms) ease\",\r\n              \"&:hover\": {\r\n                ...(!isSelected && !isDisabled\r\n                  ? { background: \"var(--bg-hover)\", color: \"var(--fg)\" }\r\n                  : {}),\r\n              },\r\n              \"&:focus-visible\": {\r\n                outline: \"2px solid var(--accent)\",\r\n                outlineOffset: \"var(--pui-outline-offset)\",\r\n              },\r\n            }}\r\n          >\r\n            {opt.icon && (\r\n              <Box\r\n                component=\"span\"\r\n                aria-hidden=\"true\"\r\n                sx={{ display: \"inline-flex\", color: \"currentColor\" }}\r\n              >\r\n                {opt.icon}\r\n              </Box>\r\n            )}\r\n            {opt.label && <Box component=\"span\">{opt.label}</Box>}\r\n          </Box>\r\n        );\r\n      })}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default Segmented;\r\n"],"mappings":"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","ignoreList":[]}