@elliemae/ds-wizard 3.17.0-next.9 → 3.17.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.
@@ -63,12 +63,12 @@ const WizardStep = ({
63
63
  if (completed)
64
64
  return iconCompleted;
65
65
  return icon;
66
- }, [active, completed]) || icon;
66
+ }, [active, completed, icon, iconActive, iconCompleted]) || icon;
67
67
  const iconWithOptions = (0, import_react.useMemo)(
68
68
  () => (0, import_react.isValidElement)(currentIcon) ? (0, import_react.cloneElement)(currentIcon, {
69
69
  color: (0, import_ds_utilities.get)(currentIcon, ["props", "color"]) || ["brand-primary", completed ? 600 : 500]
70
70
  }) : currentIcon || index + 1,
71
- [currentIcon]
71
+ [completed, currentIcon, index]
72
72
  );
73
73
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { classProps: { active, completed }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { children: [
74
74
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BulletWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bullet, { children: iconWithOptions }) }),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/WizardStep.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable indent */\nimport React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { indicatorItemBlockName } from './blockNames.js';\n\nconst Item = aggregatedClasses('div')(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({\n active,\n completed,\n}));\nconst Wrapper = aggregatedClasses('div')(`${indicatorItemBlockName}-wrapper`);\nconst Label = aggregatedClasses('span')(indicatorItemBlockName, 'label');\nconst Bullet = aggregatedClasses('div')(indicatorItemBlockName, 'bullet');\nconst BulletWrapper = aggregatedClasses('div')(indicatorItemBlockName, 'bullet-wrapper');\n\nconst WizardStep = ({\n label = '',\n icon = null,\n iconCompleted = <Checkmark />,\n iconActive = null,\n active = false,\n completed = false,\n index = 0,\n}) => {\n const currentIcon =\n useMemo(() => {\n if (active) return iconActive;\n if (completed) return iconCompleted;\n return icon;\n }, [active, completed]) || icon;\n\n const iconWithOptions = useMemo(\n () =>\n isValidElement(currentIcon)\n ? cloneElement(currentIcon, {\n color: get(currentIcon, ['props', 'color']) || ['brand-primary', completed ? 600 : 500],\n })\n : currentIcon || index + 1,\n [currentIcon],\n );\n\n return (\n <Item classProps={{ active, completed }}>\n <Wrapper>\n <BulletWrapper>\n <Bullet>{iconWithOptions}</Bullet>\n </BulletWrapper>\n <Label>{label}</Label>\n </Wrapper>\n </Item>\n );\n};\n\nconst wizzardStepProps = {\n label: PropTypes.string.description('Step label'),\n icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue(Checkmark),\n iconActive: PropTypes.element.description('Icon when the step is active'),\n active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n index: PropTypes.number.description('Current item index'),\n};\n\nWizardStep.propTypes = wizzardStepProps;\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = wizzardStepProps;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBL;AAnBlB,mBAA6D;AAC7D,2BAAkC;AAClC,0BAAoB;AACpB,8BAAoC;AACpC,sBAA0B;AAC1B,wBAAuC;AAEvC,MAAM,WAAO,wCAAkB,KAAK,EAAE,GAAG,4CAA0B,MAAM,CAAC,EAAE,QAAQ,UAAU,OAAO;AAAA,EACnG;AAAA,EACA;AACF,EAAE;AACF,MAAM,cAAU,wCAAkB,KAAK,EAAE,GAAG,kDAAgC;AAC5E,MAAM,YAAQ,wCAAkB,MAAM,EAAE,0CAAwB,OAAO;AACvE,MAAM,aAAS,wCAAkB,KAAK,EAAE,0CAAwB,QAAQ;AACxE,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,0CAAwB,gBAAgB;AAEvF,MAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,4CAAC,6BAAU;AAAA,EAC3B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,MAAM;AACJ,QAAM,kBACJ,sBAAQ,MAAM;AACZ,QAAI;AAAQ,aAAO;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,SAAS,CAAC,KAAK;AAE7B,QAAM,sBAAkB;AAAA,IACtB,UACE,6BAAe,WAAW,QACtB,2BAAa,aAAa;AAAA,MACxB,WAAO,yBAAI,aAAa,CAAC,SAAS,OAAO,CAAC,KAAK,CAAC,iBAAiB,YAAY,MAAM,GAAG;AAAA,IACxF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW;AAAA,EACd;AAEA,SACE,4CAAC,QAAK,YAAY,EAAE,QAAQ,UAAU,GACpC,uDAAC,WACC;AAAA,gDAAC,iBACC,sDAAC,UAAQ,2BAAgB,GAC3B;AAAA,IACA,4CAAC,SAAO,iBAAM;AAAA,KAChB,GACF;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,kCAAU,UAAU,CAAC,kCAAU,SAAS,kCAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,kCAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,yBAAS;AAAA,EACtG,YAAY,kCAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,kCAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,kCAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,4BAAwB,kCAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable indent */\nimport React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { indicatorItemBlockName } from './blockNames.js';\n\nconst Item = aggregatedClasses('div')(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({\n active,\n completed,\n}));\nconst Wrapper = aggregatedClasses('div')(`${indicatorItemBlockName}-wrapper`);\nconst Label = aggregatedClasses('span')(indicatorItemBlockName, 'label');\nconst Bullet = aggregatedClasses('div')(indicatorItemBlockName, 'bullet');\nconst BulletWrapper = aggregatedClasses('div')(indicatorItemBlockName, 'bullet-wrapper');\n\ninterface WizardStepProps {\n label?: string;\n icon?: React.ReactNode;\n iconCompleted?: React.ReactNode;\n iconActive?: React.ReactNode;\n active?: boolean;\n completed?: boolean;\n index?: number;\n}\n\nconst WizardStep = ({\n label = '',\n icon = null,\n iconCompleted = <Checkmark />,\n iconActive = null,\n active = false,\n completed = false,\n index = 0,\n}: WizardStepProps) => {\n const currentIcon =\n useMemo(() => {\n if (active) return iconActive;\n if (completed) return iconCompleted;\n return icon;\n }, [active, completed, icon, iconActive, iconCompleted]) || icon;\n\n const iconWithOptions = useMemo(\n () =>\n isValidElement(currentIcon)\n ? cloneElement(currentIcon, {\n color: get(currentIcon, ['props', 'color']) || ['brand-primary', completed ? 600 : 500],\n })\n : currentIcon || index + 1,\n [completed, currentIcon, index],\n );\n\n return (\n <Item classProps={{ active, completed }}>\n <Wrapper>\n <BulletWrapper>\n <Bullet>{iconWithOptions}</Bullet>\n </BulletWrapper>\n <Label>{label}</Label>\n </Wrapper>\n </Item>\n );\n};\n\nconst wizzardStepProps = {\n label: PropTypes.string.description('Step label'),\n icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue(Checkmark),\n iconActive: PropTypes.element.description('Icon when the step is active'),\n active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n index: PropTypes.number.description('Current item index'),\n};\n\nWizardStep.propTypes = wizzardStepProps;\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = wizzardStepProps;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BL;AA7BlB,mBAA6D;AAC7D,2BAAkC;AAClC,0BAAoB;AACpB,8BAAoC;AACpC,sBAA0B;AAC1B,wBAAuC;AAEvC,MAAM,WAAO,wCAAkB,KAAK,EAAE,GAAG,4CAA0B,MAAM,CAAC,EAAE,QAAQ,UAAU,OAAO;AAAA,EACnG;AAAA,EACA;AACF,EAAE;AACF,MAAM,cAAU,wCAAkB,KAAK,EAAE,GAAG,kDAAgC;AAC5E,MAAM,YAAQ,wCAAkB,MAAM,EAAE,0CAAwB,OAAO;AACvE,MAAM,aAAS,wCAAkB,KAAK,EAAE,0CAAwB,QAAQ;AACxE,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,0CAAwB,gBAAgB;AAYvF,MAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,4CAAC,6BAAU;AAAA,EAC3B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,MAAuB;AACrB,QAAM,kBACJ,sBAAQ,MAAM;AACZ,QAAI;AAAQ,aAAO;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,YAAY,aAAa,CAAC,KAAK;AAE9D,QAAM,sBAAkB;AAAA,IACtB,UACE,6BAAe,WAAW,QACtB,2BAAa,aAAa;AAAA,MACxB,WAAO,yBAAI,aAAa,CAAC,SAAS,OAAO,CAAC,KAAK,CAAC,iBAAiB,YAAY,MAAM,GAAG;AAAA,IACxF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW,aAAa,KAAK;AAAA,EAChC;AAEA,SACE,4CAAC,QAAK,YAAY,EAAE,QAAQ,UAAU,GACpC,uDAAC,WACC;AAAA,gDAAC,iBACC,sDAAC,UAAQ,2BAAgB,GAC3B;AAAA,IACA,4CAAC,SAAO,iBAAM;AAAA,KAChB,GACF;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,kCAAU,UAAU,CAAC,kCAAU,SAAS,kCAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,kCAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,yBAAS;AAAA,EACtG,YAAY,kCAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,kCAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,kCAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,4BAAwB,kCAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
6
6
  "names": []
