@ogcio/design-system-react 1.15.2 → 1.16.0

package/dist/select/select-menu.js

@@ -1,29 +1,27 @@
 "use client";
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import { forwardRef as H, useState as N, useEffect as A, Children as K, isValidElement as P, cloneElement as v } from "react";
-import { cn as F } from "../cn.js";
-import { translate as B } from "../i18n/utility.js";
-import { Icon as J } from "../icon/icon.js";
-import { InputText as Q } from "../input-text/input-text.js";
-import { Label as U } from "../label/label.js";
-import { Spinner as W } from "../spinner/spinner.js";
-const se = H(
-  ({ children: o, className: i, onChange: s, enableSearch: r, isLoading: c, showNoData: m }, g) => {
-    const [l, y] = N(""), [O, f] = N(!1), [S, w] = N([]);
-    A(() => {
-      f(!1), m && setTimeout(() => f(!0), 0);
-    }, [m]), A(() => {
-      const R = K.toArray(o).filter(
-        (a) => P(a)
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import { forwardRef as F, useState as $, useEffect as R, Children as z, isValidElement as A, cloneElement as v } from "react";
+import { cn as P } from "../cn.js";
+import { translate as K } from "../i18n/utility.js";
+import { Icon as q } from "../icon/icon.js";
+import { InputText as H } from "../input-text/input-text.js";
+import { Label as J } from "../label/label.js";
+import { Spinner as Q } from "../spinner/spinner.js";
+const re = F(
+  ({ children: o, className: i, onChange: s, enableSearch: r, isLoading: c, showNoData: d }, g) => {
+    const [l, O] = $(""), [S, w] = $([]);
+    R(() => {
+      const u = z.toArray(o).filter(
+        (a) => A(a)
       ).map((a) => {
-        var L, M, T, I, k, E;
-        const q = (L = a == null ? void 0 : a.type) == null ? void 0 : L.componentType, D = l.toLowerCase();
-        switch (q) {
+        var x, L, M, I, T, k;
+        const B = (x = a == null ? void 0 : a.type) == null ? void 0 : x.componentType, b = l.toLowerCase();
+        switch (B) {
           case "SelectMenuOption": {
             const e = a;
             if (typeof e.props.value == "string") {
-              const G = ((I = (T = (M = e == null ? void 0 : e.props) == null ? void 0 : M.children) == null ? void 0 : T.toString()) == null ? void 0 : I.toLowerCase()) || "", j = (E = (k = e == null ? void 0 : e.props) == null ? void 0 : k.value) == null ? void 0 : E.toLowerCase();
-              if (G.includes(D) || j.includes(D))
+              const D = ((I = (M = (L = e == null ? void 0 : e.props) == null ? void 0 : L.children) == null ? void 0 : M.toString()) == null ? void 0 : I.toLowerCase()) || "", E = (k = (T = e == null ? void 0 : e.props) == null ? void 0 : T.value) == null ? void 0 : k.toLowerCase();
+              if (D.includes(b) || E.includes(b))
                 return v(e, {
                   onChange: s,
                   enableSearch: r
@@ -32,116 +30,116 @@ const se = H(
             break;
           }
           case "SelectMenuGroupItem": {
-            const e = a, C = K.toArray(
+            const e = a, G = z.toArray(
               e.props.children
-            ).filter((t) => P(t)).map((t) => {
+            ).filter((t) => A(t)).map((t) => {
               var p;
               return ((p = t == null ? void 0 : t.type) == null ? void 0 : p.componentType) === "SelectMenuOption" ? v(t, { onChange: s }) : null;
             }).filter(
               (t) => t !== null
             ).filter((t) => {
-              var V, $, z;
-              const p = (($ = (V = t.props.children) == null ? void 0 : V.toString()) == null ? void 0 : $.toLowerCase()) || "", d = ((z = t.props.value) == null ? void 0 : z.toLowerCase()) || "";
-              return (p == null ? void 0 : p.includes(l.toLowerCase())) || (d == null ? void 0 : d.includes(l.toLowerCase()));
+              var j, C, V;
+              const p = ((C = (j = t.props.children) == null ? void 0 : j.toString()) == null ? void 0 : C.toLowerCase()) || "", f = ((V = t.props.value) == null ? void 0 : V.toLowerCase()) || "";
+              return (p == null ? void 0 : p.includes(l.toLowerCase())) || (f == null ? void 0 : f.includes(l.toLowerCase()));
             });
-            return C.length > 0 || l === "" ? v(e, {
-              children: C
+            return G.length > 0 || l === "" ? v(e, {
+              children: G
             }) : null;
           }
           default:
             return null;
         }
       }).filter(Boolean);
-      w(R);
+      w(u);
     }, [o, l, s]);
-    const h = (x) => {
-      y(x.target.value);
-    }, u = () => c ? /* @__PURE__ */ n("div", { className: "gi-select-menu-loading", children: /* @__PURE__ */ n(W, { size: "md" }) }) : O ? /* @__PURE__ */ n("div", { className: "gi-select-menu-option-not-found", children: B("autocomplete.noData", {
+    const y = (m) => {
+      O(m.target.value);
+    }, h = () => c ? /* @__PURE__ */ n("div", { className: "gi-select-menu-loading", children: /* @__PURE__ */ n(Q, { size: "md" }) }) : d ? /* @__PURE__ */ n("div", { className: "gi-select-menu-option-not-found", children: K("autocomplete.noData", {
       defaultValue: "No data found."
     }) }) : /* @__PURE__ */ n("ul", { children: S });
-    return /* @__PURE__ */ b("div", { ref: g, className: F("gi-select-menu-container", i), children: [
+    return /* @__PURE__ */ N("div", { ref: g, className: P("gi-select-menu-container", i), children: [
       r && /* @__PURE__ */ n("div", { className: "gi-select-menu-input-container", children: /* @__PURE__ */ n(
-        Q,
+        H,
         {
           tabIndex: 0,
-          placeholder: B("input.search"),
+          placeholder: K("input.search"),
           iconEnd: "search",
-          onChange: h,
+          onChange: y,
           value: l
         }
       ) }),
-      /* @__PURE__ */ n("div", { className: "gi-select-menu-option-container", children: u() })
+      /* @__PURE__ */ n("div", { className: "gi-select-menu-option-container", children: h() })
     ] });
   }
-), X = ({
+), U = ({
   children: o,
   value: i,
   selected: s,
   onChange: r,
   disabled: c,
-  dataTestid: m,
+  dataTestid: d,
   className: g,
   hidden: l,
-  enableSearch: y,
-  isHighlighted: O,
-  index: f,
-  ...S
+  enableSearch: O,
+  isHighlighted: S,
+  index: w,
+  ...y
 }) => {
-  const w = (u) => {
+  const h = (u) => {
     (u.key === "Enter" || u.key === " ") && (u.preventDefault(), r == null || r(i));
-  }, h = () => {
+  }, m = () => {
     c || r == null || r(i);
   };
-  return l ? null : /* @__PURE__ */ b(
+  return l ? null : /* @__PURE__ */ N(
     "li",
     {
       role: "option",
       tabIndex: c ? -1 : 0,
-      "data-index": f,
+      "data-index": w,
       "aria-selected": s,
       "aria-label": o == null ? void 0 : o.toString(),
       "aria-disabled": c,
-      onKeyDown: w,
-      onClick: h,
-      className: F(
+      onKeyDown: h,
+      onClick: m,
+      className: P(
         "gi-select-option-item",
         {
           "gi-select-option-item-disabled": c,
-          "gi-select-option-item-highlighted": O
+          "gi-select-option-item-highlighted": S
         },
         g
       ),
-      "data-search-enabled": y,
-      "data-testid": m || `option-${i}`,
-      ...S,
+      "data-search-enabled": O,
+      "data-testid": d || `option-${i}`,
+      ...y,
       children: [
         /* @__PURE__ */ n("span", { className: "gi-text-sm", children: o }),
-        s && /* @__PURE__ */ n(J, { icon: "check" })
+        s && /* @__PURE__ */ n(q, { icon: "check" })
       ]
     },
     `${o}-${i}`
   );
 };
-Object.defineProperty(X, "componentType", {
+Object.defineProperty(U, "componentType", {
   value: "SelectMenuOption",
   writable: !1,
   enumerable: !1
 });
-const Y = ({
+const W = ({
   children: o,
   label: i,
   ...s
-}) => /* @__PURE__ */ b("div", { ...s, role: "group", className: "gi-px-3", children: [
-  /* @__PURE__ */ n(U, { text: i, size: "sm", className: "gi-font-bold gi-pb-1" }),
+}) => /* @__PURE__ */ N("div", { ...s, role: "group", className: "gi-px-3", children: [
+  /* @__PURE__ */ n(J, { text: i, size: "sm", className: "gi-font-bold gi-pb-1" }),
   o
 ] });
-Object.defineProperty(Y, "componentType", {
+Object.defineProperty(W, "componentType", {
   value: "SelectMenuGroupItem",
   writable: !1,
   enumerable: !1
 });
 export {
-  se as SelectMenu,
-  Y as SelectMenuGroupItem,
-  X as SelectMenuOption
+  re as SelectMenu,
+  W as SelectMenuGroupItem,
+  U as SelectMenuOption
 };

package/dist/select/select-next.js

@@ -1,27 +1,29 @@
 "use client";
-import { jsx as l, jsxs as U } from "react/jsx-runtime";
-import { forwardRef as W, useRef as x, useState as C, useImperativeHandle as X, Children as k, isValidElement as E, useEffect as M } from "react";
+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 { InputText as Y } from "../input-text/input-text.js";
-import { Popover as Z } from "../popover/popover.js";
-import { SelectMenu as V, SelectMenuOption as K, SelectMenuGroupItem as _ } from "./select-menu.js";
-import { SelectSearch as B } from "./select-search.js";
-const ee = W(
+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(
   ({
     children: S,
-    value: a,
+    value: p,
     defaultValue: I = "",
     onChange: d,
     onMenuClose: g,
     enableSearch: v,
     disabled: n,
-    name: p,
+    name: a,
     onBlur: i,
+    placeholder: R,
     ...h
   }, z) => {
-    const u = x(null), N = x(null), R = x(null), G = x(!1), [r, P] = C(
-      I || a
-    ), [F, T] = C(!1), [$, j] = C("");
+    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)
@@ -57,49 +59,49 @@ const ee = W(
       } else
         j(""), u.current && (u.current.value = "");
     }, [r, O]), M(() => {
-      a !== void 0 && P(a);
-    }, [a]);
-    const w = () => {
+      p !== void 0 && $(p);
+    }, [p]);
+    const C = () => {
       var e;
       T(!0), (e = u.current) == null || e.focus();
-    }, J = (e) => {
+    }, L = (e) => {
       T(e), g && !e && g();
     }, A = (e) => {
-      if (T(!1), P(e), d && (d({
-        target: { name: p, value: e },
-        currentTarget: { name: p, value: e },
+      if (T(!1), $(e), d && (d({
+        target: { name: a, value: e },
+        currentTarget: { name: a, value: e },
         type: "change",
         bubbles: !0
       }), i)) {
         const s = {
-          target: { name: p, value: e },
-          currentTarget: { name: p, value: e },
+          target: { name: a, value: e },
+          currentTarget: { name: a, value: e },
           type: "blur",
           bubbles: !0
         };
         i == null || i(s);
       }
-    }, L = (e) => {
-      e.key === "Enter" && !n && w();
     }, Q = (e) => {
+      e.key === "Enter" && !n && C();
+    }, U = (e) => {
       var s, o;
       const c = e.relatedTarget;
-      if (c && ((s = R.current) != null && s.contains(c) || (o = N.current) != null && o.contains(c)) || G.current) {
-        setTimeout(() => G.current = !1, 0);
+      if (c && ((s = G.current) != null && s.contains(c) || (o = N.current) != null && o.contains(c)) || P.current) {
+        setTimeout(() => P.current = !1, 0);
         return;
       }
       if (i) {
-        const t = a ?? r ?? "";
+        const t = p ?? r ?? "";
         i({
-          target: { name: p, value: t },
-          currentTarget: { name: p, value: t },
+          target: { name: a, value: t },
+          currentTarget: { name: a, value: t },
           type: "blur",
           bubbles: !0
         });
       }
     };
     return v ? /* @__PURE__ */ l(
-      B,
+      te,
       {
         ...h,
         value: r,
@@ -107,23 +109,25 @@ const ee = W(
         disabled: n,
         ref: u,
         onBlur: i,
-        name: p,
+        name: a,
+        placeholder: R,
         children: S
       }
-    ) : /* @__PURE__ */ U(
+    ) : /* @__PURE__ */ V(
       "div",
       {
         "aria-disabled": n,
         className: H("gi-select-next", h.className),
         children: [
           /* @__PURE__ */ l(
-            Y,
+            Z,
             {
               ...h,
+              autoComplete: "off",
               "aria-label": "Select an option",
               "aria-disabled": n,
               disabled: n,
-              placeholder: $ || "Select",
+              placeholder: R ?? Y("select.next.placeholder", { defaultValue: "Search" }),
               readOnly: !0,
               inputClassName: "gi-cursor-pointer",
               iconEndClassName: H({
@@ -132,22 +136,22 @@ const ee = W(
                 "gi-pointer-events-none": n
               }),
               iconEnd: "keyboard_arrow_down",
-              onIconEndClick: w,
+              onIconEndClick: C,
               ref: u,
               iconEndRef: N,
-              value: $,
-              onClick: w,
-              onKeyDown: L,
-              onBlur: Q,
-              name: p
+              value: J,
+              onClick: C,
+              onKeyDown: Q,
+              onBlur: U,
+              name: a
             }
           ),
           /* @__PURE__ */ l(
-            Z,
+            _,
             {
               triggerRef: u,
               extraRefs: [N],
-              onOpenChange: J,
+              onOpenChange: L,
               open: F,
               maxHeight: 304,
               options: {
@@ -159,9 +163,9 @@ const ee = W(
                 ]
               },
               children: /* @__PURE__ */ l(
-                V,
+                B,
                 {
-                  ref: R,
+                  ref: G,
                   onChange: A,
                   enableSearch: v,
                   children: O.map((e, c) => {
@@ -180,20 +184,20 @@ const ee = W(
                       );
                     } else if (s === "SelectGroupItemNext") {
                       const t = e, f = k.toArray(t.props.children).filter((m) => E(m)).map((m, y) => {
-                        const b = m.props;
+                        const x = m.props;
                         return /* @__PURE__ */ l(
                           K,
                           {
-                            ...b,
-                            selected: (r == null ? void 0 : r.toString()) === b.value.toString(),
+                            ...x,
+                            selected: (r == null ? void 0 : r.toString()) === x.value.toString(),
                             onChange: A,
                             index: y
                           },
-                          `SelectGroupItemNext-SelectItemNext-${b.value.toString()}`
+                          `SelectGroupItemNext-SelectItemNext-${x.value.toString()}`
                         );
                       });
                       return /* @__PURE__ */ l(
-                        _,
+                        ee,
                         {
                           label: t.props.label,
                           children: f
@@ -217,29 +221,29 @@ Object.defineProperty(q, "componentType", {
   writable: !1,
   enumerable: !1
 });
-const te = () => null;
-Object.defineProperty(te, "componentType", {
+const re = () => null;
+Object.defineProperty(re, "componentType", {
   value: "SelectGroupItemNext",
   writable: !1,
   enumerable: !1
 });
-const ae = (S) => {
-  const { options: a, defaultValue: I, onChange: d, error: g } = S;
+const fe = (S) => {
+  const { options: p, defaultValue: I, onChange: d, error: g } = S;
   return /* @__PURE__ */ l(
-    ee,
+    ne,
     {
       ...S,
       defaultValue: I,
       onChange: d,
       "data-table-cell": "true",
       "data-table-cell-error-state": g == null ? void 0 : g.toString(),
-      children: a.map(({ value: v, label: n }) => /* @__PURE__ */ l(q, { value: v, children: n }, `${v}-${n}`))
+      children: p.map(({ value: v, label: n }) => /* @__PURE__ */ l(q, { value: v, children: n }, `${v}-${n}`))
     }
   );
 };
 export {
-  te as SelectGroupItemNext,
+  re as SelectGroupItemNext,
   q as SelectItemNext,
-  ee as SelectNext,
-  ae as SelectNextTableCell
+  ne as SelectNext,
+  fe as SelectNextTableCell
 };

package/dist/select/types.d.ts

@@ -54,9 +54,6 @@ export type SelectNextProps = PropsWithChildren<{
     value?: string;
     enableSearch?: boolean;
     disabled?: boolean;
-    /**
-     * Works only when `enableSearch` is set to `true`
-     */
     placeholder?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, `onChange`>>;
 export type SelectNextOptionProps = PropsWithChildren<{