@ogcio/design-system-react 1.15.1 → 1.15.3

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

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import { InnerStepProps, ProgressStepperProps, StepItemProps } from './types.js';
-export declare const Step: ({ isCurrentStep, isCompleted, isLastStep, stepNumber, orientation, children, indicator, verticalSlot, defaultOpen, dataTestId, ariaLabel, verticalGap, }: InnerStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Step: ({ isCurrentStep, isCompleted, isLastStep, isDisabled, stepNumber, orientation, children, indicator, verticalSlot, defaultOpen, dataTestId, ariaLabel, verticalGap, }: InnerStepProps & {
+    isDisabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const StepItem: FC<StepItemProps>;
-export declare const ProgressStepper: ({ children, currentStepIndex, orientation, indicator, completeAll, dataTestId, className, verticalGap, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressStepper: ({ children, currentStepIndex, orientation, indicator, completeAll, stepStates, dataTestId, className, verticalGap, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;

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,30 +1,28 @@
 "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 { 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] = v(""), [O, f] = v(!1), [S, w] = v([]);
-    K(() => {
-      f(!1), m && setTimeout(() => f(!0), 0);
-    }, [m]), K(() => {
-      const R = P.toArray(o).filter(
-        (a) => V(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))
-                return N(e, {
+              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,114 +30,116 @@ const se = H(
             break;
           }
           case "SelectMenuGroupItem": {
-            const e = a, C = P.toArray(
+            const e = a, G = z.toArray(
               e.props.children
-            ).filter((t) => V(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" ? 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()) || "";
-              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 === "" ? N(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") }) : /* @__PURE__ */ n("ul", { children: S });
-    return /* @__PURE__ */ b("div", { ref: g, className: F("gi-select-menu-container", i), children: [
+    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__ */ 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
 };