7
7
  }
@@ -48,7 +48,7 @@ const WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {
48
48
  completed: index < current
49
49
  });
50
50
  return steps ? steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_WizardStep.default, { ...step, ...mergeStepProps(step, index) }, index)) : import_react.default.Children.map(children, (item, index) => (0, import_react.cloneElement)(item, mergeStepProps(item, index)));
51
- }, [current, children]);
51
+ }, [current, children, steps]);
52
52
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepsWrapper, { ...otherProps, children: items });
53
53
  };
54
54
  WizardSteps.Item = import_WizardStep.default;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/WizardSteps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\nimport React, { cloneElement, useMemo } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport WizardStep from './WizardStep.js';\nimport { indicatorBlockName } from './blockNames.js';\n\nconst StepsWrapper = aggregatedClasses('div')(indicatorBlockName);\n\nconst WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {\n const items = useMemo(() => {\n const mergeStepProps = (step, index) => ({\n index,\n active: current === index,\n completed: index < current,\n });\n\n return steps\n ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(step, index)} />)\n : React.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));\n }, [current, children]);\n\n return <StepsWrapper {...otherProps}>{items}</StepsWrapper>;\n};\n\nWizardSteps.Item = WizardStep;\n\nconst wizzardProps = {\n current: PropTypes.number.description('Current active state index').defaultValue(0),\n steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects').defaultValue([]).isRequired,\n children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description('List of WizardStep components'),\n};\n\nWizardSteps.propTypes = wizzardProps;\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = wizzardProps;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBY;AAjBnC,mBAA6C;AAC7C,8BAAoC;AACpC,2BAAkC;AAClC,wBAAuB;AACvB,wBAAmC;AAEnC,MAAM,mBAAe,wCAAkB,KAAK,EAAE,oCAAkB;AAEhE,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,UAAU,GAAG,WAAW,MAAM;AACvE,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,MAAM,WAAW;AAAA,MACvC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,4CAAC,kBAAAA,SAAA,EAAwB,GAAG,MAAO,GAAG,eAAe,MAAM,KAAK,KAA/C,KAAkD,CAAE,IAChG,aAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,MAAM,cAAU,2BAAa,MAAM,eAAe,MAAM,KAAK,CAAC,CAAC;AAAA,EACnG,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SAAO,4CAAC,gBAAc,GAAG,YAAa,iBAAM;AAC9C;AAEA,YAAY,OAAO,kBAAAD;AAEnB,MAAM,eAAe;AAAA,EACnB,SAAS,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,CAAC,EAAE;AAAA,EACrG,UAAU,kCAAU,QAAQ,kCAAU,WAAW,kBAAAA,OAAU,CAAC,EAAE,YAAY,+BAA+B;AAC3G;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAoB,kCAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\nimport React, { cloneElement, useMemo } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport WizardStep from './WizardStep.js';\nimport { indicatorBlockName } from './blockNames.js';\n\nconst StepsWrapper = aggregatedClasses('div')(indicatorBlockName);\n\nconst WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {\n const items = useMemo(() => {\n const mergeStepProps = (step, index) => ({\n index,\n active: current === index,\n completed: index < current,\n });\n\n return steps\n ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(step, index)} />)\n : React.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));\n }, [current, children, steps]);\n\n return <StepsWrapper {...otherProps}>{items}</StepsWrapper>;\n};\n\nWizardSteps.Item = WizardStep;\n\nconst wizzardProps = {\n current: PropTypes.number.description('Current active state index').defaultValue(0),\n steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects').defaultValue([]).isRequired,\n children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description('List of WizardStep components'),\n};\n\nWizardSteps.propTypes = wizzardProps;\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = wizzardProps;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBY;AAjBnC,mBAA6C;AAC7C,8BAAoC;AACpC,2BAAkC;AAClC,wBAAuB;AACvB,wBAAmC;AAEnC,MAAM,mBAAe,wCAAkB,KAAK,EAAE,oCAAkB;AAEhE,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,UAAU,GAAG,WAAW,MAAM;AACvE,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,MAAM,WAAW;AAAA,MACvC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,4CAAC,kBAAAA,SAAA,EAAwB,GAAG,MAAO,GAAG,eAAe,MAAM,KAAK,KAA/C,KAAkD,CAAE,IAChG,aAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,MAAM,cAAU,2BAAa,MAAM,eAAe,MAAM,KAAK,CAAC,CAAC;AAAA,EACnG,GAAG,CAAC,SAAS,UAAU,KAAK,CAAC;AAE7B,SAAO,4CAAC,gBAAc,GAAG,YAAa,iBAAM;AAC9C;AAEA,YAAY,OAAO,kBAAAD;AAEnB,MAAM,eAAe;AAAA,EACnB,SAAS,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,CAAC,EAAE;AAAA,EACrG,UAAU,kCAAU,QAAQ,kCAAU,WAAW,kBAAAA,OAAU,CAAC,EAAE,YAAY,+BAA+B;AAC3G;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAoB,kCAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
