@coveord/plasma-mantine 52.2.0 → 52.3.0

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 (17) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/.turbo/turbo-test.log +29 -29
  3. package/dist/.tsbuildinfo +1 -1
  4. package/dist/cjs/components/modal-wizard/ModalWizard.js +10 -5
  5. package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
  6. package/dist/cjs/components/modal-wizard/ModalWizardStep.js.map +1 -1
  7. package/dist/definitions/components/modal-wizard/ModalWizard.d.ts +8 -1
  8. package/dist/definitions/components/modal-wizard/ModalWizard.d.ts.map +1 -1
  9. package/dist/definitions/components/modal-wizard/ModalWizardStep.d.ts +1 -1
  10. package/dist/definitions/components/modal-wizard/ModalWizardStep.d.ts.map +1 -1
  11. package/dist/esm/components/modal-wizard/ModalWizard.js +10 -5
  12. package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
  13. package/dist/esm/components/modal-wizard/ModalWizardStep.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/components/modal-wizard/ModalWizard.tsx +18 -4
  16. package/src/components/modal-wizard/ModalWizardStep.tsx +1 -1
  17. package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx +34 -6
package/dist/cjs/components/modal-wizard/ModalWizard.js CHANGED
@@ -33,7 +33,7 @@ var useStyles = (0, _core.createStyles)(function() {
33
33
  };
34
34
  });
