@ogcio/design-system-react 1.20.0 → 1.22.0

package/dist/select/select-next.js

@@ -1,159 +1,166 @@
 "use client";
 import "@ogcio/design-system-react/browser-check";
-import { jsx as l, jsxs as V } from "react/jsx-runtime";
-import { forwardRef as W, useRef as b, useState as w, useImperativeHandle as X, Children as k, isValidElement as E, useEffect as M } from "react";
-import { cn as H } from "../cn.js";
-import { translate as Y } from "../i18n/utility.js";
-import { InputText as Z } from "../input-text/input-text.js";
-import { Popover as _ } from "../popover/popover.js";
-import { SelectMenu as B, SelectMenuOption as K, SelectMenuGroupItem as ee } from "./select-menu.js";
-import { SelectSearch as te } from "./select-search.js";
-const ne = W(
+import { jsxs as q, jsx as s } from "react/jsx-runtime";
+import { forwardRef as Z, useRef as v, useState as E, useImperativeHandle as _, Children as R, isValidElement as G, useEffect as P } from "react";
+import { cn as D } from "../cn.js";
+import { useDomId as B } from "../hooks/use-dom-id.js";
+import { translate as z } from "../i18n/utility.js";
+import { InputText as ee } from "../input-text/input-text.js";
+import { Popover as te } from "../popover/popover.js";
+import { SelectMenu as re, SelectMenuOption as F, SelectMenuGroupItem as ne } from "./select-menu.js";
+import { SelectSearch as oe } from "./select-search.js";
+const se = Z(
   ({
     children: S,
     value: p,
-    defaultValue: I = "",
-    onChange: d,
+    defaultValue: T = "",
+    onChange: b,
     onMenuClose: g,
-    enableSearch: v,
-    disabled: n,
-    name: a,
-    onBlur: i,
-    placeholder: R,
-    ...h
-  }, z) => {
-    const u = b(null), N = b(null), G = b(null), P = b(!1), [r, $] = w(
-      I || p
-    ), [F, T] = w(!1), [J, j] = w("");
-    X(z, () => u.current);
-    const O = k.toArray(S).filter(
-      (e) => E(e)
+    enableSearch: d,
+    disabled: r,
+    name: i,
+    onBlur: u,
+    placeholder: $,
+    ...x
+  }, Q) => {
+    const c = v(null), O = v(null), j = v(null), A = v(!1), [n, M] = E(
+      T || p
+    ), [H, h] = E(!1), [U, K] = E("");
+    _(Q, () => c.current);
+    const k = R.toArray(S).filter(
+      (e) => G(e)
     );
-    M(() => {
-      var c, s;
+    P(() => {
+      var l, a;
       let e;
-      for (const o of O) {
-        const t = (c = o.type) == null ? void 0 : c.componentType;
+      for (const o of k) {
+        const t = (l = o.type) == null ? void 0 : l.componentType;
         if (t === "SelectItemNext") {
           const f = o;
-          if (f.props.value === r) {
+          if (f.props.value === n) {
             e = f;
             break;
           }
         }
         if (t === "SelectGroupItemNext") {
-          const f = o, m = k.toArray(f.props.children).find(
+          const f = o, m = R.toArray(f.props.children).find(
             (y) => {
-              var D;
-              return ((D = y == null ? void 0 : y.type) == null ? void 0 : D.componentType) === "SelectItemNext" && y.props.value === r;
+              var V;
+              return ((V = y == null ? void 0 : y.type) == null ? void 0 : V.componentType) === "SelectItemNext" && y.props.value === n;
             }
           );
-          if (m && E(m)) {
+          if (m && G(m)) {
             e = m;
             break;
           }
         }
       }
       if (e) {
-        const o = ((s = e.props.children) == null ? void 0 : s.toString()) || "";
-        j(o);
+        const o = ((a = e.props.children) == null ? void 0 : a.toString()) || "";
+        K(o);
       } else
-        j(""), u.current && (u.current.value = "");
-    }, [r, O]), M(() => {
-      p !== void 0 && $(p);
+        K(""), c.current && (c.current.value = "");
+    }, [n, k]), P(() => {
+      p !== void 0 && M(p);
     }, [p]);
-    const C = () => {
+    const w = () => {
       var e;
-      T(!0), (e = u.current) == null || e.focus();
+      h(!0), (e = c.current) == null || e.focus();
+    }, W = (e) => {
+      h(e), g && !e && g();
     }, L = (e) => {
-      T(e), g && !e && g();
-    }, A = (e) => {
-      if (T(!1), $(e), d && (d({
-        target: { name: a, value: e },
-        currentTarget: { name: a, value: e },
+      if (h(!1), M(e), b && (b({
+        target: { name: i, value: e },
+        currentTarget: { name: i, value: e },
         type: "change",
         bubbles: !0
-      }), i)) {
-        const s = {
-          target: { name: a, value: e },
-          currentTarget: { name: a, value: e },
+      }), u)) {
+        const a = {
+          target: { name: i, value: e },
+          currentTarget: { name: i, value: e },
           type: "blur",
           bubbles: !0
         };
-        i == null || i(s);
+        u == null || u(a);
       }
-    }, Q = (e) => {
-      e.key === "Enter" && !n && C();
-    }, U = (e) => {
-      var s, o;
-      const c = e.relatedTarget;
-      if (c && ((s = G.current) != null && s.contains(c) || (o = N.current) != null && o.contains(c)) || P.current) {
-        setTimeout(() => P.current = !1, 0);
+    }, X = (e) => {
+      !r && (e.key === "Enter" || e.key === "NumpadEnter") ? (e.preventDefault(), w()) : e.key === "Escape" && h(!1);
+    }, Y = (e) => {
+      var a, o;
+      const l = e.relatedTarget;
+      if (l && ((a = j.current) != null && a.contains(l) || (o = O.current) != null && o.contains(l)) || A.current) {
+        setTimeout(() => A.current = !1, 0);
         return;
       }
-      if (i) {
-        const t = p ?? r ?? "";
-        i({
-          target: { name: a, value: t },
-          currentTarget: { name: a, value: t },
+      if (u) {
+        const t = p ?? n ?? "";
+        u({
+          target: { name: i, value: t },
+          currentTarget: { name: i, value: t },
           type: "blur",
           bubbles: !0
         });
       }
-    };
-    return v ? /* @__PURE__ */ l(
-      te,
-      {
-        ...h,
-        value: r,
-        onChange: d,
-        disabled: n,
-        ref: u,
-        onBlur: i,
-        name: a,
-        placeholder: R,
-        children: S
-      }
-    ) : /* @__PURE__ */ V(
+    }, I = B(), C = x["aria-label"] ?? z("select.next.placeholder", { defaultValue: "Select" });
+    return P(() => {
+      c.current && c.current.setAttribute("aria-labelledby", I);
+    }, [I, d]), d ? /* @__PURE__ */ q("div", { className: D("gi-select-next", x.className), children: [
+      /* @__PURE__ */ s("span", { id: I, className: "gi-sr-only", children: C }),
+      /* @__PURE__ */ s(
+        oe,
+        {
+          ...x,
+          value: n,
+          onChange: b,
+          disabled: r,
+          ref: c,
+          onBlur: u,
+          name: i,
+          placeholder: $,
+          children: S
+        }
+      )
+    ] }) : /* @__PURE__ */ q(
       "div",
       {
-        "aria-disabled": n,
-        className: H("gi-select-next", h.className),
+        "aria-disabled": r,
+        className: D("gi-select-next", x.className),
         children: [
-          /* @__PURE__ */ l(
-            Z,
+          /* @__PURE__ */ s("span", { id: I, className: "gi-sr-only", children: C }),
+          /* @__PURE__ */ s(
+            ee,
             {
-              ...h,
+              ...x,
               autoComplete: "off",
-              "aria-label": "Select an option",
-              "aria-disabled": n,
-              disabled: n,
-              placeholder: R ?? Y("select.next.placeholder", { defaultValue: "Search" }),
+              "aria-label": C,
+              "aria-disabled": r,
+              disabled: r,
+              placeholder: $ ?? z("select.next.placeholder", { defaultValue: "Search" }),
               readOnly: !0,
               inputClassName: "gi-cursor-pointer",
-              iconEndClassName: H({
-                "gi-cursor-pointer": !n,
-                "gi-cursor-not-allowed": n,
-                "gi-pointer-events-none": n
+              iconEndClassName: D({
+                "gi-cursor-pointer": !r,
+                "gi-cursor-not-allowed": r,
+                "gi-pointer-events-none": r
               }),
-              iconEnd: "keyboard_arrow_down",
-              onIconEndClick: C,
-              ref: u,
-              iconEndRef: N,
-              value: J,
-              onClick: C,
-              onKeyDown: Q,
-              onBlur: U,
-              name: a
+              iconEnd: H ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              onIconEndClick: w,
+              ref: c,
+              iconEndRef: O,
+              value: U,
+              onClick: w,
+              onKeyDown: X,
+              onBlur: Y,
+              name: i
             }
           ),
-          /* @__PURE__ */ l(
-            _,
+          /* @__PURE__ */ s(
+            te,
             {
-              triggerRef: u,
-              extraRefs: [N],
-              onOpenChange: L,
-              open: F,
+              triggerRef: c,
+              extraRefs: [O],
+              onOpenChange: W,
+              open: H,
               maxHeight: 304,
               options: {
                 placement: "bottom-start",
@@ -163,47 +170,47 @@ const ne = W(
                   { name: "flip", options: { fallbackPlacements: ["top"] } }
                 ]
               },
-              children: /* @__PURE__ */ l(
-                B,
+              children: /* @__PURE__ */ s(
+                re,
                 {
-                  ref: G,
-                  onChange: A,
-                  enableSearch: v,
-                  children: O.map((e, c) => {
+                  ref: j,
+                  onChange: L,
+                  enableSearch: d,
+                  children: k.map((e, l) => {
                     var o;
-                    const s = (o = e == null ? void 0 : e.type) == null ? void 0 : o.componentType;
-                    if (s === "SelectItemNext") {
+                    const a = (o = e == null ? void 0 : e.type) == null ? void 0 : o.componentType;
+                    if (a === "SelectItemNext") {
                       const t = e;
-                      return /* @__PURE__ */ l(
-                        K,
+                      return /* @__PURE__ */ s(
+                        F,
                         {
                           ...t.props,
-                          selected: (r == null ? void 0 : r.toString()) === t.props.value.toString(),
-                          index: c
+                          selected: (n == null ? void 0 : n.toString()) === t.props.value.toString(),
+                          index: l
                         },
                         `SelectItemNext-${t.props.value.toString()}`
                       );
-                    } else if (s === "SelectGroupItemNext") {
-                      const t = e, f = k.toArray(t.props.children).filter((m) => E(m)).map((m, y) => {
-                        const x = m.props;
-                        return /* @__PURE__ */ l(
-                          K,
+                    } else if (a === "SelectGroupItemNext") {
+                      const t = e, f = R.toArray(t.props.children).filter((m) => G(m)).map((m, y) => {
+                        const N = m.props;
+                        return /* @__PURE__ */ s(
+                          F,
                           {
-                            ...x,
-                            selected: (r == null ? void 0 : r.toString()) === x.value.toString(),
-                            onChange: A,
+                            ...N,
+                            selected: (n == null ? void 0 : n.toString()) === N.value.toString(),
+                            onChange: L,
                             index: y
                           },
-                          `SelectGroupItemNext-SelectItemNext-${x.value.toString()}`
+                          `SelectGroupItemNext-SelectItemNext-${N.value.toString()}`
                         );
                       });
-                      return /* @__PURE__ */ l(
-                        ee,
+                      return /* @__PURE__ */ s(
+                        ne,
                         {
                           label: t.props.label,
                           children: f
                         },
-                        `option-group-${c}`
+                        `option-group-${l}`
                       );
                     }
                     return null;
@@ -216,35 +223,35 @@ const ne = W(
       }
     );
   }
-), q = () => null;
-Object.defineProperty(q, "componentType", {
+), J = () => null;
+Object.defineProperty(J, "componentType", {
   value: "SelectItemNext",
   writable: !1,
   enumerable: !1
 });
-const re = () => null;
-Object.defineProperty(re, "componentType", {
+const le = () => null;
+Object.defineProperty(le, "componentType", {
   value: "SelectGroupItemNext",
   writable: !1,
   enumerable: !1
 });
-const me = (S) => {
-  const { options: p, defaultValue: I, onChange: d, error: g } = S;
-  return /* @__PURE__ */ l(
-    ne,
+const Se = (S) => {
+  const { options: p, defaultValue: T, onChange: b, error: g } = S;
+  return /* @__PURE__ */ s(
+    se,
     {
       ...S,
-      defaultValue: I,
-      onChange: d,
+      defaultValue: T,
+      onChange: b,
       "data-table-cell": "true",
       "data-table-cell-error-state": g == null ? void 0 : g.toString(),
-      children: p.map(({ value: v, label: n }) => /* @__PURE__ */ l(q, { value: v, children: n }, `${v}-${n}`))
+      children: p.map(({ value: d, label: r }) => /* @__PURE__ */ s(J, { value: d, children: r }, `${d}-${r}`))
     }
   );
 };
 export {
-  re as SelectGroupItemNext,
-  q as SelectItemNext,
-  ne as SelectNext,
-  me as SelectNextTableCell
+  le as SelectGroupItemNext,
+  J as SelectItemNext,
+  se as SelectNext,
+  Se as SelectNextTableCell
 };