@elliemae/ds-controlled-form 2.3.1 → 3.0.0-alpha.3

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

@@ -1,59 +0,0 @@
-const ControlledDateTimePickerDatatestid = {
-  DATE_INPUTS: {
-    MONTH: 'ds-controlled-date-time-picker-month-input',
-    DAY: 'ds-controlled-date-time-picker-day-input',
-    YEAR: 'ds-controlled-date-time-picker-year-input'
-  },
-  TIME_INPUTS: {
-    HOUR: 'ds-controlled-date-time-picker-hour-input',
-    MINUTE: 'ds-controlled-date-time-picker-minute-input',
-    MERIDIEM: 'ds-controlled-date-time-picker-meridiem-input'
-  },
-  PICKER_ICONS: {
-    CALENDAR: 'ds-controlled-date-time-picker-calendar-trigger-icon',
-    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-trigger-icon',
-    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon'
-  },
-  CALENDAR: {
-    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',
-    PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',
-    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',
-    NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',
-    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year'
-  },
-  TIMEWHEEL: {
-    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',
-    HOUR: 'ds-controlled-date-time-picker-timewheel-hour',
-    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',
-    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',
-    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',
-    MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',
-    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',
-    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',
-    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',
-    MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',
-    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',
-    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem'
-  },
-  CONTEXTUAL_MENU: {
-    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',
-    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',
-    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper'
-  },
-  CONTROLLER_COMPONENT: {
-    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',
-    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',
-    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper'
-  },
-  CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn'
-};
-
-export { ControlledDateTimePickerDatatestid };

package/esm/controlled-date-time-picker/ControlledDateTimePickerTypes.js

@@ -1,23 +0,0 @@
-/* eslint-disable @typescript-eslint/prefer-as-const */
-const CONTROLLED_DATE_TIME_PICKER_TYPES = {
-  DATE_TIME: {
-    FULL: 'full-date-time',
-    CONTROLLER_ONLY: 'date-time-picker-controller-only',
-    PICKER: 'date-time-picker',
-    INPUTS: 'date-time-inputs'
-  },
-  DATE: {
-    FULL: 'full-date',
-    CONTROLLER_ONLY: 'date-picker-controller-only',
-    PICKER: 'date-picker',
-    INPUTS: 'date-inputs'
-  },
-  TIME: {
-    FULL: 'full-time',
-    CONTROLLER_ONLY: 'time-picker-controller-only',
-    PICKER: 'time-picker',
-    INPUTS: 'time-inputs'
-  }
-};
-
-export { CONTROLLED_DATE_TIME_PICKER_TYPES };

package/esm/controlled-date-time-picker/config/useControlledDateTimePicker.js

