@elliemae/ds-controlled-form 2.4.1-rc.5 → 2.4.1-rc.9

package/cjs/mask-hook/hooks/useRegExpMask.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
+var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var flatStringArray = require('../utils/flatStringArray.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const isRegExp = item => typeof item === 'object';
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
+  const specialChars = [];
+  const flatRegExp = flatStringArray.flatStringArray(regExp);
+  const rawValueArray = rawValue.split('');
+  let offSet = 0;
+  let charsFound = 0;
+  let specialCharsLeft = '';
+  let fullRegExpMatched = false;
+  const maskedValue = [];
+
+  for (let i = 0; i < flatRegExp.length; i += 1) {
+    if (isRegExp(flatRegExp[i])) {
+      specialCharsLeft = '';
+      fullRegExpMatched = false;
+
+      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
+        var _rawValueArray$j;
+
+        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+
+        if (match) {
+          maskedValue.push(match[0]);
+          charsFound += 1;
+          fullRegExpMatched = true;
+          break;
+        } else {
+          offSet += 1;
+        }
+      }
+
+      if (filledMask && !fullRegExpMatched) {
+        maskedValue.push('_');
+      }
+    } else {
+      specialChars.push([flatRegExp[i], i]);
+      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;
+      specialCharsLeft += flatRegExp[i];
+    }
+  }
+
+  if (!fullRegExpMatched) specialCharsLeft = '';
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters.addSpecialCharacters(maskedValue, specialChars, maskedPos, lastKeyCode);
+  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];
+};
+
+const useRegExpMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskRegExpHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskRegExpHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    regExp,
+    filledMask
+  } = propsWithDefault;
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = React.useState(0);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, regExp, filledMask);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  const onBlur = React.useCallback(e => {
+    if (filledMask) {
+      const maskedValue = e.target.value.split('');
+      const flatRegExp = flatStringArray.flatStringArray(regExp);
+      const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');
+      if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));
+    }
+
+    if (userOnBlur) userOnBlur(e);
+  }, [valueSetter, userOnBlur]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseRegExpMaskWithSchema = dsPropsHelpers.describe(useRegExpMask);
+UseRegExpMaskWithSchema.propTypes = reactDescPropTypes.DSMaskRegExpHookPropsTypes;
+
+exports.UseRegExpMaskWithSchema = UseRegExpMaskWithSchema;
+exports.isRegExp = isRegExp;
+exports.useRegExpMask = useRegExpMask;

package/cjs/mask-hook/hooks/useSSNMask.js

@@ -12,6 +12,8 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 const ssnSpecialChars = [['-', 3], ['-', 6]];

package/cjs/mask-hook/hooks/useZipCodeMask.js

@@ -12,6 +12,8 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 const zipCodeSpecialChars = [['-', 5]];

package/cjs/mask-hook/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var usePhoneMask = require('./hooks/usePhoneMask.js');
 var useNumberMask = require('./hooks/useNumberMask.js');
 var useSSNMask = require('./hooks/useSSNMask.js');
+var useRegExpMask = require('./hooks/useRegExpMask.js');
 var useZipCodeMask = require('./hooks/useZipCodeMask.js');
 
 
@@ -18,6 +19,9 @@ exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
+exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
+exports.isRegExp = useRegExpMask.isRegExp;
+exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
 exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

package/cjs/mask-hook/react-desc-prop-types.js

@@ -25,6 +25,9 @@ const DSMaskHookDefaultProps = {
 const DSMaskPhoneHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   isInternational: false
 });
+const DSMaskRegExpHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  filledMask: false
+});
 const DSMaskNumberHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   suffix: '',
   prefix: '',
@@ -38,6 +41,10 @@ const DSMaskHookPropsTypes = {
   onChange: dsPropsHelpers.PropTypes.func.description('Callback for onChange'),
   onKeyDown: dsPropsHelpers.PropTypes.func.description('Callback for onKeyDown')
 };
+const DSMaskRegExpHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  regExp: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.instanceOf(RegExp)])).description('Array with regexp or special chars per character').isRequired,
+  filledMask: dsPropsHelpers.PropTypes.bool.description('Show blank chars positions').defaultValue(false)
+});
 const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
   isInternational: dsPropsHelpers.PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
 });
@@ -56,3 +63,5 @@ exports.DSMaskNumberHookDefaultProps = DSMaskNumberHookDefaultProps;
 exports.DSMaskNumberHookPropsTypes = DSMaskNumberHookPropsTypes;
 exports.DSMaskPhoneHookDefaultProps = DSMaskPhoneHookDefaultProps;
 exports.DSMaskPhoneHookPropsTypes = DSMaskPhoneHookPropsTypes;