6
6
  "names": ["WizardStep", "React"]
7
7
  }
@@ -36,21 +36,31 @@ var import_react = require("react");
36
36
  var import_ds_utilities = require("@elliemae/ds-utilities");
37
37
  const checkCanNext = (prevIndex, array) => array.length > prevIndex + 1;
38
38
  const checkCanPrevious = (prevIndex) => prevIndex - 1 >= 0;
39
- const noop = () => null;
40
- function useWizard({ steps: wizardSteps, current, onNext = noop, onPrevious = noop, initial = 0 }) {
41
- const [currentStep, setCurrentStep] = (0, import_ds_utilities.useDerivedStateFromProps)(current || initial);
39
+ const noop = (currentStep) => null;
40
+ function useWizard({
41
+ steps: wizardSteps,
42
+ current,
43
+ onNext = noop,
44
+ onPrevious = noop,
45
+ initial = 0
46
+ }) {
47
+ const [currentStep, setCurrentStep] = (0, import_react.useState)(initial);
48
+ (0, import_react.useEffect)(() => {
49
+ if (typeof current !== "undefined")
50
+ setCurrentStep(current);
51
+ }, [current]);
42
52
  const handleNext = (0, import_react.useCallback)(() => {
43
53
  if (checkCanNext(currentStep, wizardSteps)) {
44
54
  onNext(currentStep);
45
55
  setCurrentStep(currentStep + 1);
46
56
  }
47
- });
57
+ }, [currentStep, wizardSteps, onNext]);
48
58
  const handlePrevious = (0, import_react.useCallback)(() => {
49
59
  if (checkCanPrevious(currentStep)) {
50
60
  onPrevious(currentStep);
51
61
  setCurrentStep(currentStep - 1);
52
62
  }
53
- });
63
+ }, [currentStep, onPrevious]);
54
64
  return {
55
65
  current: currentStep,
56
66
  next: handleNext,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/useWizard.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useCallback } from 'react';\nimport { get, useDerivedStateFromProps } from '@elliemae/ds-utilities';\n\nconst checkCanNext = (prevIndex, array) => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex) => prevIndex - 1 >= 0;\n\nconst noop = () => null;\n\nexport default function useWizard({ steps: wizardSteps, current, onNext = noop, onPrevious = noop, initial = 0 }) {\n const [currentStep, setCurrentStep] = useDerivedStateFromProps(current || initial);\n\n const handleNext = useCallback(() => {\n if (checkCanNext(currentStep, wizardSteps)) {\n onNext(currentStep);\n setCurrentStep(currentStep + 1);\n }\n });\n\n const handlePrevious = useCallback(() => {\n if (checkCanPrevious(currentStep)) {\n onPrevious(currentStep);\n setCurrentStep(currentStep - 1);\n }\n });\n\n return {\n current: currentStep,\n next: handleNext,\n previous: handlePrevious,\n canNext: checkCanNext(currentStep, wizardSteps),\n canPrevious: checkCanPrevious(currentStep),\n WizardCurrentContent: get(wizardSteps, [currentStep, 'content'], () => null),\n };\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4B;AAC5B,0BAA8C;AAE9C,MAAM,eAAe,CAAC,WAAW,UAAU,MAAM,SAAS,YAAY;AACtE,MAAM,mBAAmB,CAAC,cAAc,YAAY,KAAK;AAEzD,MAAM,OAAO,MAAM;AAEJ,SAAR,UAA2B,EAAE,OAAO,aAAa,SAAS,SAAS,MAAM,aAAa,MAAM,UAAU,EAAE,GAAG;AAChH,QAAM,CAAC,aAAa,cAAc,QAAI,8CAAyB,WAAW,OAAO;AAEjF,QAAM,iBAAa,0BAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,0BAAsB,yBAAI,aAAa,CAAC,aAAa,SAAS,GAAG,MAAM,IAAI;AAAA,EAC7E;AACF;",
4
+ "sourcesContent": ["import { useEffect, useCallback, useState } from 'react';\nimport { get, useDerivedStateFromProps } from '@elliemae/ds-utilities';\n\nconst checkCanNext = (prevIndex: number, array: any[]): boolean => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex: number): boolean => prevIndex - 1 >= 0;\n\nconst noop = (currentStep: number) => null;\n\ninterface WizardConfig {\n steps: any[];\n current?: number;\n onNext?: (currentStep: number) => void;\n onPrevious?: (currentStep: number) => void;\n initial?: number;\n}\n\nexport default function useWizard({\n steps: wizardSteps,\n current,\n onNext = noop,\n onPrevious = noop,\n initial = 0,\n}: WizardConfig) {\n const [currentStep, setCurrentStep] = useState(initial);\n\n useEffect(() => {\n if (typeof current !== 'undefined') setCurrentStep(current);\n }, [current]);\n\n const handleNext = useCallback(() => {\n if (checkCanNext(currentStep, wizardSteps)) {\n onNext(currentStep);\n setCurrentStep(currentStep + 1);\n }\n }, [currentStep, wizardSteps, onNext]);\n\n const handlePrevious = useCallback(() => {\n if (checkCanPrevious(currentStep)) {\n onPrevious(currentStep);\n setCurrentStep(currentStep - 1);\n }\n }, [currentStep, onPrevious]);\n\n return {\n current: currentStep,\n next: handleNext,\n previous: handlePrevious,\n canNext: checkCanNext(currentStep, wizardSteps),\n canPrevious: checkCanPrevious(currentStep),\n WizardCurrentContent: get(wizardSteps, [currentStep, 'content'], () => null),\n };\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiD;AACjD,0BAA8C;AAE9C,MAAM,eAAe,CAAC,WAAmB,UAA0B,MAAM,SAAS,YAAY;AAC9F,MAAM,mBAAmB,CAAC,cAA+B,YAAY,KAAK;AAE1E,MAAM,OAAO,CAAC,gBAAwB;AAUvB,SAAR,UAA2B;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACZ,GAAiB;AACf,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,OAAO;AAEtD,8BAAU,MAAM;AACd,QAAI,OAAO,YAAY;AAAa,qBAAe,OAAO;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,iBAAa,0BAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,CAAC;AAErC,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,0BAAsB,yBAAI,aAAa,CAAC,aAAa,SAAS,GAAG,MAAM,IAAI;AAAA,EAC7E;AACF;",
6
6
  "names": []
7
7
  }
@@ -29,12 +29,12 @@ const WizardStep = ({
29
29
  if (completed)
30
30
  return iconCompleted;
31
31
  return icon;
32
- }, [active, completed]) || icon;
32
+ }, [active, completed, icon, iconActive, iconCompleted]) || icon;
33
33
  const iconWithOptions = useMemo(
34
34
  () => isValidElement(currentIcon) ? cloneElement(currentIcon, {
35
35
  color: get(currentIcon, ["props", "color"]) || ["brand-primary", completed ? 600 : 500]
36
36
  }) : currentIcon || index + 1,
37
- [currentIcon]
37
+ [completed, currentIcon, index]
38
38
  );
