@portnet/ui 6.0.2 → 6.0.3

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

@@ -1,14 +1,3 @@
-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 _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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as React from "react";
 import Dialog from "@mui/material/Dialog";
 import Box from "@mui/material/Box";
@@ -98,21 +87,19 @@ import { mergeLabels } from "../utils/mergeLabels";
  *   aria-label (CP-1) so screen readers announce a name, not just a role.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var DEBOUNCE_MS = 80;
-var DEFAULT_LABELS = Object.freeze({
+const DEBOUNCE_MS = 80;
+const DEFAULT_LABELS = Object.freeze({
   title: "Palette de commandes",
   footerHint: "↑↓ pour naviguer · ↵ pour sélectionner · Esc pour fermer",
   closeButton: "Fermer la palette",
-  resultsCount: function resultsCount(n) {
-    return "".concat(n, " r\xE9sultat").concat(n > 1 ? "s" : "");
-  },
+  resultsCount: n => `${n} résultat${n > 1 ? "s" : ""}`,
   pinnedTitle: "Épinglés",
   recentTitle: "Récents"
 });
 
 // MUI v9: backdrop slot bag. Hoisted — its content (only an sx token)
 // is independent of any palette instance state.
-var BACKDROP_SLOT_PROPS = Object.freeze({
+const BACKDROP_SLOT_PROPS = Object.freeze({
   // R-G.2 / R-AI.1 - backdrop derived from the live --fg token (matches
   // Modal). Adapts to any future theme override.
   sx: {
@@ -120,17 +107,10 @@ var BACKDROP_SLOT_PROPS = Object.freeze({
   }
 });
 function useDebounced(value, ms) {
-  var _React$useState = React.useState(value),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    out = _React$useState2[0],
-    setOut = _React$useState2[1];
-  React.useEffect(function () {
-    var t = setTimeout(function () {
-      return setOut(value);
-    }, ms);
-    return function () {
-      return clearTimeout(t);
-    };
+  const [out, setOut] = React.useState(value);
+  React.useEffect(() => {
+    const t = setTimeout(() => setOut(value), ms);
+    return () => clearTimeout(t);
   }, [value, ms]);
   return out;
 }
@@ -169,10 +149,10 @@ function normalize(s) {
  * Waterman and good enough for command-palette UX.
  */
 function subsequenceRun(hay, token) {
-  var i = 0;
-  var consecutive = 0;
-  var bestConsecutive = 0;
-  for (var h = 0; h < hay.length && i < token.length; h += 1) {
+  let i = 0;
+  let consecutive = 0;
+  let bestConsecutive = 0;
+  for (let h = 0; h < hay.length && i < token.length; h += 1) {
     if (hay[h] === token[i]) {
       i += 1;
       consecutive += 1;
@@ -191,13 +171,13 @@ function subsequenceRun(hay, token) {
  */
 function scoreToken(hay, token) {
   if (hay.startsWith(token)) return 100;
-  var wbIdx = hay.indexOf(" " + token);
+  const wbIdx = hay.indexOf(" " + token);
   if (wbIdx >= 0) return 80;
-  var subIdx = hay.indexOf(token);
+  const subIdx = hay.indexOf(token);
   if (subIdx >= 0) {
     return 60 - Math.min(20, subIdx * 0.1);
   }
-  var run = subsequenceRun(hay, token);
+  const run = subsequenceRun(hay, token);
   if (run > 0) return 40 * run;
   return 0;
 }
@@ -207,24 +187,15 @@ function scoreToken(hay, token) {
  * somewhere. Returns the average across tokens, or 0 if any token misses.
  */
 function scoreQuery(haystack, query) {
-  var hay = normalize(haystack);
-  var tokens = normalize(query).split(/\s+/).filter(Boolean);
+  const hay = normalize(haystack);
+  const tokens = normalize(query).split(/\s+/).filter(Boolean);
   if (tokens.length === 0) return 1;
   if (!hay) return 0;
-  var total = 0;
-  var _iterator = _createForOfIteratorHelper(tokens),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var token = _step.value;
-      var s = scoreToken(hay, token);
-      if (s === 0) return 0;
-      total += s;
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+  let total = 0;
+  for (const token of tokens) {
+    const s = scoreToken(hay, token);
+    if (s === 0) return 0;
+    total += s;
   }
   return total / tokens.length;
 }
@@ -239,177 +210,127 @@ function scoreQuery(haystack, query) {
  * the empty ones). Preserves the original "no query = browse" UX.
  */
 function filterGroups(groups, query) {
-  var q = query.trim();
+  const q = query.trim();
   if (!q) {
-    return groups.map(function (g) {
-      return {
-        id: g.id,
-        title: g.title,
-        items: g.items
-      };
-    }).filter(function (g) {
-      return g.items.length > 0;
-    });
+    return groups.map(g => ({
+      id: g.id,
+      title: g.title,
+      items: g.items
+    })).filter(g => g.items.length > 0);
   }
-  var out = [];
-  var _iterator2 = _createForOfIteratorHelper(groups),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var g = _step2.value;
-      var scored = [];
-      var _iterator3 = _createForOfIteratorHelper(g.items),
-        _step3;
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var it = _step3.value;
-          var hay = "".concat(it.label, " ").concat(it.keywords || "");
-          var s = scoreQuery(hay, q);
-          if (s > 0) scored.push({
-            item: it,
-            score: s
-          });
-        }
-      } catch (err) {
-        _iterator3.e(err);
-      } finally {
-        _iterator3.f();
-      }
-      if (scored.length === 0) continue;
-      scored.sort(function (a, b) {
-        return b.score - a.score;
-      });
-      out.push({
-        id: g.id,
-        title: g.title,
-        items: scored.map(function (s) {
-          return s.item;
-        })
+  const out = [];
+  for (const g of groups) {
+    const scored = [];
+    for (const it of g.items) {
+      const hay = `${it.label} ${it.keywords || ""}`;
+      const s = scoreQuery(hay, q);
+      if (s > 0) scored.push({
+        item: it,
+        score: s
       });
     }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
+    if (scored.length === 0) continue;
+    scored.sort((a, b) => b.score - a.score);
+    out.push({
+      id: g.id,
+      title: g.title,
+      items: scored.map(s => s.item)
+    });
   }
   return out;
 }
-function CommandPalette(_ref) {
-  var open = _ref.open,
-    onClose = _ref.onClose,
-    _ref$groups = _ref.groups,
-    groups = _ref$groups === void 0 ? [] : _ref$groups,
-    recentItems = _ref.recentItems,
-    pinnedItems = _ref.pinnedItems,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "Rechercher une page, une action…" : _ref$placeholder,
-    _ref$emptyState = _ref.emptyState,
-    emptyState = _ref$emptyState === void 0 ? "Aucun résultat." : _ref$emptyState,
-    onQueryChange = _ref.onQueryChange,
-    labels = _ref.labels;
-  var L = React.useMemo(function () {
-    return mergeLabels(DEFAULT_LABELS, labels);
-  }, [labels]);
-  var _React$useState3 = React.useState(""),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    query = _React$useState4[0],
-    setQuery = _React$useState4[1];
-  var debouncedQuery = useDebounced(query, DEBOUNCE_MS);
-  var _React$useState5 = React.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    highlight = _React$useState6[0],
-    setHighlight = _React$useState6[1];
-  var inputRef = React.useRef(null);
-  var listRef = React.useRef(null);
-  var titleId = React.useId();
-  var listId = React.useId();
-  var inputId = React.useId();
+function CommandPalette({
+  open,
+  onClose,
+  groups = [],
+  recentItems,
+  pinnedItems,
+  placeholder = "Rechercher une page, une action…",
+  emptyState = "Aucun résultat.",
+  onQueryChange,
+  labels
+}) {
+  const L = React.useMemo(() => mergeLabels(DEFAULT_LABELS, labels), [labels]);
+  const [query, setQuery] = React.useState("");
+  const debouncedQuery = useDebounced(query, DEBOUNCE_MS);
+  const [highlight, setHighlight] = React.useState(0);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const titleId = React.useId();
+  const listId = React.useId();
+  const inputId = React.useId();
 
   // R-F.2 - the v2 trap is wired on the Dialog Paper element, activated
   // only while the palette is open. MUI's own trap is disabled below.
-  var paperRef = React.useRef(null);
+  const paperRef = React.useRef(null);
   useFocusTrap(paperRef, !!open);
 
   // H4 — synthetic groups for pinnedItems / recentItems prepended to
   // the host's groups. Empty extras collapse the array to `groups`
   // verbatim — same reference when neither prop is set, so downstream
   // memoisation stays valid for the no-op case.
-  var allGroups = React.useMemo(function () {
-    var hasPinned = Array.isArray(pinnedItems) && pinnedItems.length > 0;
-    var hasRecent = Array.isArray(recentItems) && recentItems.length > 0;
+  const allGroups = React.useMemo(() => {
+    const hasPinned = Array.isArray(pinnedItems) && pinnedItems.length > 0;
+    const hasRecent = Array.isArray(recentItems) && recentItems.length > 0;
     if (!hasPinned && !hasRecent) return groups;
-    var out = [];
+    const out = [];
     if (hasPinned) {
       out.push({
         id: "_pinned",
         title: L.pinnedTitle,
-        items: pinnedItems !== null && pinnedItems !== void 0 ? pinnedItems : []
+        items: pinnedItems ?? []
       });
     }
     if (hasRecent) {
       out.push({
         id: "_recent",
         title: L.recentTitle,
-        items: recentItems !== null && recentItems !== void 0 ? recentItems : []
+        items: recentItems ?? []
       });
     }
-    return [].concat(out, _toConsumableArray(groups));
+    return [...out, ...groups];
   }, [pinnedItems, recentItems, groups, L.pinnedTitle, L.recentTitle]);
-  var visibleGroups = React.useMemo(function () {
-    return filterGroups(allGroups, debouncedQuery);
-  }, [allGroups, debouncedQuery]);
-  var itemsOnly = React.useMemo(function () {
-    return visibleGroups.flatMap(function (g) {
-      return g.items;
-    });
-  }, [visibleGroups]);
+  const visibleGroups = React.useMemo(() => filterGroups(allGroups, debouncedQuery), [allGroups, debouncedQuery]);
+  const itemsOnly = React.useMemo(() => visibleGroups.flatMap(g => g.items), [visibleGroups]);
 
   // Reset state on (re)open. Initial focus on the input is handled by
   // useFocusTrap above (the input carries `autoFocus`).
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!open) return;
     setQuery("");
     setHighlight(0);
   }, [open]);
 
   // Keep highlight valid when results shrink/grow
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (highlight >= itemsOnly.length) {
       setHighlight(Math.max(0, itemsOnly.length - 1));
     }
   }, [itemsOnly.length, highlight]);
 
   // Scroll the highlighted item into view
-  React.useEffect(function () {
-    var _listRef$current;
+  React.useEffect(() => {
     if (!open || itemsOnly.length === 0) return;
-    var node = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelector("[data-item-index=\"".concat(highlight, "\"]"));
+    const node = listRef.current?.querySelector(`[data-item-index="${highlight}"]`);
     if (node) node.scrollIntoView({
       block: "nearest"
     });
   }, [highlight, open, itemsOnly.length]);
-  var activate = function activate(index) {
-    var it = itemsOnly[index];
+  const activate = index => {
+    const it = itemsOnly[index];
     if (!it) return;
-    onClose === null || onClose === void 0 ? void 0 : onClose();
+    onClose?.();
     // Defer the action one tick so onClose can restore focus before any
     // navigation happens (consumer-side routing).
-    setTimeout(function () {
-      var _it$onSelect;
-      return (_it$onSelect = it.onSelect) === null || _it$onSelect === void 0 ? void 0 : _it$onSelect.call(it);
-    }, 0);
+    setTimeout(() => it.onSelect?.(), 0);
   };
-  var onInputKeyDown = function onInputKeyDown(e) {
+  const onInputKeyDown = e => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setHighlight(function (h) {
-        return itemsOnly.length === 0 ? 0 : (h + 1) % itemsOnly.length;
-      });
+      setHighlight(h => itemsOnly.length === 0 ? 0 : (h + 1) % itemsOnly.length);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
-      setHighlight(function (h) {
-        return itemsOnly.length === 0 ? 0 : (h - 1 + itemsOnly.length) % itemsOnly.length;
-      });
+      setHighlight(h => itemsOnly.length === 0 ? 0 : (h - 1 + itemsOnly.length) % itemsOnly.length);
     } else if (e.key === "Enter") {
       e.preventDefault();
       activate(highlight);
@@ -421,32 +342,30 @@ function CommandPalette(_ref) {
       setHighlight(Math.max(0, itemsOnly.length - 1));
     }
   };
-  var onInputChange = function onInputChange(e) {
+  const onInputChange = e => {
     setQuery(e.target.value);
-    onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(e.target.value);
+    onQueryChange?.(e.target.value);
     setHighlight(0);
   };
-  var activeItemId = itemsOnly[highlight] ? "".concat(listId, "-opt-").concat(highlight) : undefined;
+  const activeItemId = itemsOnly[highlight] ? `${listId}-opt-${highlight}` : undefined;
 
   // MUI v9: Dialog paper + backdrop bags forwarded through slotProps.
   // The paper slot embeds the per-instance focus-trap ref so we
   // useMemo it for reference stability across renders.
-  var slotProps = React.useMemo(function () {
-    return {
-      paper: {
-        ref: paperRef,
-        sx: {
-          width: "100%",
-          maxWidth: 640,
-          borderRadius: "var(--r-lg)",
-          boxShadow: "var(--shadow-lg)",
-          margin: "var(--s-3)",
-          overflow: "hidden"
-        }
-      },
-      backdrop: BACKDROP_SLOT_PROPS
-    };
-  }, []);
+  const slotProps = React.useMemo(() => ({
+    paper: {
+      ref: paperRef,
+      sx: {
+        width: "100%",
+        maxWidth: 640,
+        borderRadius: "var(--r-lg)",
+        boxShadow: "var(--shadow-lg)",
+        margin: "var(--s-3)",
+        overflow: "hidden"
+      }
+    },
+    backdrop: BACKDROP_SLOT_PROPS
+  }), []);
   return /*#__PURE__*/_jsxs(Dialog, {
     open: !!open,
     onClose: onClose,
@@ -551,10 +470,10 @@ function CommandPalette(_ref) {
           fontSize: "var(--text-sm)"
         },
         children: emptyState
-      }), function () {
-        var i = -1;
-        return visibleGroups.map(function (g) {
-          var headerId = "".concat(listId, "-h-").concat(g.id);
+      }), (() => {
+        let i = -1;
+        return visibleGroups.map(g => {
+          const headerId = `${listId}-h-${g.id}`;
           return /*#__PURE__*/_jsxs(Box, {
             role: "group",
             "aria-labelledby": headerId,
@@ -569,21 +488,17 @@ function CommandPalette(_ref) {
                 padding: "var(--s-2) var(--s-4) var(--s-1)"
               },
               children: g.title
-            }), g.items.map(function (entry) {
+            }), g.items.map(entry => {
               i += 1;
-              var isActive = i === highlight;
-              var idx = i;
+              const isActive = i === highlight;
+              const idx = i;
               return /*#__PURE__*/_jsxs(Box, {
                 role: "option",
-                id: "".concat(listId, "-opt-").concat(idx),
+                id: `${listId}-opt-${idx}`,
                 "aria-selected": isActive,
                 "data-item-index": idx,
-                onMouseEnter: function onMouseEnter() {
-                  return setHighlight(idx);
-                },
-                onClick: function onClick() {
-                  return activate(idx);
-                },
+                onMouseEnter: () => setHighlight(idx),
+                onClick: () => activate(idx),
                 sx: {
                   display: "flex",
                   alignItems: "center",
@@ -630,7 +545,7 @@ function CommandPalette(_ref) {
             })]
           }, g.id);
         });
-      }()]
+      })()]
     }), /*#__PURE__*/_jsxs(Box, {
       sx: {
         display: "flex",