@hortiview/shared-components 2.14.0 → 2.16.0

package/dist/components/Stepper/components/StepperHeader.js

@@ -1,72 +1,143 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { G as s } from "../../../index.es-oxil0uFe.js";
-import { T as n } from "../../../index.es-SjZ_-d7U.js";
-import { s as t } from "../../../stepper.module-c-CWmpkt.js";
-import { StepperIndicator as l } from "./StepperIndicator.js";
-const y = ({
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { G as i } from "../../../index.es-oxil0uFe.js";
+import { T as o } from "../../../index.es-SjZ_-d7U.js";
+import { useMemo as f, Fragment as A } from "react";
+import { u as v } from "../../../useBreakpoints-MzTZ0tCT.js";
+import { s as t } from "../../../stepper.module-DR_FbENS.js";
+import { StepperType as c } from "../stepperTypes.js";
+import { StepperItem as h } from "./StepperItem.js";
+const k = ({
   stepperType: d,
-  steps: e,
-  currentStep: i,
-  customTotalSteps: p
-}) => d === "description" ? /* @__PURE__ */ a(
-  s,
-  {
-    "data-testid": "description-stepper-header",
-    className: t.stepperDescriptionContainer,
-    secondaryAlign: "stretch",
-    gap: "none",
-    fullWidth: !0,
-    children: [
-      /* @__PURE__ */ r(
-        s,
-        {
-          className: t.stepperDescriptionProgress,
-          primaryAlign: "center",
-          secondaryAlign: "center",
-          children: /* @__PURE__ */ a(n, { "data-testid": "description-stepper-header-progress", level: 2, children: [
-            e[i].step,
-            "/",
-            p ?? e.length
-          ] })
-        }
-      ),
-      /* @__PURE__ */ r(
-        s,
-        {
-          className: t.stepperDescriptionText,
-          primaryAlign: "start",
-          secondaryAlign: "center",
-          children: /* @__PURE__ */ r(n, { "data-testid": "description-stepper-header-description", level: 2, children: e[i].title ?? "" })
-        }
-      )
-    ]
-  }
-) : /* @__PURE__ */ a(
-  s,
-  {
-    "data-testid": "stepper-header",
-    className: t.stepperContainer,
-    gap: "dense",
-    primaryAlign: "center",
-    secondaryAlign: "center",
-    direction: "vertical",
-    fullWidth: !0,
-    children: [
-      /* @__PURE__ */ r(l, { steps: e, currentStep: i }),
-      /* @__PURE__ */ r(
-        n,
-        {
-          "data-testid": "stepper-header-description",
-          level: 2,
-          bold: !0,
-          tag: "div",
-          className: t.stepperTitle,
-          children: e[i]?.title
-        }
-      )
-    ]
-  }
-);
+  stepsData: l,
+  overwriteTotalSteps: u
+}) => {
+  const { isMobile: g } = v(), { currentStepData: s, visibleSteps: p } = f(() => {
+    const e = l.filter((a) => a.isRendered);
+    return { currentStepData: e.find((a) => a.isActive) ?? e[e.length - 1], visibleSteps: e };
+  }, [l]);
+  if (d === c.DESKTOP)
+    return g ? /* @__PURE__ */ r(
+      i,
+      {
+        "data-testid": "desktop-stepper-header",
+        className: t.stepperDesktopHeaderContainer,
+        primaryAlign: "space-between",
+        secondaryAlign: "center",
+        gap: "standard",
+        fullWidth: !0,
+        children: /* @__PURE__ */ r(
+          h,
+          {
+            stepDefinition: s.step,
+            stepActive: !0,
+            stepCompleted: !1
+          },
+          s.step.id
+        )
+      }
+    ) : /* @__PURE__ */ r(
+      i,
+      {
+        "data-testid": "desktop-stepper-header",
+        className: t.stepperDesktopHeaderContainer,
+        primaryAlign: "space-between",
+        secondaryAlign: "center",
+        gap: "standard",
+        fullWidth: !0,
+        children: p.map((e, m) => /* @__PURE__ */ n(A, { children: [
+          m > 0 && /* @__PURE__ */ r(
+            "hr",
+            {
+              className: `${t.stepperItemConnector} ${e.isActive || e.isCompleted ? t.stepperItemConnectorCompleted : ""}`,
+              "aria-hidden": "true",
+              role: "presentation",
+              "data-testid": `stepper-connector-before-${e.step.id}`
+            }
+          ),
+          /* @__PURE__ */ r(
+            h,
+            {
+              maxWidth: `${100 / (p.length + 0.5)}%`,
+              stepDefinition: e.step,
+              stepActive: e.isActive,
+              stepCompleted: e.isCompleted
+            }
+          )
+        ] }, e.step.id))
+      }
+    );
+  if (d === c.SMALL)
+    return /* @__PURE__ */ n(
+      i,
+      {
+        "data-testid": "description-stepper-header",
+        className: t.stepperDescriptionContainer,
+        secondaryAlign: "stretch",
+        gap: "none",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ r(
+            i,
+            {
+              className: t.stepperDescriptionProgress,
+              primaryAlign: "center",
+              secondaryAlign: "center",
+              children: /* @__PURE__ */ n(o, { "data-testid": "description-stepper-header-progress", level: 2, children: [
+                s.step.stepNumber,
+                "/",
+                u ?? p.length
+              ] })
+            }
+          ),
+          /* @__PURE__ */ r(
+            i,
+            {
+              className: t.stepperDescriptionText,
+              primaryAlign: "start",
+              secondaryAlign: "center",
+              children: /* @__PURE__ */ r(o, { "data-testid": "description-stepper-header-description", level: 2, children: s.step.text })
+            }
+          )
+        ]
+      }
+    );
+  if (d === c.DOTS)
+    return /* @__PURE__ */ n(
+      i,
+      {
+        "data-testid": "dots-stepper-header",
+        className: t.stepperContainer,
+        gap: "dense",
+        primaryAlign: "center",
+        secondaryAlign: "center",
+        direction: "vertical",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ r(i, { gap: "dense", "data-testid": "stepper-indicator", children: p.map((e) => /* @__PURE__ */ r(
+            "div",
+            {
+              "data-testid": `stepper-indicator-${e.step.id}`,
+              className: `${t.stepperIndicatorItem}
+                ${e.step.optional ? t.stepperIndicatorItemOptional : ""}
+                ${e.isActive || e.isCompleted ? t.stepperIndicatorItemActive : ""}`
+            },
+            `indicator_${e.step.id}`
+          )) }),
+          /* @__PURE__ */ r(
+            o,
+            {
+              "data-testid": "stepper-header-description",
+              level: 2,
+              bold: !0,
+              tag: "div",
+              className: t.stepperTitle,
+              children: s.step.text
+            }
+          )
+        ]
+      }
+    );
+};
 export {
-  y as StepperHeader
+  k as StepperHeader
 };