+exports.DSMaskRegExpHookDefaultProps = DSMaskRegExpHookDefaultProps;
+exports.DSMaskRegExpHookPropsTypes = DSMaskRegExpHookPropsTypes;

package/cjs/mask-hook/utils/addSpecialCharacters.js

@@ -38,10 +38,9 @@ const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, masked
     });
   } else if (lastKeyCode === 'Backspace' && finalMaskedPos) {
     // If erasing, move the cursor back if we are in a special chars area
-    specialCharsDescr.forEach(_ref3 => {
-      let [chars, pos] = _ref3;
-      if (pos + 1 <= finalMaskedPos && finalMaskedPos <= pos + chars.length) finalMaskedPos = pos;
-    });
+    for (let i = specialCharsDescr.length - 1; i >= 0; i -= 1) {
+      if (specialCharsDescr[i][1] + 1 <= finalMaskedPos && finalMaskedPos <= specialCharsDescr[i][1] + specialCharsDescr[i][0].length) [, finalMaskedPos] = specialCharsDescr[i];
+    }
   }
 
   return [finalMask.join(''), finalMaskedPos];

package/cjs/mask-hook/utils/flatStringArray.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+
+const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
+  if (typeof curr === 'string') {
+    return [...acc, ...curr.split('')];
+  }
+
+  return [...acc, curr];
+}, []);
+
+exports.flatStringArray = flatStringArray;

package/cjs/mask-hook/utils/index.js

@@ -6,6 +6,7 @@ var addSpecialCharacters = require('./addSpecialCharacters.js');
 var getPartialMaskedPos = require('./getPartialMaskedPos.js');
 var setCursorPosition = require('./setCursorPosition.js');
 var sharedFilters = require('./sharedFilters.js');
+var flatStringArray = require('./flatStringArray.js');
 
 
 
@@ -13,3 +14,4 @@ exports.addSpecialCharacters = addSpecialCharacters.addSpecialCharacters;
 exports.getPartialMaskedPos = getPartialMaskedPos.getPartialMaskedPos;
 exports.setCursorPosition = setCursorPosition.setCursorPosition;
 exports.filterNumbersOnly = sharedFilters.filterNumbersOnly;
+exports.flatStringArray = flatStringArray.flatStringArray;

package/esm/date-time-picker/ControlledDateTimePickerCTX.js

