@elliemae/ds-controlled-form 2.4.1-rc.0 → 2.4.1-rc.12

package/cjs/combobox/parts/menu-list/useItemRenderer.js

@@ -34,12 +34,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const useItemRenderer = () => {
   const {
     props: {
-      options,
+      filteredOptions,
       onCreate,
       onChange,
       selectedValues,
       onFilter,
-      innerRef
+      allOptions
     },
     setShowPopover,
     inputValue,
@@ -54,11 +54,11 @@ const useItemRenderer = () => {
       if (inputValue) {
         onCreate(inputValue);
         setInputValue('');
-        onFilter('');
+        onFilter(allOptions, inputValue);
       }
     } else if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
@@ -72,7 +72,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = React.useCallback(e => {
     e.preventDefault();
@@ -83,7 +83,7 @@ const useItemRenderer = () => {
     }
 
     return virtualListHelpers.virtualItems.map(vItem => {
-      const option = options[vItem.index];
+      const option = filteredOptions[vItem.index];
       const generalProps = {
         wrapperStyles: {
           position: 'absolute',
@@ -133,7 +133,7 @@ const useItemRenderer = () => {
               height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, label));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, "\"".concat(label, "\"")));
           },
           label: option.label,
           onClick: e => handleClick(option, e)
@@ -142,7 +142,7 @@ const useItemRenderer = () => {
 
       return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
     });
-  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.virtualItems]);
+  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 
 exports.useItemRenderer = useItemRenderer;

package/cjs/combobox/parts/menu-list/useMenuListSetFocusOption.js

@@ -10,7 +10,7 @@ const useMenuListSetFocusOption = () => {
   const {
     props: {
       selectedValues,
-      options
+      filteredOptions
     },
     setFocusOptionIdx,
     hasFocus,
@@ -19,16 +19,16 @@ const useMenuListSetFocusOption = () => {
     scrollOptionIntoView
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const getFirstOption = React.useCallback(() => {
-    for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
-      setFocusOptionIdx(options[i].dsId);
+    for (let i = 0; i < filteredOptions.length; i += 1) if (!['section', 'separator'].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {
+      setFocusOptionIdx(filteredOptions[i].dsId);
       break;
     }
-  }, [options, setFocusOptionIdx]);
+  }, [filteredOptions, setFocusOptionIdx]);
   React.useEffect(() => {
     scrollOptionIntoView(focusOptionIdx); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [focusOptionIdx]);
   React.useEffect(() => {
-    if (options.length === 0) {
+    if (filteredOptions.length === 0) {
       setFocusOptionIdx('');
     }
 
@@ -45,7 +45,7 @@ const useMenuListSetFocusOption = () => {
     }
 
     if (hasFocus) getFirstOption();
-  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);
+  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);
 };
 
 exports.useMenuListSetFocusOption = useMenuListSetFocusOption;

package/cjs/combobox/react-desc-prop-types.js

@@ -20,7 +20,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function noop() {}
 const ComboboxPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
   placeholder: dsPropsHelpers.PropTypes.string.description("input's placeholder value").defaultValue(''),
-  options: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  allOptions: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).isRequired.description('List of original options').defaultValue([]),
+  filteredOptions: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).description('List of filtered options to show in the menu based on the current internal input filter value').defaultValue([]),
   selectedValues: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.object), dsPropsHelpers.PropTypes.object]).isRequired.description('Array of option or single option selected'),
   disabled: dsPropsHelpers.PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: dsPropsHelpers.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),

package/cjs/combobox/utils/listHelper.js

@@ -10,6 +10,8 @@ require('core-js/modules/esnext.iterator.some.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var constants = require('../constants.js');
 
 const getSelectableOptions = options => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && !option.disabled);
@@ -34,15 +36,17 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+const getLastValueSelected = selectedValues => {
+  if (Array.isArray(selectedValues)) {
+    return selectedValues[selectedValues.length - 1];
+  }
+
+  return selectedValues;
+};
 const getFirstOption = (options, selectedValues, inputValue) => {
   if (!inputValue) {
-    if (Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValues[selectedValues.length - 1].dsId;
-    }
-
-    if (selectedValues !== null && selectedValues !== void 0 && selectedValues.dsId) {
-      return selectedValues.dsId;
-    }
+    const lastValue = getLastValueSelected(selectedValues);
+    if (lastValue) return lastValue.dsId;
   }
 
   for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
@@ -68,15 +72,39 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 
   return selectedOption;
 };
-const getLastValueSelected = selectedValues => {
-  if (Array.isArray(selectedValues)) {
-    return selectedValues[selectedValues.length - 1];
+const filterOptions = (inputValue, options) => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
+  var _items2;
+
+  const items = [];
+  if (optionsToParse) optionsToParse.forEach(option => {
+    // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);
+    if (option.type === constants.MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
+      items.push(option);
+    }
+
+    if (option.type === constants.MENU_OPTION_TYPES.SECTION) {
+      var _items;
+
+      if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === constants.MENU_OPTION_TYPES.SECTION) {
+        items[items.length - 1] = option;
+      } else {
+        items.push(option);
+      }
+    }
+  });
+
+  if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === constants.MENU_OPTION_TYPES.SECTION) {
+    items.pop();
   }
 
