@thx/controls 17.3.5 → 17.4.0

package/dist/esm/money/MoneyInput/MoneyInput.js

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { toMoney } from '@thx/money';
+import debug from 'debug';
+import Money from 'js-money';
+import { Input } from 'semantic-ui-react';
+import { useMoneyInput } from '../useMoneyInput.js';
+
+debug("thx.controls.money.MoneyInput");
+function MoneyInput(props) {
+  const { name, onBlur, locked, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, ...rest } = props;
+  const handleChange = useCallback((v) => {
+    if (!v) {
+      onChange && onChange(toMoney(0, defaultCurrency));
+    } else {
+      onChange && onChange(v);
+    }
+  }, [defaultCurrency, onChange]);
+  const val = !(value instanceof Money) && value !== void 0 ? toMoney(value) : value;
+  const [inputElement] = useMoneyInput({ onChange: handleChange, prefix, showPrefix, value: val, wholeNumber });
+  return /* @__PURE__ */ React.createElement(Input, {
+    ...rest
+  }, /* @__PURE__ */ React.createElement("input", {
+    name,
+    ref: inputElement,
+    onBlur,
+    readOnly: locked
+  }));
+}
+
+export { MoneyInput };
+//# sourceMappingURL=MoneyInput.js.map

package/dist/esm/money/MoneyInput/MoneyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyInput.js","sources":["../../../../src/money/MoneyInput/MoneyInput.tsx"],"sourcesContent":["import {toMoney} from '@thx/money';\nimport debug from 'debug';\nimport Money, {type Currency, type MoneyObject} from 'js-money';\nimport {useCallback} from 'react';\nimport {Input, type InputProps} from 'semantic-ui-react';\nimport {useMoneyInput} from '../useMoneyInput';\n\nconst d = debug('thx.controls.money.MoneyInput');\n\nexport interface MoneyInputProps {\n\tname?: string;\n\tonChange?: (value: Money) => void;\n\tvalue?: Money | MoneyObject;\n\tdefaultCurrency?: Currency; // Defaults to Money.CAD\n\tonBlur?: (ev: any) => void;\n\tprefix?: string; // Defaults to currency symbol\n\tshowPrefix?: boolean; // Defaults to false\n\tlocked?: boolean; // Defaults to false\n\twholeNumber?: boolean; // Defaults to false\n}\n\nexport function MoneyInput(props: MoneyInputProps & Omit<InputProps, 'onChange'>) {\n\tconst {name, onBlur, locked, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, ...rest} = props;\n\n\tconst handleChange = useCallback(\n\t\t(v?: Money) => {\n\t\t\tif (!v) {\n\t\t\t\tonChange && onChange(toMoney(0, defaultCurrency));\n\t\t\t} else {\n\t\t\t\tonChange && onChange(v);\n\t\t\t}\n\t\t},\n\t\t[defaultCurrency, onChange],\n\t);\n\n\tconst val = !(value instanceof Money) && value !== undefined ? toMoney(value) : value;\n\n\tconst [inputElement] = useMoneyInput({onChange: handleChange, prefix, showPrefix, value: val, wholeNumber});\n\n\treturn (\n\t\t<Input {...rest}>\n\t\t\t<input name={name} ref={inputElement} onBlur={onBlur} readOnly={locked} />\n\t\t</Input>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AAOU,MAAM,+BAA+B,EAAA;AAcxC,SAAA,UAAA,CAAoB,KAAuD,EAAA;AACjF,EAAM,MAAA,EAAC,IAAM,EAAA,MAAA,EAAQ,MAAQ,EAAA,MAAA,EAAQ,iBAAiB,QAAU,EAAA,UAAA,EAAY,KAAO,EAAA,WAAA,EAAA,GAAgB,IAAQ,EAAA,GAAA,KAAA,CAAA;AAE3G,EAAM,MAAA,YAAA,GAAe,WACpB,CAAA,CAAC,CAAc,KAAA;AACd,IAAA,IAAI,CAAC,CAAG,EAAA;AACP,MAAA,QAAA,IAAY,QAAS,CAAA,OAAA,CAAQ,CAAG,EAAA,eAAe,CAAC,CAAA,CAAA;AAAA,KAC1C,MAAA;AACN,MAAA,QAAA,IAAY,SAAS,CAAC,CAAA,CAAA;AAAA,KACvB;AAAA,GAED,EAAA,CAAC,eAAiB,EAAA,QAAQ,CAC3B,CAAA,CAAA;AAEA,EAAM,MAAA,GAAA,GAAM,EAAmB,KAAA,YAAA,KAAA,CAAA,IAAU,UAAU,KAAY,CAAA,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,KAAA,CAAA;AAEhF,EAAM,MAAA,CAAC,YAAgB,CAAA,GAAA,aAAA,CAAc,EAAC,QAAA,EAAU,YAAc,EAAA,MAAA,EAAQ,UAAY,EAAA,KAAA,EAAO,GAAK,EAAA,WAAA,EAAY,CAAA,CAAA;AAE1G,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,IAAA;AAAA,GAAA,kBACT,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAM,IAAA;AAAA,IAAY,GAAK,EAAA,YAAA;AAAA,IAAc,MAAA;AAAA,IAAgB,QAAU,EAAA,MAAA;AAAA,GAAQ,CACzE,CAAA,CAAA;AAEF;;;;"}

package/dist/esm/money/useMoneyInput.js

@@ -0,0 +1,75 @@
+import { toMoney } from '@thx/money';
+import debug from 'debug';
+import InputmaskImport from 'inputmask';
+import Money from 'js-money';
+import { useRef, useEffect, useCallback } from 'react';
+
+const d = debug("thx.controls.money.useMoneyInput");
+const InputmaskClass = InputmaskImport.default || InputmaskImport;
+function useMoneyInput(props) {
+  const { value, onChange, onSet, showPrefix, prefix, wholeNumber } = props;
+  const inputElement = useRef(null);
+  const maskInstance = useRef(null);
+  const currencyCode = value?.currency || "CAD";
+  useEffect(() => {
+    if (!inputElement.current)
+      throw new Error("Could not get input element");
+    d("Creating input mask instance");
+    maskInstance.current = new InputmaskClass({
+      alias: "numeric",
+      groupSeparator: ",",
+      digits: wholeNumber ? "0" : Money[currencyCode].decimal_digits.toString(),
+      digitsOptional: false,
+      prefix: showPrefix ? prefix || Money[currencyCode].symbol : void 0,
+      placeholder: "0",
+      autoUnmask: true,
+      oncomplete() {
+        if (onChange) {
+          if (inputElement.current?.value) {
+            onChange(toMoney(inputElement.current?.value, currencyCode));
+          } else {
+            onChange();
+          }
+        }
+      },
+      oncleared() {
+        if (onChange)
+          onChange();
+      },
+      onincomplete() {
+        if (onChange)
+          onChange(toMoney(inputElement.current?.value, currencyCode));
+      }
+    });
+    maskInstance.current.mask(inputElement.current);
+    return () => {
+      if (maskInstance.current) {
+        d("Cleaning up input mask instance");
+        maskInstance.current.remove();
+        maskInstance.current = null;
+      }
+    };
+  }, [currencyCode, prefix, showPrefix, wholeNumber]);
+  const setVal = useCallback((v) => {
+    if (inputElement.current) {
+      d("Value is being set:", v);
+      if (v) {
+        inputElement.current.value = v.toDecimal().toString();
+      } else {
+        inputElement.current.value = "";
+      }
+      onSet && onSet(v);
+    }
+  }, [onSet]);
+  useEffect(() => {
+    const whatCurrentlyIsDisplayed = inputElement.current?.value || "";
+    const whatWeAreSetting = value ? value.toString() : "";
+    if (whatCurrentlyIsDisplayed !== whatWeAreSetting) {
+      setVal(value);
+    }
+  }, [setVal, value]);
+  return [inputElement, setVal];
+}
+
+export { useMoneyInput };
+//# sourceMappingURL=useMoneyInput.js.map

package/dist/esm/money/useMoneyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMoneyInput.js","sources":["../../../src/money/useMoneyInput.ts"],"sourcesContent":["import {toMoney} from '@thx/money';\nimport debug from 'debug';\nimport Inputmask from 'inputmask';\nimport Money from 'js-money';\nimport {type MutableRefObject, useCallback, useEffect, useRef} from 'react';\n\nconst d = debug('thx.controls.money.useMoneyInput');\n\n// @ts-ignore inputmask .d.ts file is correct, but ESM causes some difficulty. -mk\nconst InputmaskClass = Inputmask.default || Inputmask;\n\ninterface UseMoneyInputProps {\n\tvalue?: Money;\n\tonChange?: (value?: Money) => void;\n\tonSet?: (value?: Money) => void;\n\t// defaultCurrency?: Currency; // Defaults to Money.CAD\n\tprefix?: string; // Defaults to currency symbol\n\tshowPrefix?: boolean; // Defaults to false\n\twholeNumber?: boolean; // Defaults to false\n}\n\ntype SetValueFn = (value?: Money) => void;\n\nexport function useMoneyInput(props: UseMoneyInputProps): [MutableRefObject<HTMLInputElement | null>, SetValueFn] {\n\tconst {value, onChange, onSet, showPrefix, prefix, wholeNumber} = props;\n\n\tconst inputElement = useRef<HTMLInputElement | null>(null);\n\tconst maskInstance = useRef<Inputmask.Instance | null>(null);\n\n\t// set the adjCurrency\n\t// let adjCurrency = Money.CAD;\n\t// if (value?.currency && Money[value?.currency]) adjCurrency = Money[value?.currency];\n\t// if (defaultCurrency) adjCurrency = defaultCurrency;\n\tconst currencyCode = value?.currency || 'CAD';\n\n\tuseEffect(() => {\n\t\tif (!inputElement.current) throw new Error('Could not get input element');\n\n\t\td('Creating input mask instance');\n\t\tmaskInstance.current = new InputmaskClass({\n\t\t\talias: 'numeric',\n\t\t\tgroupSeparator: ',',\n\t\t\tdigits: wholeNumber ? '0' : Money[currencyCode].decimal_digits.toString(),\n\t\t\tdigitsOptional: false,\n\t\t\tprefix: showPrefix ? prefix || Money[currencyCode].symbol : undefined,\n\t\t\tplaceholder: '0',\n\t\t\tautoUnmask: true,\n\t\t\toncomplete() {\n\t\t\t\tif (onChange) {\n\t\t\t\t\tif (inputElement.current?.value) {\n\t\t\t\t\t\tonChange(toMoney(inputElement.current?.value, currencyCode));\n\t\t\t\t\t} else {\n\t\t\t\t\t\tonChange();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\toncleared() {\n\t\t\t\tif (onChange) onChange();\n\t\t\t},\n\t\t\tonincomplete() {\n\t\t\t\tif (onChange) onChange(toMoney(inputElement.current?.value, currencyCode));\n\t\t\t},\n\t\t});\n\t\t// @ts-ignore We just created the instance but typescript can't figure it out. -mk\n\t\tmaskInstance.current.mask(inputElement.current);\n\n\t\treturn () => {\n\t\t\tif (maskInstance.current) {\n\t\t\t\td('Cleaning up input mask instance');\n\t\t\t\tmaskInstance.current.remove();\n\t\t\t\tmaskInstance.current = null;\n\t\t\t}\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [currencyCode, prefix, showPrefix, wholeNumber]);\n\n\tconst setVal = useCallback<SetValueFn>(\n\t\t(v?: Money) => {\n\t\t\tif (inputElement.current) {\n\t\t\t\td('Value is being set:', v);\n\t\t\t\tif (v) {\n\t\t\t\t\tinputElement.current.value = v.toDecimal().toString();\n\t\t\t\t} else {\n\t\t\t\t\tinputElement.current.value = '';\n\t\t\t\t}\n\t\t\t\tonSet && onSet(v);\n\t\t\t}\n\t\t},\n\t\t[onSet],\n\t);\n\n\t// If we change the value prop we need to sync the DOM value to display the new value\n\tuseEffect(() => {\n\t\tconst whatCurrentlyIsDisplayed = inputElement.current?.value || ''; // string | undef\n\t\tconst whatWeAreSetting = value ? value.toString() : ''; // money | undef\n\n\t\tif (whatCurrentlyIsDisplayed !== whatWeAreSetting) {\n\t\t\tsetVal(value);\n\t\t}\n\t}, [setVal, value]);\n\n\treturn [inputElement, setVal];\n}\n"],"names":["Inputmask"],"mappings":"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"}

package/dist/esm/step/FormStep.js

@@ -0,0 +1,17 @@
+import React, { cloneElement, Children } from 'react';
+import debug from 'debug';
+import { useStep } from './useStep.js';
+
+debug("thx.controls.step.FormStep");
+function FormStep(props) {
+  const [state, handleSubmit] = useStep();
+  const values = state[props.stepKey] || {};
+  const form = cloneElement(Children.only(props.children), {
+    values: values || {},
+    onSubmit: (vals) => handleSubmit(vals, props.stepKey)
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h1", null, props.title), form);
+}
+
+export { FormStep };
+//# sourceMappingURL=FormStep.js.map

package/dist/esm/step/FormStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormStep.js","sources":["../../../src/step/FormStep.tsx"],"sourcesContent":["import debug from 'debug';\nimport {cloneElement, Children} from 'react';\nimport {useStep} from './useStep';\n\nconst d = debug('thx.controls.step.FormStep');\n\ninterface FormStepProps {\n\tchildren: JSX.Element;\n\ttitle?: string;\n\tstepKey: string;\n\thidden?: boolean | ((state: any, step: number) => boolean);\n}\n\nexport function FormStep(props: FormStepProps) {\n\tconst [state, handleSubmit] = useStep();\n\tconst values = state[props.stepKey] || {};\n\n\tconst form = cloneElement(Children.only(props.children), {\n\t\tvalues: values || {},\n\t\tonSubmit: (vals: unknown) => handleSubmit(vals, props.stepKey),\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<h1>{props.title}</h1>\n\t\t\t{form}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;;;AAIU,MAAM,4BAA4B,EAAA;AASrC,SAAA,QAAA,CAAkB,KAAsB,EAAA;AAC9C,EAAM,MAAA,CAAC,KAAO,EAAA,YAAA,CAAA,GAAgB,OAAQ,EAAA,CAAA;AACtC,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,KAAM,CAAA,OAAA,CAAA,IAAY,EAAC,CAAA;AAExC,EAAA,MAAM,OAAO,YAAa,CAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AAAA,IACxD,MAAA,EAAQ,UAAU,EAAC;AAAA,IACnB,UAAU,CAAC,IAAA,KAAkB,YAAa,CAAA,IAAA,EAAM,MAAM,OAAO,CAAA;AAAA,GAC7D,CAAA,CAAA;AAED,EAAA,iFAEG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAI,KAAM,CAAA,KAAM,GAChB,IACF,CAAA,CAAA;AAEF;;;;"}

package/dist/esm/step/Step.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import debug from 'debug';
+
+debug("thx.controls.step.Step");
+function Step(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h1", null, props.title), props.children);
+}
+
+export { Step };
+//# sourceMappingURL=Step.js.map

package/dist/esm/step/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sources":["../../../src/step/Step.tsx"],"sourcesContent":["import debug from 'debug';\n\nconst d = debug('thx.controls.step.Step');\n\ninterface StepProps {\n\tchildren?: JSX.Element | JSX.Element[];\n\ttitle?: string;\n\tstep?: number;\n\thidden?: boolean | ((state: any, step: number) => boolean);\n}\n\nexport function Step(props: StepProps) {\n\treturn (\n\t\t<>\n\t\t\t<h1>{props.title}</h1>\n\t\t\t{props.children}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;;AAEU,MAAM,wBAAwB,EAAA;AASjC,SAAA,IAAA,CAAc,KAAkB,EAAA;AACtC,EAAA,iFAEG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAI,MAAM,KAAM,CAAA,EAChB,MAAM,QACR,CAAA,CAAA;AAEF;;;;"}

package/dist/esm/step/StepProvider.js

@@ -0,0 +1,95 @@
+import React, { useState, Children, cloneElement, useMemo } from 'react';
+import debug from 'debug';
+import { Prompt } from 'react-router-dom';
+import { Grid, StepGroup, Step as Step$1 } from 'semantic-ui-react';
+import { FormStep } from './FormStep.js';
+import { Step } from './Step.js';
+import { StepContext } from './stepContext.js';
+
+debug("thx.controls.step.StepProvider");
+function StepProvider(props) {
+  const [state, setState] = useState(props.values || {});
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const titles = [];
+  const children = [];
+  Children.forEach(props?.children, (child, index) => {
+    if (!child)
+      return;
+    if (child?.type !== Step && child?.type !== FormStep) {
+      throw new Error(`Can not render '${child?.type}' as child of 'StepProvider'. Must be of type 'Step' or 'FormStep'`);
+    }
+    if (child.props.hidden) {
+      if (typeof child.props.hidden === "function" && !child.props.hidden(state, index)) {
+        titles.push(child?.props?.title || "");
+        children.push(cloneElement(child, { step: index, key: child?.key || index.toString() }));
+      }
+    } else {
+      titles.push(child?.props?.title || "");
+      children.push(cloneElement(child, { step: index, key: child?.key || index.toString() }));
+    }
+  });
+  const onNavigate = () => "Are you sure you want to end this process? All the entered data will be lost!";
+  const valueProps = useMemo(() => {
+    return {
+      state,
+      handleSubmit: (values, stepKey) => {
+        if (currentStep + 1 === children?.length) {
+          setState({ ...state, [stepKey]: values });
+          setIsSubmitting(true);
+          props.onSubmit({ ...state, [stepKey]: values });
+        } else {
+          setState({ ...state, [stepKey]: values });
+          setCurrentStep(currentStep + 1);
+        }
+      }
+    };
+  }, [children?.length, currentStep, props, state]);
+  if (props.vertical) {
+    return /* @__PURE__ */ React.createElement(StepContext.Provider, {
+      value: valueProps
+    }, props.warnOnReroute && /* @__PURE__ */ React.createElement(Prompt, {
+      message: onNavigate,
+      when: !isSubmitting
+    }), /* @__PURE__ */ React.createElement(Grid, {
+      divided: true,
+      stackable: true
+    }, /* @__PURE__ */ React.createElement(Grid.Row, null, /* @__PURE__ */ React.createElement(Grid.Column, {
+      width: 3
+    }, /* @__PURE__ */ React.createElement(StepGroup, {
+      ordered: true,
+      size: "mini",
+      vertical: true,
+      widths: 1
+    }, titles?.map((title, index) => {
+      return /* @__PURE__ */ React.createElement(Step$1, {
+        key: index.toString(),
+        completed: index < Object.keys(state).length,
+        active: currentStep === index,
+        onClick: () => setCurrentStep(index),
+        disabled: index > Object.keys(state).length
+      }, /* @__PURE__ */ React.createElement(Step$1.Content, null, /* @__PURE__ */ React.createElement(Step$1.Title, null, title)));
+    }))), /* @__PURE__ */ React.createElement(Grid.Column, {
+      width: 13
+    }, children?.[currentStep]))));
+  }
+  return /* @__PURE__ */ React.createElement(StepContext.Provider, {
+    value: valueProps
+  }, props.warnOnReroute && /* @__PURE__ */ React.createElement(Prompt, {
+    message: onNavigate
+  }), /* @__PURE__ */ React.createElement(StepGroup, {
+    ordered: true,
+    size: "mini"
+  }, titles?.map((title, index) => {
+    return /* @__PURE__ */ React.createElement(Step$1, {
+      key: index.toString(),
+      completed: index < Object.keys(state).length,
+      active: currentStep === index,
+      onClick: () => setCurrentStep(index),
+      disabled: index > Object.keys(state).length
+    }, /* @__PURE__ */ React.createElement(Step$1.Content, null, /* @__PURE__ */ React.createElement(Step$1.Title, null, title)));
+  })), children?.[currentStep]);
+}
+
+export { StepProvider };
+//# sourceMappingURL=StepProvider.js.map

package/dist/esm/step/StepProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepProvider.js","sources":["../../../src/step/StepProvider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport debug from 'debug';\nimport {cloneElement, Children, useMemo, useState} from 'react';\nimport {Prompt} from 'react-router-dom';\nimport {Grid, Step as SemanticStep, StepGroup} from 'semantic-ui-react';\nimport {FormStep} from './FormStep';\nimport {Step} from './Step';\nimport {StepContext} from './stepContext';\n\nconst d = debug('thx.controls.step.StepProvider');\n\ninterface StepProviderProps {\n\tchildren: (JSX.Element | null | false)[];\n\tonSubmit: (values: any) => void;\n\tvalues?: any;\n\twarnOnReroute?: boolean;\n\tvertical?: boolean;\n}\n\nexport function StepProvider(props: StepProviderProps) {\n\tconst [state, setState] = useState(props.values || {});\n\tconst [currentStep, setCurrentStep] = useState(0);\n\tconst [isSubmitting, setIsSubmitting] = useState(false);\n\n\tconst titles: string[] = [];\n\tconst children: JSX.Element[] = [];\n\n\tChildren.forEach(props?.children, (child, index) => {\n\t\tif (!child) return;\n\t\tif (child?.type !== Step && child?.type !== FormStep) {\n\t\t\tthrow new Error(`Can not render '${child?.type}' as child of 'StepProvider'. Must be of type 'Step' or 'FormStep'`);\n\t\t}\n\t\tif (child.props.hidden) {\n\t\t\tif (typeof child.props.hidden === 'function' && !child.props.hidden(state, index)) {\n\t\t\t\ttitles.push(child?.props?.title || '');\n\t\t\t\tchildren.push(cloneElement(child, {step: index, key: child?.key || index.toString()}));\n\t\t\t}\n\t\t} else {\n\t\t\ttitles.push(child?.props?.title || '');\n\t\t\tchildren.push(cloneElement(child, {step: index, key: child?.key || index.toString()}));\n\t\t}\n\t});\n\n\tconst onNavigate = () => 'Are you sure you want to end this process? All the entered data will be lost!';\n\n\tconst valueProps = useMemo(() => {\n\t\treturn {\n\t\t\tstate,\n\t\t\thandleSubmit: (values: any, stepKey: string) => {\n\t\t\t\tif (currentStep + 1 === children?.length) {\n\t\t\t\t\tsetState({...state, [stepKey]: values});\n\t\t\t\t\tsetIsSubmitting(true);\n\t\t\t\t\tprops.onSubmit({...state, [stepKey]: values});\n\t\t\t\t} else {\n\t\t\t\t\tsetState({...state, [stepKey]: values});\n\t\t\t\t\tsetCurrentStep(currentStep + 1);\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t}, [children?.length, currentStep, props, state]);\n\n\tif (props.vertical) {\n\t\treturn (\n\t\t\t<StepContext.Provider value={valueProps}>\n\t\t\t\t{props.warnOnReroute && <Prompt message={onNavigate} when={!isSubmitting} />}\n\t\t\t\t<Grid divided stackable>\n\t\t\t\t\t<Grid.Row>\n\t\t\t\t\t\t<Grid.Column width={3}>\n\t\t\t\t\t\t\t<StepGroup ordered size=\"mini\" vertical widths={1}>\n\t\t\t\t\t\t\t\t{titles?.map((title, index) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<SemanticStep\n\t\t\t\t\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\t\t\t\t\tcompleted={index < Object.keys(state).length}\n\t\t\t\t\t\t\t\t\t\t\tactive={currentStep === index}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setCurrentStep(index)}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={index > Object.keys(state).length}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SemanticStep.Content>\n\t\t\t\t\t\t\t\t\t\t\t\t<SemanticStep.Title>{title}</SemanticStep.Title>\n\t\t\t\t\t\t\t\t\t\t\t</SemanticStep.Content>\n\t\t\t\t\t\t\t\t\t\t</SemanticStep>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</StepGroup>\n\t\t\t\t\t\t</Grid.Column>\n\t\t\t\t\t\t<Grid.Column width={13}>{children?.[currentStep]}</Grid.Column>\n\t\t\t\t\t</Grid.Row>\n\t\t\t\t</Grid>\n\t\t\t</StepContext.Provider>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StepContext.Provider value={valueProps}>\n\t\t\t{props.warnOnReroute && <Prompt message={onNavigate} />}\n\t\t\t<StepGroup ordered size=\"mini\">\n\t\t\t\t{titles?.map((title, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SemanticStep\n\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\tcompleted={index < Object.keys(state).length}\n\t\t\t\t\t\t\tactive={currentStep === index}\n\t\t\t\t\t\t\tonClick={() => setCurrentStep(index)}\n\t\t\t\t\t\t\tdisabled={index > Object.keys(state).length}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SemanticStep.Content>\n\t\t\t\t\t\t\t\t<SemanticStep.Title>{title}</SemanticStep.Title>\n\t\t\t\t\t\t\t</SemanticStep.Content>\n\t\t\t\t\t\t</SemanticStep>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</StepGroup>\n\t\t\t{children?.[currentStep]}\n\t\t</StepContext.Provider>\n\t);\n}\n"],"names":["SemanticStep"],"mappings":"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"}

package/dist/esm/step/stepContext.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+const StepContext = createContext({
+  handleSubmit: () => {
+  },
+  state: {}
+});
+
+export { StepContext };
+//# sourceMappingURL=stepContext.js.map

package/dist/esm/step/stepContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepContext.js","sources":["../../../src/step/stepContext.ts"],"sourcesContent":["import {createContext} from 'react';\n\nexport const StepContext = createContext<{handleSubmit: (values: unknown, stepKey: string) => void; state: Record<string, any>}>({\n\thandleSubmit: () => {},\n\tstate: {},\n});\n"],"names":[],"mappings":";;AAEO,MAAM,cAAc,aAAsG,CAAA;AAAA,EAChI,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,OAAO,EAAC;AACT,CAAC;;;;"}

package/dist/esm/step/useStep.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { StepContext } from './stepContext.js';
+
+function useStep() {
+  const { state, handleSubmit } = useContext(StepContext);
+  return [state, handleSubmit];
+}
+
+export { useStep };
+//# sourceMappingURL=useStep.js.map

package/dist/esm/step/useStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStep.js","sources":["../../../src/step/useStep.ts"],"sourcesContent":["import {useContext} from 'react';\nimport {StepContext} from './stepContext';\n\nexport function useStep(): [any, (values: unknown, stepKey: string) => void] {\n\tconst {state, handleSubmit} = useContext(StepContext);\n\n\treturn [state, handleSubmit];\n}\n"],"names":[],"mappings":";;;AAG6E,SAAA,OAAA,GAAA;AAC5E,EAAA,MAAM,EAAC,KAAA,EAAO,YAAgB,EAAA,GAAA,UAAA,CAAW,WAAW,CAAA,CAAA;AAEpD,EAAO,OAAA,CAAC,OAAO,YAAY,CAAA,CAAA;AAC5B;;;;"}