@synerise/ds-wizard 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/CLAUDE.md +3 -0
  3. package/README.md +46 -19
  4. package/dist/Wizard.d.ts +1 -1
  5. package/dist/Wizard.types.d.ts +6 -0
  6. package/dist/onModal/onModal.d.ts +1 -1
  7. package/dist/onModal/onModal.js +5 -3
  8. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@2.0.3...@synerise/ds-wizard@2.0.4) (2026-09-16)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **wizard:** render footerAction in Wizard.OnModal footer ([ef088a7](https://github.com/Synerise/synerise-design/commit/ef088a74f0ab1fd2f3a585338ffbcf697f5a3685))
11
+
12
+ ## [2.0.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@2.0.2...@synerise/ds-wizard@2.0.3) (2026-09-08)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-wizard
15
+
6
16
  ## [2.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-wizard@2.0.1...@synerise/ds-wizard@2.0.2) (2026-09-07)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-wizard
package/CLAUDE.md CHANGED
@@ -54,6 +54,8 @@ Modal-based wizard variant, attached as a static property on `Wizard`. Same prop
54
54
  |------|------|-------------|
55
55
  | `modalProps` | `ModalProps` | **Required.** Passed directly to `@synerise/ds-modal`. Also accepts `prefix`, `infix`, `suffix` (`ReactNode`) for custom footer slots |
56
56
 
57
+ Footer slots render in this order: `modalProps.prefix` → Back button → `modalProps.infix` → `footerAction` → Next button → `modalProps.suffix`.
58
+
57
59
  ### `WizardProps`
58
60
 
59
61
  TypeScript type re-exported for consumers.
@@ -132,5 +134,6 @@ All styles are in `Wizard.styles.ts` and shared between `Wizard` and `WizardOnMo
132
134
  - **`headerInlineEdit` replaces `title`**: When `headerInlineEdit` is set, the `title` prop is silently ignored. The `headerAvatar` prop is only rendered when `headerInlineEdit` is also set.
133
135
  - **`footer` is deprecated**: Use `footerLeft` for left-side footer content. Both work simultaneously but `footer` maps to the same `FooterLeftSide` slot.
134
136
  - **`WizardOnModal` accesses non-standard `modalProps` keys**: The `prefix`, `infix`, and `suffix` keys on `modalProps` are extra fields used by `WizardOnModal`'s own footer layout — they are not standard `ModalProps` fields.
137
+ - **`footerAction` sits before the next button in both variants**: In `Wizard` it renders in `FooterRightSide` ahead of the nav buttons; in `WizardOnModal` it renders in `ModalWizardButtonsSuffix` ahead of the Next button, so `modalProps.suffix` stays the outermost right-hand slot.
135
138
  - **Uses Vitest**: The package has `jest.config.js` and a `"test": "jest"` script — it has not been migrated to Vitest yet.
136
139
  - **`react-intl` is a peer dependency** (≥3.12.0 ≤6.8) — the component will throw at runtime without an IntlProvider in the tree.
package/README.md CHANGED
@@ -63,25 +63,25 @@ import Wizard from '@synerise/ds-wizard'
63
63
 
64
64
  ## API
65
65
 
66
- | Property | Description | Type | Default |
67
- | ------------------ | ------------------------------------------------------- | ------------------------ | ------- |
68
- | stepper | Stepper component | React.ReactNode | - |
69
- | footer | **Deprecated.** Left-side footer content (use `footerLeft`) | React.ReactNode | - |
70
- | footerLeft | Left side of the footer bar | React.ReactNode | - |
71
- | footerAction | Right side of the footer bar | React.ReactNode | - |
72
- | title | Title of wizard (ignored when `headerInlineEdit` is set) | React.ReactNode | - |
73
- | headerAction | Additional button in header | React.ReactNode | - |
74
- | onClose | Function called when user clicks on close wizard button | () => void | - |
75
- | visible | Whether wizard is visible | boolean | false |
76
- | contentWidth | Width of content ex: `500px` | string | `100%` |
77
- | onPrevStep | Function called when user clicks on prev step button | () => void | - |
78
- | onNextStep | Function called when user clicks on next step button | () => void | - |
79
- | stepButtonProps | Custom props for prev/next buttons | WizardStepButtons | - |
80
- | texts | Translations object for wizard | WizardTexts | - |
81
- | navigationInFooter | Move prev/next buttons to the footer instead of below content | boolean | - |
82
- | headerInlineEdit | Enable inline title editing in the header | PageHeaderProps['inlineEdit'] | - |
83
- | headerAvatar | Avatar shown alongside inline edit in the header | PageHeaderProps['avatar'] | - |
84
- | className | CSS class added to the wizard wrapper | string | - |
66
+ | Property | Description | Type | Default |
67
+ | ------------------ | ------------------------------------------------------------- | ----------------------------- | ------- |
68
+ | stepper | Stepper component | React.ReactNode | - |
69
+ | footer | **Deprecated.** Left-side footer content (use `footerLeft`) | React.ReactNode | - |
70
+ | footerLeft | Left side of the footer bar | React.ReactNode | - |
71
+ | footerAction | Right side of the footer bar | React.ReactNode | - |
72
+ | title | Title of wizard (ignored when `headerInlineEdit` is set) | React.ReactNode | - |
73
+ | headerAction | Additional button in header | React.ReactNode | - |
74
+ | onClose | Function called when user clicks on close wizard button | () => void | - |
75
+ | visible | Whether wizard is visible | boolean | false |
76
+ | contentWidth | Width of content ex: `500px` | string | `100%` |
77
+ | onPrevStep | Function called when user clicks on prev step button | () => void | - |
78
+ | onNextStep | Function called when user clicks on next step button | () => void | - |
79
+ | stepButtonProps | Custom props for prev/next buttons | WizardStepButtons | - |
80
+ | texts | Translations object for wizard | WizardTexts | - |
81
+ | navigationInFooter | Move prev/next buttons to the footer instead of below content | boolean | - |
82
+ | headerInlineEdit | Enable inline title editing in the header | PageHeaderProps['inlineEdit'] | - |
83
+ | headerAvatar | Avatar shown alongside inline edit in the header | PageHeaderProps['avatar'] | - |
84
+ | className | CSS class added to the wizard wrapper | string | - |
85
85
 
86
86
  ### WizardTexts
87
87
 
@@ -96,3 +96,30 @@ import Wizard from '@synerise/ds-wizard'
96
96
  | --------------- | -------------------- | ------------------------------------- | ------- |
97
97
  | prevButtonProps | Props of prev button | Partial<Omit<ButtonProps, 'onClick'>> | - |
98
98
  | nextButtonProps | Props of next button | Partial<Omit<ButtonProps, 'onClick'>> | - |
99
+
100
+ ### Wizard.OnModal
101
+
102
+ Modal variant. Accepts the same props as `Wizard` (except `footer` and `contentWidth`) plus a required `modalProps` passed to `@synerise/ds-modal`.
103
+
104
+ Footer slots, in render order:
105
+
106
+ | Slot | Position |
107
+ | ------------------- | ---------------------------------- |
108
+ | `modalProps.prefix` | Left side, before the Back button |
109
+ | `modalProps.infix` | Center |
110
+ | `footerAction` | Right side, before the Next button |
111
+ | `modalProps.suffix` | Right side, after the Next button |
112
+
113
+ ```jsx
114
+ <Wizard.OnModal
115
+ visible={visible}
116
+ title="Wizard Title"
117
+ onClose={handleClose}
118
+ onPrevStep={handlePrevStep}
119
+ onNextStep={handleNextStep}
120
+ footerAction={<Button onClick={handleClose}>Cancel</Button>}
121
+ modalProps={{ size: 'medium' }}
122
+ >
123
+ Content
124
+ </Wizard.OnModal>
125
+ ```
package/dist/Wizard.d.ts CHANGED
@@ -2,6 +2,6 @@ import { default as React } from 'react';
2
2
  import { WizardProps } from './Wizard.types';
3
3
  declare const Wizard: {
4
4
  ({ stepper, contentWidth, headerAction, footerAction, footer, footerLeft, title, onClose, children, onPrevStep, onNextStep, stepButtonProps, texts, visible, className, navigationInFooter, headerInlineEdit, headerAvatar, }: WizardProps): React.JSX.Element | null;
5
- OnModal: ({ visible, stepper, headerAction, title, onClose, children, onPrevStep, onNextStep, texts, modalProps, stepButtonProps, }: import('.').OnModalProps) => React.JSX.Element;
5
+ OnModal: ({ visible, stepper, headerAction, title, onClose, children, onPrevStep, onNextStep, texts, modalProps, stepButtonProps, footerAction, }: import('.').OnModalProps) => React.JSX.Element;
6
6
  };
7
7
  export default Wizard;
package/dist/Wizard.types.d.ts CHANGED
@@ -8,6 +8,12 @@ export type WizardProps = {
8
8
  children?: ReactNode;
9
9
  title: ReactNode;
10
10
  headerAction?: ReactNode;
11
+ /**
12
+ * Right side of the footer bar. In `Wizard` it is rendered before the
13
+ * prev/next buttons (which reach the footer only with `navigationInFooter`).
14
+ * In `Wizard.OnModal` it is rendered before the next button and before
15
+ * `modalProps.suffix`.
16
+ */
11
17
  footerAction?: ReactNode;
12
18
  onClose: () => void;
13
19
  visible: boolean;
package/dist/onModal/onModal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { default as React } from 'react';
2
2
  import { OnModalProps } from './onModal.types';
3
- declare const WizardOnModal: ({ visible, stepper, headerAction, title, onClose, children, onPrevStep, onNextStep, texts, modalProps, stepButtonProps, }: OnModalProps) => React.JSX.Element;
3
+ declare const WizardOnModal: ({ visible, stepper, headerAction, title, onClose, children, onPrevStep, onNextStep, texts, modalProps, stepButtonProps, footerAction, }: OnModalProps) => React.JSX.Element;
4
4
  export default WizardOnModal;
package/dist/onModal/onModal.js CHANGED
@@ -15,7 +15,8 @@ const WizardOnModal = ({
15
15
  onNextStep,
16
16
  texts,
17
17
  modalProps,
18
- stepButtonProps
18
+ stepButtonProps,
19
+ footerAction
19
20
  }) => {
20
21
  const intl = useIntl();
21
22
  const prevButtonProps = stepButtonProps?.prevButtonProps ? stepButtonProps.prevButtonProps : {
@@ -42,12 +43,13 @@ const WizardOnModal = ({
42
43
  ] })
43
44
  ] }) : /* @__PURE__ */ jsx(ButtonPlaceholder, {}),
44
45
  modalProps?.infix && /* @__PURE__ */ jsx(ModalWizardButtonsInfix, { children: modalProps.infix }),
45
- (modalProps?.suffix || onNextStep) && /* @__PURE__ */ jsxs(ModalWizardButtonsSuffix, { children: [
46
+ (modalProps?.suffix || footerAction || onNextStep) && /* @__PURE__ */ jsxs(ModalWizardButtonsSuffix, { children: [
47
+ footerAction,
46
48
  onNextStep && /* @__PURE__ */ jsx(Button, { ...nextButtonProps, onClick: onNextStep, children: texts?.nextButtonLabel || intl.formatMessage({
47
49
  id: "DS.WIZARD.NEXT-BUTTON",
48
50
  defaultMessage: "Next step"
49
51
  }) }),
50
- modalProps.suffix
52
+ modalProps?.suffix
51
53
  ] })
52
54
  ] }), children: /* @__PURE__ */ jsx(ModalWizardContent, { children }) });
53
55
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-wizard",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "Wizard UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -42,11 +42,11 @@
42
42
  ],
43
43
  "types": "dist/index.d.ts",
44
44
  "dependencies": {
45
- "@synerise/ds-button": "^2.0.1",
46
- "@synerise/ds-icon": "^2.1.0",
47
- "@synerise/ds-layout": "^2.0.1",
48
- "@synerise/ds-modal": "^2.0.2",
49
- "@synerise/ds-page-header": "^2.0.2",
45
+ "@synerise/ds-button": "^2.0.3",
46
+ "@synerise/ds-icon": "^2.1.1",
47
+ "@synerise/ds-layout": "^2.0.2",
48
+ "@synerise/ds-modal": "^2.0.4",
49
+ "@synerise/ds-page-header": "^2.0.4",
50
50
  "classnames": "^2.5.1"
51
51
  },
52
52
  "devDependencies": {
@@ -59,5 +59,5 @@
59
59
  "styled-components": "^5.3.3",
60
60
  "vitest": "4"
61
61
  },
62
- "gitHead": "788eba77544b291f7e938864a3994df4b4d904e2"
62
+ "gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db"
63
63
  }