@ogcio/design-system-react 1.15.1 → 1.15.2

package/dist/input-text/input-text.d.ts

@@ -4,10 +4,10 @@ export declare const InputText: import('react').ForwardRefExoticComponent<import
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     inputClassName?: string;
-    iconStart?: import('../icon/icon.js').IconId;
+    iconStart?: import('react').ReactNode;
     onIconStartClick?: () => void;
     iconStartClassName?: string;
-    iconEnd?: import('../icon/icon.js').IconId;
+    iconEnd?: import('react').ReactNode;
     iconEndClassName?: string;
     onIconEndClick?: () => void;
     inputActionButton?: InputActionButtonProps;
@@ -22,10 +22,10 @@ export declare const InputTextTableCell: import('react').ForwardRefExoticCompone
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     inputClassName?: string;
-    iconStart?: import('../icon/icon.js').IconId;
+    iconStart?: import('react').ReactNode;
     onIconStartClick?: () => void;
     iconStartClassName?: string;
-    iconEnd?: import('../icon/icon.js').IconId;
+    iconEnd?: import('react').ReactNode;
     iconEndClassName?: string;
     onIconEndClick?: () => void;
     inputActionButton?: InputActionButtonProps;

package/dist/input-text/input-text.js

@@ -1,45 +1,45 @@
 "use client";
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as u, useRef as S, useImperativeHandle as W, useMemo as _ } from "react";
-import { cn as l } from "../cn.js";
+import { jsx as n, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as d, useRef as W, useImperativeHandle as _, useMemo as j } from "react";
+import { cn as u } from "../cn.js";
 import { Icon as m } from "../icon/icon.js";
