@thx/controls 16.0.0-alpha.0 → 16.0.0-alpha.23

package/dist/esm/money/MoneyCurrencyInput/MoneyCurrencyInput.js

@@ -0,0 +1,80 @@
+import { toMoney } from '@thx/money';
+import debug from 'debug';
+import Money from 'js-money';
+import { useCallback } from 'react';
+import { Input, Label, Dropdown } from 'semantic-ui-react';
+import { useMoneyInput } from '../useMoneyInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const d = debug("thx.controls.money.MoneyCurrencyInput");
+function MoneyCurrencyInput(props) {
+  const _a = props, { name, onBlur, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber, currencies, locked } = _a, rest = __objRest(_a, ["name", "onBlur", "prefix", "defaultCurrency", "onChange", "showPrefix", "value", "wholeNumber", "currencies", "locked"]);
+  const options = currencies || [
+    { key: "CAD", text: "CAD", value: "CAD" },
+    { key: "USD", text: "USD", value: "USD" }
+  ];
+  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 });
+  const handleDropdownChange = useCallback((e, v) => {
+    const newCurrencyCode = v.value;
+    const newMoney = new Money((value == null ? void 0 : value.amount) || 0, newCurrencyCode);
+    d("Change", value, newCurrencyCode, newMoney);
+    onChange && onChange(newMoney);
+  }, [onChange, value]);
+  const currencyCode = (value == null ? void 0 : value.currency) || (defaultCurrency == null ? void 0 : defaultCurrency.code) || "CAD";
+  d("Render", value, currencyCode);
+  return /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({}, rest), {
+    labelPosition: "right"
+  }), /* @__PURE__ */ React.createElement("input", {
+    name,
+    ref: inputElement,
+    onBlur,
+    readOnly: locked
+  }), /* @__PURE__ */ React.createElement(Label, {
+    basic: true
+  }, /* @__PURE__ */ React.createElement(Dropdown, {
+    disabled: locked,
+    options,
+    value: currencyCode,
+    onChange: handleDropdownChange
+  })));
+}
+
+export { MoneyCurrencyInput };

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

@@ -0,0 +1,56 @@
+import { toMoney } from '@thx/money';
+import debug from 'debug';
+import Money from 'js-money';
+import { useCallback } from 'react';
+import { Input } from 'semantic-ui-react';
+import { useMoneyInput } from '../useMoneyInput.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.money.MoneyInput");
+function MoneyInput(props) {
+  const _a = props, { name, onBlur, locked, prefix, defaultCurrency, onChange, showPrefix, value, wholeNumber } = _a, rest = __objRest(_a, ["name", "onBlur", "locked", "prefix", "defaultCurrency", "onChange", "showPrefix", "value", "wholeNumber"]);
+  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, __spreadValues({}, rest), /* @__PURE__ */ React.createElement("input", {
+    name,
+    ref: inputElement,
+    onBlur,
+    readOnly: locked
+  }));
+}
+
+export { MoneyInput };

package/dist/esm/money/useMoneyInput.js