39
39
  return /* @__PURE__ */ jsx(Item, { classProps: { active, completed }, children: /* @__PURE__ */ jsxs(Wrapper, { children: [
40
40
  /* @__PURE__ */ jsx(BulletWrapper, { children: /* @__PURE__ */ jsx(Bullet, { children: iconWithOptions }) }),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/WizardStep.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { indicatorItemBlockName } from './blockNames.js';\n\nconst Item = aggregatedClasses('div')(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({\n active,\n completed,\n}));\nconst Wrapper = aggregatedClasses('div')(`${indicatorItemBlockName}-wrapper`);\nconst Label = aggregatedClasses('span')(indicatorItemBlockName, 'label');\nconst Bullet = aggregatedClasses('div')(indicatorItemBlockName, 'bullet');\nconst BulletWrapper = aggregatedClasses('div')(indicatorItemBlockName, 'bullet-wrapper');\n\nconst WizardStep = ({\n label = '',\n icon = null,\n iconCompleted = <Checkmark />,\n iconActive = null,\n active = false,\n completed = false,\n index = 0,\n}) => {\n const currentIcon =\n useMemo(() => {\n if (active) return iconActive;\n if (completed) return iconCompleted;\n return icon;\n }, [active, completed]) || icon;\n\n const iconWithOptions = useMemo(\n () =>\n isValidElement(currentIcon)\n ? cloneElement(currentIcon, {\n color: get(currentIcon, ['props', 'color']) || ['brand-primary', completed ? 600 : 500],\n })\n : currentIcon || index + 1,\n [currentIcon],\n );\n\n return (\n <Item classProps={{ active, completed }}>\n <Wrapper>\n <BulletWrapper>\n <Bullet>{iconWithOptions}</Bullet>\n </BulletWrapper>\n <Label>{label}</Label>\n </Wrapper>\n </Item>\n );\n};\n\nconst wizzardStepProps = {\n label: PropTypes.string.description('Step label'),\n icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue(Checkmark),\n iconActive: PropTypes.element.description('Icon when the step is active'),\n active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n index: PropTypes.number.description('Current item index'),\n};\n\nWizardStep.propTypes = wizzardStepProps;\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = wizzardStepProps;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACoBL,cAyBZ,YAzBY;AAnBlB,SAAgB,cAAc,SAAS,sBAAsB;AAC7D,SAAS,yBAAyB;AAClC,SAAS,WAAW;AACpB,SAAS,UAAU,iBAAiB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEvC,MAAM,OAAO,kBAAkB,KAAK,EAAE,GAAG,0BAA0B,MAAM,CAAC,EAAE,QAAQ,UAAU,OAAO;AAAA,EACnG;AAAA,EACA;AACF,EAAE;AACF,MAAM,UAAU,kBAAkB,KAAK,EAAE,GAAG,gCAAgC;AAC5E,MAAM,QAAQ,kBAAkB,MAAM,EAAE,wBAAwB,OAAO;AACvE,MAAM,SAAS,kBAAkB,KAAK,EAAE,wBAAwB,QAAQ;AACxE,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,wBAAwB,gBAAgB;AAEvF,MAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,oBAAC,aAAU;AAAA,EAC3B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,MAAM;AACJ,QAAM,cACJ,QAAQ,MAAM;AACZ,QAAI;AAAQ,aAAO;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,SAAS,CAAC,KAAK;AAE7B,QAAM,kBAAkB;AAAA,IACtB,MACE,eAAe,WAAW,IACtB,aAAa,aAAa;AAAA,MACxB,OAAO,IAAI,aAAa,CAAC,SAAS,OAAO,CAAC,KAAK,CAAC,iBAAiB,YAAY,MAAM,GAAG;AAAA,IACxF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW;AAAA,EACd;AAEA,SACE,oBAAC,QAAK,YAAY,EAAE,QAAQ,UAAU,GACpC,+BAAC,WACC;AAAA,wBAAC,iBACC,8BAAC,UAAQ,2BAAgB,GAC3B;AAAA,IACA,oBAAC,SAAO,iBAAM;AAAA,KAChB,GACF;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,UAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,SAAS;AAAA,EACtG,YAAY,UAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,UAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,UAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,wBAAwB,SAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { indicatorItemBlockName } from './blockNames.js';\n\nconst Item = aggregatedClasses('div')(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({\n active,\n completed,\n}));\nconst Wrapper = aggregatedClasses('div')(`${indicatorItemBlockName}-wrapper`);\nconst Label = aggregatedClasses('span')(indicatorItemBlockName, 'label');\nconst Bullet = aggregatedClasses('div')(indicatorItemBlockName, 'bullet');\nconst BulletWrapper = aggregatedClasses('div')(indicatorItemBlockName, 'bullet-wrapper');\n\ninterface WizardStepProps {\n label?: string;\n icon?: React.ReactNode;\n iconCompleted?: React.ReactNode;\n iconActive?: React.ReactNode;\n active?: boolean;\n completed?: boolean;\n index?: number;\n}\n\nconst WizardStep = ({\n label = '',\n icon = null,\n iconCompleted = <Checkmark />,\n iconActive = null,\n active = false,\n completed = false,\n index = 0,\n}: WizardStepProps) => {\n const currentIcon =\n useMemo(() => {\n if (active) return iconActive;\n if (completed) return iconCompleted;\n return icon;\n }, [active, completed, icon, iconActive, iconCompleted]) || icon;\n\n const iconWithOptions = useMemo(\n () =>\n isValidElement(currentIcon)\n ? cloneElement(currentIcon, {\n color: get(currentIcon, ['props', 'color']) || ['brand-primary', completed ? 600 : 500],\n })\n : currentIcon || index + 1,\n [completed, currentIcon, index],\n );\n\n return (\n <Item classProps={{ active, completed }}>\n <Wrapper>\n <BulletWrapper>\n <Bullet>{iconWithOptions}</Bullet>\n </BulletWrapper>\n <Label>{label}</Label>\n </Wrapper>\n </Item>\n );\n};\n\nconst wizzardStepProps = {\n label: PropTypes.string.description('Step label'),\n icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue(Checkmark),\n iconActive: PropTypes.element.description('Icon when the step is active'),\n active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n index: PropTypes.number.description('Current item index'),\n};\n\nWizardStep.propTypes = wizzardStepProps;\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = wizzardStepProps;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC8BL,cAyBZ,YAzBY;AA7BlB,SAAgB,cAAc,SAAS,sBAAsB;AAC7D,SAAS,yBAAyB;AAClC,SAAS,WAAW;AACpB,SAAS,UAAU,iBAAiB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEvC,MAAM,OAAO,kBAAkB,KAAK,EAAE,GAAG,0BAA0B,MAAM,CAAC,EAAE,QAAQ,UAAU,OAAO;AAAA,EACnG;AAAA,EACA;AACF,EAAE;AACF,MAAM,UAAU,kBAAkB,KAAK,EAAE,GAAG,gCAAgC;AAC5E,MAAM,QAAQ,kBAAkB,MAAM,EAAE,wBAAwB,OAAO;AACvE,MAAM,SAAS,kBAAkB,KAAK,EAAE,wBAAwB,QAAQ;AACxE,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,wBAAwB,gBAAgB;AAYvF,MAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,oBAAC,aAAU;AAAA,EAC3B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,MAAuB;AACrB,QAAM,cACJ,QAAQ,MAAM;AACZ,QAAI;AAAQ,aAAO;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,YAAY,aAAa,CAAC,KAAK;AAE9D,QAAM,kBAAkB;AAAA,IACtB,MACE,eAAe,WAAW,IACtB,aAAa,aAAa;AAAA,MACxB,OAAO,IAAI,aAAa,CAAC,SAAS,OAAO,CAAC,KAAK,CAAC,iBAAiB,YAAY,MAAM,GAAG;AAAA,IACxF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW,aAAa,KAAK;AAAA,EAChC;AAEA,SACE,oBAAC,QAAK,YAAY,EAAE,QAAQ,UAAU,GACpC,+BAAC,WACC;AAAA,wBAAC,iBACC,8BAAC,UAAQ,2BAAgB,GAC3B;AAAA,IACA,oBAAC,SAAO,iBAAM;AAAA,KAChB,GACF;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,UAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,SAAS;AAAA,EACtG,YAAY,UAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,UAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,UAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,wBAAwB,SAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
6
6
  "names": []
7
7
  }
@@ -14,7 +14,7 @@ const WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {
14
14
  completed: index < current
15
15
  });
16
16
  return steps ? steps.map((step, index) => /* @__PURE__ */ jsx(WizardStep, { ...step, ...mergeStepProps(step, index) }, index)) : React2.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));
17
- }, [current, children]);
17
+ }, [current, children, steps]);
18
18
  return /* @__PURE__ */ jsx(StepsWrapper, { ...otherProps, children: items });
