@elliemae/ds-controlled-form 2.3.0-alpha.8 → 2.3.0-next.10

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

@@ -0,0 +1,143 @@
+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 };

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

@@ -0,0 +1,7 @@
+import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import { defaultProps } from '../ControlledDateTimePickerCTX.js';
+
+// we have to merge the "default" nested default values with what the user gives us...
+const useGetDatePickerWithDefaultsProps = props => useMemoMergePropsWithDefault(props, defaultProps);
+
+export { useGetDatePickerWithDefaultsProps };

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

@@ -0,0 +1,97 @@
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../ControlledDateTimePickerTypes.js';
+import { deconstructValuesFromDateString, isValidDateString, dateTimeToDate, isValidTimeString, dateTimeToTime } from '../utils/stringHelpers.js';
+import { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';
+
+/* eslint-disable max-len */
+const PREPEND = "ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    ";
+const NOT_A_DEFECT = ''; // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
+
+const INLINE_RECEIVED_PREPEND = "\n\n    Received:";
+
+const throwInvalidDateTimeError = invalidValue => {
+  throw new Error("".concat(PREPEND, "the \"dateTime\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+};
+
+const throwInvalidDaterror = invalidValue => {
+  throw new Error("".concat(PREPEND, "the \"date\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+};
+
+const throwInvalidTimerror = invalidValue => {
+  throw new Error("".concat(PREPEND, "the \"time\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+};
+
+const throwUncontrolledDateError = (date, onDateChange) => {
+  throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(date, "(").concat(typeof date, ")\n    ").concat(onDateChange, "(").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
+};
+
+const throwUncontrolledTimeError = (time, onTimeChange) => {
+  throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(time, "(").concat(typeof time, ")\n    ").concat(onTimeChange, "(").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+};
+
+const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
+  throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(dateTime, "(").concat(typeof dateTime, ")\n    ").concat(onDateTimeChange, "(").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+};
+
+const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
+  throw new Error("".concat(PREPEND, "the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n  Received:\n    ").concat(emptyPickerStartingMonth, "(").concat(typeof emptyPickerStartingMonth, ")\n  ").concat(NOT_A_DEFECT));
+};
+
+const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
+  throw new Error("".concat(PREPEND, "the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n  Received:\n    ").concat(onCalendarOpenFocusedDay, "(").concat(typeof onCalendarOpenFocusedDay, ")\n  ").concat(NOT_A_DEFECT));
+};
+
+const useValidateProps = props => {
+  const {
+    type,
+    dateTime,
+    date,
+    time,
+    onDateChange,
+    onTimeChange,
+    onDateTimeChange,
+    emptyPickerStartingMonth,
+    onCalendarOpenFocusedDay
+  } = props;
+  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;
+  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;
+  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; // validate generic use-cases
+
+  if (emptyPickerStartingMonth) {
+    const {
+      month: stringMonthVal,
+      year: stringYearVal
+    } = deconstructValuesFromDateString(emptyPickerStartingMonth);
+    const monthNum = convertToPositiveNumberIfPossible(stringMonthVal);
+    const yearNum = convertToPositiveNumberIfPossible(stringYearVal);
+    if (monthNum <= 0 || monthNum >= 13 || yearNum <= 0 || yearNum > 9999) throwInvalidEmptyPickerStartingMonthError(emptyPickerStartingMonth);
+  }
+
+  if (onCalendarOpenFocusedDay) {
+    const {
+      month: stringMonthVal,
+      day: stringDayVal,
+      year: stringYearVal
+    } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);
+    const monthNum = convertToPositiveNumberIfPossible(stringMonthVal);
+    const dayNum = convertToPositiveNumberIfPossible(stringDayVal);
+    const yearNum = convertToPositiveNumberIfPossible(stringYearVal);
+    if (monthNum <= 0 || monthNum >= 13 || dayNum <= 0 || dayNum >= 31 || yearNum <= 0 || yearNum > 9999) throwInvalidOnCalendarOpenFocusedDayError(onCalendarOpenFocusedDay);
+  } // validate full datetime cases
+
+
+  if (isDateTimeSelector) {
+    if (typeof dateTime !== 'string' || typeof onDateTimeChange !== 'function') throwUncontrolledDateTimeError(dateTime, onDateTimeChange);else if (!isValidDateString(dateTimeToDate(dateTime)) || !isValidTimeString(dateTimeToTime(dateTime))) throwInvalidDateTimeError(dateTimeToTime(dateTime));
+  } // validate date-only cases
+
+
+  if (isDateSelector) {
+    if (typeof date !== 'string' || typeof onDateChange !== 'function') throwUncontrolledDateError(date, onDateChange);else if (!isValidDateString(date)) throwInvalidDaterror(date);
+  } // validate time-only cases
+
+
+  if (isTimeSelector) {
+    if (typeof time !== 'string' || typeof onTimeChange !== 'function') throwUncontrolledTimeError(time, onTimeChange);else if (!isValidTimeString(time)) throwInvalidTimerror(time);
+  }
+};
+
+export { useValidateProps };

package/esm/controlled-date-time-picker/index.d.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,7 @@
+export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './ControlledDateTimePicker.js';
+export { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';
+export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes.js';
+export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers.js';
+export { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';
+export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './utils/dateHelpers.js';
+export { getValidationTimeStringMetaInfo } from './utils/timeHelpers.js';

package/esm/controlled-date-time-picker/parts/ClearButton/ClearButton.js

@@ -0,0 +1,34 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { CloseMedium } from '@elliemae/ds-icons';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { StyledClearButton } from '../Styleds.js';
+import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { useClearButton } from './useClearButton.js';
+
+const ClearButton = () => {
+  const {
+    onClearClick,
+    onClearButtonKeyDown,
+    clearButtonRef,
+    withAnyPicker,
+    withClearBtn
+  } = useClearButton();
+  return /*#__PURE__*/_jsx(StyledClearButton, {
+    shouldDisplay: withClearBtn,
+    "aria-label": "clear selected date",
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
+    variant: BUTTON_VARIANT.DEFAULT,
+    "data-testid": ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
+    innerRef: clearButtonRef,
+    onClick: onClearClick,
+    onKeyDown: onClearButtonKeyDown,
+    withAnyPicker: withAnyPicker
+  }, void 0, /*#__PURE__*/_jsx(CloseMedium, {
+    color: DSIconColors.PRIMARY
+  }));
+};
+
+export { ClearButton };

package/esm/controlled-date-time-picker/parts/ClearButton/useClearButton.js

@@ -0,0 +1,66 @@
+import { useContext, useCallback, useMemo } from 'react';
+import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
+
+/* eslint-disable max-statements */
+const useClearButton = () => {
+  const {
+    handleClearAll,
+    clearButtonRef,
+    withAnyPicker,
+    withClearBtn,
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isTimeSelector,
+    hourInputRef,
+    monthInputRef,
+    pickerButtonRef,
+    meridiemInputRef,
+    yearInputRef,
+    setLatestInteractionRegion
+  } = useContext(ControlledDateTimePickerContext);
+  const focusFirstRegion = useCallback(() => {
+    var _hourInputRef$current, _hourInputRef$current2, _monthInputRef$curren, _monthInputRef$curren2;
+
+    if (withAnyInputs) if (isTimeSelector) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);else monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);
+  }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
+  const onClearClick = useCallback(e => {
+    handleClearAll(e);
+    setLatestInteractionRegion('clear-btn');
+    focusFirstRegion();
+  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
+  const onHomeKeyDown = useCallback(() => {
+    focusFirstRegion();
+  }, [focusFirstRegion]);
+  const onEndKeyDown = useCallback(() => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
+    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);
+  }, [withAnyPicker, pickerButtonRef]);
+  const onClearButtonKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End'];
+    const stopPropagationKeys = ['Home', 'End'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (key === 'Home') onHomeKeyDown();
+    if (key === 'End') onEndKeyDown();
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  return useMemo(() => ({
+    onClearClick,
+    onClearButtonKeyDown,
+    clearButtonRef,
+    withAnyPicker,
+    withClearBtn
+  }), [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]);
+};
+
+export { useClearButton };

package/esm/controlled-date-time-picker/parts/ControlledDateTimePickerContent.js

@@ -0,0 +1,72 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';
+import { StyledInputsWrapperGrid } from './Styleds.js';
+import { DateInputs } from './DateInputs/DateInputs.js';
+import { TimeInputs } from './TimeInputs/TimeInputs.js';
+import { PickersIcons } from './Pickers/PickersIcons.js';
+import { ClearButton } from './ClearButton/ClearButton.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var _DateInputs, _TimeInputs, _ClearButton, _PickersIcons;
+
+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 ControlledDateTimePickerContent = () => {
+  const {
+    hideDate,
+    hideDatePicker,
+    hideTime,
+    hideTimePicker,
+    hideDateTimePicker,
+    setLatestInteractionRegion,
+    withAnyPicker,
+    withAnyRightController,
+    shouldPreserveClearableSpace,
+    isControllerOnly,
+    props: {
+      hasError,
+      dataAttrs,
+      disabled
+    },
+    onGlobalKeyDown
+  } = React.useContext(ControlledDateTimePickerContext);
+  const resetLatestInteraction = React.useCallback(() => {
+    setLatestInteractionRegion('');
+  }, [setLatestInteractionRegion]);
+  const mainCols = [];
+  if (!hideDate) mainCols.push('auto');
+  if (!hideTime) mainCols.push('auto');
+  if (withAnyRightController) mainCols.push('auto');
+  const rightControlCols = [];
+  if (shouldPreserveClearableSpace) rightControlCols.push('28px');
+  if (withAnyPicker) rightControlCols.push('auto');
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs(StyledInputsWrapperGrid, _objectSpread(_objectSpread({
+      cols: mainCols,
+      gutter: "xxs",
+      pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
+      justPicker: hideDate && hideTime,
+      withAnyPicker: withAnyPicker,
+      onBlur: resetLatestInteraction,
+      onKeyDown: onGlobalKeyDown,
+      hasError: hasError,
+      isControllerOnly: isControllerOnly,
+      disabled: disabled
+    }, dataAttrs), {}, {
+      children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx(DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx(TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx(Grid, {
+        cols: rightControlCols
+      }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx(ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx(PickersIcons, {})) : null) : null]
+    }))
+  });
+};
+
+export { ControlledDateTimePickerContent };

package/esm/controlled-date-time-picker/parts/DateInputs/DDInput.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { Styled2DigitsInput } from '../Styleds.js';
+import { jsx } from 'react/jsx-runtime';
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidDay = day => {
+  if (day === '') return false;
+  const numberOnly = regExpNumbers.test(day);
+  return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;
+};
+
+const DDInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    contextRef,
+    placeholder,
+    ariaCurrentValueForInputs
+  } = _ref;
+  const validateOnChange = useCallback(e => {
+    var _e$target;
+
+    if (isInvalidDay(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+export { DDInput };

package/esm/controlled-date-time-picker/parts/DateInputs/DateInputs.js

@@ -0,0 +1,80 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
+import { MMInput } from './MMInput.js';
+import { DDInput } from './DDInput.js';
+import { YYYYInput } from './YYYYInput.js';
+import { StyledFocusWithIn, StyledSeparator } from '../Styleds.js';
+import { useDateInputs } from './useDateInputs.js';
+import { fixedValues } from '../config.js';
+
+var _StyledSeparator, _StyledSeparator2;
+const DateInputs = () => {
+  const {
+    month,
+    day,
+    year,
+    autoFocusMonthInput,
+    onMonthChange,
+    onDayChange,
+    onYearChange,
+    onMonthBlur,
+    onDayBlur,
+    onYearBlur,
+    onMonthFocus,
+    onDayFocus,
+    onYearFocus,
+    onMonthKeyDown,
+    onDayKeyDown,
+    onYearKeyDown,
+    disabled
+  } = useDateInputs(); // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo
+
+  const {
+    monthInputRef,
+    dayInputRef,
+    yearInputRef,
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
+  return /*#__PURE__*/_jsx(Grid, {
+    cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.largeInputWidth]
+  }, void 0, /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(MMInput, {
+    onChange: onMonthChange,
+    onBlur: onMonthBlur,
+    onFocus: onMonthFocus,
+    onKeyDown: onMonthKeyDown,
+    value: month,
+    contextRef: monthInputRef,
+    autoFocusMonthInput: autoFocusMonthInput,
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+    alignItems: "center"
+  }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(DDInput, {
+    onChange: onDayChange,
+    onBlur: onDayBlur,
+    onFocus: onDayFocus,
+    onKeyDown: onDayKeyDown,
+    value: day,
+    contextRef: dayInputRef,
+    placeholder: "DD",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
+    alignItems: "center"
+  }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(YYYYInput, {
+    onChange: onYearChange,
+    onBlur: onYearBlur,
+    onFocus: onYearFocus,
+    onKeyDown: onYearKeyDown,
+    value: year,
+    contextRef: yearInputRef,
+    placeholder: "YYYY",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })));
+};
+
+export { DateInputs };

package/esm/controlled-date-time-picker/parts/DateInputs/MMInput.js

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Styled2DigitsInput } from '../Styleds.js';
+import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { jsx } from 'react/jsx-runtime';
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidMonth = month => {
+  if (month === '') return false;
+  const numberOnly = regExpNumbers.test(month);
+  return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;
+};
+
+const MMInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    contextRef,
+    autoFocusMonthInput,
+    ariaCurrentValueForInputs
+  } = _ref;
+  const validateOnChange = useCallback(e => {
+    var _e$target;
+
+    if (isInvalidMonth(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
+    autoFocus: autoFocusMonthInput,
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+export { MMInput };

package/esm/controlled-date-time-picker/parts/DateInputs/YYYYInput.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { StyledMin4DigitsInput } from '../Styleds.js';
+import { jsx } from 'react/jsx-runtime';
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidYear = year => {
+  if (year === '') return false;
+  const numberOnly = regExpNumbers.test(year);
+  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;
+};
+
+const YYYYInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    contextRef,
+    ariaCurrentValueForInputs
+  } = _ref;
+  const validateOnChange = useCallback(e => {
+    var _e$target;
+
+    if (isInvalidYear(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsx(StyledMin4DigitsInput, {
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+export { YYYYInput };