@elliemae/ds-form-date-time-picker 3.12.0-rc.2 → 3.12.0-rc.21

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelIconTrigger.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledIconTriggerButton } from './Styleds';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAA2C;AAC3C,uBAA6B;AAC7B,sBAAgC;AAChC,8BAAiC;AACjC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwC;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,wBAAwB,QAAI,yBAAW,wCAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MACC,cAAY,qCAAqC;AAAA,MACjD,YAAW;AAAA,MACX,MAAM,8BAAa;AAAA,MACnB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAa,6EAAmC,aAAa;AAAA,MAC7D;AAAA,MACA,MAAK;AAAA,MAEL,sDAAC,mCAAgB;AAAA,KACnB;AAAA,IAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB;AAAA,EAC5G;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAA2C;AAC3C,uBAA6B;AAC7B,sBAAgC;AAChC,8BAAiC;AACjC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwC;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,wBAAwB,QAAI,yBAAW,wCAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,6EAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QAEL,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,IAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB;AAAA,EAC5G;AACF;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js

@@ -40,13 +40,16 @@ const TimeWheelWrapper = () => {
   const { isControllerOnly } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   if (isControllerOnly)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popperjs.DSPopperJS, {
-    showPopover: true,
-    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
-    referenceElement,
-    withoutArrow: true,
-    onClickOutside: closeTimePicker,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {})
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_popperjs.DSPopperJS,
+    {
+      showPopover: true,
+      "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
+      referenceElement,
+      withoutArrow: true,
+      onClickOutside: closeTimePicker,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {})
+    }
+  );
 };
 //# sourceMappingURL=TimeWheelWrapper.js.map

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelContent } from './TimeWheelContent';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeTimePicker } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent />;\n  return (\n    <DSPopperJS\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeTimePicker}\n    >\n      <TimeWheelContent />\n    </DSPopperJS>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUQ;AAV/B,mBAAkC;AAClC,yBAA2B;AAC3B,gDAAmD;AACnD,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAE1B,MAAM,mBAAmB,MAAmB;AACjD,QAAM,EAAE,kBAAkB,gBAAgB,QAAI,yBAAW,wCAAgB;AACzE,QAAM,EAAE,iBAAiB,QAAI,yBAAW,kEAA+B;AACvE,MAAI;AAAkB,WAAO,4CAAC,4CAAiB;AAC/C,SACE,4CAAC;AAAA,IACC,aAAW;AAAA,IACX,eAAa,6EAAmC,gBAAgB;AAAA,IAChE;AAAA,IACA,cAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,sDAAC,4CAAiB;AAAA,GACpB;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUQ;AAV/B,mBAAkC;AAClC,yBAA2B;AAC3B,gDAAmD;AACnD,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAE1B,MAAM,mBAAmB,MAAmB;AACjD,QAAM,EAAE,kBAAkB,gBAAgB,QAAI,yBAAW,wCAAgB;AACzE,QAAM,EAAE,iBAAiB,QAAI,yBAAW,kEAA+B;AACvE,MAAI;AAAkB,WAAO,4CAAC,4CAAiB;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,6EAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,sDAAC,4CAAiB;AAAA;AAAA,EACpB;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js

@@ -44,7 +44,8 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
     trackFocusTimewheelCurrMeridiem,
     trackFocusFirstSegment,
     trackFocusMeridiemInput,
-    trackFocusYearInput
+    trackFocusYearInput,
+    trackFocusCalendarMetafocusedDay
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const onHomeKeyDownInsideTimeWheel = (0, import_react.useCallback)(() => {
     if (isWithCalendarToo)
@@ -114,6 +115,9 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
           trackFocusTimewheelCurrMeridiem();
         }
       }
