@hortiview/shared-components 2.10.2 → 2.11.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.11.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.10.2...v2.11.0) (2026-01-21)
+
+### Features
+
+* HV-13800 Update Stepper and Modal component ([e78f32c](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e78f32c02b4d0916de7e99a959de4dcf22acb6f9)), closes [#13800](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/issues/13800)
+
 ## [2.10.2](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.10.1...v2.10.2) (2026-01-07)
 
 ### Bug Fixes

package/README.md

@@ -1018,41 +1018,57 @@ import { Select } from '@hortiview/shared-components';
 ### Stepper
 
 Provides a simple stepper component, which contains the step indicators, a title text and buttons to navigate forwards and backwards.
-Be aware that you need to control the Stepper flow by your own, like:
+The component is available in two types: 
+
+* 'default' (steps as dots and a centered step title below them)
+* 'description' (n/n numerical progress, description/title right of it)
+
+**Be aware that you need to control the Stepper flow by your own, like:**
 
 ```jsx
 import { Step, Stepper } from '@hortiview/shared-components';
 
+const [currentStep, setCurrentStep] = useState(0);
+
 const steps: Step[] = [
   {
     name: 'first',
     step: 0,
     title: 'First Step',
     optional: false,
+    nextButtonProps: {
+      onClick: () => { setCurrentStep(1)},
+      label: 'Next',
+      showArrowIcon: true,
+    },
+    prevButtonProps: {
+      onClick: () => { // handle cancel action },
+      label: 'Cancel',
+      showArrowIcon: false,
+    },
   },
   {
     name: 'second',
     step: 1,
     title: 'Second Step',
     optional: true,
+    nextButtonProps: {
+      onClick: () => { // handle finish action },
+      label: 'Send',
+      showArrowIcon: false,
+    },
+    prevButtonProps: {
+      onClick: () => { setCurrentStep(0)},
+      label: 'Back',
+      showArrowIcon: false,
+    },
   },
 ];
 
-const [currentStep, setCurrentStep] = useState(0);
-
 <Stepper
+  type={'default'}
   steps={steps}
   currentStep={currentStep}
-  nextButtonProps={{
-    label: currentStep < args.steps.length - 1 ? 'Next' : 'Finish',
-    onClick: () =>
-      currentStep < args.steps.length - 1
-        ? setCurrentStep(currentStep + 1)
-        : setCurrentStep(args.steps.length - 1),
-  }}
-  prevButtonProps={{
-    onClick: () => (currentStep > 0 ? setCurrentStep(currentStep - 1) : setCurrentStep(0)),
-  }}
 />;
 ```
 

package/dist/assets/stepper.css

@@ -1 +1 @@
-._stepperIndicatorItem_78nle_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_78nle_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_78nle_12{border:1.5px dashed #7e7e7e}._stepperContainer_78nle_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_78nle_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_78nle_28{margin-bottom:0}._stepperButtonLoading_78nle_32{padding-top:.375rem!important;padding-bottom:.375rem!important}._stepperButtonLoading_78nle_32 svg{stroke:var(--lmnt-theme-white)!important}
+._stepperIndicatorItem_x786o_1{height:var(--lmnt-stepper-indicator__size);width:var(--lmnt-stepper-indicator__size);background-color:#c7c7c7;border-radius:50%}._stepperIndicatorItemActive_x786o_8{background-color:var(--lmnt-theme-primary)}._stepperIndicatorItemOptional_x786o_12{border:1.5px dashed #7e7e7e}._stepperContainer_x786o_16{background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke);border-radius:.25rem;padding:.75rem 1rem}._stepperTitle_x786o_23{text-align:center;color:var(--lmnt-theme-on-secondary-inactive)}._stepperButton_x786o_28{margin-bottom:0}._stepperButtonLoading_x786o_32{padding-top:.375rem!important;padding-bottom:.375rem!important}._stepperButtonLoading_x786o_32 svg{stroke:var(--lmnt-theme-white)!important}._stepperDescriptionContainer_x786o_43{border-radius:.2rem;background-color:var(--lmnt-theme-primary-50);border:1px solid var(--lmnt-theme-on-surface-stroke)}._stepperDescriptionProgress_x786o_49{padding:0 1rem;min-width:3.5rem;background:var(--lmnt-theme-primary);color:var(--lmnt-theme-on-primary);border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}._stepperDescriptionText_x786o_60{padding:.7rem}

package/dist/components/AlertBanner/AlertBanner.test.js

@@ -1,5 +1,5 @@
 import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import { a as t, s } from "../../react.esm-CX1WJ2Pp.js";
+import { a as t, s } from "../../react.esm-BbMrgZCM.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
 import { A as n } from "../../AlertBanner-Dss0v6W0.js";
 import { d as p, b as c, a as l, t as r, g as a } from "../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/AlertBanner/LinkBanner.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { a as r, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as r, s as e } from "../../react.esm-BbMrgZCM.js";
 import { a as o } from "../../useBreakpoints-MzTZ0tCT.js";
 import { LinkBanner as a } from "./LinkBanner.js";
 import { d as n, b as i, a as m, t as p, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/BaseView/BaseView.test.js

@@ -1,5 +1,5 @@
 import { jsx as o, Fragment as s } from "react/jsx-runtime";
-import { a as n, s as e, f as p } from "../../react.esm-CX1WJ2Pp.js";
+import { a as n, s as e, f as p } from "../../react.esm-BbMrgZCM.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
 import { BaseView as r } from "./BaseView.js";
 import { d as u, b as d, a as c, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,6 +1,6 @@
 import { jsx as o, Fragment as d } from "react/jsx-runtime";
 import { B as g } from "../../index.es-DUcI2Zyr.js";
-import { a, s as t } from "../../react.esm-CX1WJ2Pp.js";
+import { a, s as t } from "../../react.esm-BbMrgZCM.js";
 import { BasicHeading as i } from "./BasicHeading.js";
 import { d as h, t as s, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 h("BasicHeading-Test", () => {

package/dist/components/BlockView/BlockView.test.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { a as s, s as o, f as n } from "../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as o, f as n } from "../../react.esm-BbMrgZCM.js";
 import { BlockView as i } from "./BlockView.js";
 import { d as a, a as B, t as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 a("BlockView Test", () => {

package/dist/components/ChipCard/ChipCard.test.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { a, s as i } from "../../react.esm-CX1WJ2Pp.js";
+import { a, s as i } from "../../react.esm-BbMrgZCM.js";
 import { ChipCard as n } from "./ChipCard.js";
 import { d as s, t as c, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 s("ChipCard Component", () => {

package/dist/components/ContextMenu/ContextMenu.test.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as i, s as t, f as o, w as c } from "../../react.esm-CX1WJ2Pp.js";
+import { a as i, s as t, f as o, w as c } from "../../react.esm-BbMrgZCM.js";
 import { ContextMenu as d } from "./ContextMenu.js";
 import { a as B, d as I, t as l, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 const g = B.fn(), m = B.fn(), r = B.fn(), u = [

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as c, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as c, s as e } from "../../react.esm-BbMrgZCM.js";
 import { DeleteModal as a } from "./DeleteModal.js";
 import { d, t as b, a as o, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 d("DeleteModal Test", () => {

package/dist/components/Disclaimer/Disclaimer.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as r, s as t } from "../../react.esm-CX1WJ2Pp.js";
+import { a as r, s as t } from "../../react.esm-BbMrgZCM.js";
 import { Disclaimer as s } from "./Disclaimer.js";
 import { d as i, t as m, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 i("Disclaimer test", () => {

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as i, s as o, w as r, f as l } from "../../react.esm-CX1WJ2Pp.js";
+import { a as i, s as o, w as r, f as l } from "../../react.esm-BbMrgZCM.js";
 import { EmptyView as T } from "./EmptyView.js";
 import { d as m, t as s, g as t, a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 m("EmptyView", () => {

package/dist/components/Filter/Filter.test.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as c, w as d } from "../../react.esm-CX1WJ2Pp.js";
+import { a, s as t, f as c, w as d } from "../../react.esm-BbMrgZCM.js";
 import { act as u } from "react";
 import { a as f } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Filter as T } from "./Filter.js";

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as s, s as r, f as h } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as r, f as h } from "../../../react.esm-BbMrgZCM.js";
 import { FormCheckBox as n } from "./FormCheckBox.js";
 import { a as e, d as m, t as c, g as o } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const l = e.fn();

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as r, f as m } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as r, f as m } from "../../../react.esm-BbMrgZCM.js";
 import { FormDatePicker as c } from "./FormDatePicker.js";
 import { a as e, d as f, t as l, g as a } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const i = e.fn();

package/dist/components/FormComponents/FormNumber/FormNumber.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a, s as n } from "../../../react.esm-CX1WJ2Pp.js";
+import { a, s as n } from "../../../react.esm-BbMrgZCM.js";
 import { FormNumber as s } from "./FormNumber.js";
 import { a as e, d as m, t as f, g as r } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const l = e.fn();

package/dist/components/FormComponents/FormRadio/FormRadio.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as t, f as m } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as t, f as m } from "../../../react.esm-BbMrgZCM.js";
 import { FormRadio as l } from "./FormRadio.js";
 import { a as e, d as c, t as i, g as o } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const r = e.fn();

package/dist/components/FormComponents/FormSelect/FormSelect.test.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { a, s as t, f as T, w as p } from "../../../react.esm-CX1WJ2Pp.js";
-import { u as B } from "../../../index-I7uTh4Tr.js";
+import { a, s as t, f as T, w as p } from "../../../react.esm-BbMrgZCM.js";
+import { u as B } from "../../../index-CkZYDkGd.js";
 import { FormSelect as i } from "./FormSelect.js";
 import { SelectTooltipText as d } from "./SelectTooltipText.js";
 import { a as n, d as f, t as u, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/FormComponents/FormSlider/FormSlider.test.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as s, s as n } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as n } from "../../../react.esm-BbMrgZCM.js";
 import { FormSlider as l } from "./FormSlider.js";
 import { a as e, d as m, t as i, g as r } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const o = e.fn();

package/dist/components/FormComponents/FormText/FormText.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as r, f as i } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as r, f as i } from "../../../react.esm-BbMrgZCM.js";
 import { FormText as o } from "./FormText.js";
 import { a, d as u, t as l, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const d = a.fn();

package/dist/components/FormComponents/FormToggle/FormToggle.test.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as s, s as t, f as m } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as t, f as m } from "../../../react.esm-BbMrgZCM.js";
 import { FormToggle as n } from "./FormToggle.js";
 import { a as e, d as u, t as l, g as o } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 const c = e.fn();

package/dist/components/GenericTable/GenericTable.test.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { a as o, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as o, s as e } from "../../react.esm-BbMrgZCM.js";
 import { a as m } from "../../useBreakpoints-MzTZ0tCT.js";
 import { GenericTable as s } from "./GenericTable.js";
 import { d as h, a as r, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/GenericTable/Mobile/GenericCard.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as c, s as o } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as c, s as o } from "../../../react.esm-BbMrgZCM.js";
 import { G as i } from "../../../GenericCard-MjxZ1L7r.js";
 import { d as m, t as s, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("GenericCard", () => {

package/dist/components/GenericTable/Mobile/GenericCardList.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as r, s as o, w as l } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as r, s as o, w as l } from "../../../react.esm-BbMrgZCM.js";
 import { GenericCardList as s } from "./GenericCardList.js";
 import { d as m, t as i, g as e } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 m("GenericCardList", () => {

package/dist/components/HashTabView/HashTabView.test.js

@@ -1,5 +1,5 @@
 import { jsx as n, Fragment as o } from "react/jsx-runtime";
-import { a, s as e, f as r } from "../../react.esm-CX1WJ2Pp.js";
+import { a, s as e, f as r } from "../../react.esm-BbMrgZCM.js";
 import { HashTabView as c } from "./HashTabView.js";
 import { d as h, t as l, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 const m = [

package/dist/components/HeaderFilter/HeaderFilter.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as i, s as t, f as T } from "../../react.esm-CX1WJ2Pp.js";
+import { a as i, s as t, f as T } from "../../react.esm-BbMrgZCM.js";
 import { HeaderFilter as s } from "./HeaderFilter.js";
 import { d as c, t as o, a as l, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 c("HeaderFilter-Test", () => {

package/dist/components/Iconify/Iconify.test.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { Iconify as c } from "./Iconify.js";
 import { AvailableCustomIcons as l } from "../../enums/AvailableCustomIcons.js";
-import { a as r, w as s, s as i } from "../../react.esm-CX1WJ2Pp.js";
+import { a as r, w as s, s as i } from "../../react.esm-BbMrgZCM.js";
 import { d as f, t as a, g as o } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 f("Iconify Test", async () => {
   const m = Object.keys(l).filter((e) => isNaN(Number(e)));

package/dist/components/InfoCard/InfoCard.test.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { a as r, s as e } from "../../react.esm-CX1WJ2Pp.js";
+import { a as r, s as e } from "../../react.esm-BbMrgZCM.js";
 import { InfoCard as s } from "./InfoCard.js";
 import { d as h, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 h("HealthCheckFailed Component", () => {

package/dist/components/InfoGroup/InfoGroup.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { a as l, s as t } from "../../react.esm-CX1WJ2Pp.js";
+import { a as l, s as t } from "../../react.esm-BbMrgZCM.js";
 import { InfoGroup as r } from "./InfoGroup.js";
 import { d as s, t as i, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 s("InfoGroup Test", () => {

package/dist/components/ListArea/ListArea.test.js

@@ -1,7 +1,7 @@
 import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { P as m } from "../../index.es-Bo1Rhtyb.js";
 import { c as u } from "../../index.es-DCSgIiJH.js";
-import { a as s, s as a, f as c } from "../../react.esm-CX1WJ2Pp.js";
+import { a as s, s as a, f as c } from "../../react.esm-BbMrgZCM.js";
 import { ListArea as l } from "./ListArea.js";
 import { g as h } from "../../ListAreaService-Dx9WBGHB.js";
 import { d, t as n, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/LoadingSpinner/Big/BigLoadingSpinner.test.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { s as r, B as n } from "../../../BigLoadingSpinner-BeHzqdOg.js";
-import { a as i, s as e } from "../../../react.esm-CX1WJ2Pp.js";
+import { a as i, s as e } from "../../../react.esm-BbMrgZCM.js";
 import { d as g, t as a, g as t } from "../../../vi.CjhMlMwf-CKxPQtd6.js";
 g("BigLoadingSpinner Test", () => {
   a("render BigLoadingSpinner with custom loading text", () => {

package/dist/components/LoadingSpinner/Default/LoadingSpinner.test.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a, s as e } from "../../../react.esm-CX1WJ2Pp.js";
+import { a, s as e } from "../../../react.esm-BbMrgZCM.js";
 import { act as s } from "react";
 import { LoadingSpinner as i } from "./LoadingSpinner.js";
 import { d as m, b as d, t as o, g as t, v as r } from "../../../vi.CjhMlMwf-CKxPQtd6.js";

package/dist/components/Modal/Modal.d.ts

@@ -3,6 +3,7 @@ import { AvailableCustomIcons } from '../../enums/AvailableCustomIcons';
 import { OfflineViewProps } from '../OfflineView/OfflineView';
 
 type ModalProps = Omit<ElementModalProps, 'primaryButton'> & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement> & {
+    closeIcon?: keyof typeof AvailableCustomIcons | string;
     leadingIcon?: keyof typeof AvailableCustomIcons | string;
     isOnline?: boolean;
     offlineViewProps?: Partial<OfflineViewProps>;
@@ -14,6 +15,7 @@ type ModalProps = Omit<ElementModalProps, 'primaryButton'> & React.HTMLProps<HTM
  * @param title - The title of the modal.
  * @param headerActions - The actions to display in the header of the modal.
  * @param actionButton - Button for the primary action of the modal - primaryButton is omitted from {@link ModalProps} since it triggers form submission on Enter key press.
+ * @param closeIcon - Set a custom close icon. Default is 'close'.
  * @param hideCloseIcon - If true, the close icon will be hidden. Default true.
  * @param leadingIcon - Iconify icon string (material icons and custom icons)
  * @param isOnline - Whether the user is online; shows OfflineView when false.
@@ -21,5 +23,5 @@ type ModalProps = Omit<ElementModalProps, 'primaryButton'> & React.HTMLProps<HTM
  * @param ...props - Other element props to pass to the modal.
  * @returns
  */
-export declare const Modal: ({ onClose, title, headerActions, actionButton, hideCloseIcon, leadingIcon, isOnline, offlineViewProps, children, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ onClose, title, headerActions, actionButton, hideCloseIcon, closeIcon, leadingIcon, isOnline, offlineViewProps, children, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};