19
19
  };
20
20
  WizardSteps.Item = WizardStep;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/WizardSteps.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\nimport React, { cloneElement, useMemo } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport WizardStep from './WizardStep.js';\nimport { indicatorBlockName } from './blockNames.js';\n\nconst StepsWrapper = aggregatedClasses('div')(indicatorBlockName);\n\nconst WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {\n const items = useMemo(() => {\n const mergeStepProps = (step, index) => ({\n index,\n active: current === index,\n completed: index < current,\n });\n\n return steps\n ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(step, index)} />)\n : React.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));\n }, [current, children]);\n\n return <StepsWrapper {...otherProps}>{items}</StepsWrapper>;\n};\n\nWizardSteps.Item = WizardStep;\n\nconst wizzardProps = {\n current: PropTypes.number.description('Current active state index').defaultValue(0),\n steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects').defaultValue([]).isRequired,\n children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description('List of WizardStep components'),\n};\n\nWizardSteps.propTypes = wizzardProps;\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = wizzardProps;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACmBY;AAjBnC,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAClC,OAAO,gBAAgB;AACvB,SAAS,0BAA0B;AAEnC,MAAM,eAAe,kBAAkB,KAAK,EAAE,kBAAkB;AAEhE,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,UAAU,GAAG,WAAW,MAAM;AACvE,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,MAAM,WAAW;AAAA,MACvC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,oBAAC,cAAwB,GAAG,MAAO,GAAG,eAAe,MAAM,KAAK,KAA/C,KAAkD,CAAE,IAChGA,OAAM,SAAS,IAAI,UAAU,CAAC,MAAM,UAAU,aAAa,MAAM,eAAe,MAAM,KAAK,CAAC,CAAC;AAAA,EACnG,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SAAO,oBAAC,gBAAc,GAAG,YAAa,iBAAM;AAC9C;AAEA,YAAY,OAAO;AAEnB,MAAM,eAAe;AAAA,EACnB,SAAS,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,CAAC,EAAE;AAAA,EACrG,UAAU,UAAU,QAAQ,UAAU,WAAW,UAAU,CAAC,EAAE,YAAY,+BAA+B;AAC3G;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,oBAAoB,SAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\nimport React, { cloneElement, useMemo } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport WizardStep from './WizardStep.js';\nimport { indicatorBlockName } from './blockNames.js';\n\nconst StepsWrapper = aggregatedClasses('div')(indicatorBlockName);\n\nconst WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {\n const items = useMemo(() => {\n const mergeStepProps = (step, index) => ({\n index,\n active: current === index,\n completed: index < current,\n });\n\n return steps\n ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(step, index)} />)\n : React.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));\n }, [current, children, steps]);\n\n return <StepsWrapper {...otherProps}>{items}</StepsWrapper>;\n};\n\nWizardSteps.Item = WizardStep;\n\nconst wizzardProps = {\n current: PropTypes.number.description('Current active state index').defaultValue(0),\n steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects').defaultValue([]).isRequired,\n children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description('List of WizardStep components'),\n};\n\nWizardSteps.propTypes = wizzardProps;\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = wizzardProps;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACmBY;AAjBnC,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAClC,OAAO,gBAAgB;AACvB,SAAS,0BAA0B;AAEnC,MAAM,eAAe,kBAAkB,KAAK,EAAE,kBAAkB;AAEhE,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,UAAU,GAAG,WAAW,MAAM;AACvE,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,MAAM,WAAW;AAAA,MACvC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,oBAAC,cAAwB,GAAG,MAAO,GAAG,eAAe,MAAM,KAAK,KAA/C,KAAkD,CAAE,IAChGA,OAAM,SAAS,IAAI,UAAU,CAAC,MAAM,UAAU,aAAa,MAAM,eAAe,MAAM,KAAK,CAAC,CAAC;AAAA,EACnG,GAAG,CAAC,SAAS,UAAU,KAAK,CAAC;AAE7B,SAAO,oBAAC,gBAAc,GAAG,YAAa,iBAAM;AAC9C;AAEA,YAAY,OAAO;AAEnB,MAAM,eAAe;AAAA,EACnB,SAAS,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,CAAC,EAAE;AAAA,EACrG,UAAU,UAAU,QAAQ,UAAU,WAAW,UAAU,CAAC,EAAE,YAAY,+BAA+B;AAC3G;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,oBAAoB,SAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