@@ -1,120 +1,8 @@
-import { createContext, createRef } from 'react';
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes.js';
+import { createContext } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
-const defaultReturnFalse = () => false; // const mockedStringStateSetter: React.Dispatch<React.SetStateAction<string>> = noop;
-
-
-const mockedSetLatestInteractionRegion = noop;
-const defaultProps = {
-  // changing default type requires changing default booleans (hideDate, withAnyInputs, etc...) in the context too
-  type: CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL,
-  dateTime: '',
-  date: '',
-  time: '',
-  onDateChange: noop,
-  onMonthChange: noop,
-  onDayChange: noop,
-  onYearChange: noop,
-  onTimeChange: noop,
-  onHourChange: noop,
-  onMinuteChange: noop,
-  // onSecondsChange: noop,
-  onMeridiemChange: noop,
-  onDateTimeChange: noop,
-  onPickerOpen: noop,
-  onPickerClose: noop,
-  getIsDisabledDay: defaultReturnFalse,
-  getIsOutOfRangeDay: defaultReturnFalse,
-  getIsStartRangeDay: defaultReturnFalse,
-  getIsDayInRange: defaultReturnFalse,
-  getIsEndRangeDay: defaultReturnFalse,
-  getIsDisabledTime: defaultReturnFalse,
-  emptyPickerStartingMonth: undefined,
-  onCalendarOpenFocusedDay: undefined,
-  minutesInterval: 1,
-  isClearable: false,
-  disabled: false,
-  hasError: false,
-  autoFocus: false,
-  preventCloseOnSelection: false,
-  pickerFooterMsg: undefined
-};
-const defaultContext = {
-  props: defaultProps,
-  monthInputRef: /*#__PURE__*/createRef(),
-  dayInputRef: /*#__PURE__*/createRef(),
-  yearInputRef: /*#__PURE__*/createRef(),
-  hourInputRef: /*#__PURE__*/createRef(),
-  minutesInputRef: /*#__PURE__*/createRef(),
-  // secondsInputRef: createRef<HTMLInputElement>(),
-  meridiemInputRef: /*#__PURE__*/createRef(),
-  clearButtonRef: /*#__PURE__*/createRef(),
-  pickerButtonRef: /*#__PURE__*/createRef(),
-  prevYearBtnRef: /*#__PURE__*/createRef(),
-  prevMonthBtnRef: /*#__PURE__*/createRef(),
-  nextMonthBtnRef: /*#__PURE__*/createRef(),
-  nextYearBtnRef: /*#__PURE__*/createRef(),
-  calendarDaysWrapperRef: /*#__PURE__*/createRef(),
-  prevHourBtnRef: /*#__PURE__*/createRef(),
-  currHourBtnRef: /*#__PURE__*/createRef(),
-  nextHourBtnRef: /*#__PURE__*/createRef(),
-  prevMinutesBtnRef: /*#__PURE__*/createRef(),
-  currMinutesBtnRef: /*#__PURE__*/createRef(),
-  nextMinutesBtnRef: /*#__PURE__*/createRef(),
-  prevMeridiemBtnRef: /*#__PURE__*/createRef(),
-  currMeridiemBtnRef: /*#__PURE__*/createRef(),
-  nextMeridiemBtnRef: /*#__PURE__*/createRef(),
-  firstSegmentRef: /*#__PURE__*/createRef(),
-  lastSegmentRef: /*#__PURE__*/createRef(),
-  ariaCurrentValueForInputs: '',
-  dateStringFromProps: '',
-  tempDateString: '__/__/____',
-  // setDateString: mockedStringStateSetter,
-  tempTimeString: '__:__:__ __',
-  // setTimeString: mockedStringStateSetter,
-  handleChangeComposedDateTimeString: noop,
-  handleChangeComposedDateString: noop,
-  handleChangeComposedTimeString: noop,
-  handleChangeMonth: noop,
-  handleChangeDay: noop,
-  handleChangeYear: noop,
-  handleChangeHours: noop,
-  handleChangeMinutes: noop,
-  handleChangeMeridiem: noop,
-  handleClearAll: noop,
-  hideDate: false,
-  hideTime: false,
-  hideDateTimePicker: false,
-  hideDatePicker: true,
-  hideTimePicker: true,
-  withAnyInputs: true,
-  withAnyPicker: true,
-  withClearBtn: false,
-  withAnyRightController: true,
-  isDateSelector: false,
-  isTimeSelector: false,
-  isDateTimeSelector: true,
-  isControllerOnly: false,
-  isWithTimeWheelToo: true,
-  isWithCalendarToo: true,
-  isWithDateInputs: true,
-  isWithDateInputsOnly: false,
-  isWithTimeInputs: true,
-  isWithTimeInputsOnly: false,
-  autoFocusMonthInput: false,
-  autoFocusHourInput: false,
-  autoFocusPrevMonthArrow: false,
-  autoFocusHourTimeWheel: false,
-  shouldPreserveClearableSpace: false,
-  latestInteractionRegion: '',
-  setLatestInteractionRegion: mockedSetLatestInteractionRegion,
-  onGlobalKeyDown: noop
-};
+const defaultContext = {};
 /** Context for cross component communication */
 
 const ControlledDateTimePickerContext = /*#__PURE__*/createContext(defaultContext);
 
-export { ControlledDateTimePickerContext, ControlledDateTimePickerContext as default, defaultProps };
+export { ControlledDateTimePickerContext, ControlledDateTimePickerContext as default };

package/esm/date-time-picker/ControlledDateTimePickerDatatestid.js

