@elliemae/ds-form 3.0.0-next.2 → 3.0.0-next.6

package/dist/esm/InputMask/addons/AutoCorrectedDatePipe.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+const formatOrder = ["yyyy", "yy", "mm", "dd", "HH", "MM", "SS"];
+const autoCorrectedDatePipe = (dateFormat = "mm dd yyyy", { minYear = 1, maxYear = 9999 } = {}) => {
+  const dateFormatArray = dateFormat.split(/[^dmyHMS]+/).sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));
+  return (conformedValue) => {
+    const indexesOfPipedChars = [];
+    const maxValue = {
+      dd: 31,
+      mm: 12,
+      yy: 99,
+      yyyy: maxYear,
+      HH: 23,
+      MM: 59,
+      SS: 59
+    };
+    const minValue = {
+      dd: 1,
+      mm: 1,
+      yy: 0,
+      yyyy: minYear,
+      HH: 0,
+      MM: 0,
+      SS: 0
+    };
+    const conformedValueArr = conformedValue.split("");
+    dateFormatArray.forEach((format) => {
+      const position = dateFormat.indexOf(format);
+      const maxFirstDigit = parseInt(maxValue[format].toString().substr(0, 1), 10);
+      if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
+        conformedValueArr[position + 1] = conformedValueArr[position];
+        conformedValueArr[position] = 0;
+        indexesOfPipedChars.push(position);
+      }
+    });
+    let month = 0;
+    const isInvalid = dateFormatArray.some((format) => {
+      const position = dateFormat.indexOf(format);
+      const { length } = format;
+      const textValue = conformedValue.substr(position, length).replace(/\D/g, "");
+      const value = parseInt(textValue, 10);
+      if (format === "mm") {
+        month = value || 0;
+      }
+      const maxValueForFormat = format === "dd" ? maxValueMonth[month] : maxValue[format];
+      if (format === "yyyy" && (minYear !== 1 || maxYear !== 9999)) {
+        const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
+        const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
+        return value < scopedMinValue || value > scopedMaxValue;
+      }
+      return value > maxValueForFormat || textValue.length === length && value < minValue[format];
+    });
+    return {
+      value: conformedValueArr.join(""),
+      valid: !isInvalid,
+      indexesOfPipedChars
+    };
+  };
+};
+export {
+  autoCorrectedDatePipe
+};
+//# sourceMappingURL=AutoCorrectedDatePipe.js.map