6
6
  "names": ["React"]
7
7
  }
@@ -1,23 +1,33 @@
1
1
  import * as React from "react";
2
- import { useCallback } from "react";
3
- import { get, useDerivedStateFromProps } from "@elliemae/ds-utilities";
2
+ import { useEffect, useCallback, useState } from "react";
3
+ import { get } from "@elliemae/ds-utilities";
4
4
  const checkCanNext = (prevIndex, array) => array.length > prevIndex + 1;
5
5
  const checkCanPrevious = (prevIndex) => prevIndex - 1 >= 0;
6
- const noop = () => null;
7
- function useWizard({ steps: wizardSteps, current, onNext = noop, onPrevious = noop, initial = 0 }) {
8
- const [currentStep, setCurrentStep] = useDerivedStateFromProps(current || initial);
6
+ const noop = (currentStep) => null;
7
+ function useWizard({
8
+ steps: wizardSteps,
9
+ current,
10
+ onNext = noop,
11
+ onPrevious = noop,
12
+ initial = 0
13
+ }) {
14
+ const [currentStep, setCurrentStep] = useState(initial);
15
+ useEffect(() => {
16
+ if (typeof current !== "undefined")
17
+ setCurrentStep(current);
18
+ }, [current]);
9
19
  const handleNext = useCallback(() => {
10
20
  if (checkCanNext(currentStep, wizardSteps)) {
11
21
  onNext(currentStep);
12
22
  setCurrentStep(currentStep + 1);
13
23
  }
14
- });
24
+ }, [currentStep, wizardSteps, onNext]);
15
25
  const handlePrevious = useCallback(() => {
16
26
  if (checkCanPrevious(currentStep)) {
17
27
  onPrevious(currentStep);
18
28
  setCurrentStep(currentStep - 1);
19
29
  }
20
- });
30
+ }, [currentStep, onPrevious]);
21
31
  return {
22
32
  current: currentStep,
23
33
  next: handleNext,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useWizard.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback } from 'react';\nimport { get, useDerivedStateFromProps } from '@elliemae/ds-utilities';\n\nconst checkCanNext = (prevIndex, array) => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex) => prevIndex - 1 >= 0;\n\nconst noop = () => null;\n\nexport default function useWizard({ steps: wizardSteps, current, onNext = noop, onPrevious = noop, initial = 0 }) {\n const [currentStep, setCurrentStep] = useDerivedStateFromProps(current || initial);\n\n const handleNext = useCallback(() => {\n if (checkCanNext(currentStep, wizardSteps)) {\n onNext(currentStep);\n setCurrentStep(currentStep + 1);\n }\n });\n\n const handlePrevious = useCallback(() => {\n if (checkCanPrevious(currentStep)) {\n onPrevious(currentStep);\n setCurrentStep(currentStep - 1);\n }\n });\n\n return {\n current: currentStep,\n next: handleNext,\n previous: handlePrevious,\n canNext: checkCanNext(currentStep, wizardSteps),\n canPrevious: checkCanPrevious(currentStep),\n WizardCurrentContent: get(wizardSteps, [currentStep, 'content'], () => null),\n };\n}\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,KAAK,gCAAgC;AAE9C,MAAM,eAAe,CAAC,WAAW,UAAU,MAAM,SAAS,YAAY;AACtE,MAAM,mBAAmB,CAAC,cAAc,YAAY,KAAK;AAEzD,MAAM,OAAO,MAAM;AAEJ,SAAR,UAA2B,EAAE,OAAO,aAAa,SAAS,SAAS,MAAM,aAAa,MAAM,UAAU,EAAE,GAAG;AAChH,QAAM,CAAC,aAAa,cAAc,IAAI,yBAAyB,WAAW,OAAO;AAEjF,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,sBAAsB,IAAI,aAAa,CAAC,aAAa,SAAS,GAAG,MAAM,IAAI;AAAA,EAC7E;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useCallback, useState } from 'react';\nimport { get, useDerivedStateFromProps } from '@elliemae/ds-utilities';\n\nconst checkCanNext = (prevIndex: number, array: any[]): boolean => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex: number): boolean => prevIndex - 1 >= 0;\n\nconst noop = (currentStep: number) => null;\n\ninterface WizardConfig {\n steps: any[];\n current?: number;\n onNext?: (currentStep: number) => void;\n onPrevious?: (currentStep: number) => void;\n initial?: number;\n}\n\nexport default function useWizard({\n steps: wizardSteps,\n current,\n onNext = noop,\n onPrevious = noop,\n initial = 0,\n}: WizardConfig) {\n const [currentStep, setCurrentStep] = useState(initial);\n\n useEffect(() => {\n if (typeof current !== 'undefined') setCurrentStep(current);\n }, [current]);\n\n const handleNext = useCallback(() => {\n if (checkCanNext(currentStep, wizardSteps)) {\n onNext(currentStep);\n setCurrentStep(currentStep + 1);\n }\n }, [currentStep, wizardSteps, onNext]);\n\n const handlePrevious = useCallback(() => {\n if (checkCanPrevious(currentStep)) {\n onPrevious(currentStep);\n setCurrentStep(currentStep - 1);\n }\n }, [currentStep, onPrevious]);\n\n return {\n current: currentStep,\n next: handleNext,\n previous: handlePrevious,\n canNext: checkCanNext(currentStep, wizardSteps),\n canPrevious: checkCanPrevious(currentStep),\n WizardCurrentContent: get(wizardSteps, [currentStep, 'content'], () => null),\n };\n}\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,aAAa,gBAAgB;AACjD,SAAS,WAAqC;AAE9C,MAAM,eAAe,CAAC,WAAmB,UAA0B,MAAM,SAAS,YAAY;AAC9F,MAAM,mBAAmB,CAAC,cAA+B,YAAY,KAAK;AAE1E,MAAM,OAAO,CAAC,gBAAwB;AAUvB,SAAR,UAA2B;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACZ,GAAiB;AACf,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO;AAEtD,YAAU,MAAM;AACd,QAAI,OAAO,YAAY;AAAa,qBAAe,OAAO;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,CAAC;AAErC,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,sBAAsB,IAAI,aAAa,CAAC,aAAa,SAAS,GAAG,MAAM,IAAI;AAAA,EAC7E;AACF;",
