@ogcio/design-system-react 1.22.0 → 1.23.0

package/dist/_commonjsHelpers-DaMA6jEr.js

@@ -0,0 +1,8 @@
+var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function l(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+export {
+  o as c,
+  l as g
+};

package/dist/accordion/accordion-item.js

@@ -1,9 +1,8 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
-import { jsxs as r, Fragment as u, jsx as n } from "react/jsx-runtime";
+import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
 import { useState as y, useRef as b } from "react";
 import { c as h } from "../index-CB-zPpNk.js";
-import { cn as d } from "../cn.js";
+import { cn as r } from "../cn.js";
 import { Icon as w } from "../icon/icon.js";
 const I = h({
   variants: {
@@ -12,18 +11,18 @@ const I = h({
       small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
     }
   }
-}), j = ({
+}), N = ({
   defaultExpanded: c,
   children: s,
   label: t,
   disabled: e,
   dataTestid: l,
   iconStart: m,
-  variant: i = "default"
+  variant: n = "default"
 }) => {
   const [o, a] = y(c), g = b(null), p = `${t}-button`, f = `${t}-panel`;
-  return /* @__PURE__ */ r(u, { children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ i(
       "div",
       {
         ref: g,
@@ -36,14 +35,14 @@ const I = h({
         },
         tabIndex: 0,
         className: "gi-accordion",
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ d(
           "div",
           {
-            className: d("gi-accordion-header", I({ variant: i })),
+            className: r("gi-accordion-header", I({ variant: n })),
             children: [
               t,
               " ",
-              /* @__PURE__ */ n(
+              /* @__PURE__ */ i(
                 w,
                 {
                   icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down"
@@ -54,17 +53,17 @@ const I = h({
         )
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ i(
       "div",
       {
         id: f,
         role: "region",
         "aria-labelledby": p,
-        className: d("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+        className: r("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
           "gi-block": o,
           "gi-hidden": !o,
-          "gi-text-md": i === "default",
-          "gi-text-sm": i === "small"
+          "gi-text-md": n === "default",
+          "gi-text-sm": n === "small"
         }),
         children: s
       }
@@ -72,5 +71,5 @@ const I = h({
   ] });
 };
 export {
-  j as AccordionItem
+  N as AccordionItem
 };

package/dist/alert/alert.js

@@ -1,15 +1,14 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
 import { useState as v } from "react";
 import { cn as c } from "../cn.js";
 import { translate as D } from "../i18n/utility.js";
 import { Icon as w } from "../icon/icon.js";
 import { IconButton as x } from "../icon-button/icon-button.js";
 import { alertVariants as I } from "./variants.js";
-const V = ({ variant: r }) => {
+const V = ({ variant: e }) => {
   let a;
-  switch (r) {
+  switch (e) {
     case "warning": {
       a = "warning";
       break;
@@ -27,53 +26,53 @@ const V = ({ variant: r }) => {
   }
   return a;
 };
-function y({
-  title: r,
+function q({
+  title: e,
   children: a,
-  variant: e = "info",
-  showIcon: o = !0,
+  variant: r = "info",
+  showIcon: l = !0,
   dismissible: t,
-  onClose: i,
-  className: l,
+  onClose: s,
+  className: o,
   ...m
 }) {
   const [d, u] = v(!1), { base: f, heading: p, container: g, dismiss: b, baseDismissible: h } = I({
-    variant: e
+    variant: r
   }), k = t ? h : f;
   return d ? null : /* @__PURE__ */ n(
     "div",
     {
-      className: c(k(), l, "gi-not-prose"),
+      className: c(k(), o, "gi-not-prose"),
       role: "alert",
       "aria-live": "assertive",
       ...m,
       children: [
-        o ? /* @__PURE__ */ s(
+        l ? /* @__PURE__ */ i(
           w,
           {
-            icon: V({ variant: e }),
+            icon: V({ variant: r }),
             ariaHidden: !0,
             className: "gi-alert-icon",
-            "data-variant": e
+            "data-variant": r
           }
         ) : null,
         /* @__PURE__ */ n(
           "div",
           {
             className: c(g(), {
-              "gi-gap-1": r
+              "gi-gap-1": e
             }),
             children: [
-              r && /* @__PURE__ */ s("p", { className: p(), children: r }),
+              e && /* @__PURE__ */ i("p", { className: p(), children: e }),
               a
             ]
           }
         ),
-        t && /* @__PURE__ */ s(
+        t && /* @__PURE__ */ i(
           x,
           {
             onClick: (N) => {
-              u(!0), i == null || i(N);
+              u(!0), s == null || s(N);
             },
             className: b(),
             size: "small",
@@ -90,5 +89,5 @@ function y({
   );
 }
 export {
-  y as Alert
+  q as Alert
 };

package/dist/autocomplete/autocomplete.js

@@ -1,190 +1,188 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
-import { jsxs as J, jsx as b } from "react/jsx-runtime";
-import { forwardRef as Q, useRef as D, useImperativeHandle as W, useEffect as Y, createElement as Z, Children as ee, isValidElement as te } from "react";
-import { cn as G } from "../cn.js";
+import { jsxs as q, jsx as f } from "react/jsx-runtime";
+import { forwardRef as z, useRef as N, useImperativeHandle as J, useEffect as Q, useCallback as W, createElement as Y, Children as Z, isValidElement as ee } from "react";
+import { cn as D } from "../cn.js";
+import { useDomId as te } from "../hooks/use-dom-id.js";
 import { translate as P } from "../i18n/utility.js";
 import { InputText as oe } from "../input-text/input-text.js";
 import { Popover as ne } from "../popover/popover.js";
-import { SelectMenu as ae, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
-import { AUTOCOMPLETE_ACTIONS as le } from "./types.js";
-import { useAutocompleteController as pe } from "./use-autocomplete-controller.js";
+import { SelectMenu as ae, SelectMenuOption as G, SelectMenuGroupItem as re } from "../select/select-menu.js";
+import { cycleEnabledIndex as le } from "../utilities.js";
+import { AUTOCOMPLETE_ACTIONS as pe } from "./types.js";
+import { useAutocompleteController as ie } from "./use-autocomplete-controller.js";
 const {
-  ON_RESET: ie,
-  ON_SELECT_ITEM: se,
-  SET_INPUT_VALUE: R,
-  SET_IS_OPEN: c,
-  TOGGLE_CLEAR_BUTTON: S,
-  SET_HIGHLIGHTED_INDEX: B,
-  SET_VALUE: ce
-} = le, ue = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", C = (n, a) => (p) => {
-  n && n({
-    target: { name: a, value: p },
-    currentTarget: { name: a, value: p },
+  ON_RESET: se,
+  ON_SELECT_ITEM: ce,
+  SET_INPUT_VALUE: L,
+  SET_IS_OPEN: s,
+  TOGGLE_CLEAR_BUTTON: C,
+  SET_HIGHLIGHTED_INDEX: ue,
+  SET_VALUE: de
+} = pe, me = (a) => a ? "keyboard_arrow_up" : "keyboard_arrow_down", O = (a, r) => (p) => {
+  a && a({
+    target: { name: r, value: p },
+    currentTarget: { name: r, value: p },
     type: "change",
     bubbles: !0,
     isTrusted: !0
   });
-}, M = (n, a) => (p) => {
-  n && n({
-    target: { name: a, value: p },
-    currentTarget: { name: a, value: p },
+}, fe = (a, r) => (p) => {
+  a && a({
+    target: { name: r, value: p },
+    currentTarget: { name: r, value: p },
     type: "blur",
     bubbles: !0,
     isTrusted: !0
   });
-}, Ae = Q(
-  (n, a) => {
-    var N;
-    const p = D(null), {
-      disabled: r,
-      children: m,
+}, xe = z(
+  (a, r) => {
+    var x;
+    const p = N(null), {
+      disabled: l,
+      children: u,
       placeholder: h,
       onSelectItem: y,
       isLoading: g,
-      freeSolo: s = !1,
-      onChange: E,
-      onBlur: A,
-      name: u,
-      value: O,
-      id: U
-    } = n, _ = D(!1), {
+      freeSolo: i = !1,
+      onChange: b,
+      onBlur: R,
+      name: d,
+      value: E,
+      id: B
+    } = a, v = N(!1), {
       state: t,
       dispatch: o,
-      inputRef: f,
-      getOptionLabelByValue: x,
-      listRef: w,
-      debouncedFilter: V
-    } = pe({
-      ...n,
-      onChange: C(E, u)
-    });
-    W(a, () => f.current), Y(() => {
-      O !== void 0 && (o({ type: ce, payload: O }), o({
-        type: R,
-        payload: x(m, O)
-      }), o({ type: S }));
-    }, [O]);
-    const H = (e) => {
-      o({ type: c, payload: e }), e || o({ type: S, payload: !1 });
-    }, j = () => {
-      o({ type: ie }), o({ type: c, payload: !1 }), C(E, u)("");
-    }, $ = (e) => {
-      o({ type: R, payload: e }), s && C(E, u)(e), e && o({ type: c, payload: !0 }), V(e);
-    }, K = (e) => {
+      inputRef: m,
+      getOptionLabelByValue: S,
+      listRef: A,
+      debouncedFilter: M
+    } = ie({
+      ...a,
+      onChange: O(b, d)
+    }), _ = te();
+    J(r, () => m.current), Q(() => {
+      E !== void 0 && (o({ type: de, payload: E }), o({
+        type: L,
+        payload: S(u, E)
+      }), o({ type: C }));
+    }, [E]);
+    const w = a["aria-label"] ?? P("autocomplete.placeholder", { defaultValue: "Type to Search" }), U = (e) => {
+      o({ type: s, payload: e }), e || o({ type: C, payload: !1 });
+    }, V = () => {
+      o({ type: se }), o({ type: s, payload: !1 }), O(b, d)("");
+    }, H = (e) => {
+      o({ type: L, payload: e }), i && O(b, d)(e), e && o({ type: s, payload: !0 }), M(e);
+    }, j = (e) => {
       const {
-        target: { value: l }
+        target: { value: n }
       } = e;
-      e.__origin === "clear_button" ? j() : $(l), o({ type: S }), setTimeout(() => {
-        var d;
-        return (d = f.current) == null ? void 0 : d.focus();
+      e.__origin === "clear_button" ? V() : H(n), o({ type: C }), setTimeout(() => {
+        var c;
+        return (c = m.current) == null ? void 0 : c.focus();
       });
-    }, F = () => {
+    }, $ = () => {
       var e;
-      o({ type: c, payload: !t.isOpen }), (e = f.current) == null || e.focus();
-    }, X = () => {
+      o({ type: s, payload: !t.isOpen }), (e = m.current) == null || e.focus();
+    }, K = () => {
       t.isOpen || o({
-        type: c,
+        type: s,
         payload: !0
       });
-    }, v = (e) => {
+    }, T = (e) => {
       o({
-        type: se,
+        type: ce,
         payload: {
-          inputValue: x(m, e),
+          inputValue: S(u, e),
           value: e
         }
-      }), C(E, u)(e), setTimeout(() => {
-        var l;
-        M(A, u)(e), (l = f.current) == null || l.blur();
+      }), O(b, d)(e), setTimeout(() => {
+        var n;
+        (n = m.current) == null || n.focus();
       }, 0), y == null || y(e);
-    }, q = (e) => {
-      var i, I;
-      const { relatedTarget: l } = e;
-      if (l && ((i = w.current) != null && i.contains(l) || (I = p.current) != null && I.contains(l)) || _.current) {
-        setTimeout(() => _.current = !1, 0);
+    }, F = (e) => {
+      var I, k;
+      const { relatedTarget: n } = e;
+      if (n && ((I = A.current) != null && I.contains(n) || (k = p.current) != null && k.contains(n)) || v.current) {
+        setTimeout(() => v.current = !1, 0);
         return;
       }
-      const d = t.value ?? t.inputValue ?? "";
-      M(A, u)(d);
-    }, z = (e) => {
-      const l = t.autocompleteOptions.length, d = (i, I) => {
-        let T = i;
-        for (let k = 0; k < l; k++)
-          if (T = (T + I + l) % l, !t.autocompleteOptions[T].props.disabled)
-            return T;
-        return -1;
-      };
-      switch (e.key) {
-        case "ArrowDown": {
-          e.preventDefault(), o({
-            type: B,
-            payload: t.isOpen ? d(t.highlightedIndex, 1) : 0
-          }), o({ type: c, payload: !0 });
-          break;
-        }
-        case "ArrowUp": {
-          e.preventDefault(), o({
-            type: B,
-            payload: d(t.highlightedIndex, -1)
-          }), o({ type: c, payload: !0 });
-          break;
-        }
-        case "Enter":
-        case "NumpadEnter": {
-          if (e.preventDefault(), t.highlightedIndex >= 0) {
-            const i = t.autocompleteOptions[t.highlightedIndex];
-            i && i.props.value && !i.props.disabled && v(i.props.value);
+      const c = t.value ?? t.inputValue ?? "";
+      fe(R, d)(c);
+    }, X = W(
+      (e) => {
+        switch (e.key) {
+          case "ArrowDown":
+          case "ArrowUp": {
+            e.preventDefault();
+            const n = () => t.highlightedIndex === -1 ? c === -1 ? 0 : -1 : t.highlightedIndex, c = e.key === "ArrowDown" ? 1 : -1, I = le(
+              t.autocompleteOptions,
+              n(),
+              c
+            );
+            o({ type: ue, payload: I }), o({ type: s, payload: !0 });
+            break;
+          }
+          case "Enter":
+          case "NumpadEnter": {
+            if (e.preventDefault(), t.highlightedIndex >= 0) {
+              const n = t.autocompleteOptions[t.highlightedIndex];
+              n && n.props.value && !n.props.disabled && T(n.props.value);
+            }
+            break;
+          }
+          case "Tab": {
+            o({ type: s, payload: !1 });
+            break;
+          }
+          case "Escape": {
+            o({ type: s, payload: !1 });
+            break;
           }
-          break;
-        }
-        case "Escape": {
-          o({ type: c, payload: !1 });
-          break;
         }
-      }
-    };
-    return /* @__PURE__ */ J(
+      },
+      [t.highlightedIndex]
+    );
+    return /* @__PURE__ */ q(
       "div",
       {
-        "aria-disabled": r,
-        className: G("gi-autocomplete gi-not-prose", n.className),
+        "aria-disabled": l,
+        className: D("gi-autocomplete gi-not-prose", a.className),
         children: [
-          /* @__PURE__ */ b(
+          /* @__PURE__ */ f("span", { id: _, className: "gi-sr-only", children: w }),
+          /* @__PURE__ */ f(
             oe,
             {
               autoComplete: "off",
-              id: U,
-              name: u,
-              onKeyDown: z,
-              onIconEndClick: F,
-              onChange: K,
-              onClick: X,
-              onBlur: q,
+              id: B,
+              name: d,
+              onKeyDown: X,
+              onIconEndClick: $,
+              onChange: j,
+              onClick: K,
+              onBlur: F,
               clearButtonEnabled: t.isClearButtonEnabled,
               inputActionPosition: "beforeSuffix",
-              "aria-label": P("autocomplete.placeholder", {
-                defaultValue: "Type to Search"
-              }),
-              "aria-disabled": r,
-              disabled: r,
+              "aria-label": w,
+              "aria-labelledby": _,
+              "aria-disabled": l,
+              disabled: l,
               placeholder: h ?? P("autocomplete.placeholder", { defaultValue: "Type to Search" }),
-              iconEndClassName: G({
-                "gi-cursor-pointer": !r && !s,
-                "gi-cursor-not-allowed gi-pointer-events-none": r && !s
+              iconEndClassName: D({
+                "gi-cursor-pointer": !l && !i,
+                "gi-cursor-not-allowed gi-pointer-events-none": l && !i
               }),
-              iconEnd: s ? void 0 : ue(t.isOpen),
-              ref: f,
+              iconEnd: i ? void 0 : me(t.isOpen),
+              ref: m,
               iconEndRef: p,
               value: t.inputValue,
               "data-highlighted-index": t.highlightedIndex
             }
           ),
-          /* @__PURE__ */ b(
+          /* @__PURE__ */ f(
             ne,
             {
-              onOpenChange: H,
-              triggerRef: f,
+              onOpenChange: U,
+              triggerRef: m,
               extraRefs: [p],
               open: t.isOpen,
               maxHeight: 304,
@@ -199,17 +197,17 @@ const {
                   }
                 ]
               },
-              children: /* @__PURE__ */ b(
+              children: /* @__PURE__ */ f(
                 ae,
                 {
-                  onChange: v,
+                  onChange: T,
                   isLoading: g,
-                  showNoData: !((N = t.autocompleteOptions) != null && N.length),
-                  ref: w,
-                  children: de(
+                  showNoData: !((x = t.autocompleteOptions) != null && x.length),
+                  ref: A,
+                  children: he(
                     t.autocompleteOptions,
                     t,
-                    v
+                    T
                   )
                 }
               )
@@ -219,33 +217,33 @@ const {
       }
     );
   }
-), de = (n, a, p) => n.map((r, m) => {
-  if (a.optionType === "AutocompleteItem")
-    return /* @__PURE__ */ Z(
-      L,
+), he = (a, r, p) => a.map((l, u) => {
+  if (r.optionType === "AutocompleteItem")
+    return /* @__PURE__ */ Y(
+      G,
       {
-        ...r.props,
-        key: `AutocompleteItem-${r.props.value}`,
-        selected: a.value === r.props.value,
-        isHighlighted: m === a.highlightedIndex,
-        index: m
+        ...l.props,
+        key: `AutocompleteItem-${l.props.value}`,
+        selected: r.value === l.props.value,
+        isHighlighted: u === r.highlightedIndex,
+        index: u
       }
     );
-  if (a.optionType === "AutocompleteGroupItem") {
-    const h = r, y = ee.toArray(h.props.children).filter((g) => te(g)).map((g) => {
-      const s = g.props;
-      return /* @__PURE__ */ b(
-        L,
+  if (r.optionType === "AutocompleteGroupItem") {
+    const h = l, y = Z.toArray(h.props.children).filter((g) => ee(g)).map((g) => {
+      const i = g.props;
+      return /* @__PURE__ */ f(
+        G,
         {
-          ...s,
-          selected: a.value.toString() === s.value.toString(),
+          ...i,
+          selected: r.value.toString() === i.value.toString(),
           onChange: p,
-          index: m
+          index: u
         },
-        `SelectGroupItemNext-SelectItemNext-${s.value.toString()}`
+        `SelectGroupItemNext-SelectItemNext-${i.value.toString()}`
       );
     });
-    return /* @__PURE__ */ b(
+    return /* @__PURE__ */ f(
       re,
       {
         label: h.props.label,
@@ -255,21 +253,21 @@ const {
     );
   }
   return null;
-}), me = () => null;
-Object.defineProperty(me, "componentType", {
+}), ye = () => null;
+Object.defineProperty(ye, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
 });
-const fe = () => null;
-Object.defineProperty(fe, "componentType", {
+const ge = () => null;
+Object.defineProperty(ge, "componentType", {
   value: "AutocompleteGroupItem",
   writable: !1,
   enumerable: !1
 });
 export {
-  Ae as Autocomplete,
-  fe as AutocompleteGroupItem,
-  me as AutocompleteItem,
-  de as renderSelectMenuOptions
+  xe as Autocomplete,
+  ge as AutocompleteGroupItem,
+  ye as AutocompleteItem,
+  he as renderSelectMenuOptions
 };

package/dist/autocomplete/use-autocomplete-controller.js

@@ -1,4 +1,4 @@
-import { l as F } from "../lodash-D1c5hFAM.js";
+import { l as F } from "../lodash-LsP9-6SV.js";
 import { useRef as g, useMemo as G, Children as C, useReducer as X, useEffect as A, isValidElement as h } from "react";
 import { useScrollHighlightedItem as Y } from "../hooks/use-scroll-highlighted-item.js";
 import { safeCloneElement as j } from "../utils/utilities.js";

package/dist/browser-support/runtime.js

@@ -1,5 +1,4 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 const w = {
   desktop: { chromium: 109, gecko: 128, webkit: 16 },
   mobile: { chromium: 114, gecko: 128, webkit: 16 }
@@ -269,7 +268,7 @@ typeof document < "u" && queueMicrotask(() => {
     console.error("[browser-check] failed to run", e);
   });
 });
-const U = {
+const I = {
   extractFirefoxMajorVersion: B,
   extractSafariMajorVersion: L,
   normalizeBrand: V,
@@ -279,5 +278,5 @@ const U = {
   SUPPORT_POLICY: w
 };
 export {
-  U as __test
+  I as __test
 };