@@ -1,451 +0,0 @@
-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 'core-js/modules/web.dom-collections.iterator.js';
-import React, { useRef, useMemo, useState, useCallback } from 'react';
-import { getDataProps } from '@elliemae/ds-props-helpers';
-import { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
-import { useGetDestructuredValues } from './useGetDestructuredValues.js';
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../ControlledDateTimePickerTypes.js';
-import { useValidateProps } from './useValidateProps.js';
-import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers.js';
-import { getValidationTimeStringMetaInfo } from '../utils/timeHelpers.js';
-import { dateTimeToDate, dateTimeToTime, 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 useControlledDateTimePicker = props => {
-  // if we detect wrong props configuration we throw meaningful errors
-  useValidateProps(props); // refs are used for "auto-advance" feature
-
-  const monthInputRef = useRef();
-  const dayInputRef = useRef();
-  const yearInputRef = useRef();
-  const hourInputRef = useRef();
-  const minutesInputRef = useRef();
-  const meridiemInputRef = useRef();
-  const clearButtonRef = useRef();
-  const pickerButtonRef = useRef();
-  const prevYearBtnRef = useRef();
-  const prevMonthBtnRef = useRef();
-  const nextMonthBtnRef = useRef();
-  const nextYearBtnRef = useRef();
-  const calendarDaysWrapperRef = useRef();
-  const prevHourBtnRef = useRef();
-  const currHourBtnRef = useRef();
-  const nextHourBtnRef = useRef();
-  const prevMinutesBtnRef = useRef();
-  const currMinutesBtnRef = useRef();
-  const nextMinutesBtnRef = useRef();
-  const prevMeridiemBtnRef = useRef();
-  const currMeridiemBtnRef = useRef();
-  const nextMeridiemBtnRef = useRef();
-  const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
-  const dataAttrs = getDataProps(props);
-  const {
-    type,
-    getIsDisabledDay,
-    getIsOutOfRangeDay,
-    getIsDisabledTime,
-    isClearable,
-    autoFocus,
-    onDateChange: appOnDateChange,
-    onDateTimeChange: appOnDateTimeChange,
-    onTimeChange: appOnTimeChange,
-    onMonthChange: appOnMonthChange,
-    onDayChange: appOnDayChange,
-    onYearChange: appOnYearChange,
-    onHourChange: appOnHourChange,
-    onMinuteChange: appOnMinuteChange,
-    onMeridiemChange: appOnMeridiemChange,
-    date: appDate,
-    time: appTime,
-    dateTime: appDateTime
-  } = propsWithDefaults;
-  const dateStringFromProps = useMemo(() => propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? dateTimeToDate(propsWithDefaults.dateTime) : propsWithDefaults.date && propsWithDefaults.date !== '' ? propsWithDefaults.date : '__/__/____', [propsWithDefaults.date, propsWithDefaults.dateTime]); // don't use tempDateString to trigger useEffect for onDateChange
-  // that is an anti-pattern and leads to a lot of issue
-  // if you don't believe me, check date-time-picker v1 which is doing it
-
-  const [tempDateString, setTempDateString] = useState(dateStringFromProps);
-  const timeStringFromProps = useMemo(() => propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? dateTimeToTime(propsWithDefaults.dateTime) : propsWithDefaults.time && propsWithDefaults.time !== '' ? propsWithDefaults.time : '__:__ __', [propsWithDefaults.time, propsWithDefaults.dateTime]); // don't use tempTimeString to trigger useEffect for onTimeChange
-  // that is an anti-pattern and leads to a lot of issue
-  // if you don't believe me, check date-time-picker v1 which is doing it
-
-  const [tempTimeString, setTimeString] = useState(timeStringFromProps);
-  const hideDate = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS;
-  const hideTime = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS;
-  const hideDateTimePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  const hideDatePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
-  const hideTimePicker = type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER && type !== CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
-  const isDateSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
-  const isTimeSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
-  const isDateTimeSelector = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  const isControllerOnly = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY || type === CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
-  const isWithTimeWheelToo = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  const isWithCalendarToo = type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  const withAnyInputs = !hideDate || !hideTime;
-  const withAnyPicker = !hideDateTimePicker || !hideTimePicker || !hideDatePicker;
-  const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || // date is not "empty-ish"
-  timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
-
-  const isWithDateInputs = withAnyInputs && (isDateTimeSelector || isDateSelector);
-  const isWithDateInputsOnly = withAnyInputs && isDateSelector;
-  const isWithTimeInputs = withAnyInputs && (isDateTimeSelector || isTimeSelector);
-  const isWithTimeInputsOnly = withAnyInputs && isTimeSelector;
-  const autoFocusMonthInput = isWithDateInputs && autoFocus;
-  const autoFocusHourInput = isWithTimeInputsOnly && autoFocus;
-  const autoFocusPrevMonthArrow = isControllerOnly && autoFocus;
-  const autoFocusHourTimeWheel = isControllerOnly && isTimeSelector && autoFocus;
-  const shouldPreserveClearableSpace = isClearable && withAnyInputs;
-  const withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
-  const [latestInteractionRegion, setLatestInteractionRegion] = useState('');
-  let firstSegmentRef = useRef();
-  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef;
-  let lastSegmentRef = useRef();
-  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef;
-  const {
-    month,
-    day,
-    year,
-    monthNum,
-    dayNum,
-    yearNum,
-    announcedMonth,
-    announcedDay,
-    announcedYear,
-    announcedDateValues,
-    hours,
-    minutes,
-    meridiem,
-    hoursNum,
-    minutesNum,
-    announcedHours,
-    announcedMinutes,
-    announcedMeridiem,
-    announcedTimeValues
-  } = useGetDestructuredValues({
-    date: appDate,
-    time: appTime,
-    dateTime: appDateTime,
-    isDateTimeSelector
-  });
-  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
-  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;
-    return _objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
-  }, [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;
-    return _objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
-  }, [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, appOnTimeChange, 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, 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, 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,
-      // seconds,
-      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,
-      // seconds,
-      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: ''
-    };
-
-    const datePartsChangesMetainfo = _objectSpread({}, metaInfo);
-
-    const timePartsChangesMetainfo = _objectSpread({}, metaInfo);
-
-    if (isDateSelector || isDateTimeSelector) {
-      delete datePartsChangesMetainfo.newDateTimeString;
-      delete datePartsChangesMetainfo.newTimeString;
-      appOnMonthChange('', e, datePartsChangesMetainfo);
-      appOnDayChange('', e, datePartsChangesMetainfo);
-      appOnYearChange('', e, datePartsChangesMetainfo);
-    }
-
-    if (isTimeSelector || isDateTimeSelector) {
-      delete timePartsChangesMetainfo.newDateTimeString;
-      delete timePartsChangesMetainfo.newDateString;
-      appOnHourChange('', e, timePartsChangesMetainfo);
-      appOnMinuteChange('', e, timePartsChangesMetainfo);
-      appOnMeridiemChange('', e, timePartsChangesMetainfo);
-    }
-
-    if (isDateTimeSelector) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
-    if (isDateSelector) handleChangeComposedDateString('__/__/____', datePartsChangesMetainfo);
-    if (isTimeSelector) handleChangeComposedTimeString('__:__ __', timePartsChangesMetainfo);
-  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDateSelector, isDateTimeSelector, isTimeSelector]);
-  const onFillWithCurrentDateKeys = useCallback(function () {
-    let metaInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      isAutomaticFillTrigger: true
-    };
-    const now = new Date();
-    const nowDateString = getDateStringFromDay(now);
-    const nowTimeString = getTimeStringFromDay(now);
-
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay)), getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime)), {}, {
-      newDateString: nowDateString
-    });
-
-    handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
-  }, [getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString]);
-  const onGlobalKeyDown = useCallback(e => {
-    const {
-      key,
-      ctrlKey,
-      metaKey
-    } = e;
-
-    if ((ctrlKey || metaKey) && key === ';') {
-      onFillWithCurrentDateKeys();
-    }
-
-    if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
-  }, [handleClearAll, onFillWithCurrentDateKeys]);
-  const ctx = React.useMemo(() => ({
-    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
-      dataAttrs
-    }),
-    monthInputRef,
-    dayInputRef,
-    yearInputRef,
-    hourInputRef,
-    minutesInputRef,
-    meridiemInputRef,
-    clearButtonRef,
-    pickerButtonRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    calendarDaysWrapperRef,
-    prevHourBtnRef,
-    currHourBtnRef,
-    nextHourBtnRef,
-    prevMinutesBtnRef,
-    currMinutesBtnRef,
-    nextMinutesBtnRef,
-    prevMeridiemBtnRef,
-    currMeridiemBtnRef,
-    nextMeridiemBtnRef,
-    dateStringFromProps,
-    firstSegmentRef,
-    lastSegmentRef,
-    tempDateString,
-    setTempDateString,
-    tempTimeString,
-    setTimeString,
-    handleChangeComposedDateTimeString,
-    handleChangeComposedDateString,
-    handleChangeComposedTimeString,
-    handleChangeMonth,
-    handleChangeDay,
-    handleChangeYear,
-    handleChangeHours,
-    handleChangeMinutes,
-    handleChangeMeridiem,
-    handleClearAll,
-    hideDate,
-    hideTime,
-    hideDateTimePicker,
-    hideDatePicker,
-    hideTimePicker,
-    isDateSelector,
-    isTimeSelector,
-    isDateTimeSelector,
-    isControllerOnly,
-    isWithTimeWheelToo,
-    isWithCalendarToo,
-    isWithDateInputs,
-    isWithDateInputsOnly,
-    isWithTimeInputs,
-    isWithTimeInputsOnly,
-    autoFocusMonthInput,
-    autoFocusHourInput,
-    autoFocusPrevMonthArrow,
-    autoFocusHourTimeWheel,
-    latestInteractionRegion,
-    setLatestInteractionRegion,
-    withAnyInputs,
-    withAnyPicker,
-    withClearBtn,
-    withAnyRightController,
-    shouldPreserveClearableSpace,
-    month,
-    day,
-    year,
-    monthNum,
-    dayNum,
-    yearNum,
-    announcedMonth,
-    announcedDay,
-    announcedYear,
-    announcedDateValues,
-    hours,
-    minutes,
-    meridiem,
-    hoursNum,
-    minutesNum,
-    announcedHours,
-    announcedMinutes,
-    announcedMeridiem,
-    announcedTimeValues,
-    ariaCurrentValueForInputs,
-    onGlobalKeyDown
-  }), [dataAttrs, propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
-  );
-  return ctx;
-};
-
-export { useControlledDateTimePicker };