+      if (key === "Tab" && shiftKey && isWithCalendarToo) {
+        trackFocusCalendarMetafocusedDay();
+      }
     },
     [
       handleNextHour,
@@ -124,7 +128,8 @@ const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }) => {
       onHomeKeyDownInsideTimeWheel,
       trackFocusTimewheelCurrHour,
       trackFocusTimewheelCurrMeridiem,
-      trackFocusTimewheelCurrMinute
+      trackFocusTimewheelCurrMinute,
+      trackFocusCalendarMetafocusedDay
     ]
   );
   const handleCurrMinutesOnKeyDown = (0, import_react.useCallback)(

package/dist/cjs/parts/Pickers/TimeWheel/useKeyboardHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/useKeyboardHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nimport type { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic';\ninterface UseKeyboardHandlersArgs {\n  currentDisplayedTimeWheelLogic: ReturnType<typeof useCurrentDisplayedWheelsLogic>;\n}\ninterface KeyboardHandlersT {\n  handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }: UseKeyboardHandlersArgs): KeyboardHandlersT => {\n  const { handlePrevHour, handleNextHour, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMeridiem } =\n    currentDisplayedTimeWheelLogic;\n  const {\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    isWithCalendarToo,\n    isControllerOnly,\n\n    trackFocusCalendarPrevMonth,\n    trackFocusTimewheelCurrHour,\n    trackFocusTimewheelCurrMinute,\n    trackFocusTimewheelCurrMeridiem,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n  } = useContext(ControlledDateTimePickerContext);\n  const onHomeKeyDownInsideTimeWheel = useCallback(() => {\n    if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n    else trackFocusTimewheelCurrHour();\n  }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);\n  const onEndKeyDownInsideTimeWheel = useCallback(() => {\n    trackFocusTimewheelCurrMeridiem();\n  }, [trackFocusTimewheelCurrMeridiem]);\n\n  const onHomeKeyDownTriggerIcon = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDownTriggerIcon();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else if (isWithDateInputs) trackFocusYearInput();\n      }\n    },\n    [\n      isWithDateInputs,\n      isWithTimeInputs,\n      onHomeKeyDownTriggerIcon,\n      trackFocusMeridiemInput,\n      trackFocusYearInput,\n      withAnyInputs,\n    ],\n  );\n\n  const handleCurrHourOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      let didTriggerHourChange = false;\n      if (key === 'ArrowUp') {\n        handlePrevHour(e);\n        didTriggerHourChange = true;\n      }\n      if (key === 'ArrowDown') {\n        handleNextHour(e);\n        didTriggerHourChange = true;\n      }\n      if (key === 'ArrowRight') {\n        trackFocusTimewheelCurrMinute();\n      }\n      if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n      if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n      // ensure the focus is in the correct button after up/down arrow\n      if (didTriggerHourChange) trackFocusTimewheelCurrHour();\n\n      // TAB CYCLE IMPLEMENTATION\n      if (!isControllerOnly)\n        if (key === 'Tab' && shiftKey && !isWithCalendarToo) {\n          e.preventDefault();\n          trackFocusTimewheelCurrMeridiem();\n        }\n    },\n    [\n      handleNextHour,\n      handlePrevHour,\n      isControllerOnly,\n      isWithCalendarToo,\n      onEndKeyDownInsideTimeWheel,\n      onHomeKeyDownInsideTimeWheel,\n      trackFocusTimewheelCurrHour,\n      trackFocusTimewheelCurrMeridiem,\n      trackFocusTimewheelCurrMinute,\n    ],\n  );\n  const handleCurrMinutesOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      let didTriggerMinuteChange = false;\n      if (key === 'ArrowUp') {\n        handlePrevMinute(e);\n        didTriggerMinuteChange = true;\n      }\n      if (key === 'ArrowDown') {\n        handleNextMinute(e);\n        didTriggerMinuteChange = true;\n      }\n      if (key === 'ArrowLeft') {\n        trackFocusTimewheelCurrHour();\n      }\n      if (key === 'ArrowRight') {\n        trackFocusTimewheelCurrMeridiem();\n      }\n      if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n      if (key === 'End') onEndKeyDownInsideTimeWheel();\n      // ensure the focus is in the correct button after up/down arrow\n      if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();\n    },\n    [\n      onHomeKeyDownInsideTimeWheel,\n      onEndKeyDownInsideTimeWheel,\n      handlePrevMinute,\n      handleNextMinute,\n      trackFocusTimewheelCurrHour,\n      trackFocusTimewheelCurrMeridiem,\n      trackFocusTimewheelCurrMinute,\n    ],\n  );\n  const handleCurrMeridiemOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      let didTriggerMeridiemChange = false;\n      if (key === 'ArrowUp') {\n        handleTimeWheelBtnChangeMeridiem('AM', e);\n        didTriggerMeridiemChange = true;\n      }\n      if (key === 'ArrowDown') {\n        handleTimeWheelBtnChangeMeridiem('PM', e);\n        didTriggerMeridiemChange = true;\n      }\n      if (key === 'ArrowLeft') {\n        trackFocusTimewheelCurrMinute();\n      }\n      if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n      if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n      // ensure the focus is in the correct button after up/down arrow\n      if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem();\n\n      // TAB CYCLE IMPLEMENTATION\n      if (!isControllerOnly)\n        if (key === 'Tab' && !shiftKey) {\n          e.preventDefault();\n          if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n          else trackFocusTimewheelCurrHour();\n        }\n    },\n    [\n      handleTimeWheelBtnChangeMeridiem,\n      isControllerOnly,\n      isWithCalendarToo,\n      onEndKeyDownInsideTimeWheel,\n      onHomeKeyDownInsideTimeWheel,\n      trackFocusCalendarPrevMonth,\n      trackFocusTimewheelCurrHour,\n      trackFocusTimewheelCurrMeridiem,\n      trackFocusTimewheelCurrMinute,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      handleCurrHourOnKeyDown,\n      handleCurrMinutesOnKeyDown,\n      handleCurrMeridiemOnKeyDown,\n      handlePickerIconKeyDown,\n    }),\n    [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nimport type { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic';\ninterface UseKeyboardHandlersArgs {\n  currentDisplayedTimeWheelLogic: ReturnType<typeof useCurrentDisplayedWheelsLogic>;\n}\ninterface KeyboardHandlersT {\n  handleCurrHourOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrMinutesOnKeyDown: (e: React.KeyboardEvent) => void;\n  handleCurrMeridiemOnKeyDown: (e: React.KeyboardEvent) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n}\nexport const useKeyboardHandlers = ({ currentDisplayedTimeWheelLogic }: UseKeyboardHandlersArgs): KeyboardHandlersT => {\n  const { handlePrevHour, handleNextHour, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMeridiem } =\n    currentDisplayedTimeWheelLogic;\n  const {\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    isWithCalendarToo,\n    isControllerOnly,\n\n    trackFocusCalendarPrevMonth,\n    trackFocusTimewheelCurrHour,\n    trackFocusTimewheelCurrMinute,\n    trackFocusTimewheelCurrMeridiem,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusCalendarMetafocusedDay,\n  } = useContext(ControlledDateTimePickerContext);\n\n  // const tryToFocusDayRegion = useCallback(() => {\n  //   if (!focusedDay) {\n  //     const newFocusDay = daysArray.find(({ isCurrMonthDay }) => isCurrMonthDay);\n  //     if (newFocusDay) handleFocusMetaDay(newFocusDay);\n  //   }\n  //   trackFocusCalendarMetafocusedDay();\n  // }, [daysArray, focusedDay, handleFocusMetaDay, trackFocusCalendarMetafocusedDay]);\n\n  const onHomeKeyDownInsideTimeWheel = useCallback(() => {\n    if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n    else trackFocusTimewheelCurrHour();\n  }, [isWithCalendarToo, trackFocusCalendarPrevMonth, trackFocusTimewheelCurrHour]);\n  const onEndKeyDownInsideTimeWheel = useCallback(() => {\n    trackFocusTimewheelCurrMeridiem();\n  }, [trackFocusTimewheelCurrMeridiem]);\n\n  const onHomeKeyDownTriggerIcon = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDownTriggerIcon();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else if (isWithDateInputs) trackFocusYearInput();\n      }\n    },\n    [\n      isWithDateInputs,\n      isWithTimeInputs,\n      onHomeKeyDownTriggerIcon,\n      trackFocusMeridiemInput,\n      trackFocusYearInput,\n      withAnyInputs,\n    ],\n  );\n\n  const handleCurrHourOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      let didTriggerHourChange = false;\n      if (key === 'ArrowUp') {\n        handlePrevHour(e);\n        didTriggerHourChange = true;\n      }\n      if (key === 'ArrowDown') {\n        handleNextHour(e);\n        didTriggerHourChange = true;\n      }\n      if (key === 'ArrowRight') {\n        trackFocusTimewheelCurrMinute();\n      }\n      if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n      if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n      // ensure the focus is in the correct button after up/down arrow\n      if (didTriggerHourChange) trackFocusTimewheelCurrHour();\n\n      // TAB CYCLE IMPLEMENTATION\n      if (!isControllerOnly)\n        if (key === 'Tab' && shiftKey && !isWithCalendarToo) {\n          e.preventDefault();\n          trackFocusTimewheelCurrMeridiem();\n        }\n\n      if (key === 'Tab' && shiftKey && isWithCalendarToo) {\n        trackFocusCalendarMetafocusedDay();\n      }\n    },\n    [\n      handleNextHour,\n      handlePrevHour,\n      isControllerOnly,\n      isWithCalendarToo,\n      onEndKeyDownInsideTimeWheel,\n      onHomeKeyDownInsideTimeWheel,\n      trackFocusTimewheelCurrHour,\n      trackFocusTimewheelCurrMeridiem,\n      trackFocusTimewheelCurrMinute,\n      trackFocusCalendarMetafocusedDay,\n    ],\n  );\n  const handleCurrMinutesOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      let didTriggerMinuteChange = false;\n      if (key === 'ArrowUp') {\n        handlePrevMinute(e);\n        didTriggerMinuteChange = true;\n      }\n      if (key === 'ArrowDown') {\n        handleNextMinute(e);\n        didTriggerMinuteChange = true;\n      }\n      if (key === 'ArrowLeft') {\n        trackFocusTimewheelCurrHour();\n      }\n      if (key === 'ArrowRight') {\n        trackFocusTimewheelCurrMeridiem();\n      }\n      if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n      if (key === 'End') onEndKeyDownInsideTimeWheel();\n      // ensure the focus is in the correct button after up/down arrow\n      if (didTriggerMinuteChange) trackFocusTimewheelCurrMinute();\n    },\n    [\n      onHomeKeyDownInsideTimeWheel,\n      onEndKeyDownInsideTimeWheel,\n      handlePrevMinute,\n      handleNextMinute,\n      trackFocusTimewheelCurrHour,\n      trackFocusTimewheelCurrMeridiem,\n      trackFocusTimewheelCurrMinute,\n    ],\n  );\n  const handleCurrMeridiemOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key, shiftKey } = e;\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) e.stopPropagation();\n      let didTriggerMeridiemChange = false;\n      if (key === 'ArrowUp') {\n        handleTimeWheelBtnChangeMeridiem('AM', e);\n        didTriggerMeridiemChange = true;\n      }\n      if (key === 'ArrowDown') {\n        handleTimeWheelBtnChangeMeridiem('PM', e);\n        didTriggerMeridiemChange = true;\n      }\n      if (key === 'ArrowLeft') {\n        trackFocusTimewheelCurrMinute();\n      }\n      if (key === 'Home') onHomeKeyDownInsideTimeWheel();\n      if (key === 'End') onEndKeyDownInsideTimeWheel();\n\n      // ensure the focus is in the correct button after up/down arrow\n      if (didTriggerMeridiemChange) trackFocusTimewheelCurrMeridiem();\n\n      // TAB CYCLE IMPLEMENTATION\n      if (!isControllerOnly)\n        if (key === 'Tab' && !shiftKey) {\n          e.preventDefault();\n          if (isWithCalendarToo) trackFocusCalendarPrevMonth();\n          else trackFocusTimewheelCurrHour();\n        }\n    },\n    [\n      handleTimeWheelBtnChangeMeridiem,\n      isControllerOnly,\n      isWithCalendarToo,\n      onEndKeyDownInsideTimeWheel,\n      onHomeKeyDownInsideTimeWheel,\n      trackFocusCalendarPrevMonth,\n      trackFocusTimewheelCurrHour,\n      trackFocusTimewheelCurrMeridiem,\n      trackFocusTimewheelCurrMinute,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      handleCurrHourOnKeyDown,\n      handleCurrMinutesOnKeyDown,\n      handleCurrMeridiemOnKeyDown,\n      handlePickerIconKeyDown,\n    }),\n    [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handlePickerIconKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Styleds.js

@@ -98,7 +98,8 @@ const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid
 
   border-radius: 2px;
   padding-left: ${({ justPicker }) => justPicker ? "0" : "2px"};
-  padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "0"};
+  padding-right: ${({ withAnyPicker }) => withAnyPicker ? "" : "2px"};
+
   position: relative;
   ${({ theme, disabled }) => disabled ? `background-color: ${theme.colors.neutral[100]};` : ``}
 `;

package/dist/cjs/parts/Styleds.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Styleds.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-align: center;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  :focus {\n    outline: none;\n  }\n  padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n  padding-top: 2px;\n  margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n  padding-bottom: 1px;\n  margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError, disabled }) => {\n    if (hasError) return theme.colors.danger[900];\n    if (disabled) return theme.colors.neutral[400];\n    return theme.colors.neutral[200];\n  }};\n\n  border-radius: 2px;\n  padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n  padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '0')};\n  position: relative;\n  ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 48px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n  position: relative;\n  ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,cAAc,MAAO,gBAAgB,KAAK;AAAA;AAAA,IAE5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGtF,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,oCAAgC,yBAAO,mBAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming';\n\nconst ResettedInput = styled('input', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.INPUT,\n})`\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-align: center;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  :focus {\n    outline: none;\n  }\n  padding-top: 2px;\n`;\n\nexport const StyledSeparator = styled(Grid)`\n  padding-top: 2px;\n  margin: auto;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n  padding-bottom: 1px;\n  margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError, disabled }) => {\n    if (hasError) return theme.colors.danger[900];\n    if (disabled) return theme.colors.neutral[400];\n    return theme.colors.neutral[200];\n  }};\n\n  border-radius: 2px;\n  padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n  padding-right: ${({ withAnyPicker }) => (withAnyPicker ? '' : '2px')};\n\n  position: relative;\n  ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 48px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean }>`\n  position: relative;\n  ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 26px;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAA2B;AAC3B,qBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO;AACzC,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAC1C,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA,mBACvC,CAAC,EAAE,cAAc,MAAO,gBAAgB,KAAK;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,UAAU;AAAA;AAGtF,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,oCAAgC,yBAAO,mBAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKjF,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,wBAAoB,yBAAO,6BAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,+CAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/TimeInputs/HHInput.js

@@ -63,24 +63,27 @@ const HHInput = import_react.default.memo(
       },
       [onChange]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.Styled2DigitsInput, {
-      autoFocus: autoFocusHourInput,
-      onChange: validateOnChange,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      value,
-      ref: (DomElem) => {
-        contextRef.current = DomElem;
-        if (isFocused)
-          DomElem?.focus?.();
-      },
-      placeholder,
-      "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
-      "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
-      disabled,
-      "aria-disabled": disabled
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Styleds.Styled2DigitsInput,
+      {
+        autoFocus: autoFocusHourInput,
+        onChange: validateOnChange,
+        onBlur,
+        onFocus,
+        onKeyDown,
+        value,
+        ref: (DomElem) => {
+          contextRef.current = DomElem;
+          if (isFocused)
+            DomElem?.focus?.();
+        },
+        placeholder,
+        "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
+        "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
+        disabled,
+        "aria-disabled": disabled
+      }
+    );
   }
 );
 //# sourceMappingURL=HHInput.js.map

package/dist/cjs/parts/TimeInputs/HHInput.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/HHInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useCallback } from 'react';\nimport { Styled2DigitsInput } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidHour = (hours: string) => {\n  if (hours === '') return false;\n  const numberOnly = regExpNumbers.test(hours);\n  return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;\n};\ninterface HHInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  autoFocusHourInput: boolean;\n  isFocused: boolean;\n}\nexport const HHInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    autoFocusHourInput,\n    isFocused,\n  }: HHInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidHour(e.target.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        autoFocus={autoFocusHourInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`hours input field ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAAmC;AACnC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAcO,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,EAAE,OAAO,KAAK,GAAG;AACjC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE,4CAAC;AAAA,MACC,WAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,CAAC,YAA8B;AAClC,mBAAW,UAAU;AACrB,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA;AAAA,MACA,cAAY,qBAAqB;AAAA,MACjC,eAAa,6EAAmC,YAAY;AAAA,MAC5D;AAAA,MACA,iBAAe;AAAA,KACjB;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAAmC;AACnC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAcO,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,EAAE,OAAO,KAAK,GAAG;AACjC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,qBAAqB;AAAA,QACjC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/TimeInputs/MeridiemInput.js