35
35
  var ModalWizard = function(_param) {
36
- var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, modalProps = _object_without_properties._(_param, [
36
+ var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, isStepValidatedOnNext = _param.isStepValidatedOnNext, modalProps = _object_without_properties._(_param, [
37
37
  "cancelButtonLabel",
38
38
  "nextButtonLabel",
39
39
  "previousButtonLabel",
@@ -48,7 +48,8 @@ var ModalWizard = function(_param) {
48
48
  "classNames",
49
49
  "styles",
50
50
  "unstyled",
51
- "children"
51
+ "children",
52
+ "isStepValidatedOnNext"
52
53
  ]);
53
54
  var _currentStep_props, _currentStep_props_validateStep;
54
55
  var _useStyles = useStyles(null, {
@@ -68,7 +69,9 @@ var ModalWizard = function(_param) {
68
69
  return index === currentStepIndex;
69
70
  })[0];
70
71
  var _currentStep_props_validateStep1;
71
- var isValid = ((_currentStep_props_validateStep1 = currentStep === null || currentStep === void 0 ? void 0 : (_currentStep_props = currentStep.props) === null || _currentStep_props === void 0 ? void 0 : (_currentStep_props_validateStep = _currentStep_props.validateStep) === null || _currentStep_props_validateStep === void 0 ? void 0 : _currentStep_props_validateStep.call(_currentStep_props, currentStepIndex, numberOfSteps)) !== null && _currentStep_props_validateStep1 !== void 0 ? _currentStep_props_validateStep1 : {
72
+ var isValid = (isStepValidatedOnNext ? {
73
+ isValid: true
74
+ } : (_currentStep_props_validateStep1 = currentStep === null || currentStep === void 0 ? void 0 : (_currentStep_props = currentStep.props) === null || _currentStep_props === void 0 ? void 0 : (_currentStep_props_validateStep = _currentStep_props.validateStep) === null || _currentStep_props_validateStep === void 0 ? void 0 : _currentStep_props_validateStep.call(_currentStep_props, currentStepIndex, numberOfSteps)) !== null && _currentStep_props_validateStep1 !== void 0 ? _currentStep_props_validateStep1 : {
72
75
  isValid: true
73
76
  }).isValid;
74
77
  (0, _react.useEffect)(function() {
@@ -179,8 +182,10 @@ var ModalWizard = function(_param) {
179
182
  var _onFinish;
180
183
  (_onFinish = onFinish === null || onFinish === void 0 ? void 0 : onFinish()) !== null && _onFinish !== void 0 ? _onFinish : handleClose(false);
181
184
  } else {
182
- onNext === null || onNext === void 0 ? void 0 : onNext(currentStepIndex + 1);
183
- setCurrentStepIndex(currentStepIndex + 1);
185
+ onNext === null || onNext === void 0 ? void 0 : onNext(currentStepIndex + 1, setCurrentStepIndex);
186
+ if (!isStepValidatedOnNext) {
187
+ setCurrentStepIndex(currentStepIndex + 1);
188
+ }
184
189
  }
185
190
  },
186
191
  children: isLastStep ? finishButtonLabel : nextButtonLabel
package/dist/cjs/components/modal-wizard/ModalWizard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: (newStep: number) => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: (newStep: number) => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {content, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n useEffect(() => {\n if (opened) {\n setCurrentStepIndex(0);\n }\n }, [opened]);\n\n const handleClose = (confirmDirty: boolean) => {\n if (confirmDirty) {\n const isModalDirty = isDirty?.() ?? false;\n if (isModalDirty) {\n const discardChanges = handleDirtyState?.() ?? true;\n if (!discardChanges) {\n return;\n }\n }\n }\n onClose?.();\n };\n\n const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n prop: P\n ): ResolveStep<ModalWizardStepProps[P]> =>\n typeof currentStep.props[prop] === 'function'\n ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n : currentStep.props[prop];\n\n const getProgress = useMemo(\n () => (currStepIndex: number) => {\n const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const numberOfCompletedSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n },\n []\n );\n\n return (\n <Modal\n opened={opened}\n classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n centered\n onClose={() => handleClose(true)}\n withCloseButton={false}\n padding={0}\n {...modalProps}\n >\n <Header\n p=\"lg\"\n pr=\"md\"\n variant=\"modal\"\n description={resolveStepDependentProp('description')}\n borderBottom={!currentStep.props.showProgressBar}\n >\n {resolveStepDependentProp('title')}\n {resolveStepDependentProp('docLink') ? (\n <Header.DocAnchor\n href={resolveStepDependentProp('docLink')}\n label={resolveStepDependentProp('docLinkTooltipLabel')}\n />\n ) : null}\n <Header.Actions>\n <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n </Header.Actions>\n </Header>\n {currentStep.props.showProgressBar && (\n <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n )}\n <Box p=\"lg\">{currentStep}</Box>\n <Box\n sx={{\n marginTop: 'auto',\n }}\n >\n <StickyFooter borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n handleClose(true);\n } else {\n onPrevious?.(currentStepIndex - 1);\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish?.() ?? handleClose(false);\n } else {\n onNext?.(currentStepIndex + 1);\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","content","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","useEffect","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","useMemo","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","Modal","centered","withCloseButton","padding","Header","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","CloseButton","aria-label","onClick","Progress","color","size","radius","value","Box","sx","marginTop","StickyFooter","borderTop","Button","disabled","Step"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: (newStep: number) => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n\n /**\n * Indicates if step validation should be performed when clicking on to the next step\n * If true, the next step will always be enabled\n *\n * @default false\n */\n isStepValidatedOnNext?: boolean;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n styles,\n unstyled,\n children,\n isStepValidatedOnNext,\n ...modalProps\n}) => {\n const {\n classes: {content, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = isStepValidatedOnNext\n ? {isValid: true}\n : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n useEffect(() => {\n if (opened) {\n setCurrentStepIndex(0);\n }\n }, [opened]);\n\n const handleClose = (confirmDirty: boolean) => {\n if (confirmDirty) {\n const isModalDirty = isDirty?.() ?? false;\n if (isModalDirty) {\n const discardChanges = handleDirtyState?.() ?? true;\n if (!discardChanges) {\n return;\n }\n }\n }\n onClose?.();\n };\n\n const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n prop: P\n ): ResolveStep<ModalWizardStepProps[P]> =>\n typeof currentStep.props[prop] === 'function'\n ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n : currentStep.props[prop];\n\n const getProgress = useMemo(\n () => (currStepIndex: number) => {\n const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const numberOfCompletedSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n },\n []\n );\n\n return (\n <Modal\n opened={opened}\n classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n centered\n onClose={() => handleClose(true)}\n withCloseButton={false}\n padding={0}\n {...modalProps}\n >\n <Header\n p=\"lg\"\n pr=\"md\"\n variant=\"modal\"\n description={resolveStepDependentProp('description')}\n borderBottom={!currentStep.props.showProgressBar}\n >\n {resolveStepDependentProp('title')}\n {resolveStepDependentProp('docLink') ? (\n <Header.DocAnchor\n href={resolveStepDependentProp('docLink')}\n label={resolveStepDependentProp('docLinkTooltipLabel')}\n />\n ) : null}\n <Header.Actions>\n <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n </Header.Actions>\n </Header>\n {currentStep.props.showProgressBar && (\n <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n )}\n <Box p=\"lg\">{currentStep}</Box>\n <Box\n sx={{\n marginTop: 'auto',\n }}\n >\n <StickyFooter borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n handleClose(true);\n } else {\n onPrevious?.(currentStepIndex - 1);\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish?.() ?? handleClose(false);\n } else {\n onNext?.(currentStepIndex + 1, setCurrentStepIndex);\n\n if (!isStepValidatedOnNext) {\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","content","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","isStepValidatedOnNext","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","useEffect","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","useMemo","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","Modal","centered","withCloseButton","padding","Header","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","CloseButton","aria-label","onClick","Progress","color","size","radius","value","Box","sx","marginTop","StickyFooter","borderTop","Button","disabled","Step"],"mappings":";;;;+BAoGaA;;;eAAAA;;;;;;;;oBApGsF;qBAChC;sBAE9C;sBACA;4BACM;+BACsC;AAEjE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC;WAAO;QAClCC,SAAS;YACLC,SAAS;YACTC,eAAe;QACnB;QACAC,MAAM;YACFC,MAAM;YACNH,SAAS;YACTC,eAAe;QACnB;IACJ;;AAkFO,IAAML,cAA+B,iBAkBtC;0CAjBFQ,mBAAAA,0DAAoB,qEACpBC,iBAAAA,sDAAkB,qEAClBC,qBAAAA,8DAAsB,2EACtBC,mBAAAA,0DAAoB,qCACpBC,gBAAAA,QACAC,gBAAAA,QACAC,oBAAAA,YACAC,iBAAAA,SACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,kBACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACAC,+BAAAA,uBACGC;QAhBHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;QAuBME;IApBN,IAGIxB,aAAAA,UAAU,IAAI,EAAE;QAChByB,MAAM;QACNP,YAAAA;QACAC,QAAAA;QACAC,UAAAA;IACJ,yBALIpB,WAFA0B,SAAUxB,6BAAAA,SAASG,0BAAAA,MACnBsB,KACA3B,WADA2B;IAQJ,IAAgDC,+BAAAA,IAAAA,eAAQ,EAAC,QAAlDC,mBAAyCD,cAAvBE,sBAAuBF;IAChD,IAAMG,aAAa,AAACC,eAAQ,CAACC,OAAO,CAACZ,UAA6Ba,MAAM,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,gCAAe;;IAElH,IAAMC,gBAAgBP,WAAWQ,MAAM;IACvC,IAAMC,cAAcX,qBAAqB;IACzC,IAAMY,aAAaZ,qBAAqBS,gBAAgB;IACxD,IAAMd,cAAcO,WAAWG,MAAM,CAAC,SAACQ,MAAoBC;eAAkBA,UAAUd;MAAiB,CAAC,EAAE;QAIrGL;IAFN,IAAM,AAACoB,UAAWtB,CAAAA,wBACZ;QAACsB,SAAS,IAAI;IAAA,IACdpB,CAAAA,mCAAAA,wBAAAA,yBAAAA,KAAAA,IAAAA,CAAAA,qBAAAA,YAAaqB,KAAK,cAAlBrB,gCAAAA,KAAAA,IAAAA,mCAAAA,mBAAoBsB,uEAApBtB,KAAAA,IAAAA,gCAAAA,KAAAA,oBAAmCK,kBAAkBS,4BAArDd,8CAAAA,mCAAuE;QAACoB,SAAS,IAAI;IAAA,CAAC,AAAD,EAFpFA;IAIPG,IAAAA,gBAAS,EAAC,WAAM;QACZ,IAAIpC,QAAQ;YACRmB,oBAAoB;QACxB,CAAC;IACL,GAAG;QAACnB;KAAO;IAEX,IAAMqC,cAAc,SAACC,cAA0B;QAC3C,IAAIA,cAAc;gBACOjC;YAArB,IAAMkC,eAAelC,CAAAA,WAAAA,oBAAAA,qBAAAA,KAAAA,IAAAA,uBAAAA,sBAAAA,WAAe,KAAK;YACzC,IAAIkC,cAAc;oBACSjC;gBAAvB,IAAMkC,iBAAiBlC,CAAAA,oBAAAA,6BAAAA,8BAAAA,KAAAA,IAAAA,gCAAAA,+BAAAA,oBAAwB,IAAI;gBACnD,IAAI,CAACkC,gBAAgB;oBACjB;gBACJ,CAAC;YACL,CAAC;QACL,CAAC;QACDrC,oBAAAA,qBAAAA,KAAAA,IAAAA;IACJ;IAEA,IAAMsC,2BAA2B,SAC7BC;eAEA,OAAO7B,YAAYqB,KAAK,CAACQ,KAAK,KAAK,aAC7B7B,YAAYqB,KAAK,CAACQ,KAAK,CAACxB,mBAAmB,GAAGS,iBAC9Cd,YAAYqB,KAAK,CAACQ,KAAK;;IAEjC,IAAMC,cAAcC,IAAAA,cAAO,EACvB;eAAM,SAACC,eAA0B;YAC7B,IAAMC,qBAAqB1B,WAAWG,MAAM,CAAC,SAACQ;uBAASA,KAAKG,KAAK,CAACa,gBAAgB;eAAEnB,MAAM;YAC1F,IAAMoB,yBAAyB5B,WAAWG,MAAM,CAC5C,SAACQ,MAAMC;uBAAUD,KAAKG,KAAK,CAACa,gBAAgB,IAAIf,SAASa;eAC3DjB,MAAM;YACR,OAAO,AAACoB,yBAAyBF,qBAAsB;QAC3D;OACA,EAAE;IAGN,qBACI,sBAACG,WAAK;QACFjD,QAAQA;QACRO,YAAY;YAAChB,SAASyB,GAAGzB,SAASgB,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYhB,OAAO;YAAGG,MAAMsB,GAAGtB,MAAMa,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYb,IAAI;QAAC;QACxFwD,QAAQ;QACR/C,SAAS;mBAAMkC,YAAY,IAAI;;QAC/Bc,iBAAiB,KAAK;QACtBC,SAAS;OACLxC;;0BAEJ,sBAACyC,cAAM;gBACHC,GAAE;gBACFC,IAAG;gBACHC,SAAQ;gBACRC,aAAahB,yBAAyB;gBACtCiB,cAAc,CAAC7C,YAAYqB,KAAK,CAACyB,eAAe;;oBAE/ClB,yBAAyB;oBACzBA,yBAAyB,2BACtB,qBAACY,cAAM,CAACO,SAAS;wBACbC,MAAMpB,yBAAyB;wBAC/BqB,OAAOrB,yBAAyB;yBAEpC,IAAI;kCACR,qBAACY,cAAM,CAACU,OAAO;kCACX,cAAA,qBAACC,iBAAW;4BAACC,cAAY;4BAAeC,SAAS;uCAAM7B,YAAY,IAAI;;;;;;YAG9ExB,YAAYqB,KAAK,CAACyB,eAAe,kBAC9B,qBAACQ,cAAQ;gBAACC,OAAM;gBAASC,MAAK;gBAAKC,QAAQ;gBAAGC,OAAO5B,YAAYzB;;0BAErE,qBAACsD,SAAG;gBAAClB,GAAE;0BAAMzC;;0BACb,qBAAC2D,SAAG;gBACAC,IAAI;oBACAC,WAAW;gBACf;0BAEA,cAAA,sBAACC,0BAAY;oBAACC,SAAS;;sCACnB,qBAACC,cAAM;4BACH/D,MAAMe,cAAcjC,oBAAoBE,mBAAmB;4BAC3D0D,SAAQ;4BACRU,SAAS,WAAM;gCACX,IAAIrC,aAAa;oCACbQ,YAAY,IAAI;gCACpB,OAAO;oCACHnC,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAagB,mBAAmB;oCAChCC,oBAAoBD,mBAAmB;gCAC3C,CAAC;4BACL;sCAECW,cAAcjC,oBAAoBE,mBAAmB;;sCAG1D,qBAAC+E,cAAM;4BACHC,UAAU,CAAC7C;4BACXiC,SAAS,WAAM;gCACX,IAAIpC,YAAY;wCACZ1B;oCAAAA,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,wBAAAA,uBAAAA,YAAgBiC,YAAY,KAAK,CAAC;gCACtC,OAAO;oCACHpC,mBAAAA,oBAAAA,KAAAA,IAAAA,OAASiB,mBAAmB,GAAGC;oCAE/B,IAAI,CAACR,uBAAuB;wCACxBQ,oBAAoBD,mBAAmB;oCAC3C,CAAC;gCACL,CAAC;4BACL;sCAECY,aAAa/B,oBAAoBF,eAAe;;;;;;;AAMzE;AAEAT,YAAY2F,IAAI,GAAGrD,gCAAe"}
package/dist/cjs/components/modal-wizard/ModalWizardStep.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';\n\ntype DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;\nexport type ResolveStep<P> = P extends infer T | DependsOnStep<infer T> ? T : never;\n\nexport interface ModalWizardStepProps {\n /**\n * The title of the current step. The title can be dependent on the current step if needed\n */\n title?: ReactNode | DependsOnStep<ReactNode>;\n\n /**\n * The description of the current step. The description can be dependent on the current step if needed\n */\n description?: string | DependsOnStep<string>;\n\n /**\n * A link to the documentation for the current step\n */\n docLink?: string | DependsOnStep<string>;\n\n /**\n * A tooltip label for the docLink\n */\n docLinkTooltipLabel?: string | DependsOnStep<string>;\n\n /**\n * A function to validate the current step, it determines if the next step should be enabled or not.\n */\n validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};\n\n /**\n * Show progress bar at this step\n *\n * @default true\n */\n showProgressBar?: boolean;\n\n /**\n * Does completion of current step count moves the progress bar\n *\n * @default true\n */\n countsAsProgress?: boolean;\n}\n\nconst ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => <>{children}</>;\n\nModalWizardStep.defaultProps = {\n showProgressBar: true,\n countsAsProgress: true,\n};\n\nexport {ModalWizardStep};\n"],"names":["ModalWizardStep","children","defaultProps","showProgressBar","countsAsProgress"],"mappings":";;;;+BAqDQA;;;eAAAA;;;;AAPR,IAAMA,kBAA8E;QAAEC,iBAAAA;yBAAc;kBAAGA;;;AAEvGD,gBAAgBE,YAAY,GAAG;IAC3BC,iBAAiB,IAAI;IACrBC,kBAAkB,IAAI;AAC1B"}
1
+ {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';\n\ntype DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;\nexport type ResolveStep<P> = P extends infer T | DependsOnStep<infer T> ? T : never;\n\nexport interface ModalWizardStepProps {\n /**\n * The title of the current step. The title can be dependent on the current step if needed\n */\n title?: ReactNode | DependsOnStep<ReactNode>;\n\n /**\n * The description of the current step. The description can be dependent on the current step if needed\n */\n description?: string | DependsOnStep<string>;\n\n /**\n * A link to the documentation for the current step\n */\n docLink?: string | DependsOnStep<string>;\n\n /**\n * A tooltip label for the docLink\n */\n docLinkTooltipLabel?: string | DependsOnStep<string>;\n\n /**\n * A function to validate the current step, it determines if the next step should be enabled or not.\n */\n validateStep?: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};\n\n /**\n * Show progress bar at this step\n *\n * @default true\n */\n showProgressBar?: boolean;\n\n /**\n * Does completion of current step count moves the progress bar\n *\n * @default true\n */\n countsAsProgress?: boolean;\n}\n\nconst ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => <>{children}</>;\n\nModalWizardStep.defaultProps = {\n showProgressBar: true,\n countsAsProgress: true,\n};\n\nexport {ModalWizardStep};\n"],"names":["ModalWizardStep","children","defaultProps","showProgressBar","countsAsProgress"],"mappings":";;;;+BAqDQA;;;eAAAA;;;;AAPR,IAAMA,kBAA8E;QAAEC,iBAAAA;yBAAc;kBAAGA;;;AAEvGD,gBAAgBE,YAAY,GAAG;IAC3BC,iBAAiB,IAAI;IACrBC,kBAAkB,IAAI;AAC1B"}
package/dist/definitions/components/modal-wizard/ModalWizard.d.ts CHANGED
@@ -38,7 +38,7 @@ export interface ModalWizardProps extends Omit<DefaultProps<ModalWizardStylesNam
38
38
  /**
39
39
  * A callback function that is executed when the user clicks on the next button
40
40
  */
41
- onNext?: (newStep: number) => unknown;
41
+ onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;
42
42
  /**
43
43
  * A callback function that is executed when the user clicks on the previous button
44
44
  */
@@ -61,6 +61,13 @@ export interface ModalWizardProps extends Omit<DefaultProps<ModalWizardStylesNam
61
61
  * Children to display in modal wizard
62
62
  * */
63
63
  children?: Array<ReturnType<typeof ModalWizardStep>>;
64
+ /**
65
+ * Indicates if step validation should be performed when clicking on to the next step
66
+ * If true, the next step will always be enabled
67
+ *
68
+ * @default false
69
+ */
70
+ isStepValidatedOnNext?: boolean;
64
71
  }
65
72
  interface ModalWizardType {
66
73
  (props: ModalWizardProps): ReactElement;
package/dist/definitions/components/modal-wizard/ModalWizard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalWizard.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,YAAY,EAAS,UAAU,EAAY,SAAS,EAAC,MAAM,eAAe,CAAC;AACnH,OAAO,EAAW,YAAY,EAA+B,MAAM,OAAO,CAAC;AAK3E,OAAO,EAAC,eAAe,EAAoC,MAAM,mBAAmB,CAAC;AAErF,QAAA,MAAM,SAAS;;;;;;;CAUZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAE1D,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC,EACvE,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC;IAC1C;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAEtC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IAEjC;;SAEK;IACL,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC;CACxD;AAED,UAAU,eAAe;IACrB,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAAC;IAExC,IAAI,EAAE,OAAO,eAAe,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,EAAE,eAiJzB,CAAC"}
1
+ {"version":3,"file":"ModalWizard.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,YAAY,EAAS,UAAU,EAAY,SAAS,EAAC,MAAM,eAAe,CAAC;AACnH,OAAO,EAAW,YAAY,EAA+B,MAAM,OAAO,CAAC;AAK3E,OAAO,EAAC,eAAe,EAAoC,MAAM,mBAAmB,CAAC;AAErF,QAAA,MAAM,SAAS;;;;;;;CAUZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAE1D,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC,EACvE,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC;IAC1C;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IAE/E;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAE1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IAExB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IAEjC;;SAEK;IACL,QAAQ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC;IAErD;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,UAAU,eAAe;IACrB,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAAC;IAExC,IAAI,EAAE,OAAO,eAAe,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,EAAE,eAuJzB,CAAC"}
package/dist/definitions/components/modal-wizard/ModalWizardStep.d.ts CHANGED
@@ -21,7 +21,7 @@ export interface ModalWizardStepProps {
21
21
  /**
22
22
  * A function to validate the current step, it determines if the next step should be enabled or not.
23
23
  */
24
- validateStep: (currentStep: any, numberOfSteps: any) => {
24
+ validateStep?: (currentStep: any, numberOfSteps: any) => {
25
25
  isValid: boolean;
26
26
  messsage?: unknown;
27
27
  };
package/dist/definitions/components/modal-wizard/ModalWizardStep.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalWizardStep.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtE,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC,CAAC;AAC1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAEzC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAErD;;OAEG;IACH,YAAY,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;IAE/F;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAmC,CAAC;AAOpH,OAAO,EAAC,eAAe,EAAC,CAAC"}
1
+ {"version":3,"file":"ModalWizardStep.d.ts","sourceRoot":"","sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtE,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC,CAAC;AAC1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAE7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAEzC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAErD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;IAEhG;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAmC,CAAC;AAOpH,OAAO,EAAC,eAAe,EAAC,CAAC"}
package/dist/esm/components/modal-wizard/ModalWizard.js CHANGED
@@ -23,7 +23,7 @@ var useStyles = createStyles(function() {
23
23
  };
24
24
  });
25
25
  export var ModalWizard = function(_param) {
26
- var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, modalProps = _object_without_properties(_param, [
26
+ var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, isStepValidatedOnNext = _param.isStepValidatedOnNext, modalProps = _object_without_properties(_param, [
27
27
  "cancelButtonLabel",
28
28
  "nextButtonLabel",
29
29
  "previousButtonLabel",
@@ -38,7 +38,8 @@ export var ModalWizard = function(_param) {
38
38
  "classNames",
39
39
  "styles",
40
40
  "unstyled",
41
- "children"
41
+ "children",
42
+ "isStepValidatedOnNext"
42
43
  ]);
43
44
  var _currentStep_props, _currentStep_props_validateStep;
44
45
  var _useStyles = useStyles(null, {
@@ -58,7 +59,9 @@ export var ModalWizard = function(_param) {
58
59
  return index === currentStepIndex;
59
60
  })[0];
60
61
  var _currentStep_props_validateStep1;
61
- var isValid = ((_currentStep_props_validateStep1 = currentStep === null || currentStep === void 0 ? void 0 : (_currentStep_props = currentStep.props) === null || _currentStep_props === void 0 ? void 0 : (_currentStep_props_validateStep = _currentStep_props.validateStep) === null || _currentStep_props_validateStep === void 0 ? void 0 : _currentStep_props_validateStep.call(_currentStep_props, currentStepIndex, numberOfSteps)) !== null && _currentStep_props_validateStep1 !== void 0 ? _currentStep_props_validateStep1 : {
62
+ var isValid = (isStepValidatedOnNext ? {
63
+ isValid: true
64
+ } : (_currentStep_props_validateStep1 = currentStep === null || currentStep === void 0 ? void 0 : (_currentStep_props = currentStep.props) === null || _currentStep_props === void 0 ? void 0 : (_currentStep_props_validateStep = _currentStep_props.validateStep) === null || _currentStep_props_validateStep === void 0 ? void 0 : _currentStep_props_validateStep.call(_currentStep_props, currentStepIndex, numberOfSteps)) !== null && _currentStep_props_validateStep1 !== void 0 ? _currentStep_props_validateStep1 : {
62
65
  isValid: true
63
66
  }).isValid;
64
67
  useEffect(function() {
@@ -169,8 +172,10 @@ export var ModalWizard = function(_param) {
169
172
  var _onFinish;
170
173
  (_onFinish = onFinish === null || onFinish === void 0 ? void 0 : onFinish()) !== null && _onFinish !== void 0 ? _onFinish : handleClose(false);
171
174
  } else {
172
- onNext === null || onNext === void 0 ? void 0 : onNext(currentStepIndex + 1);
173
- setCurrentStepIndex(currentStepIndex + 1);
175
+ onNext === null || onNext === void 0 ? void 0 : onNext(currentStepIndex + 1, setCurrentStepIndex);
176
+ if (!isStepValidatedOnNext) {
177
+ setCurrentStepIndex(currentStepIndex + 1);
178
+ }
174
179
  }
175
180
  },
176
181
  children: isLastStep ? finishButtonLabel : nextButtonLabel
package/dist/esm/components/modal-wizard/ModalWizard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: (newStep: number) => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: (newStep: number) => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {content, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n useEffect(() => {\n if (opened) {\n setCurrentStepIndex(0);\n }\n }, [opened]);\n\n const handleClose = (confirmDirty: boolean) => {\n if (confirmDirty) {\n const isModalDirty = isDirty?.() ?? false;\n if (isModalDirty) {\n const discardChanges = handleDirtyState?.() ?? true;\n if (!discardChanges) {\n return;\n }\n }\n }\n onClose?.();\n };\n\n const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n prop: P\n ): ResolveStep<ModalWizardStepProps[P]> =>\n typeof currentStep.props[prop] === 'function'\n ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n : currentStep.props[prop];\n\n const getProgress = useMemo(\n () => (currStepIndex: number) => {\n const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const numberOfCompletedSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n },\n []\n );\n\n return (\n <Modal\n opened={opened}\n classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n centered\n onClose={() => handleClose(true)}\n withCloseButton={false}\n padding={0}\n {...modalProps}\n >\n <Header\n p=\"lg\"\n pr=\"md\"\n variant=\"modal\"\n description={resolveStepDependentProp('description')}\n borderBottom={!currentStep.props.showProgressBar}\n >\n {resolveStepDependentProp('title')}\n {resolveStepDependentProp('docLink') ? (\n <Header.DocAnchor\n href={resolveStepDependentProp('docLink')}\n label={resolveStepDependentProp('docLinkTooltipLabel')}\n />\n ) : null}\n <Header.Actions>\n <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n </Header.Actions>\n </Header>\n {currentStep.props.showProgressBar && (\n <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n )}\n <Box p=\"lg\">{currentStep}</Box>\n <Box\n sx={{\n marginTop: 'auto',\n }}\n >\n <StickyFooter borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n handleClose(true);\n } else {\n onPrevious?.(currentStepIndex - 1);\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish?.() ?? handleClose(false);\n } else {\n onNext?.(currentStepIndex + 1);\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","CloseButton","createStyles","Modal","Progress","Children","useEffect","useMemo","useState","Button","Header","StickyFooter","ModalWizardStep","useStyles","content","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","centered","withCloseButton","padding","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","aria-label","onClick","color","size","radius","value","sx","marginTop","borderTop","disabled","Step"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: (newStep: number) => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n\n /**\n * Indicates if step validation should be performed when clicking on to the next step\n * If true, the next step will always be enabled\n *\n * @default false\n */\n isStepValidatedOnNext?: boolean;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n styles,\n unstyled,\n children,\n isStepValidatedOnNext,\n ...modalProps\n}) => {\n const {\n classes: {content, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = isStepValidatedOnNext\n ? {isValid: true}\n : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n useEffect(() => {\n if (opened) {\n setCurrentStepIndex(0);\n }\n }, [opened]);\n\n const handleClose = (confirmDirty: boolean) => {\n if (confirmDirty) {\n const isModalDirty = isDirty?.() ?? false;\n if (isModalDirty) {\n const discardChanges = handleDirtyState?.() ?? true;\n if (!discardChanges) {\n return;\n }\n }\n }\n onClose?.();\n };\n\n const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n prop: P\n ): ResolveStep<ModalWizardStepProps[P]> =>\n typeof currentStep.props[prop] === 'function'\n ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n : currentStep.props[prop];\n\n const getProgress = useMemo(\n () => (currStepIndex: number) => {\n const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const numberOfCompletedSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n },\n []\n );\n\n return (\n <Modal\n opened={opened}\n classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n centered\n onClose={() => handleClose(true)}\n withCloseButton={false}\n padding={0}\n {...modalProps}\n >\n <Header\n p=\"lg\"\n pr=\"md\"\n variant=\"modal\"\n description={resolveStepDependentProp('description')}\n borderBottom={!currentStep.props.showProgressBar}\n >\n {resolveStepDependentProp('title')}\n {resolveStepDependentProp('docLink') ? (\n <Header.DocAnchor\n href={resolveStepDependentProp('docLink')}\n label={resolveStepDependentProp('docLinkTooltipLabel')}\n />\n ) : null}\n <Header.Actions>\n <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n </Header.Actions>\n </Header>\n {currentStep.props.showProgressBar && (\n <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n )}\n <Box p=\"lg\">{currentStep}</Box>\n <Box\n sx={{\n marginTop: 'auto',\n }}\n >\n <StickyFooter borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n handleClose(true);\n } else {\n onPrevious?.(currentStepIndex - 1);\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish?.() ?? handleClose(false);\n } else {\n onNext?.(currentStepIndex + 1, setCurrentStepIndex);\n\n if (!isStepValidatedOnNext) {\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","CloseButton","createStyles","Modal","Progress","Children","useEffect","useMemo","useState","Button","Header","StickyFooter","ModalWizardStep","useStyles","content","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","isStepValidatedOnNext","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","centered","withCloseButton","padding","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","aria-label","onClick","color","size","radius","value","sx","marginTop","borderTop","disabled","Step"],"mappings":"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"}
package/dist/esm/components/modal-wizard/ModalWizardStep.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';\n\ntype DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;\nexport type ResolveStep<P> = P extends infer T | DependsOnStep<infer T> ? T : never;\n\nexport interface ModalWizardStepProps {\n /**\n * The title of the current step. The title can be dependent on the current step if needed\n */\n title?: ReactNode | DependsOnStep<ReactNode>;\n\n /**\n * The description of the current step. The description can be dependent on the current step if needed\n */\n description?: string | DependsOnStep<string>;\n\n /**\n * A link to the documentation for the current step\n */\n docLink?: string | DependsOnStep<string>;\n\n /**\n * A tooltip label for the docLink\n */\n docLinkTooltipLabel?: string | DependsOnStep<string>;\n\n /**\n * A function to validate the current step, it determines if the next step should be enabled or not.\n */\n validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};\n\n /**\n * Show progress bar at this step\n *\n * @default true\n */\n showProgressBar?: boolean;\n\n /**\n * Does completion of current step count moves the progress bar\n *\n * @default true\n */\n countsAsProgress?: boolean;\n}\n\nconst ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => <>{children}</>;\n\nModalWizardStep.defaultProps = {\n showProgressBar: true,\n countsAsProgress: true,\n};\n\nexport {ModalWizardStep};\n"],"names":["ModalWizardStep","children","defaultProps","showProgressBar","countsAsProgress"],"mappings":";AA8CA,IAAMA,kBAA8E;QAAEC,iBAAAA;yBAAc;kBAAGA;;;AAEvGD,gBAAgBE,YAAY,GAAG;IAC3BC,iBAAiB,IAAI;IACrBC,kBAAkB,IAAI;AAC1B;AAEA,SAAQJ,eAAe,GAAE"}
1
+ {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizardStep.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';\n\ntype DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;\nexport type ResolveStep<P> = P extends infer T | DependsOnStep<infer T> ? T : never;\n\nexport interface ModalWizardStepProps {\n /**\n * The title of the current step. The title can be dependent on the current step if needed\n */\n title?: ReactNode | DependsOnStep<ReactNode>;\n\n /**\n * The description of the current step. The description can be dependent on the current step if needed\n */\n description?: string | DependsOnStep<string>;\n\n /**\n * A link to the documentation for the current step\n */\n docLink?: string | DependsOnStep<string>;\n\n /**\n * A tooltip label for the docLink\n */\n docLinkTooltipLabel?: string | DependsOnStep<string>;\n\n /**\n * A function to validate the current step, it determines if the next step should be enabled or not.\n */\n validateStep?: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};\n\n /**\n * Show progress bar at this step\n *\n * @default true\n */\n showProgressBar?: boolean;\n\n /**\n * Does completion of current step count moves the progress bar\n *\n * @default true\n */\n countsAsProgress?: boolean;\n}\n\nconst ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => <>{children}</>;\n\nModalWizardStep.defaultProps = {\n showProgressBar: true,\n countsAsProgress: true,\n};\n\nexport {ModalWizardStep};\n"],"names":["ModalWizardStep","children","defaultProps","showProgressBar","countsAsProgress"],"mappings":";AA8CA,IAAMA,kBAA8E;QAAEC,iBAAAA;yBAAc;kBAAGA;;;AAEvGD,gBAAgBE,YAAY,GAAG;IAC3BC,iBAAiB,IAAI;IACrBC,kBAAkB,IAAI;AAC1B;AAEA,SAAQJ,eAAe,GAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coveord/plasma-mantine",
3
- "version": "52.2.0",
3
+ "version": "52.3.0",
4
4
  "description": "A Plasma flavoured Mantine theme",
5
5
  "keywords": [
6
6
  "plasma",
package/src/components/modal-wizard/ModalWizard.tsx CHANGED
@@ -54,7 +54,7 @@ export interface ModalWizardProps
54
54
  /**
55
55
  * A callback function that is executed when the user clicks on the next button
56
56
  */
57
- onNext?: (newStep: number) => unknown;
57
+ onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;
58
58
 
59
59
  /**
60
60
  * A callback function that is executed when the user clicks on the previous button
@@ -82,6 +82,14 @@ export interface ModalWizardProps
82
82
  * Children to display in modal wizard
83
83
  * */
84
84
  children?: Array<ReturnType<typeof ModalWizardStep>>;
85
+
86
+ /**
87
+ * Indicates if step validation should be performed when clicking on to the next step
88
+ * If true, the next step will always be enabled
89
+ *
90
+ * @default false
91
+ */
92
+ isStepValidatedOnNext?: boolean;
85
93
  }
86
94
 
87
95
  interface ModalWizardType {
@@ -106,6 +114,7 @@ export const ModalWizard: ModalWizardType = ({
106
114
  styles,
107
115
  unstyled,
108
116
  children,
117
+ isStepValidatedOnNext,
109
118
  ...modalProps
110
119
  }) => {
111
120
  const {
@@ -126,7 +135,9 @@ export const ModalWizard: ModalWizardType = ({
126
135
  const isLastStep = currentStepIndex === numberOfSteps - 1;
127
136
  const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];
128
137
 
129
- const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
138
+ const {isValid} = isStepValidatedOnNext
139
+ ? {isValid: true}
140
+ : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
130
141
 
131
142
  useEffect(() => {
132
143
  if (opened) {
@@ -224,8 +235,11 @@ export const ModalWizard: ModalWizardType = ({
224
235
  if (isLastStep) {
225
236
  onFinish?.() ?? handleClose(false);
226
237
  } else {
227
- onNext?.(currentStepIndex + 1);
228
- setCurrentStepIndex(currentStepIndex + 1);
238
+ onNext?.(currentStepIndex + 1, setCurrentStepIndex);
239
+
240
+ if (!isStepValidatedOnNext) {
241
+ setCurrentStepIndex(currentStepIndex + 1);
242
+ }
229
243
  }
230
244
  }}
231
245
  >
package/src/components/modal-wizard/ModalWizardStep.tsx CHANGED
@@ -27,7 +27,7 @@ export interface ModalWizardStepProps {
27
27
  /**
28
28
  * A function to validate the current step, it determines if the next step should be enabled or not.
29
29
  */
30
- validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
30
+ validateStep?: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
31
31
 
32
32
  /**
33
33
  * Show progress bar at this step
package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx CHANGED
@@ -79,8 +79,6 @@ describe('ModalWizard', () => {
79
79
 
80
80
  await user.click(nextButton);
81
81
 
82
- expect(onNextSpy).toHaveBeenCalledWith(1);
83
-
84
82
  expect(
85
83
  screen.getByRole('heading', {
86
84
  name: /current step is: 2/i,
@@ -108,8 +106,6 @@ describe('ModalWizard', () => {
108
106
 
109
107
  await user.click(nextButton);
110
108
 
111
- expect(onNextSpy).toHaveBeenCalledWith(2);
112
-
113
109
  expect(
114
110
  screen.getByRole('heading', {
115
111
  name: /current step is: 3/i,
@@ -143,8 +139,6 @@ describe('ModalWizard', () => {
143
139
  })
144
140
  );
145
141
 
146
- expect(onNextSpy).toHaveBeenCalledWith(1);
147
-
148
142
  expect(
149
143
  screen.getByRole('heading', {
150
144
  name: /current step is: 2/i,
@@ -372,4 +366,38 @@ describe('ModalWizard', () => {
372
366
 
373
367
  expect(screen.getByRole('progressbar')).toBeInTheDocument();
374
368
  });
369
+
370
+ it('enables the next step button if isStepValidatedOnNext is provided', async () => {
371
+ render(
372
+ <ModalWizard opened={true} onClose={vi.fn()} isStepValidatedOnNext>
373
+ <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: false})}>
374
+ Content step 1
375
+ </ModalWizard.Step>
376
+ <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
377
+ Content step 2
378
+ </ModalWizard.Step>
379
+ </ModalWizard>
380
+ );
381
+
382
+ expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
383
+ });
384
+
385
+ it('enables the next step button in accordance to validateStep if isStepValidatedOnNext is not provided', async () => {
386
+ const user = userEvent.setup();
387
+
388
+ render(
389
+ <ModalWizard opened={true} onClose={vi.fn()}>
390
+ <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
391
+ Content step 1
392
+ </ModalWizard.Step>
393
+ <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
394
+ Content step 2
395
+ </ModalWizard.Step>
396
+ </ModalWizard>
397
+ );
398
+
399
+ expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
400
+ await user.click(screen.getByRole('button', {name: /next/i}));
401
+ expect(screen.getByRole('button', {name: /finish/i})).toBeDisabled();
402
+ });
375
403
  });