@ogcio/design-system-react 1.12.4 → 1.13.0

package/dist/primitives/anchor.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { a } from "../index-ntYL1VRC.js";
+import { a } from "../index-2sRBqKFV.js";
 const f = ({
   external: o = !1,
   asChild: r,

package/dist/progress-bar/progress-bar.js

@@ -1,13 +1,13 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cn as n } from "../cn.js";
-import { translate as t } from "../i18n/utility.js";
+import { cn as t } from "../cn.js";
+import { translate as g } from "../i18n/utility.js";
 function d({
   value: s = 0,
   max: e = 100,
   isIndeterminate: r,
-  label: i
+  label: o
 }) {
-  const o = s * 100 / e;
+  const i = s * 100 / e;
   return /* @__PURE__ */ l("div", { className: "gi-progress-bar-container", children: [
     /* @__PURE__ */ a(
       "div",
@@ -16,7 +16,7 @@ function d({
         "aria-valuenow": r ? void 0 : s,
         "aria-valuemin": 0,
         "aria-valuemax": e,
-        "aria-label": t("progressBar.progressBar", {
+        "aria-label": g("progressBar.progressBar", {
           defaultValue: "Progress bar"
         }),
         "data-testid": "progress-bar",
@@ -24,15 +24,15 @@ function d({
         children: /* @__PURE__ */ a(
           "div",
           {
-            className: n({
+            className: t({
               "gi-progress-bar-indeterminate": r
             }),
-            style: r ? {} : { width: `${o}%` }
+            style: r ? {} : { width: `${i}%` }
           }
         )
       }
     ),
-    i && /* @__PURE__ */ a("span", { children: i })
+    o && /* @__PURE__ */ a("span", { children: o })
   ] });
 }
 export {

package/dist/progress-stepper/progress-stepper.js

@@ -1,8 +1,8 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
 import { Children as P } from "react";
 import { cn as $ } from "../cn.js";
 import { Icon as z } from "../icon/icon.js";
-import { ProgressStepperIndicator as v } from "./types.js";
+import { ProgressStepperIndicator as f } from "./types.js";
 const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   isNextStep: e,
   orientation: t = "horizontal",
@@ -11,7 +11,7 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   verticalGap: l
 }) => {
   const o = t === "vertical" ? { height: j(l) } : void 0;
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "div",
     {
       "data-orientation": t,
@@ -28,19 +28,19 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
     }
   );
 }, x = (e) => ({
-  [v.Hashtag]: {
+  [f.Hashtag]: {
     completed: /* @__PURE__ */ r(z, { icon: "check" }),
     current: () => "#",
     next: () => "#"
   },
-  [v.Number]: {
+  [f.Number]: {
     completed: /* @__PURE__ */ r(z, { icon: "check" }),
     current: (s) => s,
     next: (s) => s
   }
 })[e], V = (e, t, s, a) => {
   const { current: l, completed: o, next: i } = x(
-    e || v.Hashtag
+    e || f.Hashtag
   );
   return s ? o : a ? l(t) : i(t);
 }, B = ({
@@ -58,8 +58,8 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   verticalGap: h
 }) => {
   const m = !t && !e, c = l === "vertical" && (e || d || t), p = !!o;
-  return /* @__PURE__ */ f("div", { className: "gi-relative", children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ v("div", { className: "gi-relative", children: [
+    /* @__PURE__ */ v(
       "div",
       {
         className: "gi-progress-stepper-step-container",
@@ -68,13 +68,12 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
         "data-completed": t,
         "data-next": m,
         "data-indicator": i,
-        role: "listitem",
         "aria-labelledby": `step-label-${a}`,
         "data-testid": u || `step-label-${a}`,
         "aria-label": p ? void 0 : g,
         children: [
           /* @__PURE__ */ r("div", { className: "gi-progress-stepper-step", "data-indicator": i, children: V(
-            i || v.Hashtag,
+            i || f.Hashtag,
             a,
             t,
             e
@@ -126,9 +125,10 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
 }) => {
   var g, h;
   const d = (h = (g = e[t]) == null ? void 0 : g.props) == null ? void 0 : h.children, u = s === "horizontal" && d;
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "div",
     {
+      role: "presentation",
       className: $("gi-w-full", {
         "gi-flex": s === "vertical"
       }),
@@ -158,7 +158,7 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
                 c === e.length - 1,
                 l || c < t && c !== t
               ];
-              return /* @__PURE__ */ r("div", { className: "gi-w-full", children: /* @__PURE__ */ r(
+              return /* @__PURE__ */ r("div", { className: "gi-w-full", role: "listitem", children: /* @__PURE__ */ r(
                 B,
                 {
                   stepNumber: c + 1,

package/dist/score-select/score-select.js

@@ -2,7 +2,7 @@
 import { jsxs as u, jsx as d } from "react/jsx-runtime";
 import k from "react";
 import { ButtonGroup as y, ButtonGroupItem as N } from "../button-group/button-group.js";
-import { FormField as f, FormFieldLabel as x, FormFieldHint as j } from "../forms/form-field/form-field.js";
+import { FormField as x, FormFieldLabel as f, FormFieldHint as j } from "../forms/form-field/form-field.js";
 const _ = ({
   name: p,
   size: $ = "medium",
@@ -57,8 +57,8 @@ const _ = ({
       break;
     }
   }
-  return /* @__PURE__ */ u(f, { className: "gi-w-full", children: [
-    /* @__PURE__ */ d(x, { id: v, children: F }),
+  return /* @__PURE__ */ u(x, { className: "gi-w-full", children: [
+    /* @__PURE__ */ d(f, { id: v, children: F }),
     i && /* @__PURE__ */ d(j, { id: b, children: i }),
     /* @__PURE__ */ u(
       "div",

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

@@ -1,5 +1,5 @@
 import { SelectMenuOptionProps, SelectMenuProps } from './types.js';
-export declare const SelectMenu: ({ children, className, onChange, enableSearch, }: SelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMenu: ({ children, className, onChange, enableSearch, isLoading, showNoData, }: SelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectMenuOption: ({ children, value, selected, onChange, disabled, dataTestid, className, hidden, enableSearch, isHighlighted, ...props }: SelectMenuOptionProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const SelectMenuGroupItem: ({ children, label, ...props }: {
     children?: any;

package/dist/select/select-menu.js

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

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

@@ -1,5 +1,8 @@
 import { FC } from 'react';
-import { SelectGroupItemProps, SelectItemProps, SelectProps } from './types.js';
+import { SelectGroupItemProps, SelectItemProps, SelectTableCellProps, SelectProps } from './types.js';
 export declare const SelectGroupItem: ({ children, ...props }: SelectGroupItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectItem: ({ children, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectNative: FC<SelectProps>;
+export declare const SelectNative: FC<SelectProps & {
+    containerProps?: any;
+}>;
+export declare const SelectTableCell: ({ options, defaultValue, onChange, error, ...props }: SelectTableCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/select/select-native.js

@@ -1,27 +1,57 @@
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import { cn as o } from "../cn.js";
-import { Icon as r } from "../icon/icon.js";
-const m = ({
-  children: t,
+import { Icon as m } from "../icon/icon.js";
+const b = ({
+  children: c,
   ...e
-}) => /* @__PURE__ */ c("optgroup", { ...e, role: "group", children: t }), d = ({ children: t, ...e }) => /* @__PURE__ */ c(
+}) => /* @__PURE__ */ a("optgroup", { ...e, role: "group", children: c }), r = ({ children: c, ...e }) => /* @__PURE__ */ a(
   "option",
   {
     className: o("gi-select-option", e.className),
     "aria-selected": e.selected ? "true" : "false",
     ...e,
-    children: t
+    children: c
   }
 ), g = ({
-  children: t,
+  children: c,
   className: e,
-  ...s
-}) => /* @__PURE__ */ l("div", { className: "gi-select-container", children: [
-  /* @__PURE__ */ c("select", { className: o("gi-select", e), ...s, children: t }),
-  /* @__PURE__ */ c(r, { className: "gi-select-icon", icon: "keyboard_arrow_down" })
-] });
+  containerProps: i,
+  ...t
+}) => {
+  var l;
+  return /* @__PURE__ */ d("div", { className: "gi-select-container", ...i, children: [
+    /* @__PURE__ */ a("select", { className: o("gi-select", e), ...t, children: c }),
+    /* @__PURE__ */ a(
+      m,
+      {
+        className: "gi-select-icon",
+        icon: "keyboard_arrow_down",
+        "data-disabled": (l = t == null ? void 0 : t.disabled) == null ? void 0 : l.toString()
+      }
+    )
+  ] });
+}, f = ({
+  options: c,
+  defaultValue: e,
+  onChange: i,
+  error: t,
+  ...l
+}) => /* @__PURE__ */ a(
+  g,
+  {
+    ...l,
+    containerProps: {
+      "data-table-cell": "true",
+      "data-table-cell-error-state": t == null ? void 0 : t.toString()
+    },
+    defaultValue: e,
+    onChange: i,
+    children: c.map(({ value: n, label: s }) => /* @__PURE__ */ a(r, { value: n, children: s }, `${n}-${s}`))
+  }
+);
 export {
-  m as SelectGroupItem,
-  d as SelectItem,
-  g as SelectNative
+  b as SelectGroupItem,
+  r as SelectItem,
+  g as SelectNative,
+  f as SelectTableCell
 };

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { SelectNextGroupProps, SelectNextProps, SelectNextOptionProps } from './types.js';
-export declare const SelectNext: ({ children, onChange: onSelectNextChange, onMenuClose, defaultValue, enableSearch, disabled, ...props }: SelectNextProps) => import("react/jsx-runtime").JSX.Element;
+import { SelectNextGroupProps, SelectNextProps, SelectNextOptionProps, SelectNextTableCellProps } from './types.js';
+export declare const SelectNext: ({ children, value: controlledValue, defaultValue, onChange: onSelectNextChange, onMenuClose, enableSearch, disabled, ...props }: SelectNextProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectItemNext: FC<SelectNextOptionProps>;
 export declare const SelectGroupItemNext: FC<SelectNextGroupProps>;
+export declare const SelectNextTableCell: (props: SelectNextTableCellProps) => import("react/jsx-runtime").JSX.Element;