@@ -20,9 +20,7 @@ const ControlledDateTimePickerDatatestid = {
     DAY: 'ds-controlled-date-time-picker-calendar-day',
     FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',
     START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day',
-    // <-nuevo
     IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day',
-    // <-nuevo
     END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',
     SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',
     SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',

package/esm/date-time-picker/config/useChangeHandlers.js

@@ -0,0 +1,256 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useCallback, useMemo } from 'react';
+import { getValidationDateStringMetaInfo } from '../utils/dateHelpers.js';
+import { getValidationTimeStringMetaInfo } from '../utils/timeHelpers.js';
+import { getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.js';
+import { defaultMetaInfo } from '../utils/constants.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const useChangeHandlers = _ref => {
+  let {
+    relevantValues,
+    destructuredValues,
+    propsBasedOnType,
+    DOMRefs
+  } = _ref;
+  const {
+    tempDateString,
+    setTempDateString,
+    tempTimeString,
+    setTimeString
+  } = relevantValues;
+  const {
+    getIsDisabledDay,
+    getIsOutOfRangeDay,
+    appOnDateChange,
+    appOnMonthChange,
+    appOnDayChange,
+    appOnYearChange,
+    getIsDisabledTime,
+    appOnTimeChange,
+    appOnHourChange,
+    appOnMinuteChange,
+    appOnMeridiemChange,
+    appOnDateTimeChange,
+    isDateTime,
+    isDate,
+    isTime
+  } = propsBasedOnType;
+  const {
+    month,
+    day,
+    year,
+    hours,
+    minutes,
+    meridiem
+  } = destructuredValues;
+  const {
+    firstSegmentRef
+  } = DOMRefs;
+  const getDateMetaInfo = useCallback(function () {
+    let newDateString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const finalDateString = newDateString || tempDateString;
+
+    const finalMetaInfo = _objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
+
+    return finalMetaInfo;
+  }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
+  const getTimeMetaInfo = useCallback(function () {
+    let newTimeString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const finalTimeString = newTimeString || tempTimeString;
+
+    const finalMetaInfo = _objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
+
+    return finalMetaInfo;
+  }, [tempTimeString, getIsDisabledTime]);
+  const handleChangeComposedDateTimeString = useCallback((newDateString, newTimeString, metaInfo) => {
+    const appDateString = isEmptyDateStringMask(newDateString) ? '' : newDateString;
+    const appTimeString = isEmptyTimeStringMask(newTimeString) ? '' : newTimeString;
+    appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
+
+    setTempDateString(newDateString);
+    appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
+
+    setTimeString(newTimeString);
+    const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
+
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
+      newDateString,
+      newTimeString,
+      newDateTimeString
+    });
+
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
+  }, [appOnDateChange, setTempDateString, appOnTimeChange, setTimeString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeComposedDateString = useCallback((newDateString, metaInfo) => {
+    // if we receive an "empty" mask, we comunicate empty string to the app
+    const appDateString = isEmptyDateStringMask(newDateString) ? '' : newDateString;
+    appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
+
+    setTempDateString(newDateString);
+    const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
+
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
+      newDateString,
+      newTimeString: tempTimeString,
+      newDateTimeString
+    });
+
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
+  }, [appOnDateChange, setTempDateString, tempTimeString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeComposedTimeString = useCallback((newTimeString, metaInfo) => {
+    const appTimeString = isEmptyTimeStringMask(newTimeString) ? '' : newTimeString;
+    appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
+
+    setTimeString(newTimeString);
+    const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
+
+    const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
+      newDateTimeString,
+      newDateString: tempDateString,
+      newTimeString
+    });
+
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
+  }, [appOnTimeChange, setTimeString, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = useCallback(function (newHours, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const handleChangeMinutes = useCallback(function (newMinutes, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const handleChangeMeridiem = useCallback(function (newMeridiem, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes,
+      meridiem: newMeridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
+  const handleClearAll = useCallback(e => {
+    const metaInfo = {
+      isAutomaticFillTrigger: false,
+      isClearButtonAction: true,
+      newDateString: '',
+      newTimeString: '',
+      newDateTimeString: ''
+    };
+    appOnMonthChange('', e, metaInfo);
+    appOnDayChange('', e, metaInfo);
+    appOnYearChange('', e, metaInfo);
+    appOnHourChange('', e, metaInfo);
+    appOnMinuteChange('', e, metaInfo);
+    appOnMeridiemChange('', e, metaInfo);
+    if (isDateTime) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
+    if (isDate) handleChangeComposedDateString('__/__/____', metaInfo);
+    if (isTime) handleChangeComposedTimeString('__:__ __', metaInfo);
+    setTimeout(() => {
+      var _firstSegmentRef$curr;
+
+      (_firstSegmentRef$curr = firstSegmentRef.current) === null || _firstSegmentRef$curr === void 0 ? void 0 : _firstSegmentRef$curr.focus();
+    });
+  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, firstSegmentRef, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDate, isDateTime, isTime]);
+  return useMemo(() => ({
+    handleChangeComposedDateTimeString,
+    handleChangeComposedDateString,
+    handleChangeComposedTimeString,
+    handleChangeMonth,
+    handleChangeDay,
+    handleChangeYear,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
+    handleClearAll
+  }), [handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, handleChangeDay, handleChangeHours, handleChangeMeridiem, handleChangeMinutes, handleChangeMonth, handleChangeYear, handleClearAll]);
+};
+
+export { useChangeHandlers };