@ogcio/design-system-react 1.12.3 → 1.13.0

package/dist/select/select-next.js

@@ -1,141 +1,159 @@
 "use client";
-import { jsxs as A, jsx as c } from "react/jsx-runtime";
-import { useRef as D, useState as S, Children as y, isValidElement as d, useEffect as K } from "react";
-import { cn as b } from "../cn.js";
-import { InputText as M } from "../input-text/input-text.js";
-import { Popover as _ } from "../popover/popover.js";
-import { SelectMenu as $, SelectMenuOption as w, SelectMenuGroupItem as q } from "./select-menu.js";
-const X = ({
-  children: T,
-  onChange: v,
-  onMenuClose: I,
-  defaultValue: k = "",
-  enableSearch: C,
-  disabled: r,
-  ...x
+import { jsx as r, jsxs as M } from "react/jsx-runtime";
+import { useRef as _, useState as h, Children as O, isValidElement as b, useEffect as G } from "react";
+import { cn as P } from "../cn.js";
+import { InputText as q } from "../input-text/input-text.js";
+import { Popover as z } from "../popover/popover.js";
+import { SelectMenu as B, SelectMenuOption as j, SelectMenuGroupItem as F } from "./select-menu.js";
+import { SelectSearch as H } from "./select-search.js";
+const J = ({
+  children: c,
+  value: o,
+  defaultValue: g = "",
+  onChange: s,
+  onMenuClose: a,
+  enableSearch: u,
+  disabled: t,
+  ...S
 }) => {
-  const n = D(null), [s, E] = S(k), [G, m] = S(!1), [N, P] = S(""), f = y.toArray(T).filter(
-    (e) => d(e)
-  ), g = () => {
+  const y = _(null), [A, w] = h(g), m = o === void 0 ? A : o, [R, I] = h(!1), [C, T] = h(""), x = O.toArray(c).filter(
+    (e) => b(e)
+  );
+  G(() => {
+    o !== void 0 && w(o);
+  }, [o]);
+  const N = () => {
     var e;
-    m(!0), n != null && n.current && ((e = n == null ? void 0 : n.current) == null || e.focus());
-  }, j = (e) => {
-    m(e), I && !e && I();
-  }, O = (e) => {
-    if (m(!1), E(e), v) {
+    I(!0), (e = y.current) == null || e.focus();
+  }, D = (e) => {
+    I(e), a && !e && a();
+  }, k = (e) => {
+    if (I(!1), o === void 0 && w(e), s) {
       const l = {
         ...new Event("change", { bubbles: !0 }),
         target: {
-          ...n.current,
+          ...y.current,
           value: e
         }
       };
-      v(l);
+      s(l);
     }
   };
-  K(() => {
-    var l, a;
+  G(() => {
+    var l, f;
     let e;
-    for (const t of f) {
-      const i = (l = t.type) == null ? void 0 : l.componentType;
-      if (i === "SelectItemNext") {
-        const o = t;
-        if (o.props.value === s) {
-          e = o;
+    for (const n of x) {
+      const v = (l = n.type) == null ? void 0 : l.componentType;
+      if (v === "SelectItemNext") {
+        const p = n;
+        if (p.props.value === m) {
+          e = p;
           break;
         }
       }
-      if (i === "SelectGroupItemNext") {
-        const o = t, p = y.toArray(o.props.children).find(
-          (u) => {
-            var h;
-            return ((h = u == null ? void 0 : u.type) == null ? void 0 : h.componentType) === "SelectItemNext" && u.props.value === s;
+      if (v === "SelectGroupItemNext") {
+        const p = n, i = O.toArray(p.props.children).find(
+          (d) => {
+            var E;
+            return ((E = d == null ? void 0 : d.type) == null ? void 0 : E.componentType) === "SelectItemNext" && d.props.value === m;
           }
         );
-        if (p && d(p)) {
-          e = p;
+        if (i && b(i)) {
+          e = i;
           break;
         }
       }
     }
-    e && P(((a = e.props.children) == null ? void 0 : a.toString()) || "");
-  }, [s, f]);
-  const V = (e) => {
-    e.key === "Enter" && !r && g();
+    T(e && ((f = e.props.children) == null ? void 0 : f.toString()) || "");
+  }, [m, x]);
+  const K = (e) => {
+    e.key === "Enter" && !t && N();
   };
-  return /* @__PURE__ */ A(
+  return u ? /* @__PURE__ */ r(
+    H,
+    {
+      ...S,
+      value: o,
+      defaultValue: g,
+      onChange: s,
+      disabled: t,
+      children: c
+    }
+  ) : /* @__PURE__ */ M(
     "div",
     {
-      ...x,
-      "aria-disabled": r,
-      className: b("gi-select-next", x.className),
+      ...S,
+      "aria-disabled": t,
+      className: P("gi-select-next", S.className),
       children: [
-        /* @__PURE__ */ c(
-          M,
+        /* @__PURE__ */ r(
+          q,
           {
+            id: S.id,
             "aria-label": "Select an option",
-            "aria-disabled": r,
-            disabled: r,
-            placeholder: N || "Select",
+            "aria-disabled": t,
+            disabled: t,
+            placeholder: C || "Select",
             readOnly: !0,
             inputClassName: "gi-cursor-pointer",
-            iconEndClassName: b({
-              "gi-cursor-pointer": !r,
-              "gi-cursor-not-allowed": r,
-              "gi-pointer-events-none": r
+            iconEndClassName: P({
+              "gi-cursor-pointer": !t,
+              "gi-cursor-not-allowed": t,
+              "gi-pointer-events-none": t
             }),
             iconEnd: "arrow_drop_down",
-            onIconEndClick: g,
-            ref: n,
-            value: N,
-            onClick: g,
-            onKeyDown: V
+            onIconEndClick: N,
+            ref: y,
+            value: C,
+            onClick: N,
+            onKeyDown: K
           }
         ),
-        /* @__PURE__ */ c(
-          _,
+        /* @__PURE__ */ r(
+          z,
           {
-            triggerRef: n,
-            onOpenChange: j,
-            open: G,
+            triggerRef: y,
+            onOpenChange: D,
+            open: R,
             options: {
               placement: "bottom-start",
               strategy: "absolute",
               modifiers: [
-                { name: "preventOverflow", options: { padding: 8 } },
+                { name: "offset", options: { offset: [0, 4] } },
+                { name: "preventOverflow", options: { padding: 10 } },
                 {
                   name: "flip",
                   options: { fallbackPlacements: ["top", "right", "left"] }
                 }
               ]
             },
-            children: /* @__PURE__ */ c($, { onChange: O, enableSearch: C, children: f.map((e) => {
-              var a;
-              const l = (a = e == null ? void 0 : e.type) == null ? void 0 : a.componentType;
+            children: /* @__PURE__ */ r(B, { onChange: k, enableSearch: u, children: x.map((e) => {
+              var f;
+              const l = (f = e == null ? void 0 : e.type) == null ? void 0 : f.componentType;
               if (l === "SelectItemNext") {
-                const t = e;
-                return /* @__PURE__ */ c(
-                  w,
+                const n = e;
+                return /* @__PURE__ */ r(
+                  j,
                   {
-                    ...t.props,
-                    selected: s.toString() === t.props.value.toString()
+                    ...n.props,
+                    selected: m.toString() === n.props.value.toString()
                   },
-                  `SelectItemNext-${t.props.value.toString()}`
+                  `SelectItemNext-${n.props.value.toString()}`
                 );
               } else if (l === "SelectGroupItemNext") {
-                const t = e, i = y.toArray(t.props.children).filter((o) => d(o)).map((o) => {
-                  const p = o.props;
-                  return /* @__PURE__ */ c(
-                    w,
+                const n = e, v = O.toArray(n.props.children).filter((p) => b(p)).map((p) => {
+                  const i = p.props;
+                  return /* @__PURE__ */ r(
+                    j,
                     {
-                      ...p,
-                      selected: s.toString() === p.value.toString(),
-                      onChange: O
+                      ...i,
+                      selected: m.toString() === i.value.toString(),
+                      onChange: k
                     },
-                    `SelectGroupItemNext-SelectItemNext-${p.value.toString()}`
+                    `SelectGroupItemNext-SelectItemNext-${i.value.toString()}`
                   );
                 });
-                return /* @__PURE__ */ c(q, { label: t.props.label, children: i });
+                return /* @__PURE__ */ r(F, { label: n.props.label, children: v });
               }
               return null;
             }) })
@@ -144,20 +162,35 @@ const X = ({
       ]
     }
   );
-}, z = () => null;
-Object.defineProperty(z, "componentType", {
+}, $ = () => null;
+Object.defineProperty($, "componentType", {
   value: "SelectItemNext",
   writable: !1,
   enumerable: !1
 });
-const B = () => null;
-Object.defineProperty(B, "componentType", {
+const L = () => null;
+Object.defineProperty(L, "componentType", {
   value: "SelectGroupItemNext",
   writable: !1,
   enumerable: !1
 });
+const te = (c) => {
+  const { options: o, defaultValue: g, onChange: s, error: a } = c;
+  return /* @__PURE__ */ r(
+    J,
+    {
+      ...c,
+      defaultValue: g,
+      onChange: s,
+      "data-table-cell": "true",
+      "data-table-cell-error-state": a == null ? void 0 : a.toString(),
+      children: o.map(({ value: u, label: t }) => /* @__PURE__ */ r($, { value: u, children: t }, `${u}-${t}`))
+    }
+  );
+};
 export {
-  B as SelectGroupItemNext,
-  z as SelectItemNext,
-  X as SelectNext
+  L as SelectGroupItemNext,
+  $ as SelectItemNext,
+  J as SelectNext,
+  te as SelectNextTableCell
 };

package/dist/select/select-search.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SelectNextProps } from './types.js';
+export declare const SelectSearch: FC<SelectNextProps>;

package/dist/select/select-search.js

@@ -0,0 +1,24 @@
+import { jsx as p } from "react/jsx-runtime";
+import { Children as s, isValidElement as a } from "react";
+import { AutocompleteItem as f, Autocomplete as h } from "../autocomplete/autocomplete.js";
+const S = ({
+  children: n,
+  onChange: m,
+  ...c
+}) => {
+  const t = [];
+  return s.forEach(n, (e) => {
+    var r;
+    if (!a(e))
+      return;
+    if (((r = e.type) == null ? void 0 : r.componentType) === "SelectItemNext") {
+      const { value: o, children: l, ...i } = e.props || {};
+      t.push(
+        /* @__PURE__ */ p(f, { value: o, ...i, children: l }, o)
+      );
+    }
+  }), /* @__PURE__ */ p(h, { ...c, onChange: m, children: t });
+};
+export {
+  S as SelectSearch
+};

package/dist/select/select.d.ts

@@ -1,5 +1,7 @@
-export { SelectGroupItem, SelectItem } from './select-native.js';
+export { SelectGroupItem, SelectItem, SelectTableCell, } from './select-native.js';
 /**
  * @deprecated Use `<SelectNext />` instead of `<Select />`.
  */
-export declare const Select: import('react').FC<import('./types.js').SelectProps>;
+export declare const Select: import('react').FC<import('react').ClassAttributes<HTMLSelectElement> & import('react').SelectHTMLAttributes<HTMLSelectElement> & {
+    containerProps?: any;
+}>;

package/dist/select/select.js

@@ -1,10 +1,11 @@
 "use client";
 import { SelectNative as e } from "./select-native.js";
-import { SelectGroupItem as m, SelectItem as r } from "./select-native.js";
+import { SelectGroupItem as m, SelectItem as r, SelectTableCell as S } from "./select-native.js";
 const t = e;
 t.displayName = "Select";
 export {
   t as Select,
   m as SelectGroupItem,
-  r as SelectItem
+  r as SelectItem,
+  S as SelectTableCell
 };

package/dist/select/types.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEvent, DetailedHTMLProps, HTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, SelectHTMLAttributes } from 'react';
+import { InputTextProps } from '../input-text/type.js';
 /**
  * @deprecated Use `SelectNextProps` instead of `SelectProps`.
  */
@@ -13,6 +14,8 @@ export type SelectMenuProps = {
     className?: string;
     onChange?: (value: string) => void;
     enableSearch?: boolean;
+    isLoading?: boolean;
+    showNoData?: boolean;
 };
 export type SelectMenuOptionReactElement = ReactElement<{
     value: string;
@@ -46,8 +49,13 @@ export type SelectNextProps = PropsWithChildren<{
     onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
     onMenuClose?: () => void;
     defaultValue?: string;
+    value?: string;
     enableSearch?: boolean;
     disabled?: boolean;
+    /**
+     * Works only when `enableSearch` is set to `true`
+     */
+    placeholder?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, `on${string}`>>;
 export type SelectNextOptionProps = PropsWithChildren<{
     className?: string;
@@ -60,3 +68,17 @@ export type SelectNextGroupProps = PropsWithChildren<{
     label?: string;
     children: ReactNode;
 }>;
+export type SelectTableCellProps = Omit<SelectProps, 'children'> & {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    error?: boolean;
+};
+export type SelectNextTableCellProps = SelectNextProps & {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    error?: boolean;
+} & Pick<InputTextProps, 'iconEnd' | 'iconStart'>;

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as w, Fragment as V, jsx as s } from "react/jsx-runtime";
-import N, { memo as B, useEffect as q, useCallback as v, useState as _ } from "react";
+import f, { memo as B, useEffect as q, useCallback as v, useState as _ } from "react";
 import { Button as A } from "../button/button.js";
-import { cn as f } from "../cn.js";
+import { cn as N } from "../cn.js";
 import { Icon as $ } from "../icon/icon.js";
 import { Link as G } from "../link/link.js";
 import { Paragraph as H } from "../paragraph/paragraph.js";
-const j = N.createContext(
+const j = f.createContext(
   void 0
 ), z = B(
   ({
@@ -22,41 +22,41 @@ const j = N.createContext(
     c && /* @__PURE__ */ s("div", { className: "gi-side-nav-expandable-icon", children: /* @__PURE__ */ s(
       $,
       {
-        className: f(e && "gi-rotate-180"),
+        className: N(e && "gi-rotate-180"),
         icon: "keyboard_arrow_down"
       }
     ) })
   ] })
-), J = N.memo(
+), J = f.memo(
   ({
     children: n,
     primary: i,
     secondary: c,
     expandable: e,
-    label: o,
+    label: a,
     value: t,
     icon: u,
     href: m,
     asChild: g,
     open: r
   }) => {
-    const l = N.useContext(j);
+    const l = f.useContext(j);
     if (!l)
       throw new Error("SideNavItem must be used within a SideNav");
     const {
-      openItemIds: a,
+      openItemIds: o,
       selectedItemId: S,
       setOpenItemIds: p,
       setSelectedItemId: C,
       navId: P
-    } = l, I = a.includes(t), x = S === t;
+    } = l, I = o.includes(t), x = S === t;
     q(() => {
       r && p((d) => d.includes(t) ? d : [...d, t]);
     }, [r, p, t]);
     const h = v(() => {
-      const d = I ? a.filter((R) => R !== t) : [...a, t];
+      const d = I ? o.filter((R) => R !== t) : [...o, t];
       p(d);
-    }, [I, a, p, t]), k = v(() => {
+    }, [I, o, p, t]), k = v(() => {
       C(t);
     }, [C, t]), E = `${P}-${t}`, O = i && e, b = m !== void 0, D = v(() => {
       i && e && h(), k();
@@ -65,11 +65,11 @@ const j = N.createContext(
         d.preventDefault(), i && e ? h() : k();
       },
       [i, e, h, k]
-    ), L = f("gi-side-nav-item", {
+    ), L = N("gi-side-nav-item", {
       "gi-side-nav-item-selected": x,
       "gi-side-nav-item-primary": i,
       "gi-side-nav-item-secondary": c
-    }), M = f("gi-side-nav-item", {
+    }), M = N("gi-side-nav-item", {
       "gi-side-nav-item-selected": x,
       "gi-side-nav-item-primary": i,
       "gi-side-nav-item-secondary": c
@@ -78,7 +78,7 @@ const j = N.createContext(
       "div",
       {
         role: "group",
-        "aria-label": `${o} ${i && e ? "dropdown" : "item"}`,
+        "aria-label": `${a} ${i && e ? "dropdown" : "item"}`,
         children: [
           b ? /* @__PURE__ */ s(
             G,
@@ -97,7 +97,7 @@ const j = N.createContext(
                 z,
                 {
                   icon: u,
-                  label: o,
+                  label: a,
                   showExpandableIcon: O,
                   isOpen: I
                 }
@@ -116,7 +116,7 @@ const j = N.createContext(
                 z,
                 {
                   icon: u,
-                  label: o,
+                  label: a,
                   showExpandableIcon: O,
                   isOpen: I
                 }
@@ -126,7 +126,7 @@ const j = N.createContext(
           e && i && /* @__PURE__ */ s(
             "div",
             {
-              className: f(I ? "gi-side-nav-item-content" : "gi-hidden"),
+              className: N(I ? "gi-side-nav-item-content" : "gi-hidden"),
               children: n
             }
           )
@@ -135,15 +135,15 @@ const j = N.createContext(
     );
   }
 ), K = B(
-  ({ children: n, className: i, dataTestid: c, onChange: e, value: o }) => {
+  ({ children: n, className: i, dataTestid: c, onChange: e, value: a }) => {
     const [t, u] = _([]), [m, g] = _(
-      o
-    ), r = N.useId(), l = v(
+      a
+    ), r = f.useId(), l = v(
       (S) => {
         g(S), e == null || e(S);
       },
       [e]
-    ), a = N.useMemo(
+    ), o = f.useMemo(
       () => ({
         openItemIds: t,
         selectedItemId: m,
@@ -153,10 +153,10 @@ const j = N.createContext(
       }),
       [t, m, l, r]
     );
-    return /* @__PURE__ */ s(j.Provider, { value: a, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s(j.Provider, { value: o, children: /* @__PURE__ */ s(
       "div",
       {
-        className: f("gi-side-nav-container", i),
+        className: N("gi-side-nav-container", i),
         "data-testid": c,
         children: n
       }

package/dist/spinner/spinner.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { c as o } from "../index-DNkhmzZp.js";
+import { c as o } from "../index-CB-zPpNk.js";
 import { cn as l } from "../cn.js";
 const c = {
   xl: "gi-w-10 gi-h-10",