@ogcio/design-system-react 1.31.1 → 1.33.0

package/dist/select/select-next.js

@@ -1,35 +1,35 @@
 "use client";
 import { jsx as s, jsxs as _ } from "react/jsx-runtime";
-import { forwardRef as B, useRef as T, useState as k, useImperativeHandle as ee, Children as R, isValidElement as G, useEffect as O, useCallback as te } from "react";
-import { cn as H } from "../cn.js";
+import { forwardRef as B, useRef as T, useState as k, useImperativeHandle as ee, Children as G, isValidElement as H, useEffect as O, useCallback as te } from "react";
+import { cn as P } from "../cn.js";
 import { useDomId as re } from "../hooks/use-dom-id.js";
 import { useScrollHighlightedItem as ne } from "../hooks/use-scroll-highlighted-item.js";
-import { translate as F } from "../i18n/utility.js";
+import { translate as J } from "../i18n/utility.js";
 import { InputText as oe } from "../input-text/input-text.js";
-import { Popover as le } from "../popover/popover.js";
-import { cycleEnabledIndex as ae } from "../utilities.js";
-import { SelectMenu as se, SelectMenuOption as J, SelectMenuGroupItem as ce } from "./select-menu.js";
+import { Popover as ae } from "../popover/popover.js";
+import { cycleEnabledIndex as le } from "../utilities.js";
+import { SelectMenu as se, SelectMenuOption as M, SelectMenuGroupItem as ce } from "./select-menu.js";
 import { SelectSearch as ie } from "./select-search.js";
 const pe = B(
   ({
     children: x,
-    value: u,
+    value: p,
     defaultValue: E = "",
     onChange: I,
-    onMenuClose: f,
+    onMenuClose: u,
     enableSearch: h,
-    disabled: l,
+    disabled: a,
     name: i,
-    onBlur: m,
-    placeholder: P,
+    onBlur: f,
+    placeholder: $,
     ...N
-  }, Q) => {
-    const c = T(null), D = T(null), A = T(null), $ = T(!1), [a, j] = k(
-      E || u
-    ), [S, p] = k(!1), [W, K] = k(""), [g, V] = k(-1);
-    ee(Q, () => c.current), ne(A, g);
-    const d = R.toArray(x).filter(
-      (e) => G(e)
+  }, W) => {
+    const c = T(null), D = T(null), A = T(null), j = T(!1), [l, K] = k(
+      E || p
+    ), [m, S] = k(!1), [X, V] = k(""), [g, L] = k(-1);
+    ee(W, () => c.current), ne(A, g);
+    const d = G.toArray(x).filter(
+      (e) => H(e)
     );
     O(() => {
       var r, t;
@@ -38,19 +38,19 @@ const pe = B(
         const o = (r = n.type) == null ? void 0 : r.componentType;
         if (o === "SelectItemNext") {
           const y = n;
-          if (y.props.value === a) {
+          if (y.props.value === l) {
             e = y;
             break;
           }
         }
         if (o === "SelectGroupItemNext") {
-          const y = n, b = R.toArray(y.props.children).find(
+          const y = n, b = G.toArray(y.props.children).find(
             (v) => {
-              var z;
-              return ((z = v == null ? void 0 : v.type) == null ? void 0 : z.componentType) === "SelectItemNext" && v.props.value === a;
+              var F;
+              return ((F = v == null ? void 0 : v.type) == null ? void 0 : F.componentType) === "SelectItemNext" && v.props.value === l;
             }
           );
-          if (b && G(b)) {
+          if (b && H(b)) {
             e = b;
             break;
           }
@@ -58,138 +58,138 @@ const pe = B(
       }
       if (e) {
         const n = ((t = e.props.children) == null ? void 0 : t.toString()) || "";
-        K(n);
+        V(n);
       } else
-        K(""), c.current && (c.current.value = "");
-    }, [a, d]), O(() => {
-      S || V(-1);
-    }, [S]), O(() => {
-      u !== void 0 && j(u);
-    }, [u]);
-    const L = () => {
+        V(""), c.current && (c.current.value = "");
+    }, [l, d]), O(() => {
+      m || L(-1);
+    }, [m]), O(() => {
+      p !== void 0 && K(p);
+    }, [p]);
+    const C = () => {
       var e;
-      l || (p(!0), (e = c.current) == null || e.focus());
-    }, X = (e) => {
-      p(e), e || f == null || f();
+      a || (U(!m), (e = c.current) == null || e.focus());
     }, U = (e) => {
-      if (p(!1), j(e), I && (I({
+      S(e), e || u == null || u();
+    }, q = (e) => {
+      if (S(!1), K(e), I && (I({
         target: { name: i, value: e },
         currentTarget: { name: i, value: e },
         type: "change",
         bubbles: !0
-      }), m)) {
+      }), f)) {
         const t = {
           target: { name: i, value: e },
           currentTarget: { name: i, value: e },
           type: "blur",
           bubbles: !0
         };
-        m == null || m(t);
+        f == null || f(t);
       }
     }, Y = te(
       (e) => {
         var r;
-        if (!l)
+        if (!a)
           switch (e.key) {
             case "ArrowDown":
             case "ArrowUp": {
               e.preventDefault();
               const t = e.key === "ArrowDown" ? 1 : -1;
-              V((n) => ae(d, n === -1 ? t === -1 ? 0 : -1 : n, t)), p(!0);
+              L((n) => le(d, n === -1 ? t === -1 ? 0 : -1 : n, t)), S(!0);
               break;
             }
             case "Enter":
             case "NumpadEnter": {
-              if (e.preventDefault(), S && g != -1 && d[g]) {
+              if (e.preventDefault(), m && g != -1 && d[g]) {
                 const t = d[g];
-                (r = t.props) != null && r.disabled || U(t.props.value);
-              } else
-                p(!0);
+                (r = t.props) != null && r.disabled || q(t.props.value);
+              }
+              C();
               break;
             }
             case "Tab": {
-              p(!1);
+              S(!1);
               break;
             }
             case "Escape": {
-              e.preventDefault(), p(!1);
+              e.preventDefault(), S(!1);
               break;
             }
           }
       },
-      [d, S, g]
+      [d, m, g]
     ), Z = (e) => {
       var t, n;
       const r = e.relatedTarget;
-      if (r && ((t = A.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r)) || $.current) {
-        setTimeout(() => $.current = !1, 0);
+      if (r && ((t = A.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r)) || j.current) {
+        setTimeout(() => j.current = !1, 0);
         return;
       }
-      if (m) {
-        const o = u ?? a ?? "";
-        m({
+      if (f) {
+        const o = p ?? l ?? "";
+        f({
           target: { name: i, value: o },
           currentTarget: { name: i, value: o },
           type: "blur",
           bubbles: !0
         });
       }
-    }, C = re(), q = N["aria-label"] ?? F("select.next.placeholder", { defaultValue: "Select" });
+    }, R = re(), z = N["aria-label"] ?? J("select.next.placeholder", { defaultValue: "Select" });
     return O(() => {
-      c.current && c.current.setAttribute("aria-labelledby", C);
-    }, [C, h]), h ? /* @__PURE__ */ s("div", { className: H("gi-relative gi-w-full", N.className), children: /* @__PURE__ */ s(
+      c.current && c.current.setAttribute("aria-labelledby", R);
+    }, [R, h]), h ? /* @__PURE__ */ s("div", { className: P("gi-relative gi-w-full", N.className), children: /* @__PURE__ */ s(
       ie,
       {
         ...N,
-        value: a,
+        value: l,
         onChange: I,
-        disabled: l,
+        disabled: a,
         ref: c,
-        onBlur: m,
+        onBlur: f,
         name: i,
-        placeholder: P,
+        placeholder: $,
         children: x
       }
     ) }) : /* @__PURE__ */ _(
       "div",
       {
-        "aria-disabled": l,
-        className: H("gi-relative gi-w-full", N.className),
+        "aria-disabled": a,
+        className: P("gi-relative gi-w-full", N.className),
         children: [
-          /* @__PURE__ */ s("span", { id: C, className: "gi-sr-only", children: q }),
+          /* @__PURE__ */ s("span", { id: R, className: "gi-sr-only", children: z }),
           /* @__PURE__ */ s(
             oe,
             {
               ...N,
               autoComplete: "off",
-              "aria-label": q,
-              "aria-disabled": l,
-              disabled: l,
-              placeholder: P ?? F("select.next.placeholder", { defaultValue: "Search" }),
+              "aria-label": z,
+              "aria-disabled": a,
+              disabled: a,
+              placeholder: $ ?? J("select.next.placeholder", { defaultValue: "Search" }),
               readOnly: !0,
               inputClassName: "gi-cursor-pointer",
-              iconEndClassName: H({
-                "gi-cursor-pointer": !l,
-                "gi-cursor-not-allowed gi-pointer-events-none": l
+              iconEndClassName: P({
+                "gi-cursor-pointer": !a,
+                "gi-cursor-not-allowed gi-pointer-events-none": a
               }),
-              iconEnd: S ? "keyboard_arrow_up" : "keyboard_arrow_down",
-              onIconEndClick: L,
+              iconEnd: m ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              onIconEndClick: C,
               ref: c,
               iconEndRef: D,
-              value: W,
-              onClick: L,
+              value: X,
+              onClick: C,
               onKeyDown: Y,
               onBlur: Z,
               name: i
             }
           ),
           /* @__PURE__ */ s(
-            le,
+            ae,
             {
               triggerRef: c,
               extraRefs: [D],
-              onOpenChange: X,
-              open: S,
+              onOpenChange: U,
+              open: m,
               maxHeight: 304,
               options: {
                 placement: "bottom-start",
@@ -204,7 +204,7 @@ const pe = B(
                 {
                   ref: A,
                   onChange: (e) => {
-                    p(!1), U(e);
+                    S(!1), q(e);
                   },
                   enableSearch: h,
                   children: d.map((e, r) => {
@@ -213,24 +213,24 @@ const pe = B(
                     if (t === "SelectItemNext") {
                       const o = e;
                       return /* @__PURE__ */ s(
-                        J,
+                        M,
                         {
                           ...o.props,
                           isHighlighted: g === r,
-                          selected: (a == null ? void 0 : a.toString()) === o.props.value.toString(),
+                          selected: (l == null ? void 0 : l.toString()) === o.props.value.toString(),
                           index: r
                         },
                         `SelectItemNext-${o.props.value.toString()}`
                       );
                     } else if (t === "SelectGroupItemNext") {
-                      const o = e, y = R.toArray(o.props.children).filter((b) => G(b)).map((b, v) => {
+                      const o = e, y = G.toArray(o.props.children).filter((b) => H(b)).map((b, v) => {
                         const w = b.props;
                         return /* @__PURE__ */ s(
-                          J,
+                          M,
                           {
                             ...w,
                             isHighlighted: g === r,
-                            selected: (a == null ? void 0 : a.toString()) === w.value.toString(),
+                            selected: (l == null ? void 0 : l.toString()) === w.value.toString(),
                             index: v
                           },
                           `SelectGroupItemNext-SelectItemNext-${w.value.toString()}`
@@ -255,8 +255,8 @@ const pe = B(
       }
     );
   }
-), M = () => null;
-Object.defineProperty(M, "componentType", {
+), Q = () => null;
+Object.defineProperty(Q, "componentType", {
   value: "SelectItemNext",
   writable: !1,
   enumerable: !1
@@ -268,7 +268,7 @@ Object.defineProperty(ue, "componentType", {
   enumerable: !1
 });
 const Ne = (x) => {
-  const { options: u, defaultValue: E, onChange: I, error: f } = x;
+  const { options: p, defaultValue: E, onChange: I, error: u } = x;
   return /* @__PURE__ */ s(
     pe,
     {
@@ -276,14 +276,14 @@ const Ne = (x) => {
       defaultValue: E,
       onChange: I,
       "data-table-cell": "true",
-      "data-table-cell-error-state": f == null ? void 0 : f.toString(),
-      children: u.map(({ value: h, label: l }) => /* @__PURE__ */ s(M, { value: h, children: l }, `${h}-${l}`))
+      "data-table-cell-error-state": u == null ? void 0 : u.toString(),
+      children: p.map(({ value: h, label: a }) => /* @__PURE__ */ s(Q, { value: h, children: a }, `${h}-${a}`))
     }
   );
 };
 export {
   ue as SelectGroupItemNext,
-  M as SelectItemNext,
+  Q as SelectItemNext,
   pe as SelectNext,
   Ne as SelectNextTableCell
 };

package/dist/side-nav/side-nav.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as x, Fragment as R, jsx as s } from "react/jsx-runtime";
 import r, { memo as k, useEffect as V, useCallback as g, useState as $ } from "react";
-import { Button as q } from "../button/button.js";
+import q from "../Heading.js";
+import A from "../atoms/Button.js";
 import { cn as m } from "../cn.js";
-import { Heading as A } from "../heading/heading.js";
 import { Icon as z } from "../icon/icon.js";
 import { Link as G } from "../link/link.js";
 import { Paragraph as J } from "../paragraph/paragraph.js";
@@ -105,7 +105,7 @@ const C = r.createContext(
               )
             }
           ) : /* @__PURE__ */ s(
-            q,
+            A,
             {
               variant: "flat",
               appearance: "dark",
@@ -168,7 +168,7 @@ const C = r.createContext(
     if (!r.useContext(C))
       throw new Error("SideNavHeading must be used within a SideNav");
     return /* @__PURE__ */ s(
-      A,
+      q,
       {
         ...e,
         as: "h5",

package/dist/side-nav/types.d.ts

@@ -1,4 +1,4 @@
-import { HeadingProps } from '../heading/heading.js';
+import { Props as HeadingProps } from '../Heading.js';
 import { IconId } from '../icon/icon.js';
 export type SideNavItemProps = {
     value: string;