@@ -0,0 +1,76 @@
+import { toMoney } from '@thx/money';
+import debug from 'debug';
+import Inputmask from 'inputmask';
+import Money from 'js-money';
+import { useRef, useEffect, useCallback } from 'react';
+
+const d = debug("thx.controls.money.useMoneyInput");
+function useMoneyInput(props) {
+  const { value, onChange, onSet, showPrefix, prefix, wholeNumber } = props;
+  const inputElement = useRef(null);
+  const maskInstance = useRef(null);
+  const currencyCode = (value == null ? void 0 : value.currency) || "CAD";
+  useEffect(() => {
+    if (!inputElement.current)
+      throw new Error("Could not get input element");
+    d("Creating input mask instance");
+    maskInstance.current = new Inputmask({
+      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() {
+        var _a, _b;
+        if (onChange) {
+          if ((_a = inputElement.current) == null ? void 0 : _a.value) {
+            onChange(toMoney((_b = inputElement.current) == null ? void 0 : _b.value, currencyCode));
+          } else {
+            onChange();
+          }
+        }
+      },
+      oncleared() {
+        if (onChange)
+          onChange();
+      },
+      onincomplete() {
+        var _a;
+        if (onChange)
+          onChange(toMoney((_a = inputElement.current) == null ? void 0 : _a.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(() => {
+    var _a;
+    const whatCurrentlyIsDisplayed = ((_a = inputElement.current) == null ? void 0 : _a.value) || "";
+    const whatWeAreSetting = value ? value.toString() : "";
+    if (whatCurrentlyIsDisplayed !== whatWeAreSetting) {
+      setVal(value);
+    }
+  }, [setVal, value]);
+  return [inputElement, setVal];
+}
+
+export { useMoneyInput };

package/dist/esm/step/FormStep.js

@@ -0,0 +1,16 @@
+import debug from 'debug';
+import { cloneElement, Children } from 'react';
+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 };

package/dist/esm/step/Step.js

@@ -0,0 +1,8 @@
+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 };

package/dist/esm/step/StepProvider.js

@@ -0,0 +1,114 @@
+import debug from 'debug';
+import { useState, Children, cloneElement, useMemo } from 'react';
+import { Prompt } from 'react-router-dom';
+import { Grid, Step as Step$1 } from 'semantic-ui-react';
+import { FormStep } from './FormStep.js';
+import { Step } from './Step.js';
+import { StepContext } from './stepContext.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 == null ? void 0 : props.children, (child, index) => {
+    var _a, _b;
+    if (!child)
+      return;
+    if ((child == null ? void 0 : child.type) !== Step && (child == null ? void 0 : child.type) !== FormStep) {
+      throw new Error(`Can not render '${child == null ? void 0 : 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(((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.title) || "");
+        children.push(cloneElement(child, { step: index, key: (child == null ? void 0 : child.key) || index.toString() }));
+      }
+    } else {
+      titles.push(((_b = child == null ? void 0 : child.props) == null ? void 0 : _b.title) || "");
+      children.push(cloneElement(child, { step: index, key: (child == null ? void 0 : 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 == null ? void 0 : children.length)) {
+          setState(__spreadProps(__spreadValues({}, state), { [stepKey]: values }));
+          setIsSubmitting(true);
+          props.onSubmit(__spreadProps(__spreadValues({}, state), { [stepKey]: values }));
+        } else {
+          setState(__spreadProps(__spreadValues({}, state), { [stepKey]: values }));
+          setCurrentStep(currentStep + 1);
+        }
+      }
+    };
+  }, [children == null ? void 0 : 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(Step$1.Group, {
+      ordered: true,
+      size: "mini",
+      vertical: true,
+      widths: 1
+    }, titles == null ? void 0 : 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 == null ? void 0 : children[currentStep]))));
+  }
+  return /* @__PURE__ */ React.createElement(StepContext.Provider, {
+    value: valueProps
+  }, props.warnOnReroute && /* @__PURE__ */ React.createElement(Prompt, {
+    message: onNavigate
+  }), /* @__PURE__ */ React.createElement(Step$1.Group, {
+    ordered: true,
+    size: "mini"
+  }, titles == null ? void 0 : 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 == null ? void 0 : children[currentStep]);
+}
+
+export { StepProvider };

package/dist/esm/step/stepContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const StepContext = createContext({
+  handleSubmit: () => {
+  },
+  state: {}
+});
+
+export { StepContext };

package/dist/esm/step/useStep.js

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

package/dist/{index.d.ts → types/index.d.ts}

@@ -27,8 +27,9 @@ export { CreditCardInput } from './inputs/CreditCardInput';
 export type { CreditCardInputProps } from './inputs/CreditCardInput';
 export { SinInput } from './inputs/SinInput';
 export type { SinInputProps } from './inputs/SinInput';
-export { addRowOnTab, MoneyEditCell, StringEditCell, MoneySumFooter, MoneyCell, TableInput, HoverCell, DropdownCell } from './inputs/TableInput';
+export { TableInput, MoneyCell, MoneyEditCell, MoneySumFooter, StringEditCell, DropdownCell, HoverCell, addRowOnTab } from './inputs/TableInput';
 export type { AddRowOnTabIf } from './inputs/TableInput';
+export { useMoneyInput } from './money/useMoneyInput';
 export { MoneyInput } from './money/MoneyInput';
 export type { MoneyInputProps } from './money/MoneyInput';
 export { MoneyCurrencyInput } from './money/MoneyCurrencyInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thx/controls",
-  "version": "16.0.0-alpha.0+28062f1",
+  "version": "16.0.0-alpha.23+c18f3c2",
   "description": "A collection of components designed with SemanticUI.",
   "bugs": {
     "url": "https://github.com/thr-consulting/thr-addons/issues"
@@ -11,35 +11,27 @@
   },
   "license": "MIT",
   "author": "Mike Kornelson <darkadept@durbn.net>",
-  "main": "index.js",
-  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "files": [
-    "dist",
-    "index.js"
+    "dist"
   ],
   "scripts": {
-    "build": "thx build",
-    "build-storybook": "build-storybook",
-    "build:dev": "thx build:dev",
-    "build:prod": "thx build:prod",
+    "build": "thx build.roll",
     "clean": "thx clean",
-    "deps": "thx -p *.stories.tsx,*.story.tsx -i style-loader,css-loader deps",
+    "deps": "thx -p *.stories.tsx,*.story.tsx,*.cjs deps",
     "lint": "thx lint",
-    "lint:fix": "thx lint:fix",
+    "lint.fix": "thx lint.fix",
     "sort": "thx sort",
-    "storybook": "start-storybook -p 8000 --ci",
     "ts": "thx ts"
   },
-  "eslintConfig": {
-    "parserOptions": {
-      "project": "./tsconfig-eslint.json"
-    }
-  },
   "dependencies": {
     "@js-joda/core": "^5.1.0",
-    "@thx/date": "^16.0.0-alpha.0+28062f1",
-    "@thx/money": "^15.1.1",
-    "@thx/yup-types": "^16.0.0-alpha.0+28062f1",
+    "@thx/date": "^16.0.0-alpha.23+c18f3c2",
+    "@thx/money": "^16.0.0-alpha.23+c18f3c2",
+    "@thx/yup-types": "^16.0.0-alpha.23+c18f3c2",
     "@types/inputmask": "^5.0.1",
     "@types/react-datepicker": "^4.1.7",
     "credit-card-type": "^9.1.0",
@@ -57,10 +49,6 @@
     "social-insurance-number": "^0.2.2",
     "use-deep-compare-effect": "1.4.0"
   },
-  "devDependencies": {
-    "css-loader": "^6.3.0",
-    "style-loader": "^3.3.0"
-  },
   "peerDependencies": {
     "react": "17.x",
     "react-dom": "17.x",
@@ -68,10 +56,21 @@
     "semantic-ui-react": "2.x"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "28062f135e64dedad0512e35369ed19b075cbf8b"
+  "Xscripts": {
+    "build-storybook": "build-storybook",
+    "build:dev": "thx build:dev",
+    "build:prod": "thx build:prod",
+    "deps": "thx -p *.stories.tsx,*.story.tsx -i style-loader,css-loader deps",
+    "storybook": "start-storybook -p 8000 --ci"
+  },
+  "gitHead": "c18f3c2bfb75b4d1331bc27e8bc67dce0a87f36a",
+  "xdevDependencies": {
+    "css-loader": "^6.6.0",
+    "style-loader": "^3.3.1"
+  }
 }