6
6
  "names": []
7
7
  }
@@ -1,14 +1,15 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
+ interface WizardStepProps {
3
+ label?: string;
4
+ icon?: React.ReactNode;
5
+ iconCompleted?: React.ReactNode;
6
+ iconActive?: React.ReactNode;
7
+ active?: boolean;
8
+ completed?: boolean;
9
+ index?: number;
10
+ }
2
11
  declare const WizardStep: {
3
- ({ label, icon, iconCompleted, iconActive, active, completed, index, }: {
4
- label?: string | undefined;
5
- icon?: null | undefined;
6
- iconCompleted?: JSX.Element | undefined;
7
- iconActive?: null | undefined;
8
- active?: boolean | undefined;
9
- completed?: boolean | undefined;
10
- index?: number | undefined;
11
- }): JSX.Element;
12
+ ({ label, icon, iconCompleted, iconActive, active, completed, index, }: WizardStepProps): import("react/jsx-runtime.js").JSX.Element;
12
13
  propTypes: {
13
14
  label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
14
15
  icon: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
@@ -20,14 +21,6 @@ declare const WizardStep: {
20
21
  };
21
22
  displayName: string;
22
23
  };
23
- declare const WizzardStepWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
24
- label?: string | undefined;
25
- icon?: null | undefined;
26
- iconCompleted?: JSX.Element | undefined;
27
- iconActive?: null | undefined;
28
- active?: boolean | undefined;
29
- completed?: boolean | undefined;
30
- index?: number | undefined;
31
- }>;
24
+ declare const WizzardStepWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<WizardStepProps>;
32
25
  export { WizzardStepWithSchema };