@@ -65,23 +65,26 @@ const MeridiemInput = import_react.default.memo(
       },
       [onChange]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.Styled2DigitsInput, {
-      onChange: validateOnChange,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      value,
-      ref: (DomElem) => {
-        contextRef.current = DomElem;
-        if (isFocused)
-          DomElem?.focus?.();
-      },
-      placeholder,
-      "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
-      "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
-      disabled,
-      "aria-disabled": disabled
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Styleds.Styled2DigitsInput,
+      {
+        onChange: validateOnChange,
+        onBlur,
+        onFocus,
+        onKeyDown,
+        value,
+        ref: (DomElem) => {
+          contextRef.current = DomElem;
+          if (isFocused)
+            DomElem?.focus?.();
+        },
+        placeholder,
+        "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
+        "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
+        disabled,
+        "aria-disabled": disabled
+      }
+    );
   }
 );
 //# sourceMappingURL=MeridiemInput.js.map

package/dist/cjs/parts/TimeInputs/MeridiemInput.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/MeridiemInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useCallback } from 'react';\nimport { Styled2DigitsInput } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst validFirstDigits = ['a', 'A', 'p', 'P'];\nconst validSecondDigits = ['m', 'M'];\nconst isInvalidMeridiem = (meridiem: string) => {\n  if (meridiem === '') return false;\n  const [firstDigit, secondDigit] = meridiem.split('');\n  const isValidFirstDigit = (meridiem.length < 1 && !firstDigit) || validFirstDigits.includes(firstDigit);\n  const isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);\n  return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;\n};\n\ninterface MeridiemInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n}\nexport const MeridiemInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n  }: MeridiemInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMeridiem(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`meridiem input field ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDjB;AAnDN,mBAAmC;AACnC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,mBAAmB,CAAC,KAAK,KAAK,KAAK,GAAG;AAC5C,MAAM,oBAAoB,CAAC,KAAK,GAAG;AACnC,MAAM,oBAAoB,CAAC,aAAqB;AAC9C,MAAI,aAAa;AAAI,WAAO;AAC5B,QAAM,CAAC,YAAY,WAAW,IAAI,SAAS,MAAM,EAAE;AACnD,QAAM,oBAAqB,SAAS,SAAS,KAAK,CAAC,cAAe,iBAAiB,SAAS,UAAU;AACtG,QAAM,qBAAqB,CAAC,eAAe,kBAAkB,SAAS,WAAW;AACjF,SAAO,SAAS,SAAS,KAAK,CAAC,qBAAqB,CAAC;AACvD;AAcO,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAyC;AACvC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,kBAAkB,GAAG,QAAQ,KAAK,GAAG;AACvC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE,4CAAC;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,CAAC,YAA8B;AAClC,mBAAW,UAAU;AACrB,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA;AAAA,MACA,cAAY,wBAAwB;AAAA,MACpC,eAAa,6EAAmC,YAAY;AAAA,MAC5D;AAAA,MACA,iBAAe;AAAA,KACjB;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDjB;AAnDN,mBAAmC;AACnC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,mBAAmB,CAAC,KAAK,KAAK,KAAK,GAAG;AAC5C,MAAM,oBAAoB,CAAC,KAAK,GAAG;AACnC,MAAM,oBAAoB,CAAC,aAAqB;AAC9C,MAAI,aAAa;AAAI,WAAO;AAC5B,QAAM,CAAC,YAAY,WAAW,IAAI,SAAS,MAAM,EAAE;AACnD,QAAM,oBAAqB,SAAS,SAAS,KAAK,CAAC,cAAe,iBAAiB,SAAS,UAAU;AACtG,QAAM,qBAAqB,CAAC,eAAe,kBAAkB,SAAS,WAAW;AACjF,SAAO,SAAS,SAAS,KAAK,CAAC,qBAAqB,CAAC;AACvD;AAcO,MAAM,gBAAgB,aAAAA,QAAM;AAAA,EACjC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAyC;AACvC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,kBAAkB,GAAG,QAAQ,KAAK,GAAG;AACvC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,wBAAwB;AAAA,QACpC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/TimeInputs/MinutesInput.js

@@ -62,23 +62,26 @@ const MinutesInput = import_react.default.memo(
       },
       [onChange]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.Styled2DigitsInput, {
-      onChange: validateOnChange,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      value,
-      ref: (DomElem) => {
-        contextRef.current = DomElem;
-        if (isFocused)
-          DomElem?.focus?.();
-      },
-      placeholder,
-      "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
-      "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
-      disabled,
-      "aria-disabled": disabled
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Styleds.Styled2DigitsInput,
+      {
+        onChange: validateOnChange,
+        onBlur,
+        onFocus,
+        onKeyDown,
+        value,
+        ref: (DomElem) => {
+          contextRef.current = DomElem;
+          if (isFocused)
+            DomElem?.focus?.();
+        },
+        placeholder,
+        "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
+        "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
+        disabled,
+        "aria-disabled": disabled
+      }
+    );
   }
 );
 //# sourceMappingURL=MinutesInput.js.map

package/dist/cjs/parts/TimeInputs/MinutesInput.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/MinutesInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { Styled2DigitsInput } from '../Styleds';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMinute = (minutes: string) => {\n  if (minutes === '') return false;\n  const numberOnly = regExpNumbers.test(minutes);\n  return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n}\nexport const MinutesInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n  }: MinutesInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMinute(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`minutes input field ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CjB;AA/CN,mBAAmC;AACnC,gDAAmD;AACnD,qBAAmC;AAGnC,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY;AAAI,WAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAaO,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAwC;AACtC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AACrC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE,4CAAC;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,CAAC,YAA8B;AAClC,mBAAW,UAAU;AACrB,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA;AAAA,MACA,cAAY,uBAAuB;AAAA,MACnC,eAAa,6EAAmC,YAAY;AAAA,MAC5D;AAAA,MACA,iBAAe;AAAA,KACjB;AAAA,EAEJ;AACF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CjB;AA/CN,mBAAmC;AACnC,gDAAmD;AACnD,qBAAmC;AAGnC,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY;AAAI,WAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAaO,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAwC;AACtC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AACrC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,uBAAuB;AAAA,QACnC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/TimeInputs/TimeInputs.js

@@ -66,66 +66,67 @@ const TimeInputs = () => {
     latestInteractionRegion,
     currFocusDescriber
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
-    cols: [
-      import_config.fixedValues.smallInputWidth,
-      import_config.fixedValues.separatorWidth,
-      import_config.fixedValues.smallInputWidth,
-      import_config.fixedValues.separatorWidth,
-      import_config.fixedValues.smallInputWidth
-    ],
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HHInput.HHInput, {
-          value: hours,
-          onChange: onHoursChange,
-          onBlur: onHoursBlur,
-          onFocus: onHoursFocus,
-          onKeyDown: onHoursKeyDown,
-          contextRef: hourInputRef,
-          placeholder: "HH",
-          ariaCurrentValueForInputs,
-          autoFocusHourInput,
-          disabled,
-          isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "hour-input"
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledColonSeparator, {
-        alignItems: "center",
-        children: ":"
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MinutesInput.MinutesInput, {
-          value: minutes,
-          onChange: onMinutesChange,
-          onBlur: onMinutesBlur,
-          onFocus: onMinutesFocus,
-          onKeyDown: onMinutesKeyDown,
-          contextRef: minutesInputRef,
-          placeholder: "MM",
-          ariaCurrentValueForInputs,
-          disabled,
-          isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "minute-input"
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, {
-        children: " "
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeridiemInput.MeridiemInput, {
-          value: meridiem,
-          onChange: onMeridiemChange,
-          onBlur: onMeridiemBlur,
-          onFocus: onMeridiemFocus,
-          onKeyDown: onMeridiemKeyDown,
-          contextRef: meridiemInputRef,
-          placeholder: "AM",
-          ariaCurrentValueForInputs,
-          disabled,
-          isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "meridiem-input"
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ds_grid.Grid,
+    {
+      cols: [
+        import_config.fixedValues.smallInputWidth,
+        import_config.fixedValues.separatorWidth,
+        import_config.fixedValues.smallInputWidth,
+        import_config.fixedValues.separatorWidth,
+        import_config.fixedValues.smallInputWidth
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_HHInput.HHInput,
+          {
+            value: hours,
+            onChange: onHoursChange,
+            onBlur: onHoursBlur,
+            onFocus: onHoursFocus,
+            onKeyDown: onHoursKeyDown,
+            contextRef: hourInputRef,
+            placeholder: "HH",
+            ariaCurrentValueForInputs,
+            autoFocusHourInput,
+            disabled,
+            isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "hour-input"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledColonSeparator, { alignItems: "center", children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MinutesInput.MinutesInput,
+          {
+            value: minutes,
+            onChange: onMinutesChange,
+            onBlur: onMinutesBlur,
+            onFocus: onMinutesFocus,
+            onKeyDown: onMinutesKeyDown,
+            contextRef: minutesInputRef,
+            placeholder: "MM",
+            ariaCurrentValueForInputs,
+            disabled,
+            isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "minute-input"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, { children: " " }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledFocusWithIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MeridiemInput.MeridiemInput,
+          {
+            value: meridiem,
+            onChange: onMeridiemChange,
+            onBlur: onMeridiemBlur,
+            onFocus: onMeridiemFocus,
+            onKeyDown: onMeridiemKeyDown,
+            contextRef: meridiemInputRef,
+            placeholder: "AM",
+            ariaCurrentValueForInputs,
+            disabled,
+            isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "meridiem-input"
+          }
+        ) })
+      ]
+    }
+  );
 };
 //# sourceMappingURL=TimeInputs.js.map

package/dist/cjs/parts/TimeInputs/TimeInputs.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/TimeInputs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { HHInput } from './HHInput';\nimport { MinutesInput } from './MinutesInput';\n// import { SSInput } from './SSInput';\nimport { MeridiemInput } from './MeridiemInput';\nimport { useTimeInputs } from './useTimeInputs';\nimport { fixedValues } from '../config';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds';\n\nexport const TimeInputs = (): JSX.Element => {\n  const {\n    autoFocusHourInput,\n    disabled,\n    onHoursChange,\n    onMinutesChange,\n    onMeridiemChange,\n    onHoursBlur,\n    onMinutesBlur,\n    onMeridiemBlur,\n    onHoursFocus,\n    onMeridiemFocus,\n    onMinutesFocus,\n    onHoursKeyDown,\n    onMinutesKeyDown,\n    onMeridiemKeyDown,\n  } = useTimeInputs();\n\n  // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n  const {\n    hours,\n    minutes,\n    meridiem,\n    hourInputRef,\n    minutesInputRef,\n    meridiemInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <HHInput\n          value={hours}\n          onChange={onHoursChange}\n          onBlur={onHoursBlur}\n          onFocus={onHoursFocus}\n          onKeyDown={onHoursKeyDown}\n          contextRef={hourInputRef}\n          placeholder=\"HH\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          autoFocusHourInput={autoFocusHourInput}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledColonSeparator alignItems=\"center\">:</StyledColonSeparator>\n      <StyledFocusWithIn>\n        <MinutesInput\n          value={minutes}\n          onChange={onMinutesChange}\n          onBlur={onMinutesBlur}\n          onFocus={onMinutesFocus}\n          onKeyDown={onMinutesKeyDown}\n          contextRef={minutesInputRef}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator> </StyledSeparator>\n      <StyledFocusWithIn>\n        <MeridiemInput\n          value={meridiem}\n          onChange={onMeridiemChange}\n          onBlur={onMeridiemBlur}\n          onFocus={onMeridiemFocus}\n          onKeyDown={onMeridiemKeyDown}\n          contextRef={meridiemInputRef}\n          placeholder=\"AM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,0BAA6B;AAE7B,2BAA8B;AAC9B,2BAA8B;AAC9B,oBAA4B;AAC5B,qBAAyE;AAElE,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,SACE,6CAAC;AAAA,IACC,MAAM;AAAA,MACJ,0BAAY;AAAA,MACZ,0BAAY;AAAA,MACZ,0BAAY;AAAA,MACZ,0BAAY;AAAA,MACZ,0BAAY;AAAA,IACd;AAAA,IAEA;AAAA,kDAAC;AAAA,QACC,sDAAC;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,SACjF;AAAA,OACF;AAAA,MACA,4CAAC;AAAA,QAAqB,YAAW;AAAA,QAAS;AAAA,OAAC;AAAA,MAC3C,4CAAC;AAAA,QACC,sDAAC;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,SACjF;AAAA,OACF;AAAA,MACA,4CAAC;AAAA,QAAgB;AAAA,OAAC;AAAA,MAClB,4CAAC;AAAA,QACC,sDAAC;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,aAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,SACjF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,0BAA6B;AAE7B,2BAA8B;AAC9B,2BAA8B;AAC9B,oBAA4B;AAC5B,qBAAyE;AAElE,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA;AAAA,QACjF,GACF;AAAA,QACA,4CAAC,uCAAqB,YAAW,UAAS,eAAC;AAAA,QAC3C,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA;AAAA,QACjF,GACF;AAAA,QACA,4CAAC,kCAAgB,eAAC;AAAA,QAClB,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA;AAAA,QACjF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/ControlledDateTimePicker.js

@@ -8,10 +8,7 @@ import { ControlledDateTimePickerContent } from "./parts/ControlledDateTimePicke
 import { ControlledDateTimePickerContext } from "./ControlledDateTimePickerCTX";
 const DSControlledDateTimePicker = (props) => {
   const ctx = useControlledDateTimePicker(props);
-  return /* @__PURE__ */ jsx(ControlledDateTimePickerContext.Provider, {
-    value: ctx,
-    children: /* @__PURE__ */ jsx(ControlledDateTimePickerContent, {})
-  });
+  return /* @__PURE__ */ jsx(ControlledDateTimePickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(ControlledDateTimePickerContent, {}) });
 };
 DSControlledDateTimePicker.displayName = DSControlledDateTimePickerName;
 const DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);

package/dist/esm/ControlledDateTimePicker.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledDateTimePicker.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { DSControlledDateTimePickerName } from './exported-related/theming';\nimport { propTypes } from './propTypes';\nimport { useControlledDateTimePicker } from './config/useControlledDateTimePicker';\nimport { ControlledDateTimePickerContent } from './parts/ControlledDateTimePickerContent';\nimport { ControlledDateTimePickerContext } from './ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerT } from './propTypes';\n\nconst DSControlledDateTimePicker = (props: DSControlledDateTimePickerT.Props): JSX.Element => {\n  const ctx = useControlledDateTimePicker(props);\n  return (\n    <ControlledDateTimePickerContext.Provider value={ctx}>\n      <ControlledDateTimePickerContent />\n    </ControlledDateTimePickerContext.Provider>\n  );\n};\n\nDSControlledDateTimePicker.displayName = DSControlledDateTimePickerName;\nconst DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);\nDSControlledDateTimePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcjB;AAZN,SAAS,gBAAgB;AACzB,SAAS,sCAAsC;AAC/C,SAAS,iBAAiB;AAC1B,SAAS,mCAAmC;AAC5C,SAAS,uCAAuC;AAChD,SAAS,uCAAuC;AAGhD,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,QAAM,MAAM,4BAA4B,KAAK;AAC7C,SACE,oBAAC,gCAAgC,UAAhC;AAAA,IAAyC,OAAO;AAAA,IAC/C,8BAAC,mCAAgC;AAAA,GACnC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
+  "mappings": "AAAA,YAAY,WAAW;ACcjB;AAZN,SAAS,gBAAgB;AACzB,SAAS,sCAAsC;AAC/C,SAAS,iBAAiB;AAC1B,SAAS,mCAAmC;AAC5C,SAAS,uCAAuC;AAChD,SAAS,uCAAuC;AAGhD,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,QAAM,MAAM,4BAA4B,KAAK;AAC7C,SACE,oBAAC,gCAAgC,UAAhC,EAAyC,OAAO,KAC/C,8BAAC,mCAAgC,GACnC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
   "names": []
 }

package/dist/esm/config/useGlobalKeyHandlers.js

@@ -3,7 +3,7 @@ import { useCallback, useMemo } from "react";
 import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from "../utils/dateHelpers";
 import { getValidationTimeStringMetaInfo } from "../utils/timeHelpers";
 import { deconstructValuesFromDateString, deconstructValuesFromTimeString } from "../utils/stringHelpers";
-const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers }) => {
+const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }) => {
   const {
     getIsOutOfRangeDay,
     getIsDisabledDay,
@@ -16,7 +16,8 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
     appOnMeridiemChange
   } = propsBasedOnType;
   const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;
-  const { trackFocusLastSegment } = focusTrackers;
+  const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;
+  const { withAnyPicker, shouldPreserveClearableSpace } = flags;
   const onFillWithCurrentDateKeys = useCallback(
     (e, metaInfo = { isAutomaticFillTrigger: true }) => {
       const now = new Date();
@@ -37,7 +38,10 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
       appOnMinuteChange(minutes, e, metaInfo);
       appOnMeridiemChange(meridiem, e, metaInfo);
       handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
-      trackFocusLastSegment();
+      if (shouldPreserveClearableSpace && !withAnyPicker)
+        trackFocusClearBtn();
+      else
+        trackFocusLastSegment();
     },
     [
       appOnDayChange,
@@ -50,7 +54,10 @@ const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers
       getIsDisabledTime,
       getIsOutOfRangeDay,
       handleChangeComposedDateTimeString,
-      trackFocusLastSegment
+      shouldPreserveClearableSpace,
+      trackFocusClearBtn,
+      trackFocusLastSegment,
+      withAnyPicker
     ]
   );
   const onGlobalKeyDown = useCallback(