@elliemae/ds-controlled-form 2.2.0-alpha.3 → 3.0.0-next.0

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

@@ -1,29 +1,33 @@
-import * as React from "react";
-import { useMemo } from "react";
-import {
-  dateTimeToTime,
-  deconstructTimeValues,
-  dateTimeToDate,
-  deconstructValuesFromDateString,
-  fillStringWithPlaceHolders
-} from "../utils/stringHelpers";
-import { convertToPositiveNumberIfPossible } from "../utils/numberHelpers";
-import { monthNames, announcableCardinalDays } from "../utils/constants";
-const useGetDestructuredDateValues = ({
-  date,
-  dateTime,
-  isDateTimeSelector
-}) => {
+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 {
+    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(`${yearNum}`, 4, "0") : "empty year";
-  const announcedDateValues = `${announcedMonth}, ${announcedDay}, ${announcedYear}`;
+  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,
@@ -36,32 +40,34 @@ const useGetDestructuredDateValues = ({
     announcedYear,
     announcedDateValues
   }), [announcedDay, announcedMonth, announcedYear, announcedDateValues, day, dayNum, month, monthNum, year, yearNum]);
-};
-const useGetDestructuredTimeValues = ({
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
+}; // 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);
-  const announcedHours = hoursNum !== -1 ? `${hoursNum}` : "empty hours";
-  const announcedMinutes = minutesNum !== -1 ? `${minutesNum}` : "empty minutes";
-  const announcedMeridiem = meridiem === "PM" ? `post meridiem` : meridiem === "AM" ? "ante meridiem" : "empty meriediem";
-  const announcedTimeValues = `${announcedHours}, ${announcedMinutes}, ${announcedMeridiem}`;
-  return useMemo(() => ({
+  const {
     hours,
     minutes,
-    meridiem,
-    hoursNum,
-    minutesNum,
-    announcedHours,
-    announcedMinutes,
-    announcedMeridiem,
-    announcedTimeValues
-  }), [
+    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,
@@ -71,14 +77,15 @@ const useGetDestructuredTimeValues = ({
     announcedMinutes,
     announcedMeridiem,
     announcedTimeValues
-  ]);
+  }), [hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
 };
-const useGetDestructuredValues = ({
-  date,
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
+const useGetDestructuredValues = _ref3 => {
+  let {
+    date,
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref3;
   const {
     month,
     day,
@@ -130,31 +137,7 @@ const useGetDestructuredValues = ({
     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
+  }), [month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
 };
-//# sourceMappingURL=useGetDestructuredValues.js.map
+
+export { useGetDestructuredDateValues, useGetDestructuredTimeValues, useGetDestructuredValues };

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

@@ -1,8 +1,7 @@
-import * as React from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { defaultProps } from "../ControlledDateTimePickerCTX";
-const useGetDatePickerWithDefaultsProps = (props) => useMemoMergePropsWithDefault(props, defaultProps);
-export {
-  useGetDatePickerWithDefaultsProps
-};
-//# sourceMappingURL=useGetPropsWithDefault.js.map
+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

@@ -1,75 +1,46 @@
-import * as React from "react";
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "../ControlledDateTimePickerTypes";
-import {
-  dateTimeToDate,
-  isValidDateString,
-  dateTimeToTime,
-  isValidTimeString,
-  deconstructValuesFromDateString
-} from "../utils/stringHelpers";
-import { convertToPositiveNumberIfPossible } from "../utils/numberHelpers";
-const PREPEND = `ControlledDateTimePicker:
-  Invalid configuration detected::
-  
-    `;
-const NOT_A_DEFECT = "";
-const INLINE_RECEIVED_PREPEND = `
-
-    Received:`;
-const throwInvalidDateTimeError = (invalidValue) => {
-  throw new Error(`${PREPEND}the "dateTime" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
+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(`${PREPEND}the "date" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${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(`${PREPEND}the "time" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${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(`${PREPEND}you are trying to use a date selector while providing a non-string "date" or providing a non-function to "onDateChange"
-  the full-controlled pattern must be used
-	check https://reactjs.org/docs/forms.html#controlled-components for more informations
-
-  Received:
-    ${date}(${typeof date})
-    ${onDateChange}(${typeof onDateChange})
-  ${NOT_A_DEFECT}`);
+  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(`${PREPEND}you are trying to use a time selector while providing a non-string "time" or providing a non-function to "onTimeChange"
-  the full-controlled pattern must be used
-	check https://reactjs.org/docs/forms.html#controlled-components for more informations
-
-  Received:
-    ${time}(${typeof time})
-    ${onTimeChange}(${typeof onTimeChange})
-  ${NOT_A_DEFECT}`);
+  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(`${PREPEND}you are trying to use a date-time selector while providing a non-string "dateTime" or providing a non-function to "onDateTimeChange"
-  the full-controlled pattern must be used
-	check https://reactjs.org/docs/forms.html#controlled-components for more informations
-
-  Received:
-    ${dateTime}(${typeof dateTime})
-    ${onDateTimeChange}(${typeof onDateTimeChange})
-  ${NOT_A_DEFECT}`);
+  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(`${PREPEND}the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) 
 
-  Received:
-    ${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})
-  ${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(`${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) 
 
-  Received:
-    ${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})
-  ${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 useValidateProps = props => {
   const {
     type,
     dateTime,
@@ -83,14 +54,18 @@ const useValidateProps = (props) => {
   } = 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;
+  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 {
+      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 (monthNum <= 0 || monthNum >= 13 || yearNum <= 0 || yearNum > 9999) throwInvalidEmptyPickerStartingMonthError(emptyPickerStartingMonth);
   }
+
   if (onCalendarOpenFocusedDay) {
     const {
       month: stringMonthVal,
@@ -100,29 +75,23 @@ const useValidateProps = (props) => {
     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);
-  }
+    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));
-  }
+    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);
-  }
+    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);
+    if (typeof time !== 'string' || typeof onTimeChange !== 'function') throwUncontrolledTimeError(time, onTimeChange);else if (!isValidTimeString(time)) throwInvalidTimerror(time);
   }
 };
-export {
-  useValidateProps
-};
-//# sourceMappingURL=useValidateProps.js.map
+
+export { useValidateProps };

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

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

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

@@ -1,28 +1,7 @@
-import * as React from "react";
-import { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from "./ControlledDateTimePicker";
-import { ControlledDateTimePickerDatatestid } from "./ControlledDateTimePickerDatatestid";
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "./ControlledDateTimePickerTypes";
-import { deconstructValuesFromDateString, prependStringWithPlaceHolders } from "./utils/stringHelpers";
-import { getValidationDateTimeStringMetaInfo } from "./utils/dateTimeHelpers";
-import {
-  getValidationDateStringMetaInfo,
-  getDateStringFromDay,
-  getDayFromDateString,
-  getDateValuesFromDate
-} from "./utils/dateHelpers";
-import { getValidationTimeStringMetaInfo } from "./utils/timeHelpers";
-export {
-  CONTROLLED_DATE_TIME_PICKER_TYPES,
-  ControlledDateTimePickerDatatestid,
-  DSControlledDateTimePicker,
-  DSControlledDateTimePickerWithSchema,
-  deconstructValuesFromDateString,
-  getDateStringFromDay,
-  getDateValuesFromDate,
-  getDayFromDateString,
-  getValidationDateStringMetaInfo,
-  getValidationDateTimeStringMetaInfo,
-  getValidationTimeStringMetaInfo,
-  prependStringWithPlaceHolders
-};
-//# sourceMappingURL=index.js.map
+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

@@ -1,14 +1,21 @@
-import * as React from "react";
-import React2 from "react";
-import { CloseMedium } from "@elliemae/ds-icons";
-import { DSIconColors } from "@elliemae/ds-icon";
-import { BUTTON_VARIANT, BUTTON_SIZES } from "@elliemae/ds-button";
-import { StyledClearButton } from "../Styleds";
-import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
-import { useClearButton } from "./useClearButton";
+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__ */ React2.createElement(StyledClearButton, {
+  const {
+    onClearClick,
+    onClearButtonKeyDown,
+    clearButtonRef,
+    withAnyPicker,
+    withClearBtn
+  } = useClearButton();
+  return /*#__PURE__*/_jsx(StyledClearButton, {
     shouldDisplay: withClearBtn,
     "aria-label": "clear selected date",
     buttonType: "icon",
@@ -18,12 +25,10 @@ const ClearButton = () => {
     innerRef: clearButtonRef,
     onClick: onClearClick,
     onKeyDown: onClearButtonKeyDown,
-    withAnyPicker
-  }, /* @__PURE__ */ React2.createElement(CloseMedium, {
+    withAnyPicker: withAnyPicker
+  }, void 0, /*#__PURE__*/_jsx(CloseMedium, {
     color: DSIconColors.PRIMARY
   }));
 };
-export {
-  ClearButton
-};
-//# sourceMappingURL=ClearButton.js.map
+
+export { ClearButton };

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

@@ -1,6 +1,7 @@
-import * as React from "react";
-import { useCallback, useMemo, useContext } from "react";
-import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
+import { useContext, useCallback, useMemo } from 'react';
+import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
+
+/* eslint-disable max-statements */
 const useClearButton = () => {
   const {
     handleClearAll,
@@ -19,46 +20,47 @@ const useClearButton = () => {
     setLatestInteractionRegion
   } = useContext(ControlledDateTimePickerContext);
   const focusFirstRegion = useCallback(() => {
-    if (withAnyInputs)
-      if (isTimeSelector)
-        hourInputRef?.current?.focus?.();
-      else
-        monthInputRef?.current?.focus?.();
+    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) => {
+  const onClearClick = useCallback(e => {
     handleClearAll(e);
-    setLatestInteractionRegion("clear-btn");
+    setLatestInteractionRegion('clear-btn');
     focusFirstRegion();
   }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
   const onHomeKeyDown = useCallback(() => {
     focusFirstRegion();
   }, [focusFirstRegion]);
   const onEndKeyDown = useCallback(() => {
-    if (withAnyPicker)
-      pickerButtonRef?.current?.focus?.();
+    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) {
-      if (isWithTimeInputs)
-        meridiemInputRef?.current?.focus?.();
-      else if (isWithDateInputs)
-        yearInputRef?.current?.focus?.();
+  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
+  return useMemo(() => ({
+    onClearClick,
+    onClearButtonKeyDown,
+    clearButtonRef,
+    withAnyPicker,
+    withClearBtn
+  }), [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]);
 };
-//# sourceMappingURL=useClearButton.js.map
+
+export { useClearButton };