package/dist/components/Stepper/components/StepperItem.d.ts

@@ -0,0 +1,8 @@
+import { StepperItemProps } from '../stepperTypes';
+
+/**
+ * A component for the Desktop-type stepper. Shows the number of the step, title and description
+ * @param step - Step to be displayed in the stepper item.
+ * @returns
+ */
+export declare const StepperItem: ({ maxWidth: maxWidth, stepDefinition, stepActive, stepCompleted, }: StepperItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/components/StepperItem.js

@@ -0,0 +1,44 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { G as o } from "../../../index.es-oxil0uFe.js";
+import { T as a } from "../../../index.es-SjZ_-d7U.js";
+import { Iconify as i } from "../../Iconify/Iconify.js";
+import { s as t } from "../../../stepper.module-DR_FbENS.js";
+const N = ({
+  maxWidth: d,
+  stepDefinition: e,
+  stepActive: s,
+  stepCompleted: c
+}) => {
+  const p = [
+    t.stepperItemNumber,
+    s || c ? t.stepperItemNumberActive : ""
+  ].filter(Boolean).join(" "), l = [t.itemText, s ? t.itemTextActive : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ m(
+    o,
+    {
+      className: t.stepperItem,
+      style: { maxWidth: d },
+      gap: "dense",
+      secondaryAlign: "center",
+      "data-testid": `stepper-item-${e.id}`,
+      children: [
+        /* @__PURE__ */ r("div", { className: p, "data-testid": `stepper-item-circle-for-${e.id}`, children: c ? /* @__PURE__ */ r(
+          i,
+          {
+            icon: "check",
+            "aria-label": `Step ${e.stepNumber} completed`,
+            "data-testid": `stepper-item-check-for-${e.id}`
+          }
+        ) : /* @__PURE__ */ r(a, { children: e.stepNumber }) }),
+        /* @__PURE__ */ m(o, { direction: "vertical", secondaryAlign: "start", gap: "none", children: [
+          /* @__PURE__ */ r(a, { bold: !0, level: 1, className: l, children: e.text }),
+          e.secondaryText && /* @__PURE__ */ r(a, { level: 2, className: l, children: e.secondaryText })
+        ] })
+      ]
+    },
+    e.id
+  );
+};
+export {
+  N as StepperItem
+};

package/dist/components/Stepper/stepperTypes.d.ts

@@ -1,54 +1,71 @@
 import { ButtonProps } from '@element-public/react-button';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
+export declare enum StepperType {
+    DESKTOP = "DESKTOP",
+    SMALL = "SMALL",
+    DOTS = "DOTS"
+}
 /**
- * @param {string} name - The unique name of the step.
- * @param {number} step - The step number, starting from 0.
- * @param {string} title - The title of the step showing in the Stepper.
- * @param {boolean} optional - Whether the step is optional or not showing a different design.
- * @param {StepperButtonProps} nextButtonProps - Props for the next button, including onClick, label, className and disabled state.
- * @param {StepperButtonProps} prevButtonProps - Props for the previous button, including onClick, label, className and disabled state.
+ * Defines the structure of a step in the stepper
  */
 export type Step = {
     /**
-     * The unique name of the step.
+     * The internal id of the step.
      */
-    name: string;
+    id: string | number;
     /**
-     * The step number that is displayed when the stepper type is 'description'.
-     * @remarks This property is not visible within the stepper type 'default' and only serves as an identifier for the step.
+     * The step number that is displayed when the stepper shows a step number (StepperType.DESKTOP and StepperType.SMALL)
      */
-    step: number;
+    stepNumber: number;
     /**
-     * The title/description of the step showing in the Stepper.
+     * Whether to exclude the step from the header. Only applicable for StepperType.DESKTOP.
      */
-    title: string | ReactNode;
+    excludeFromHeader?: boolean;
+    /**
+     * Whether activating this step should mark the previous step as completed. Only works in StepperType.DESKTOP
+     * @default false
+     *
+     * @remarks By default a step is treated as completed when the next visible step is active. This flag allows excluded steps (invisible ones) to complete the previous step.
+     *
+     * Example applications:
+     *
+     * Show a final completion step: [1 -> 2 -> 2.5 (excluded, excludedStepCompletesPreviousStep == true)] ---
+     * Step 2 is completed as soon as step 2.5 is active, to show a final "completion" step at the end without adding a header item.
+     */
+    excludedStepCompletesPreviousStep?: boolean;
+    /**
+     * The title of the step showing in the Stepper
+     */
+    text: string | ReactNode;
+    /**
+     * Additional secondary text showing in the Stepper. Only applicable for the 'desktop' type
+     */
+    secondaryText?: string | ReactNode;
     /**
      * Whether the step is optional or not showing a different design.
      *
      * @remarks There's no adjusted display logic for optional steps when using the description type stepper.
-     * In that case, use the title prop / description to indicate that the step is optional.
+     * In that case, use the displayed text to indicate that the step is optional.
      */
     optional?: boolean;
     /**
-     * The props for the next button, including onClick, label, className and disabled state. {@link StepperButtonProps}
+     * The props for the next button, including onClick, label, className and disabled state.
+     * Will print a console error if the button is embedded but no props are provided and return null for the entire stepper.
+     *
+     * See {@link StepperButtonProps} for details.
      */
-    nextButtonProps: StepperButtonProps;
+    nextButtonProps: Partial<StepperButtonProps>;
     /**
-     * The props for the previous button, including onClick, label, className and disabled state. {@link StepperButtonProps}
+     * The props for the previous button, including onClick, label, className and disabled state.
+     * Will print a console error if the button is embedded but no props are provided and return null for the entire stepper.
+     *
+     * See {@link StepperButtonProps} for details.
      */
-    prevButtonProps: StepperButtonProps;
+    prevButtonProps: Partial<StepperButtonProps>;
 };
 /**
- * @param {string} className - The class name for the button.
- * @param {boolean} disabled - Whether the button is disabled or not.
- * @param {() => void} onClick - The function to be called when the button is clicked.
- * @param {string | ReactNode} label - The label of the button.
- * @param {string | ReactNode} leadingIcon - A custom leading icon for the button. Takes precedence over showArrowIcon.
- * @param {string | ReactNode} trailingIcon - A custom trailing icon for the button. Takes precedence over showArrowIcon.
- * @param {boolean} showArrowIcon - Whether to show a leading/trailing arrow icon for the button.
- * @param {string} buttonSize - The size of the button, defaults to 'themeDefault'.
- * @param {boolean} fullWidth - Whether the button should take the full width of its container. *
+ * Defines the props for the stepper buttons, including onClick, label, className and disabled state.
  */
 export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'fullWidth'> & {
     /**
@@ -60,7 +77,8 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
      */
     label: string | ReactNode;
     /**
-     * Whether to show a leading/trailing arrow icon for the button.
+     * Show a right arrow (->) for the next button and a (<-) left arrow for the previous button.
+     * @remarks This is overridden by the presence of leadingIcon or trailingIcon.
      */
     showArrowIcon?: boolean;
     /**
@@ -77,7 +95,7 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
     buttonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'themeDefault';
 };
 /**
- * @param {string} stepperType - The type of the stepper indicator. Defaults to 'dots'.
+ * @param {StepperType} stepperType - The type of the stepper indicator. Defaults to StepperType.DESKTOP. See {@link StepperType}
  * @param {Step[]} steps - An array of steps for the stepper.
  * @param {number} currentStep - The current step index.
  * @param {boolean} isStepLoading - A boolean indicating if the current step is loading. If true, the next button will be disabled and show a loading state.
@@ -88,27 +106,30 @@ export type StepperButtonProps = Pick<ButtonProps, 'className' | 'disabled' | 'f
 export type StepperProps = {
     /**
      * The display-type of the Stepper.
-     * - `default` – Shows a row of dots for each step.
-     * - `description` – Displays progress numerically (n/n) and the title next to it.
+     * - StepperType.DESKTOP: EDS-like default stepper appearance. (Do not use on mobile)
+     * - StepperType.SMALL: Compact version with n/n progress display.
+     * - StepperType.DOTS: Centered dots and title underneath.
      *
-     * @default default
+     * @default StepperType.DESKTOP
      */
-    stepperType?: 'default' | 'description';
+    stepperType?: StepperType;
     /**
      * An array of steps for the stepper.
      */
     steps: Step[];
     /**
-     * A custom total number of steps to display in the stepper header.
-     * @remarks This can be used to show a different total number of steps than the length of the steps array.
+     * The name of the current step, matching the name property of one of the steps in the steps array.
+     * This is used to determine which step is currently active and displayed in the stepper.
      */
-    customTotalSteps?: number;
+    currentStepId: Step['id'];
     /**
-     * The current step index.
+     * Set a custom number of total steps to display in the stepper header.
+     * Only applicable for StepperType.SMALL.
+     * @remarks This can be used to show a different total number of steps than the length of the steps array. (Think half steps -> 1, 1.5, 2)
      */
-    currentStep: number;
+    overwriteTotalSteps?: number;
     /**
-     * a flag which indicates if the current step is loading.
+     * Flag which indicates if the current step is loading.
      */
     isStepLoading?: boolean;
     /**
@@ -116,11 +137,16 @@ export type StepperProps = {
      * @default true
      */
     showStepperHeader?: boolean;
+    /**
+     * An indicator of whether to show the stepper buttons.
+     * @default true
+     */
+    showStepperButtons?: boolean;
     /**
      * The alignment of the stepper button group.
      * @default 'center'
      */
-    stepperButtonAlignment?: 'center' | 'space-between';
+    stepperButtonAlignment?: Extract<CSSProperties['justifyContent'], 'center' | 'space-between'>;
     /**
      * A flag which indicates if the previous button should be shown on the first step.
      * This can be useful for canceling the stepper.
@@ -129,9 +155,42 @@ export type StepperProps = {
     showPreviousButtonOnFirstStep?: boolean;
 };
 /**
- * @param {string} type - The type of the stepper indicator.
- * @param {Step[]} steps - An array of steps for the stepper.
- * @param {number} currentStep - The current step index.
- * @param {number} customTotalSteps - A custom total number of steps to display in the stepper header.
+ * @param {StepperType} stepperType - The type of the stepper indicator.
+ * @param {number} overwriteTotalSteps - A custom total number of steps to display in the stepper header.
+ * @param {StepData[]} stepsData - An array of step data for rendering the steps @lookup {@link StepData}.
+ */
+export type StepperBaseProps = Pick<StepperProps, 'stepperType' | 'overwriteTotalSteps'> & {
+    stepsData: StepData[];
+};
+/**
+ * Helper type for rendering steps
+ *
+ * @param {Step} step - The step data for the step.
+ * @param {boolean} isActive - Whether the step is currently active.
+ * @param {boolean} isCompleted - Whether the step is completed.
+ * @param {boolean} isRendered - Whether the step is visible/rendered.
+ * @param {boolean} isFirst - Whether the step is the first step in the steps array.
+ * @param {boolean} isLast - Whether the step is the last step in the steps array.
+ */
+export type StepData = {
+    step: Step;
+    isActive: boolean;
+    isCompleted: boolean;
+    isRendered: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+};
+/**
+ * Props for an DESKTOP-type stepper item, which shows the number of the step, title and description.
+ *
+ * @param maxWidth - The maximum width of the stepper item.
+ * @param stepDefinition - The step data for the step to be displayed in the stepper item.
+ * @param stepActive - Whether the step is currently active.
+ * @param stepCompleted - Whether the step is completed.
  */
-export type StepperBaseProps = Pick<StepperProps, 'stepperType' | 'steps' | 'currentStep' | 'customTotalSteps'>;
+export type StepperItemProps = {
+    maxWidth?: CSSProperties['maxWidth'];
+    stepDefinition: Step;
+    stepActive: boolean;
+    stepCompleted: boolean;
+};

package/dist/components/Stepper/stepperTypes.js

@@ -1 +1,4 @@
-
+var L = /* @__PURE__ */ ((D) => (D.DESKTOP = "DESKTOP", D.SMALL = "SMALL", D.DOTS = "DOTS", D))(L || {});
+export {
+  L as StepperType
+};

package/dist/{index.es-B74L_Dje.js → index.es-BYcQTTL8.js}

@@ -8,7 +8,7 @@ import { M as Xn, a as Gn, N as zn, F as Ht, T as Yn } from "./index.es--C-VLspF
 import { b as A, c as f } from "./tslib.es6-BDCynO9F.js";
 import { M as ne, a as ie } from "./component-Bz_dtX1r.js";
 import { c as Kn, I as Yt } from "./index.es-Dgxrk6xW.js";
-import { a as pe, M as wt, b as Jn, m as Qn } from "./component-DEJuY56h.js";
+import { a as pe, M as wt, m as Jn, b as Qn } from "./component-DEJuY56h.js";
 /**
  * @license
  * Copyright 2018 Google Inc.
@@ -1411,13 +1411,13 @@ var li = (
       if (i || o)
         return null;
       var s = f(f({}, wt.createAdapter(this)), { isSurfaceActive: function() {
-        return Qn(n.input_, ":active");
+        return Jn(n.input_, ":active");
       }, registerInteractionHandler: function(_, p) {
         return n.input_.addEventListener(_, p, pe());
       }, deregisterInteractionHandler: function(_, p) {
         return n.input_.removeEventListener(_, p, pe());
       } });
-      return e(this.root, new Jn(s));
+      return e(this.root, new Qn(s));
     }, t;
   })(ie)
 ), si = {

package/dist/{index.es-C7cC1Hdu.js → index.es-C32E1Lcb.js}

@@ -10,7 +10,7 @@ import { c as Ua, d as Ur, e as P, f as Y, g as M, h as f, b as v, i as O, S as
 import { _ as Ka, P as In } from "./index.es-DGoBge9W.js";
 import { _ as Qn } from "./find-CHg-_ooq.js";
 import { c as Er, I as Wr } from "./index.es-Dgxrk6xW.js";
-import { T as Hr } from "./index.es-B74L_Dje.js";
+import { T as Hr } from "./index.es-BYcQTTL8.js";
 function ee(i) {
   if (i === null || i === !0 || i === !1)
     return NaN;

package/dist/main.d.ts

@@ -3,7 +3,9 @@ export { LinkBanner } from './components/AlertBanner/LinkBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
 export { BlockView } from './components/BlockView/BlockView';
+export { ButtonCard } from './components/ButtonCard/ButtonCard';
 export { ChipCard } from './components/ChipCard/ChipCard';
+export { ConfirmationModal } from './components/ConfirmationModal/ConfirmationModal';
 export { ContextMenu } from './components/ContextMenu/ContextMenu';
 export { DeleteModal } from './components/DeleteModal/DeleteModal';
 export { DetailContentWrapper } from './components/DetailContentWrapper/DetailContentWrapper';
@@ -28,7 +30,6 @@ export { ScrollbarX, ScrollbarY } from './components/Scrollbar/Scrollbar';
 export { SearchBar } from './components/SearchBar/SearchBar';
 export { Select } from './components/Select/Select';
 export { StepperHeader } from './components/Stepper/components/StepperHeader';
-export { StepperIndicator } from './components/Stepper/components/StepperIndicator';
 export { Stepper } from './components/Stepper/Stepper';
 export { VerticalDivider } from './components/VerticalDivider/VerticalDivider';
 export { FormCheckBox } from './components/FormComponents/FormCheckBox/FormCheckBox';