-  return selectedValues;
+  return items;
 };
+const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
 
+exports.filterOptions = filterOptions;
 exports.findInCircularList = findInCircularList;
+exports.getFilteredOptionsSelected = getFilteredOptionsSelected;
 exports.getFirstOption = getFirstOption;
 exports.getLastValueSelected = getLastValueSelected;
 exports.getOptions = getOptions;
@@ -85,3 +113,4 @@ exports.getSuggestedValueOnChange = getSuggestedValueOnChange;
 exports.isSelected = isSelected;
 exports.isSelectedValueEmpty = isSelectedValueEmpty;
 exports.isSelectedValueMultiple = isSelectedValueMultiple;
+exports.selectedValuesWithSections = selectedValuesWithSections;

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

@@ -3,124 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ControlledDateTimePickerTypes = require('./ControlledDateTimePickerTypes.js');
 
-// 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: ControlledDateTimePickerTypes.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__*/React.createRef(),
-  dayInputRef: /*#__PURE__*/React.createRef(),
-  yearInputRef: /*#__PURE__*/React.createRef(),
-  hourInputRef: /*#__PURE__*/React.createRef(),
-  minutesInputRef: /*#__PURE__*/React.createRef(),
-  // secondsInputRef: createRef<HTMLInputElement>(),
-  meridiemInputRef: /*#__PURE__*/React.createRef(),
-  clearButtonRef: /*#__PURE__*/React.createRef(),
-  pickerButtonRef: /*#__PURE__*/React.createRef(),
-  prevYearBtnRef: /*#__PURE__*/React.createRef(),
-  prevMonthBtnRef: /*#__PURE__*/React.createRef(),
-  nextMonthBtnRef: /*#__PURE__*/React.createRef(),
-  nextYearBtnRef: /*#__PURE__*/React.createRef(),
-  calendarDaysWrapperRef: /*#__PURE__*/React.createRef(),
-  prevHourBtnRef: /*#__PURE__*/React.createRef(),
-  currHourBtnRef: /*#__PURE__*/React.createRef(),
-  nextHourBtnRef: /*#__PURE__*/React.createRef(),
-  prevMinutesBtnRef: /*#__PURE__*/React.createRef(),
-  currMinutesBtnRef: /*#__PURE__*/React.createRef(),
-  nextMinutesBtnRef: /*#__PURE__*/React.createRef(),
-  prevMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  currMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  nextMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  firstSegmentRef: /*#__PURE__*/React.createRef(),
-  lastSegmentRef: /*#__PURE__*/React.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__*/React.createContext(defaultContext);
 
 exports.ControlledDateTimePickerContext = ControlledDateTimePickerContext;
 exports["default"] = ControlledDateTimePickerContext;
-exports.defaultProps = defaultProps;

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

@@ -24,9 +24,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/cjs/date-time-picker/config/useChangeHandlers.js

@@ -0,0 +1,264 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dateHelpers = require('../utils/dateHelpers.js');
+var timeHelpers = require('../utils/timeHelpers.js');
+var stringHelpers = require('../utils/stringHelpers.js');
+var constants = require('../utils/constants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 = React.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), dateHelpers.getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
+
+    return finalMetaInfo;
+  }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
+  const getTimeMetaInfo = React.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), timeHelpers.getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
+
+    return finalMetaInfo;
+  }, [tempTimeString, getIsDisabledTime]);
+  const handleChangeComposedDateTimeString = React.useCallback((newDateString, newTimeString, metaInfo) => {
+    const appDateString = stringHelpers.isEmptyDateStringMask(newDateString) ? '' : newDateString;
+    const appTimeString = stringHelpers.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 = stringHelpers.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 = React.useCallback((newDateString, metaInfo) => {
+    // if we receive an "empty" mask, we comunicate empty string to the app
+    const appDateString = stringHelpers.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 = stringHelpers.isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
+  }, [appOnDateChange, setTempDateString, tempTimeString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeComposedTimeString = React.useCallback((newTimeString, metaInfo) => {
+    const appTimeString = stringHelpers.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 = stringHelpers.isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
+  }, [appOnTimeChange, setTimeString, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = React.useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = React.useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = React.useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = React.useCallback(function (newHours, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const handleChangeMinutes = React.useCallback(function (newMinutes, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const handleChangeMeridiem = React.useCallback(function (newMeridiem, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours,
+      minutes,
+      meridiem: newMeridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
+  const handleClearAll = React.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 React.useMemo(() => ({
+    handleChangeComposedDateTimeString,
+    handleChangeComposedDateString,
+    handleChangeComposedTimeString,
+    handleChangeMonth,
+    handleChangeDay,
+    handleChangeYear,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
+    handleClearAll
+  }), [handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, handleChangeDay, handleChangeHours, handleChangeMeridiem, handleChangeMinutes, handleChangeMonth, handleChangeYear, handleClearAll]);
+};
+
+exports.useChangeHandlers = useChangeHandlers;