-import { IconButton as j } from "../icon-button/icon-button.js";
-import { Input as O } from "../primitives/input.js";
-const H = u(
-  ({ onChange: a, ...e }, r) => {
-    const t = S(null);
-    return W(r, () => t.current), /* @__PURE__ */ n(
+import { IconButton as O } from "../icon-button/icon-button.js";
+import { Input as y } from "../primitives/input.js";
+const H = d(
+  ({ onChange: a, ...t }, r) => {
+    const e = W(null);
+    return _(r, () => e.current), /* @__PURE__ */ n(
       p,
       {
-        ...e,
+        ...t,
         onChange: a,
-        ref: t,
+        ref: e,
         inputActionButton: {
           icon: "close",
           onClick: () => {
-            t != null && t.current && (t.current.value = "", t.current.focus());
-            const d = {
-              target: t.current,
-              currentTarget: t.current,
+            e != null && e.current && (e.current.value = "", e.current.focus());
+            const f = {
+              target: e.current,
+              currentTarget: e.current,
               __origin: "clear_button"
             };
-            a && a(d);
+            a && a(f);
           }
         }
       }
     );
   }
-), p = u(
+), p = d(
   ({
     prefix: a,
-    inputActionButton: e,
+    inputActionButton: t,
     inputActionPosition: r = "beforeSuffix",
-    suffix: t,
-    halfFluid: c = !1,
-    className: d,
-    type: I = "text",
-    iconStart: o,
-    iconStartClassName: g,
+    suffix: e,
+    halfFluid: l = !1,
+    className: f,
+    type: g = "text",
+    iconStart: c,
+    iconStartClassName: I,
     onIconStartClick: v,
     iconEnd: s,
     iconEndClassName: N,
@@ -50,48 +50,55 @@ const H = u(
     containerProps: b,
     ...k
   }, z) => {
-    const R = _(() => e && r === "beforeSuffix" ? /* @__PURE__ */ n(
+    const R = j(() => t && r === "beforeSuffix" ? /* @__PURE__ */ n(
       "div",
       {
         className: "gi-input-text-action-before-suffix",
-        "data-suffix": !!t,
+        "data-suffix": !!e,
         "data-has-icon-end": !!s,
-        children: /* @__PURE__ */ n(x, { ...e, disabled: i })
+        children: /* @__PURE__ */ n(x, { ...t, disabled: i })
       }
-    ) : null, [e]);
-    return /* @__PURE__ */ f(
+    ) : null, [t]);
+    return /* @__PURE__ */ o(
       "div",
       {
-        className: l(d, "gi-input-text-container"),
+        className: u(f, "gi-input-text-container"),
         ...b,
         children: [
           a && /* @__PURE__ */ n("div", { className: "gi-input-text-prefix", "data-disabled": i, children: a }),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ o(
             "div",
             {
-              className: l("gi-input-text-inner", {
-                "gi-input-half-width": c
+              className: u("gi-input-text-inner", {
+                "gi-input-half-width": l
               }),
               children: [
-                o && /* @__PURE__ */ n(
+                c && /* @__PURE__ */ n(
                   "div",
                   {
-                    className: l("gi-input-text-icon-start", g),
+                    className: u("gi-input-text-icon-start", I),
                     onClick: v,
                     "data-prefix": !!a,
-                    children: /* @__PURE__ */ n(m, { icon: o, size: "md", disabled: i })
+                    children: typeof c == "string" ? /* @__PURE__ */ n(
+                      m,
+                      {
+                        icon: c,
+                        size: "md",
+                        disabled: i
+                      }
+                    ) : c
                   }
                 ),
                 /* @__PURE__ */ n(
-                  O,
+                  y,
                   {
-                    type: I,
-                    "data-icon-start": !!o,
+                    type: g,
+                    "data-icon-start": !!c,
                     "data-icon-end": !!s,
-                    "data-end-element": !!e,
+                    "data-end-element": !!t,
                     "data-prefix": !!a,
-                    "data-suffix": !!t,
-                    className: l("gi-input-text", w),
+                    "data-suffix": !!e,
+                    className: u("gi-input-text", w),
                     ref: z,
                     disabled: i,
                     ...k
@@ -100,62 +107,62 @@ const H = u(
                 s && /* @__PURE__ */ n(
                   "div",
                   {
-                    className: l("gi-input-text-icon-end", N),
-                    "data-end-element": !!e && r === "afterSuffix",
-                    "data-suffix": !!t,
+                    className: u("gi-input-text-icon-end", N),
+                    "data-end-element": !!t && r === "afterSuffix",
+                    "data-suffix": !!e,
                     onClick: T,
                     ref: C,
-                    children: /* @__PURE__ */ n(m, { icon: s, size: "md", disabled: i })
+                    children: typeof s == "string" ? /* @__PURE__ */ n(m, { icon: s, size: "md", disabled: i }) : s
                   }
                 ),
                 R
               ]
             }
           ),
-          e && r === "afterSuffix" && /* @__PURE__ */ n("div", { className: "gi-input-text-end-element", "data-suffix": !!t, children: /* @__PURE__ */ n(x, { ...e, disabled: i }) }),
-          t && /* @__PURE__ */ n("div", { className: "gi-input-text-suffix", "data-disabled": i, children: t })
+          t && r === "afterSuffix" && /* @__PURE__ */ n("div", { className: "gi-input-text-end-element", "data-suffix": !!e, children: /* @__PURE__ */ n(x, { ...t, disabled: i }) }),
+          e && /* @__PURE__ */ n("div", { className: "gi-input-text-suffix", "data-disabled": i, children: e })
         ]
       }
     );
   }
 ), x = ({
   onClick: a,
-  ariaLabel: e,
+  ariaLabel: t,
   icon: r,
-  dataTestId: t,
-  ...c
+  dataTestId: e,
+  ...l
 }) => /* @__PURE__ */ n(
-  j,
+  O,
   {
-    ...c,
+    ...l,
     icon: {
       icon: r
     },
-    "data-testid": t,
-    "aria-label": e || "",
+    "data-testid": e,
+    "aria-label": t || "",
     onClick: a,
     variant: "flat",
     size: "small",
     appearance: "dark"
   }
-), h = u(
-  ({ type: a = "text", clearButtonEnabled: e, ...r }, t) => e || a === "search" ? /* @__PURE__ */ n(H, { ref: t, type: a, ...r }) : /* @__PURE__ */ n(p, { ref: t, type: a, ...r })
+), h = d(
+  ({ type: a = "text", clearButtonEnabled: t, ...r }, e) => t || a === "search" ? /* @__PURE__ */ n(H, { ref: e, type: a, ...r }) : /* @__PURE__ */ n(p, { ref: e, type: a, ...r })
 );
 h.displayName = "InputText";
-const G = u(({ type: a = "text", error: e, ...r }, t) => /* @__PURE__ */ n(
+const F = d(({ type: a = "text", error: t, ...r }, e) => /* @__PURE__ */ n(
   h,
   {
     ...r,
     containerProps: {
       "data-table-cell": !0,
-      "data-table-cell-error-state": e == null ? void 0 : e.toString()
+      "data-table-cell-error-state": t == null ? void 0 : t.toString()
     },
-    ref: t,
+    ref: e,
     type: a
   }
 ));
 export {
   x as InputActionButton,
   h as InputText,
-  G as InputTextTableCell
+  F as InputTextTableCell
 };

package/dist/input-text/type.d.ts

@@ -8,14 +8,15 @@ export type InputActionButtonProps = {
     dataTestId?: string;
     ref?: React.Ref<HTMLButtonElement>;
 };
+type IconProp = IconId | React.ReactNode;
 export type InputTextProps = React.InputHTMLAttributes<HTMLInputElement> & {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     inputClassName?: string;
-    iconStart?: IconId;
+    iconStart?: IconProp;
     onIconStartClick?: () => void;
     iconStartClassName?: string;
-    iconEnd?: IconId;
+    iconEnd?: IconProp;
     iconEndClassName?: string;
     onIconEndClick?: () => void;
     inputActionButton?: InputActionButtonProps;
@@ -30,3 +31,4 @@ export type InputTextTableCellProps = InputTextProps & {
     error?: boolean;
     disabled?: boolean;
 };
+export {};

package/dist/modal/modal.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as n, jsxs as f, Fragment as F } from "react/jsx-runtime";
-import { isValidElement as j, cloneElement as y, useState as A, useRef as P, Children as w, useEffect as x } from "react";
+import { jsx as l, jsxs as g, Fragment as F } from "react/jsx-runtime";
+import { isValidElement as j, cloneElement as y, useState as A, useRef as O, Children as P, useEffect as w } from "react";
 import { createPortal as H } from "react-dom";
 import { Button as B } from "../button/button.js";
 import { cn as m } from "../cn.js";
@@ -9,39 +9,39 @@ import { useAriaHider as V } from "../hooks/use-aria-hider.js";
 import { useFocusTrap as _ } from "../hooks/use-focus-trap.js";
 import { Icon as $ } from "../icon/icon.js";
 import { IconButton as D } from "../icon-button/icon-button.js";
-const g = (o, e, t) => {
-  var l;
-  if (!j(t))
+const f = (o, t, e) => {
+  var n;
+  if (!j(e))
     return !1;
-  const r = t.type;
+  const r = e.type;
   return r === o || // @ts-expect-error The TS error says there is no _owner but there is
-  ((l = t == null ? void 0 : t._owner) == null ? void 0 : l.name) === e || r.componentType === e;
+  ((n = e == null ? void 0 : e._owner) == null ? void 0 : n.name) === t || r.componentType === t;
 }, N = {
   flat: 0,
   secondary: 1,
   primary: 2
 }, W = ({
   label: o,
-  size: e = "small",
-  ...t
+  size: t = "small",
+  ...e
 }) => {
   let r = "sm";
-  return (e === "large" || e === "medium") && (r = "md"), o ? /* @__PURE__ */ n(
+  return (t === "large" || t === "medium") && (r = "md"), o ? /* @__PURE__ */ l(
     B,
     {
-      onClick: t.onClick,
+      onClick: e.onClick,
       variant: "flat",
-      size: e,
+      size: t,
       appearance: "dark",
       className: "gi-modal-icon",
       "aria-label": o,
-      ...t,
-      children: /* @__PURE__ */ f(F, { children: [
+      ...e,
+      children: /* @__PURE__ */ g(F, { children: [
         o,
-        /* @__PURE__ */ n($, { icon: "close", size: r })
+        /* @__PURE__ */ l($, { icon: "close", size: r })
       ] })
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ l(
     D,
     {
       className: "gi-modal-icon",
@@ -49,19 +49,19 @@ const g = (o, e, t) => {
         icon: "close"
       },
       "aria-label": "Close modal",
-      onClick: t.onClick,
+      onClick: e.onClick,
       variant: "flat",
-      size: e,
+      size: t,
       appearance: "dark",
-      ...t
+      ...e
     }
   );
 }, q = ({
   position: o = "center",
-  size: e = "lg",
-  closeOnClick: t = !0,
+  size: t = "lg",
+  closeOnClick: e = !0,
   closeOnOverlayClick: r = !0,
-  isOpen: l,
+  isOpen: n,
   onClose: u,
   closeButtonLabel: d,
   className: p,
@@ -70,40 +70,41 @@ const g = (o, e, t) => {
   dataTestId: s,
   ...M
 }) => {
-  const T = P(null);
-  V(T.current, l);
-  const b = w.toArray(a), k = b.find(
-    (c) => g(v, "ModalTitle", c)
+  const T = O(null);
+  V(T.current, n);
+  const b = P.toArray(a), k = b.find(
+    (c) => f(v, "ModalTitle", c)
   ), h = b.find(
-    (c) => g(C, "ModalFooter", c)
+    (c) => f(C, "ModalFooter", c)
   ), I = k ? y(k, {
-    as: e === "sm" ? "h5" : "h4"
-  }) : null, E = h ? y(h, {
-    dataModalSize: e
-  }) : null, O = b.filter(
-    (c) => !g(v, "ModalTitle", c) && !g(C, "ModalFooter", c)
+    as: t === "sm" ? "h5" : "h4"
+  }) : null, x = h ? y(h, {
+    dataModalSize: t
+  }) : null, E = b.filter(
+    (c) => !f(v, "ModalTitle", c) && !f(C, "ModalFooter", c)
   );
-  return /* @__PURE__ */ n(z, { modalRef: T, isOpen: l, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(z, { modalRef: T, isOpen: n, children: /* @__PURE__ */ l(
     "div",
     {
       ...M,
       ref: T,
       className: m("gi-modal", {
-        "gi-modal-open": l,
-        "gi-modal-close": !l
+        "gi-modal-open": n,
+        "gi-modal-close": !n
       }),
       "data-testid": s || "modal",
       onClick: (c) => {
-        c.currentTarget === c.target && t && r && u();
+        c.currentTarget === c.target && e && r && u();
       },
-      children: /* @__PURE__ */ f(
+      tabIndex: -1,
+      children: /* @__PURE__ */ g(
         "div",
         {
           "data-testid": "modal-container",
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "dialog",
-          "data-size": e,
+          "data-size": t,
           "data-position": o,
           className: m(
             "gi-modal-container-control",
@@ -117,9 +118,9 @@ const g = (o, e, t) => {
             p
           ),
           children: [
-            /* @__PURE__ */ f("div", { children: [
+            /* @__PURE__ */ g("div", { children: [
               I,
-              t && /* @__PURE__ */ n(
+              e && /* @__PURE__ */ l(
                 W,
                 {
                   onClick: u,
@@ -128,26 +129,26 @@ const g = (o, e, t) => {
                 }
               )
             ] }),
-            /* @__PURE__ */ f("div", { className: m({ "gi-pb-6": !h }), children: [
-              O,
-              E
+            /* @__PURE__ */ g("div", { className: m({ "gi-pb-6": !h }), children: [
+              E,
+              x
             ] })
           ]
         }
       )
     }
   ) });
-}, v = ({ children: o, as: e = "h4", ...t }) => /* @__PURE__ */ n("div", { className: "gi-flex-1", id: t.id, "aria-label": o == null ? void 0 : o.toString(), children: /* @__PURE__ */ n(S, { as: e, ...t, children: o }) });
+}, v = ({ children: o, as: t = "h4", ...e }) => /* @__PURE__ */ l("div", { className: "gi-flex-1", id: e.id, "aria-label": o == null ? void 0 : o.toString(), children: /* @__PURE__ */ l(S, { as: t, ...e, children: o }) });
 Object.defineProperty(v, "componentType", {
   value: "ModalTitle",
   writable: !1,
   enumerable: !1
 });
 v.displayName = "ModalTitle";
-const te = ({
+const et = ({
   children: o,
-  className: e
-}) => /* @__PURE__ */ n(
+  className: t
+}) => /* @__PURE__ */ l(
   "div",
   {
     id: "gi-modal-body",
@@ -155,40 +156,40 @@ const te = ({
     role: "document",
     className: m(
       {
-        "gi-modal-body": !e
+        "gi-modal-body": !t
       },
-      e
+      t
     ),
     children: o
   }
 ), C = ({
   className: o,
-  children: e,
-  orientation: t,
+  children: t,
+  orientation: e,
   dataModalSize: r
 }) => {
-  const d = (Array.isArray(e) ? e : [e]).filter((a) => {
+  const d = (Array.isArray(t) ? t : [t]).filter((a) => {
     var i, s;
     return j(a) && (a.type === B || ((i = a.type) == null ? void 0 : i.displayName) === "Button" || ((s = a.props) == null ? void 0 : s["data-button"]));
   }).sort((a, i) => {
     const s = a.props.variant ?? "primary", M = i.props.variant ?? "primary";
     return (N[s] || 0) - (N[M] || 0);
   }), p = m({
-    "gi-justify-center sm:gi-justify-start": !t && r !== "sm",
-    "gi-justify-center": t === "vertical" || r === "sm",
-    "gi-justify-start": t === "horizontal"
+    "gi-justify-center sm:gi-justify-start": !e && r !== "sm",
+    "gi-justify-center": e === "vertical" || r === "sm",
+    "gi-justify-start": e === "horizontal"
   });
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: m(o, {
         "gi-pt-6": d.length === 0,
         "gi-modal-footer": d.length
       }),
-      children: d.length > 0 && /* @__PURE__ */ n(
+      children: d.length > 0 && /* @__PURE__ */ l(
         "div",
         {
-          "data-orientation": t || "unset",
+          "data-orientation": e || "unset",
           "data-modal-size": r,
           children: d.map(
             (a, i) => {
@@ -213,35 +214,35 @@ Object.defineProperty(C, "componentType", {
 C.displayName = "ModalFooter";
 const z = ({
   children: o,
-  modalRef: e,
-  isOpen: t
+  modalRef: t,
+  isOpen: e
 }) => {
-  const [r, l] = A(!1);
-  return x(() => {
-    l(!0);
-  }, []), _(e == null ? void 0 : e.current, t && r, {
-    initialFocus: !1,
-    fallbackFocus: () => e == null ? void 0 : e.current
+  const [r, n] = A(!1);
+  return w(() => {
+    n(!0);
+  }, []), _(t == null ? void 0 : t.current, e && r, {
+    initialFocus: (t == null ? void 0 : t.current) ?? !0,
+    fallbackFocus: () => t == null ? void 0 : t.current
   }), r ? H(o, document.body) : null;
-}, oe = ({
+}, ot = ({
   children: o,
-  triggerButton: e,
-  startsOpen: t,
+  triggerButton: t,
+  startsOpen: e,
   ...r
 }) => {
-  const [l, u] = A(!!t), d = () => u(!0), p = () => u(!1), a = y(e, {
+  const [n, u] = A(!!e), d = () => u(!0), p = () => u(!1), a = y(t, {
     "data-testid": "modal-trigger-button-container",
     "aria-haspopup": "dialog",
     onClick: d
   });
-  return /* @__PURE__ */ f(F, { children: [
+  return /* @__PURE__ */ g(F, { children: [
     a,
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ l(
       q,
       {
         onClose: p,
         position: "center",
-        isOpen: l,
+        isOpen: n,
         ...r,
         children: o
       }
@@ -249,8 +250,8 @@ const z = ({
   ] });
 };
 export {
-  oe as Modal,
-  te as ModalBody,
+  ot as Modal,
+  et as ModalBody,
   C as ModalFooter,
   v as ModalTitle,
   q as ModalWrapper

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;