@elliemae/ds-controlled-form 2.2.2-rc.1 → 2.3.0-alpha.10

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+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",
+    IN_RANGE_DAY: "ds-controlled-date-time-picker-calendar-in-range-day",
+    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
+};
+//# sourceMappingURL=ControlledDateTimePickerDatatestid.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-date-time-picker/ControlledDateTimePickerDatatestid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ControlledDateTimePickerDatatestid = {\n  DATE_INPUTS: {\n    MONTH: 'ds-controlled-date-time-picker-month-input',\n    DAY: 'ds-controlled-date-time-picker-day-input',\n    YEAR: 'ds-controlled-date-time-picker-year-input',\n  },\n  TIME_INPUTS: {\n    HOUR: 'ds-controlled-date-time-picker-hour-input',\n    MINUTE: 'ds-controlled-date-time-picker-minute-input',\n    MERIDIEM: 'ds-controlled-date-time-picker-meridiem-input',\n  },\n  PICKER_ICONS: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-trigger-icon',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-trigger-icon',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon',\n  },\n  CALENDAR: {\n    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',\n    PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',\n    DAY: 'ds-controlled-date-time-picker-calendar-day',\n    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',\n    START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day', // <-nuevo\n    IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day', // <-nuevo\n    END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',\n    SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',\n    SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',\n    NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',\n    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year',\n  },\n  TIMEWHEEL: {\n    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',\n    HOUR: 'ds-controlled-date-time-picker-timewheel-hour',\n    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',\n    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',\n    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',\n    MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',\n    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',\n    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',\n    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',\n    MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',\n    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',\n    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem',\n  },\n  CONTEXTUAL_MENU: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper',\n  },\n  CONTROLLER_COMPONENT: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper',\n  },\n  CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,qCAAqC;AAAA,EAChD,aAAa;AAAA,IACX,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA;AAAA,EAER,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,EAEZ,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA;AAAA,EAEtB,UAAU;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA,EAEb,WAAW;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,eAAe;AAAA;AAAA,EAEjB,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA;AAAA,EAEtB,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA;AAAA,EAEtB,cAAc;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+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
+};
+//# sourceMappingURL=ControlledDateTimePickerTypes.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/controlled-date-time-picker/ControlledDateTimePickerTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/prefer-as-const */\nexport const CONTROLLED_DATE_TIME_PICKER_TYPES = {\n  DATE_TIME: {\n    FULL: 'full-date-time' as 'full-date-time',\n    CONTROLLER_ONLY: 'date-time-picker-controller-only' as 'date-time-picker-controller-only',\n    PICKER: 'date-time-picker' as 'date-time-picker',\n    INPUTS: 'date-time-inputs' as 'date-time-inputs',\n  },\n  DATE: {\n    FULL: 'full-date' as 'full-date',\n    CONTROLLER_ONLY: 'date-picker-controller-only' as 'date-picker-controller-only',\n    PICKER: 'date-picker' as 'date-picker',\n    INPUTS: 'date-inputs' as 'date-inputs',\n  },\n  TIME: {\n    FULL: 'full-time' as 'full-time',\n    CONTROLLER_ONLY: 'time-picker-controller-only' as 'time-picker-controller-only',\n    PICKER: 'time-picker' as 'time-picker',\n    INPUTS: 'time-inputs' as 'time-inputs',\n  },\n};\n"],
+  "mappings": "AAAA;ACCO,MAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,IACT,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA;AAAA,EAEV,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA;AAAA,EAEV,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,499 @@
+import * as React from "react";
+import React2, { useRef, useState, useCallback, useMemo } from "react";
+import { getDataProps } from "@elliemae/ds-props-helpers";
+import { useGetDatePickerWithDefaultsProps } from "./useGetPropsWithDefault";
+import { useGetDestructuredValues } from "./useGetDestructuredValues";
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "../ControlledDateTimePickerTypes";
+import { useValidateProps } from "./useValidateProps";
+import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from "../utils/dateHelpers";
+import { getValidationTimeStringMetaInfo } from "../utils/timeHelpers";
+import {
+  isEmptyDateStringMask,
+  isEmptyTimeStringMask,
+  isEmptyDateTimeStringMask,
+  dateTimeToTime,
+  dateTimeToDate,
+  getFormattedDateString,
+  getFormattedTimeString
+} from "../utils/stringHelpers";
+import { defaultMetaInfo } from "../utils/constants";
+const useControlledDateTimePicker = (props) => {
+  useValidateProps(props);
+  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]);
+  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]);
+  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 !== "" || timeStringFromProps !== "__:__ __" && timeStringFromProps !== "");
+  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: ${isWithDateInputs ? `${announcedDateValues}` : ""}${isDateTimeSelector ? ", " : ""}${isWithTimeInputs ? `${announcedTimeValues}` : ""}`;
+  const getDateMetaInfo = useCallback((newDateString = null, metaInfo = {}) => {
+    const finalDateString = newDateString || tempDateString;
+    return {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay)
+    };
+  }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
+  const getTimeMetaInfo = useCallback((newTimeString = null, metaInfo = {}) => {
+    const finalTimeString = newTimeString || tempTimeString;
+    return {
+      ...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);
+    setTempDateString(newDateString);
+    appOnTimeChange(appTimeString, metaInfo);
+    setTimeString(newTimeString);
+    const newDateTimeString = `${newDateString} ${newTimeString}`;
+    const newMetaInfo = {
+      ...getTimeMetaInfo(newTimeString, metaInfo),
+      ...getDateMetaInfo(newDateString, metaInfo),
+      newDateString,
+      newTimeString,
+      newDateTimeString
+    };
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? "" : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo);
+  }, [appOnDateChange, appOnTimeChange, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeComposedDateString = useCallback((newDateString, metaInfo) => {
+    const appDateString = isEmptyDateStringMask(newDateString) ? "" : newDateString;
+    appOnDateChange(appDateString, metaInfo);
+    setTempDateString(newDateString);
+    const newDateTimeString = `${newDateString} ${tempTimeString}`;
+    const newMetaInfo = {
+      ...getTimeMetaInfo(tempTimeString, metaInfo),
+      ...getDateMetaInfo(newDateString, metaInfo),
+      newDateString,
+      newTimeString: tempTimeString,
+      newDateTimeString
+    };
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? "" : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo);
+  }, [appOnDateChange, tempTimeString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeComposedTimeString = useCallback((newTimeString, metaInfo) => {
+    const appTimeString = isEmptyTimeStringMask(newTimeString) ? "" : newTimeString;
+    appOnTimeChange(appTimeString, metaInfo);
+    setTimeString(newTimeString);
+    const newDateTimeString = `${tempDateString} ${newTimeString}`;
+    const newMetaInfo = {
+      ...getTimeMetaInfo(newTimeString, metaInfo),
+      ...getDateMetaInfo(tempDateString, metaInfo),
+      newDateTimeString,
+      newDateString: tempDateString,
+      newTimeString
+    };
+    const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? "" : newDateTimeString;
+    appOnDateTimeChange(appDateTimeString, newMetaInfo);
+  }, [appOnTimeChange, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = useCallback((newMonth, e, metaInfo = defaultMetaInfo) => {
+    const newDateString = getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
+      newDateString
+    };
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = useCallback((newDay, e, metaInfo = defaultMetaInfo) => {
+    const newDateString = getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
+      newDateString
+    };
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = useCallback((newYear, e, metaInfo = defaultMetaInfo) => {
+    const newDateString = getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
+      newDateString
+    };
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = useCallback((newHours, e, metaInfo = defaultMetaInfo) => {
+    const newTimeString = getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      meridiem
+    });
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime),
+      newTimeString
+    };
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const handleChangeMinutes = useCallback((newMinutes, e, metaInfo = defaultMetaInfo) => {
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      meridiem
+    });
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime),
+      newTimeString
+    };
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const handleChangeMeridiem = useCallback((newMeridiem, e, metaInfo = defaultMetaInfo) => {
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes,
+      meridiem: newMeridiem
+    });
+    const finalMetaInfo = {
+      ...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 = { ...metaInfo };
+    const timePartsChangesMetainfo = { ...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((metaInfo = { isAutomaticFillTrigger: true }) => {
+    const now = new Date();
+    const nowDateString = getDateStringFromDay(now);
+    const nowTimeString = getTimeStringFromDay(now);
+    const finalMetaInfo = {
+      ...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 = React2.useMemo(() => ({
+    props: { ...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
+  ]);
+  return ctx;
+};
+export {
+  useControlledDateTimePicker
+};
+//# sourceMappingURL=useControlledDateTimePicker.js.map