package/dist/esm/InputMask/addons/AutoCorrectedDatePipe.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/InputMask/addons/AutoCorrectedDatePipe.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\nconst formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS'];\nexport const autoCorrectedDatePipe = (\n  dateFormat = 'mm dd yyyy',\n  { minYear = 1, maxYear = 9999 } = {},\n) => {\n  const dateFormatArray = dateFormat\n    .split(/[^dmyHMS]+/)\n    .sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));\n  return (conformedValue) => {\n    const indexesOfPipedChars = [];\n    const maxValue = {\n      dd: 31,\n      mm: 12,\n      yy: 99,\n      yyyy: maxYear,\n      HH: 23,\n      MM: 59,\n      SS: 59,\n    };\n    const minValue = {\n      dd: 1,\n      mm: 1,\n      yy: 0,\n      yyyy: minYear,\n      HH: 0,\n      MM: 0,\n      SS: 0,\n    };\n    const conformedValueArr = conformedValue.split('');\n\n    // Check first digit\n    dateFormatArray.forEach((format) => {\n      const position = dateFormat.indexOf(format);\n      const maxFirstDigit = parseInt(\n        maxValue[format].toString().substr(0, 1),\n        10,\n      );\n\n      if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {\n        conformedValueArr[position + 1] = conformedValueArr[position];\n        conformedValueArr[position] = 0;\n        indexesOfPipedChars.push(position);\n      }\n    });\n\n    // Check for invalid date\n    let month = 0;\n    const isInvalid = dateFormatArray.some((format) => {\n      const position = dateFormat.indexOf(format);\n      const { length } = format;\n      const textValue = conformedValue\n        .substr(position, length)\n        .replace(/\\D/g, '');\n      const value = parseInt(textValue, 10);\n      if (format === 'mm') {\n        month = value || 0;\n      }\n      const maxValueForFormat =\n        format === 'dd' ? maxValueMonth[month] : maxValue[format];\n      if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {\n        const scopedMaxValue = parseInt(\n          maxValue[format].toString().substring(0, textValue.length),\n          10,\n        );\n        const scopedMinValue = parseInt(\n          minValue[format].toString().substring(0, textValue.length),\n          10,\n        );\n        return value < scopedMinValue || value > scopedMaxValue;\n      }\n      return (\n        value > maxValueForFormat ||\n        (textValue.length === length && value < minValue[format])\n      );\n    });\n\n    return {\n      value: conformedValueArr.join(''),\n      valid: !isInvalid,\n      indexesOfPipedChars,\n    };\n  };\n};\n"],
+  "mappings": "AAAA;ACAA,MAAM,gBAAgB,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AACvE,MAAM,cAAc,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,MAAM;AACpD,MAAM,wBAAwB,CACnC,aAAa,cACb,EAAE,UAAU,GAAG,UAAU,SAAS,OAC/B;AACH,QAAM,kBAAkB,WACrB,MAAM,cACN,KAAK,CAAC,GAAG,MAAM,YAAY,QAAQ,KAAK,YAAY,QAAQ;AAC/D,SAAO,CAAC,mBAAmB;AACzB,UAAM,sBAAsB;AAC5B,UAAM,WAAW;AAAA,MACf,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA;AAEN,UAAM,WAAW;AAAA,MACf,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA;AAEN,UAAM,oBAAoB,eAAe,MAAM;AAG/C,oBAAgB,QAAQ,CAAC,WAAW;AAClC,YAAM,WAAW,WAAW,QAAQ;AACpC,YAAM,gBAAgB,SACpB,SAAS,QAAQ,WAAW,OAAO,GAAG,IACtC;AAGF,UAAI,SAAS,kBAAkB,WAAW,MAAM,eAAe;AAC7D,0BAAkB,WAAW,KAAK,kBAAkB;AACpD,0BAAkB,YAAY;AAC9B,4BAAoB,KAAK;AAAA;AAAA;AAK7B,QAAI,QAAQ;AACZ,UAAM,YAAY,gBAAgB,KAAK,CAAC,WAAW;AACjD,YAAM,WAAW,WAAW,QAAQ;AACpC,YAAM,EAAE,WAAW;AACnB,YAAM,YAAY,eACf,OAAO,UAAU,QACjB,QAAQ,OAAO;AAClB,YAAM,QAAQ,SAAS,WAAW;AAClC,UAAI,WAAW,MAAM;AACnB,gBAAQ,SAAS;AAAA;AAEnB,YAAM,oBACJ,WAAW,OAAO,cAAc,SAAS,SAAS;AACpD,UAAI,WAAW,UAAW,aAAY,KAAK,YAAY,OAAO;AAC5D,cAAM,iBAAiB,SACrB,SAAS,QAAQ,WAAW,UAAU,GAAG,UAAU,SACnD;AAEF,cAAM,iBAAiB,SACrB,SAAS,QAAQ,WAAW,UAAU,GAAG,UAAU,SACnD;AAEF,eAAO,QAAQ,kBAAkB,QAAQ;AAAA;AAE3C,aACE,QAAQ,qBACP,UAAU,WAAW,UAAU,QAAQ,SAAS;AAAA;AAIrD,WAAO;AAAA,MACL,OAAO,kBAAkB,KAAK;AAAA,MAC9B,OAAO,CAAC;AAAA,MACR;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/InputMask/defaultProps.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { MASK_TYPES } from "./MaskTypes";
+const defaultProps = {
+  autoFocus: false,
+  style: {},
+  disabled: false,
+  className: "",
+  name: "",
+  maxLength: 255,
+  minLength: 0,
+  fluidWidth: false,
+  onKeyDown: () => null,
+  onClick: () => null,
+  onChange: () => null,
+  onFocus: () => null,
+  onBlur: () => null,
+  onPaste: () => null,
+  onKeyUp: () => null,
+  value: "",
+  hasError: false,
+  readOnly: false,
+  innerRef: null,
+  type: "text",
+  clearable: false,
+  leftComponent: null,
+  rightComponent: null,
+  mask: MASK_TYPES.DATE,
+  pipe: null,
+  useSubfix: ""
+};
+export {
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/dist/esm/InputMask/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputMask/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { MASK_TYPES } from './MaskTypes';\n\nexport const defaultProps = {\n  autoFocus: false,\n  style: {},\n  disabled: false,\n  className: '',\n  name: '',\n  maxLength: 255,\n  minLength: 0,\n  fluidWidth: false,\n  onKeyDown: () => null,\n  onClick: () => null,\n  onChange: () => null,\n  onFocus: () => null,\n  onBlur: () => null,\n  onPaste: () => null,\n  onKeyUp: () => null,\n  value: '',\n  hasError: false,\n  readOnly: false,\n  innerRef: null,\n  type: 'text',\n  clearable: false,\n  leftComponent: null,\n  rightComponent: null,\n  mask: MASK_TYPES.DATE,\n  pipe: null,\n  useSubfix: '',\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,UAAU,MAAM;AAAA,EAChB,SAAS,MAAM;AAAA,EACf,QAAQ,MAAM;AAAA,EACd,SAAS,MAAM;AAAA,EACf,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AAAA,EACX,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,MAAM,WAAW;AAAA,EACjB,MAAM;AAAA,EACN,WAAW;AAAA;",
+  "names": []
+}

package/dist/esm/InputMask/index.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./DSInputMask";
+//# sourceMappingURL=index.js.map

package/dist/esm/InputMask/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputMask/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSInputMask';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/InputMask/mask_types/DateInputMask.js

@@ -0,0 +1,250 @@
+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;
+};
+import * as React from "react";
+import React2, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { PropTypes } from "react-desc";
+import { DSTextBox } from "../../TextBox";
+import { setCaretPosition } from "../utils/setCaretPosition";
+const conformValue = (rawValue, cursorPos, lastkeycode) => {
+  const nextMaskedValue = rawValue.split("").filter((char) => char >= "0" && char <= "9").slice(0, 8);
+  let maskedPos = 0;
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (nextMaskedValue[maskedPos] === rawValue[i])
+      maskedPos += 1;
+  }
+  const charactersToAdd = [
+    ["/", 2],
+    ["/", 5]
+  ];
+  charactersToAdd.forEach(([chars, pos]) => {
+    if (nextMaskedValue.length > pos) {
+      nextMaskedValue.splice(pos, 0, chars);
+      if (maskedPos >= pos)
+        maskedPos += chars.length;
+    }
+  });
+  if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
+    charactersToAdd.forEach(([chars, pos]) => {
+      if (maskedPos === pos)
+        maskedPos += chars.length;
+    });
+  } else if (lastkeycode === 8 && maskedPos) {
+    charactersToAdd.forEach(([chars, pos]) => {
+      if (maskedPos === pos + 1)
+        maskedPos -= chars.length;
+    });
+  }
+  return { nextMaskedValue: nextMaskedValue.join(""), maskedPos };
+};
+const DateInputMask = (_a) => {
+  var _b = _a, {
+    focus,
+    setFocus,
+    setRawMask,
+    cursorPosition,
+    setCursorPosition,
+    lastkey,
+    setLastkey,
+    setRawValue,
+    style,
+    disabled,
+    className,
+    name,
+    maxLength,
+    minLength,
+    fluidWidth,
+    placeholder,
+    onKeyDown,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    onPaste,
+    onKeyUp,
+    hasError,
+    readOnly,
+    type,
+    innerRef,
+    clearable = false,
+    leftComponent,
+    rightComponent,
+    value
+  } = _b, rest = __objRest(_b, [
+    "focus",
+    "setFocus",
+    "setRawMask",
+    "cursorPosition",
+    "setCursorPosition",
+    "lastkey",
+    "setLastkey",
+    "setRawValue",
+    "style",
+    "disabled",
+    "className",
+    "name",
+    "maxLength",
+    "minLength",
+    "fluidWidth",
+    "placeholder",
+    "onKeyDown",
+    "onClick",
+    "onChange",
+    "onFocus",
+    "onBlur",
+    "onPaste",
+    "onKeyUp",
+    "hasError",
+    "readOnly",
+    "type",
+    "innerRef",
+    "clearable",
+    "leftComponent",
+    "rightComponent",
+    "value"
+  ]);
+  const inputRef = useRef();
+  const [maskedValue, setMaskedValue] = useState(value);
+  const conform = useCallback(({ rawValue, cursorPos, lastkeycode, shouldUpdateCursorPos = true }) => {
+    const { nextMaskedValue, maskedPos } = conformValue(rawValue, cursorPos, lastkeycode);
+    const event = {
+      target: {
+        value: nextMaskedValue,
+        originalValue: rawValue
+      }
+    };
+    if (onChange && nextMaskedValue !== maskedValue)
+      onChange(event);
+    setMaskedValue(nextMaskedValue);
+    setRawValue(nextMaskedValue);
+    if (shouldUpdateCursorPos)
+      setCursorPosition({ current: maskedPos });
+  }, [maskedValue, onChange]);
+  const handleOnChange = useCallback((e) => {
+    const { value: rawValue, selectionEnd } = e.target;
+    setRawMask(rawValue);
+    setRawValue(rawValue);
+    setCursorPosition({ current: selectionEnd });
+    setFocus(true);
+  }, [setRawMask, setRawValue, setCursorPosition, setFocus, lastkey.code]);
+  useLayoutEffect(() => {
+    if (focus)
+      setCaretPosition(inputRef.current, cursorPosition.current);
+  }, [focus, cursorPosition]);
+  useLayoutEffect(() => {
+    conform({
+      rawValue: value,
+      cursorPos: cursorPosition.current,
+      lastkeycode: lastkey.code,
+      shouldUpdateCursorPos: focus
+    });
+  }, [focus, value, cursorPosition.current]);
+  const handleKeyDown = useCallback((e) => {
+    e.stopPropagation();
+    setLastkey({ key: e.key, code: e.keyCode });
+    onKeyDown(e);
+  }, [onKeyDown]);
+  const handleBlur = useCallback((e) => {
+    setFocus(false);
+    onBlur(e);
+  }, [onBlur]);
+  return /* @__PURE__ */ React2.createElement(DSTextBox, __spreadProps(__spreadValues({}, rest), {
+    className,
+    clearable,
+    disabled,
+    fluidWidth,
+    hasError,
+    innerRef: (ref) => {
+      inputRef.current = ref;
+      if (innerRef)
+        innerRef(ref);
+    },
+    isActive: focus,
+    leftComponent,
+    maxLength,
+    minLength,
+    name,
+    onBlur: handleBlur,
+    onChange: handleOnChange,
+    onClick,
+    onFocus,
+    onKeyDown: handleKeyDown,
+    onKeyUp,
+    onPaste,
+    placeholder,
+    readOnly,
+    rightComponent,
+    style,
+    type,
+    value: maskedValue
+  }));
+};
+DateInputMask.propTypes = {
+  focus: PropTypes.bool,
+  setFocus: PropTypes.func,
+  setRawMask: PropTypes.func,
+  cursorPosition: PropTypes.shape({ current: PropTypes.number }),
+  setCursorPosition: PropTypes.func,
+  lastkey: PropTypes.shape({ code: PropTypes.number, key: PropTypes.string }),
+  setLastkey: PropTypes.func,
+  setRawValue: PropTypes.func,
+  style: PropTypes.object,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  name: PropTypes.string,
+  maxLength: PropTypes.number,
+  minLength: PropTypes.number,
+  fluidWidth: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  leftComponent: PropTypes.element,
+  rightComponent: PropTypes.element,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onPaste: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  hasError: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onClick: PropTypes.func,
+  clearable: PropTypes.bool,
+  type: PropTypes.string,
+  innerRef: PropTypes.any,
+  mask: PropTypes.any,
+  placeholderChar: PropTypes.string
+};
+var DateInputMask_default = DateInputMask;
+export {
+  DateInputMask,
+  DateInputMask_default as default
+};
+//# sourceMappingURL=DateInputMask.js.map