package/esm/controlled-date-time-picker/config/useGetDestructuredValues.js

@@ -1,143 +0,0 @@
-import { useMemo } from 'react';
-import { dateTimeToDate, deconstructValuesFromDateString, fillStringWithPlaceHolders, dateTimeToTime, deconstructTimeValues } from '../utils/stringHelpers.js';
-import { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';
-import { monthNames, announcableCardinalDays } from '../utils/constants.js';
-
-/* eslint-disable max-lines */
-// this is because it's fully controlled
-// our source of truth is either the date props or dateTime props
-// based on wheter it's a dateTime picker
-// or a date picker (it's date picker when hideTime is true)
-const useGetDestructuredDateValues = _ref => {
-  let {
-    date,
-    dateTime,
-    isDateTimeSelector
-  } = _ref;
-  const dateStringFromProps = isDateTimeSelector ? dateTimeToDate(dateTime) : date;
-  const deconstructedValues = deconstructValuesFromDateString(dateStringFromProps);
-  const {
-    month,
-    day,
-    year
-  } = deconstructedValues;
-  const monthNum = convertToPositiveNumberIfPossible(month);
-  const dayNum = convertToPositiveNumberIfPossible(day);
-  const yearNum = convertToPositiveNumberIfPossible(year);
-  const announcedMonth = monthNum !== -1 ? monthNames[monthNum - 1] : 'empty month';
-  const announcedDay = dayNum !== -1 ? announcableCardinalDays[dayNum] : 'empty day';
-  const announcedYear = yearNum !== -1 ? fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
-  const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
-  return useMemo(() => ({
-    month,
-    day,
-    year,
-    monthNum,
-    dayNum,
-    yearNum,
-    announcedMonth,
-    announcedDay,
-    announcedYear,
-    announcedDateValues
-  }), [announcedDay, announcedMonth, announcedYear, announcedDateValues, day, dayNum, month, monthNum, year, yearNum]);
-}; // this is because it's fully controlled
-// our source of truth is either the time props or dateTime props
-// based on wheter it's a dateTime picker
-// or a time picker (it's time picker when hideDate is true)
-
-const useGetDestructuredTimeValues = _ref2 => {
-  let {
-    time,
-    dateTime,
-    isDateTimeSelector
-  } = _ref2;
-  const timeStringFromProps = isDateTimeSelector ? dateTimeToTime(dateTime) : time;
-  const deconstructedValues = deconstructTimeValues(timeStringFromProps);
-  const {
-    hours,
-    minutes,
-    meridiem
-  } = deconstructedValues;
-  const hoursNum = convertToPositiveNumberIfPossible(hours);
-  const minutesNum = convertToPositiveNumberIfPossible(minutes); // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
-
-  const announcedHours = hoursNum !== -1 ? "".concat(hoursNum) : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
-
-  const announcedMinutes = minutesNum !== -1 ? "".concat(minutesNum) : 'empty minutes';
-  const announcedMeridiem = // eslint-disable-next-line no-nested-ternary
-  meridiem === 'PM' ? "post meridiem" : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
-  const announcedTimeValues = "".concat(announcedHours, ", ").concat(announcedMinutes, ", ").concat(announcedMeridiem);
-  return useMemo(() => ({
-    hours,
-    minutes,
-    meridiem,
-    hoursNum,
-    minutesNum,
-    announcedHours,
-    announcedMinutes,
-    announcedMeridiem,
-    announcedTimeValues
-  }), [hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
-};
-const useGetDestructuredValues = _ref3 => {
-  let {
-    date,
-    time,
-    dateTime,
-    isDateTimeSelector
-  } = _ref3;
-  const {
-    month,
-    day,
-    year,
-    monthNum,
-    dayNum,
-    yearNum,
-    announcedMonth,
-    announcedDay,
-    announcedYear,
-    announcedDateValues
-  } = useGetDestructuredDateValues({
-    date,
-    dateTime,
-    isDateTimeSelector
-  });
-  const {
-    hours,
-    minutes,
-    meridiem,
-    hoursNum,
-    minutesNum,
-    announcedHours,
-    announcedMinutes,
-    announcedMeridiem,
-    announcedTimeValues
-  } = useGetDestructuredTimeValues({
-    time,
-    dateTime,
-    isDateTimeSelector
-  });
-  return useMemo(() => ({
-    month,
-    day,
-    year,
-    monthNum,
-    dayNum,
-    yearNum,
-    announcedMonth,
-    announcedDay,
-    announcedYear,
-    announcedDateValues,
-    hours,
-    minutes,
-    meridiem,
-    hoursNum,
-    minutesNum,
-    announcedHours,
-    announcedMinutes,
-    announcedMeridiem,
-    announcedTimeValues
-  }), [month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
-};
-
-export { useGetDestructuredDateValues, useGetDestructuredTimeValues, useGetDestructuredValues };