@ogcio/design-system-react 1.15.1 → 1.15.2

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

@@ -1,111 +1,113 @@
-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 f } from "./types.js";
-const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { Children as k } from "react";
+import { cn as H } from "../cn.js";
+import { Icon as L } from "../icon/icon.js";
+import { ProgressStepperIndicator as u } from "./types.js";
+const V = (e) => `calc(100% + ${e * 4 - 36}px)`, B = ({
   isNextStep: e,
   orientation: t = "horizontal",
-  isCurrentStep: s,
-  isCompleted: a,
+  isCurrentStep: a,
+  isCompleted: c,
   verticalGap: l
 }) => {
-  const o = t === "vertical" ? { height: j(l) } : void 0;
+  const s = t === "vertical" ? { height: V(l) } : void 0;
   return /* @__PURE__ */ v(
     "div",
     {
       "data-orientation": t,
       "data-next": e,
-      "data-completed": a,
-      "data-current": s,
+      "data-completed": c,
+      "data-current": a,
       className: "gi-progress-stepper-step-connector",
       "aria-hidden": "true",
-      style: o,
+      style: s,
       children: [
-        /* @__PURE__ */ r("span", {}),
-        s ? /* @__PURE__ */ r("span", {}) : null
+        /* @__PURE__ */ o("span", {}),
+        a ? /* @__PURE__ */ o("span", {}) : null
       ]
     }
   );
-}, x = (e) => ({
-  [f.Hashtag]: {
-    completed: /* @__PURE__ */ r(z, { icon: "check" }),
+}, I = (e) => ({
+  [u.Hashtag]: {
+    completed: /* @__PURE__ */ o(L, { icon: "check" }),
     current: () => "#",
     next: () => "#"
   },
-  [f.Number]: {
-    completed: /* @__PURE__ */ r(z, { icon: "check" }),
-    current: (s) => s,
-    next: (s) => s
+  [u.Number]: {
+    completed: /* @__PURE__ */ o(L, { icon: "check" }),
+    current: (a) => a,
+    next: (a) => a
   }
-})[e], V = (e, t, s, a) => {
-  const { current: l, completed: o, next: i } = x(
-    e || f.Hashtag
+})[e], q = (e, t, a, c) => {
+  const { current: l, completed: s, next: i } = I(
+    e || u.Hashtag
   );
-  return s ? o : a ? l(t) : i(t);
-}, B = ({
+  return a ? s : c ? l(t) : i(t);
+}, x = ({
   isCurrentStep: e,
   isCompleted: t,
-  isLastStep: s,
-  stepNumber: a,
-  orientation: l,
-  children: o,
-  indicator: i,
+  isLastStep: a,
+  isDisabled: c = !1,
+  stepNumber: l,
+  orientation: s,
+  children: i,
+  indicator: d,
   verticalSlot: n,
-  defaultOpen: d,
-  dataTestId: u,
-  ariaLabel: g,
-  verticalGap: h
+  defaultOpen: g,
+  dataTestId: b,
+  ariaLabel: h,
+  verticalGap: m
 }) => {
-  const m = !t && !e, c = l === "vertical" && (e || d || t), p = !!o;
-  return /* @__PURE__ */ v("div", { className: "gi-relative", children: [
+  const f = !t && !e, r = s === "vertical" && (e || g || t), p = !!i;
+  return /* @__PURE__ */ v("div", { className: `gi-relative ${c ? "gi-disabled" : ""}`, children: [
     /* @__PURE__ */ v(
       "div",
       {
         className: "gi-progress-stepper-step-container",
-        "data-orientation": l,
+        "data-orientation": s,
         "data-current": e,
         "data-completed": t,
-        "data-next": m,
-        "data-indicator": i,
-        "aria-labelledby": `step-label-${a}`,
-        "data-testid": u || `step-label-${a}`,
-        "aria-label": p ? void 0 : g,
+        "data-disabled": c,
+        "data-next": f,
+        "data-indicator": d,
+        "aria-labelledby": `step-label-${l}`,
+        "data-testid": b || `step-label-${l}`,
+        "aria-label": p ? void 0 : h,
         children: [
-          /* @__PURE__ */ r("div", { className: "gi-progress-stepper-step", "data-indicator": i, children: V(
-            i || f.Hashtag,
-            a,
+          /* @__PURE__ */ o("div", { className: "gi-progress-stepper-step", "data-indicator": d, children: q(
+            d || u.Hashtag,
+            l,
             t,
             e
           ) }),
-          p && /* @__PURE__ */ r(
+          p && /* @__PURE__ */ o(
             "div",
             {
               className: "gi-progress-stepper-step-label",
-              "data-orientation": l,
-              id: `step-label-${a}`,
-              children: o
+              "data-orientation": s,
+              id: `step-label-${l}`,
+              children: i
             }
           )
         ]
       }
     ),
-    s ? null : /* @__PURE__ */ r(
-      k,
+    a ? null : /* @__PURE__ */ o(
+      B,
       {
         isCurrentStep: e,
-        isNextStep: m,
+        isNextStep: f,
         isCompleted: t,
-        orientation: l,
-        stepNumber: a,
-        verticalGap: h
+        orientation: s,
+        stepNumber: l,
+        verticalGap: m
       }
     ),
-    c && n && /* @__PURE__ */ r(
+    r && n && /* @__PURE__ */ o(
       "div",
       {
-        "data-testid": `vertical-step-slot-${a - 1}`,
-        className: $("gi-ml-10", {
+        "data-testid": `vertical-step-slot-${l - 1}`,
+        className: H("gi-ml-10", {
           "gi-pt-5": p,
           "-gi-mt-[34px]": !p && n
         }),
@@ -113,78 +115,79 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
       }
     )
   ] });
-}, I = () => null, J = ({
+}, M = () => null, Q = ({
   children: e,
   currentStepIndex: t = 0,
-  orientation: s = "horizontal",
-  indicator: a = "number",
+  orientation: a = "horizontal",
+  indicator: c = "number",
   completeAll: l,
-  dataTestId: o,
-  className: i,
+  stepStates: s,
+  dataTestId: i,
+  className: d,
   verticalGap: n = 14
 }) => {
-  var g, h;
-  const d = (h = (g = e[t]) == null ? void 0 : g.props) == null ? void 0 : h.children, u = s === "horizontal" && d;
+  var h, m;
+  const g = (m = (h = e[t]) == null ? void 0 : h.props) == null ? void 0 : m.children, b = a === "horizontal" && g;
   return /* @__PURE__ */ v(
     "div",
     {
       role: "presentation",
-      className: $("gi-w-full", {
-        "gi-flex": s === "vertical"
+      className: H("gi-w-full", {
+        "gi-flex": a === "vertical"
       }),
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           "div",
           {
             "data-testid": "progress-stepper",
-            className: $(
+            className: H(
               "gi-progress-stepper",
               {
-                [`gi-gap-${n}`]: s === "vertical"
+                [`gi-gap-${n}`]: a === "vertical"
               },
-              i
+              d
             ),
-            "data-orientation": s,
+            "data-orientation": a,
             role: "list",
             "aria-live": "polite",
-            children: P.map(e, (m, c) => {
-              var b, N;
+            children: k.map(e, (f, r) => {
+              var w, y;
               const {
                 label: p = "",
-                defaultOpen: H,
-                ariaLabel: w
-              } = m.props, [y, L, O] = [
-                !l && t === c,
-                c === e.length - 1,
-                l || c < t && c !== t
-              ];
-              return /* @__PURE__ */ r("div", { className: "gi-w-full", role: "listitem", children: /* @__PURE__ */ r(
-                B,
+                defaultOpen: O,
+                ariaLabel: P
+              } = f.props;
+              let $, N, z;
+              s && s[r] ? ($ = !!s[r].current, N = !!s[r].completed, z = !!s[r].disabled) : ($ = !l && t === r, N = l || r < t, z = !1);
+              const j = r === e.length - 1;
+              return /* @__PURE__ */ o("div", { className: "gi-w-full", role: "listitem", children: /* @__PURE__ */ o(
+                x,
                 {
-                  stepNumber: c + 1,
-                  isCurrentStep: y,
-                  isCompleted: O,
-                  orientation: s,
-                  isLastStep: L,
-                  verticalSlot: (N = (b = e[c]) == null ? void 0 : b.props) == null ? void 0 : N.children,
-                  defaultOpen: H,
-                  indicator: a,
-                  dataTestId: o,
-                  ariaLabel: w,
+                  stepNumber: r + 1,
+                  isCurrentStep: $,
+                  isCompleted: N,
+                  isDisabled: z,
+                  orientation: a,
+                  isLastStep: j,
+                  verticalSlot: (y = (w = e[r]) == null ? void 0 : w.props) == null ? void 0 : y.children,
+                  defaultOpen: O,
+                  indicator: c,
+                  dataTestId: i,
+                  ariaLabel: P,
                   verticalGap: n,
                   children: p
                 },
-                o || `progress-stepper-step-${c}`
+                i || `progress-stepper-step-${r}`
               ) });
             })
           }
         ),
-        u && /* @__PURE__ */ r(
+        b && /* @__PURE__ */ o(
           "div",
           {
             className: "gi-h-full",
             "data-testid": `horizontal-step-slot-${t}`,
-            children: d
+            children: g
           }
         )
       ]
@@ -192,7 +195,7 @@ const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
   );
 };
 export {
-  J as ProgressStepper,
-  B as Step,
-  I as StepItem
+  Q as ProgressStepper,
+  x as Step,
+  M as StepItem
 };

package/dist/progress-stepper/types.d.ts

@@ -23,6 +23,11 @@ export type ProgressStepperProps = {
     indicator?: ProgressStepperIndicatorType;
     className?: string;
     verticalGap?: number;
+    stepStates?: {
+        completed?: boolean;
+        current?: boolean;
+        disabled?: boolean;
+    }[];
 };
 export type InnerStepProps = {
     children: string;

package/dist/select/select-menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import { forwardRef as H, useState as v, useEffect as K, Children as P, isValidElement as V, cloneElement as N } from "react";
+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";
@@ -9,12 +9,12 @@ 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] = v(""), [O, f] = v(!1), [S, w] = v([]);
-    K(() => {
+    const [l, y] = N(""), [O, f] = N(!1), [S, w] = N([]);
+    A(() => {
       f(!1), m && setTimeout(() => f(!0), 0);
-    }, [m]), K(() => {
-      const R = P.toArray(o).filter(
-        (a) => V(a)
+    }, [m]), A(() => {
+      const R = K.toArray(o).filter(
+        (a) => P(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();
@@ -24,7 +24,7 @@ const se = H(
             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))
-                return N(e, {
+                return v(e, {
                   onChange: s,
                   enableSearch: r
                 });
@@ -32,19 +32,19 @@ const se = H(
             break;
           }
           case "SelectMenuGroupItem": {
-            const e = a, C = P.toArray(
+            const e = a, C = K.toArray(
               e.props.children
-            ).filter((t) => V(t)).map((t) => {
+            ).filter((t) => P(t)).map((t) => {
               var p;
-              return ((p = t == null ? void 0 : t.type) == null ? void 0 : p.componentType) === "SelectMenuOption" ? N(t, { onChange: s }) : null;
+              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 $, z, A;
-              const p = ((z = ($ = t.props.children) == null ? void 0 : $.toString()) == null ? void 0 : z.toLowerCase()) || "", d = ((A = t.props.value) == null ? void 0 : A.toLowerCase()) || "";
+              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()));
             });
-            return C.length > 0 || l === "" ? N(e, {
+            return C.length > 0 || l === "" ? v(e, {
               children: C
             }) : null;
           }
@@ -56,7 +56,9 @@ const se = H(
     }, [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") }) : /* @__PURE__ */ n("ul", { children: S });
+    }, 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", {
+      defaultValue: "No data found."
+    }) }) : /* @__PURE__ */ n("ul", { children: S });
     return /* @__PURE__ */ b("div", { ref: g, className: F("gi-select-menu-container", i), children: [
       r && /* @__PURE__ */ n("div", { className: "gi-select-menu-input-container", children: /* @__PURE__ */ n(
         Q,