33
26
  export default WizardStep;
@@ -1,14 +1,16 @@
1
- export default function useWizard({ steps: wizardSteps, current, onNext, onPrevious, initial }: {
2
- steps: any;
3
- current: any;
4
- onNext?: (() => null) | undefined;
5
- onPrevious?: (() => null) | undefined;
6
- initial?: number | undefined;
7
- }): {
8
- current: any;
1
+ interface WizardConfig {
2
+ steps: any[];
3
+ current?: number;
4
+ onNext?: (currentStep: number) => void;
5
+ onPrevious?: (currentStep: number) => void;
6
+ initial?: number;
7
+ }
8
+ export default function useWizard({ steps: wizardSteps, current, onNext, onPrevious, initial, }: WizardConfig): {
9
+ current: number;
9
10
  next: () => void;
10
11
  previous: () => void;
11
12
  canNext: boolean;
12
13
  canPrevious: boolean;
13
14
  WizardCurrentContent: any;
14
15
  };
16
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-wizard",
3
- "version": "3.17.0-next.9",
3
+ "version": "3.17.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Wizard",
6
6
  "files": [
@@ -55,10 +55,10 @@
55
55
  "indent": 4
56
56
  },
57
57
  "dependencies": {
58
- "@elliemae/ds-classnames": "3.17.0-next.9",
59
- "@elliemae/ds-icons": "3.17.0-next.9",
60
- "@elliemae/ds-props-helpers": "3.17.0-next.9",
61
- "@elliemae/ds-utilities": "3.17.0-next.9"
58
+ "@elliemae/ds-classnames": "3.17.0",
59
+ "@elliemae/ds-utilities": "3.17.0",
60
+ "@elliemae/ds-props-helpers": "3.17.0",
61
+ "@elliemae/ds-icons": "3.17.0"
62
62
  },
63
63
  "peerDependencies": {
64
64
  "lodash": "^4.17.21",
@@ -1,44 +0,0 @@
1
- /// <reference types="react" />
2
- declare const WizardSteps: {
3
- ({ current, steps, children, ...otherProps }: {
4
- [x: string]: any;
5
- current?: number | undefined;
6
- steps: any;
7
- children: any;
8
- }): JSX.Element;
9
- Item: {
10
- ({ label, icon, iconCompleted, iconActive, active, completed, index, }: {
11
- label?: string | undefined;
12
- icon?: null | undefined;
13
- iconCompleted?: JSX.Element | undefined;
14
- iconActive?: null | undefined;
15
- active?: boolean | undefined;
16
- completed?: boolean | undefined;
17
- index?: number | undefined;
18
- }): JSX.Element;
19
- propTypes: {
20
- label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
21
- icon: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
22
- iconCompleted: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
23
- iconActive: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
24
- active: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
25
- completed: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
26
- index: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
27
- };
28
- displayName: string;
29
- };
30
- propTypes: {
31
- current: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
32
- steps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
33
- children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
34
- };
35
- displayName: string;
36
- };
37
- declare const WizzardWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
38
- [x: string]: any;
39
- current?: number | undefined;
40
- steps: any;
41
- children: any;
42
- }>;
43
- export { WizzardWithSchema };
44
- export default WizardSteps;