package/dist/esm/InputMask/mask_types/DateInputMask.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/InputMask/mask_types/DateInputMask.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { PropTypes } from 'react-desc';\nimport { DSTextBox } from '../../TextBox';\nimport { TCharsToAdd } from '../types';\nimport { setCaretPosition } from '../utils/setCaretPosition';\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastkeycode: number,\n) => {\n  const nextMaskedValue = rawValue\n    .split('')\n    .filter((char) => char >= '0' && char <= '9')\n    .slice(0, 8);\n\n  let maskedPos = 0;\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (nextMaskedValue[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n\n  // list of [string to add, position to add]\n  const charactersToAdd: TCharsToAdd = [\n    ['/', 2],\n    ['/', 5],\n  ];\n\n  charactersToAdd.forEach(([chars, pos]) => {\n    if (nextMaskedValue.length > pos) {\n      nextMaskedValue.splice(pos, 0, chars);\n      if (maskedPos >= pos) maskedPos += chars.length;\n    }\n  });\n\n  if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {\n    charactersToAdd.forEach(([chars, pos]) => {\n      if (maskedPos === pos) maskedPos += chars.length;\n    });\n  } else if (lastkeycode === 8 && maskedPos) {\n    charactersToAdd.forEach(([chars, pos]) => {\n      if (maskedPos === pos + 1) maskedPos -= chars.length;\n    });\n  }\n\n  return { nextMaskedValue: nextMaskedValue.join(''), maskedPos };\n};\n\nconst DateInputMask = ({\n  focus,\n  setFocus,\n  setRawMask,\n  cursorPosition,\n  setCursorPosition,\n  lastkey,\n  setLastkey,\n  setRawValue,\n  style,\n  disabled,\n  className,\n  name,\n  maxLength,\n  minLength,\n  fluidWidth,\n  placeholder,\n  onKeyDown,\n  onClick,\n  onChange,\n  onFocus,\n  onBlur,\n  onPaste,\n  onKeyUp,\n  hasError,\n  readOnly,\n  type,\n  innerRef,\n  clearable = false,\n  leftComponent,\n  rightComponent,\n  value,\n  ...rest\n}) => {\n  const inputRef = useRef();\n  const [maskedValue, setMaskedValue] = useState(value);\n\n  const conform = useCallback(\n    ({ rawValue, cursorPos, lastkeycode, shouldUpdateCursorPos = true }) => {\n      const { nextMaskedValue, maskedPos } = conformValue(\n        rawValue,\n        cursorPos,\n        lastkeycode,\n      );\n      const event = {\n        target: {\n          value: nextMaskedValue,\n          originalValue: rawValue,\n        },\n      };\n      if (onChange && nextMaskedValue !== maskedValue) onChange(event);\n\n      setMaskedValue(nextMaskedValue);\n      setRawValue(nextMaskedValue);\n\n      if (shouldUpdateCursorPos) setCursorPosition({ current: maskedPos });\n    },\n    [maskedValue, onChange],\n  );\n\n  const handleOnChange = useCallback(\n    (e) => {\n      const { value: rawValue, selectionEnd } = e.target;\n      setRawMask(rawValue);\n      setRawValue(rawValue);\n      setCursorPosition({ current: selectionEnd });\n      setFocus(true);\n    },\n    [setRawMask, setRawValue, setCursorPosition, setFocus, lastkey.code],\n  );\n\n  useLayoutEffect(() => {\n    if (focus) setCaretPosition(inputRef.current, cursorPosition.current);\n  }, [focus, cursorPosition]);\n\n  useLayoutEffect(() => {\n    // if the value changes, then re-conform the mask\n    conform({\n      rawValue: value,\n      cursorPos: cursorPosition.current,\n      lastkeycode: lastkey.code,\n      shouldUpdateCursorPos: focus,\n    });\n  }, [focus, value, cursorPosition.current]);\n\n  const handleKeyDown = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setLastkey({ key: e.key, code: e.keyCode });\n      onKeyDown(e);\n    },\n    [onKeyDown],\n  );\n\n  const handleBlur = useCallback(\n    (e) => {\n      setFocus(false);\n      onBlur(e);\n    },\n    [onBlur],\n  );\n\n  return (\n    <DSTextBox\n      {...rest}\n      className={className}\n      clearable={clearable}\n      disabled={disabled}\n      fluidWidth={fluidWidth}\n      hasError={hasError}\n      innerRef={(ref) => {\n        inputRef.current = ref;\n        if (innerRef) innerRef(ref);\n      }}\n      isActive={focus}\n      leftComponent={leftComponent}\n      maxLength={maxLength}\n      minLength={minLength}\n      name={name}\n      onBlur={handleBlur}\n      onChange={handleOnChange}\n      onClick={onClick}\n      onFocus={onFocus}\n      onKeyDown={handleKeyDown}\n      onKeyUp={onKeyUp}\n      onPaste={onPaste}\n      placeholder={placeholder}\n      readOnly={readOnly}\n      rightComponent={rightComponent}\n      style={style}\n      type={type}\n      value={maskedValue}\n    />\n  );\n};\n\nDateInputMask.propTypes = {\n  focus: PropTypes.bool,\n  setFocus: PropTypes.func,\n  setRawMask: PropTypes.func,\n  cursorPosition: PropTypes.shape({ current: PropTypes.number }),\n  setCursorPosition: PropTypes.func,\n  lastkey: PropTypes.shape({ code: PropTypes.number, key: PropTypes.string }),\n  setLastkey: PropTypes.func,\n  setRawValue: PropTypes.func,\n  style: PropTypes.object,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  name: PropTypes.string,\n  maxLength: PropTypes.number,\n  minLength: PropTypes.number,\n  fluidWidth: PropTypes.bool,\n  placeholder: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  leftComponent: PropTypes.element,\n  rightComponent: PropTypes.element,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  onPaste: PropTypes.func,\n  onKeyUp: PropTypes.func,\n  hasError: PropTypes.bool,\n  readOnly: PropTypes.bool,\n  onClick: PropTypes.func,\n  clearable: PropTypes.bool,\n  type: PropTypes.string,\n  innerRef: PropTypes.any,\n  mask: PropTypes.any,\n  placeholderChar: PropTypes.string,\n};\n\nexport { DateInputMask };\nexport default DateInputMask;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/InputMask/mask_types/DateTimeInputMask.js

@@ -0,0 +1,256 @@
+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;
+};
+import * as React from "react";
+import React2, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { PropTypes } from "react-desc";
+import { DSTextBox } from "../../TextBox";
+import { setCaretPosition } from "../utils/setCaretPosition";
+const conformValue = (rawValue, cursorPos, lastkeycode) => {
+  const nextMaskedValue = rawValue.split("").filter((char) => char >= "0" && char <= "9").slice(0, 12);
+  while (nextMaskedValue.length > 8 && !nextMaskedValue[8].match(/[0-2]/))
+    nextMaskedValue.splice(8, 1);
+  while (nextMaskedValue.length > 10 && !nextMaskedValue[10].match(/[0-5]/))
+    nextMaskedValue.splice(10, 1);
+  let maskedPos = 0;
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (nextMaskedValue[maskedPos] === rawValue[i])
+      maskedPos += 1;
+  }
+  const charactersToAdd = [
+    ["/", 2],
+    ["/", 5],
+    [" ", 10],
+    [":", 13]
+  ];
+  charactersToAdd.forEach(([chars, pos]) => {
+    if (nextMaskedValue.length > pos) {
+      nextMaskedValue.splice(pos, 0, chars);
+      if (maskedPos >= pos)
+        maskedPos += chars.length;
+    }
+  });
+  if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
+    charactersToAdd.forEach(([chars, pos]) => {
+      if (maskedPos === pos)
+        maskedPos += chars.length;
+    });
+  } else if (lastkeycode === 8 && maskedPos) {
+    charactersToAdd.forEach(([chars, pos]) => {
+      if (maskedPos === pos + 1)
+        maskedPos -= chars.length;
+    });
+  }
+  return { nextMaskedValue: nextMaskedValue.join(""), maskedPos };
+};
+const DateTimeInputMask = (_a) => {
+  var _b = _a, {
+    focus,
+    setFocus,
+    setRawMask,
+    cursorPosition,
+    setCursorPosition,
+    lastkey,
+    setLastkey,
+    setRawValue,
+    style,
+    disabled,
+    className,
+    name,
+    maxLength,
+    minLength,
+    fluidWidth,
+    placeholder,
+    onKeyDown,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    onPaste,
+    onKeyUp,
+    hasError,
+    readOnly,
+    type,
+    innerRef,
+    clearable = false,
+    leftComponent,
+    rightComponent,
+    value
+  } = _b, rest = __objRest(_b, [
+    "focus",
+    "setFocus",
+    "setRawMask",
+    "cursorPosition",
+    "setCursorPosition",
+    "lastkey",
+    "setLastkey",
+    "setRawValue",
+    "style",
+    "disabled",
+    "className",
+    "name",
+    "maxLength",
+    "minLength",
+    "fluidWidth",
+    "placeholder",
+    "onKeyDown",
+    "onClick",
+    "onChange",
+    "onFocus",
+    "onBlur",
+    "onPaste",
+    "onKeyUp",
+    "hasError",
+    "readOnly",
+    "type",
+    "innerRef",
+    "clearable",
+    "leftComponent",
+    "rightComponent",
+    "value"
+  ]);
+  const inputRef = useRef();
+  const [maskedValue, setMaskedValue] = useState(value);
+  const conform = useCallback(({ rawValue, cursorPos, lastkeycode, shouldUpdateCursorPos = true }) => {
+    const { nextMaskedValue, maskedPos } = conformValue(rawValue, cursorPos, lastkeycode);
+    const event = {
+      target: {
+        value: nextMaskedValue,
+        originalValue: rawValue
+      }
+    };
+    if (onChange && nextMaskedValue !== maskedValue)
+      onChange(event);
+    setMaskedValue(nextMaskedValue);
+    setRawValue(nextMaskedValue);
+    if (shouldUpdateCursorPos)
+      setCursorPosition({ current: maskedPos });
+  }, [maskedValue, onChange]);
+  const handleOnChange = useCallback((e) => {
+    const { value: rawValue, selectionEnd } = e.target;
+    setRawMask(rawValue);
+    setRawValue(rawValue);
+    setCursorPosition({ current: selectionEnd });
+    setFocus(true);
+  }, [setRawMask, setRawValue, setCursorPosition, setFocus, lastkey.code]);
+  useLayoutEffect(() => {
+    if (focus)
+      setCaretPosition(inputRef.current, cursorPosition.current);
+  }, [focus, cursorPosition]);
+  useLayoutEffect(() => {
+    conform({
+      rawValue: value,
+      cursorPos: cursorPosition.current,
+      lastkeycode: lastkey.code,
+      shouldUpdateCursorPos: focus
+    });
+  }, [focus, value, cursorPosition.current]);
+  const handleKeyDown = useCallback((e) => {
+    e.stopPropagation();
+    setLastkey({ key: e.key, code: e.keyCode });
+    onKeyDown(e);
+  }, [onKeyDown]);
+  const handleBlur = useCallback((e) => {
+    setFocus(false);
+    onBlur(e);
+  }, [onBlur]);
+  return /* @__PURE__ */ React2.createElement(DSTextBox, __spreadProps(__spreadValues({}, rest), {
+    className,
+    clearable,
+    disabled,
+    fluidWidth,
+    hasError,
+    innerRef: (ref) => {
+      inputRef.current = ref;
+      if (innerRef)
+        innerRef(ref);
+    },
+    isActive: focus,
+    leftComponent,
+    maxLength,
+    minLength,
+    name,
+    onBlur: handleBlur,
+    onChange: handleOnChange,
+    onClick,
+    onFocus,
+    onKeyDown: handleKeyDown,
+    onKeyUp,
+    onPaste,
+    placeholder,
+    readOnly,
+    rightComponent,
+    style,
+    type,
+    value: maskedValue
+  }));
+};
+DateTimeInputMask.propTypes = {
+  focus: PropTypes.bool,
+  setFocus: PropTypes.func,
+  setRawMask: PropTypes.func,
+  cursorPosition: PropTypes.shape({ current: PropTypes.number }),
+  setCursorPosition: PropTypes.func,
+  lastkey: PropTypes.shape({ code: PropTypes.number, key: PropTypes.string }),
+  setLastkey: PropTypes.func,
+  setRawValue: PropTypes.func,
+  style: PropTypes.object,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  name: PropTypes.string,
+  maxLength: PropTypes.number,
+  minLength: PropTypes.number,
+  fluidWidth: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  leftComponent: PropTypes.element,
+  rightComponent: PropTypes.element,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onPaste: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  hasError: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onClick: PropTypes.func,
+  clearable: PropTypes.bool,
+  type: PropTypes.string,
+  innerRef: PropTypes.any,
+  mask: PropTypes.any,
+  placeholderChar: PropTypes.string
+};
+var DateTimeInputMask_default = DateTimeInputMask;
+export {
+  DateTimeInputMask,
+  DateTimeInputMask_default as default
+};
+//# sourceMappingURL=DateTimeInputMask.js.map