@elliemae/ds-controlled-form 2.4.1-rc.6 → 2.4.1

package/esm/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js

@@ -10,6 +10,7 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
@@ -22,22 +23,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MinutesList = () => {
   const {
+    currHourNum,
     currMinuteNum,
-    hours,
-    minutes,
-    meridiem,
+    currMeridiem,
     visibleMinutes,
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
     handlePrevMinuteBtnOnKeyDown,
     handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
+    handleNextMinuteBtnOnKeyDown
+  } = useContext(TimeWheelContext);
+  const {
     prevMinutesBtnRef,
     currMinutesBtnRef,
     nextMinutesBtnRef,
-    getIsDisabledTime
-  } = useContext(TimeWheelContext);
+    getIsDisabledTime,
+    minutes
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
@@ -48,9 +51,9 @@ const MinutesList = () => {
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
-    const key = "timewheel-minutes-".concat(minutesString);
+    const key = "timewheel-minutes-".concat(minutesString || '');
     if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
+    const currMinutesTimeString = "".concat(currHourNum, ":").concat(minutesString, " ").concat(currMeridiem);
     const isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -59,23 +62,25 @@ const MinutesList = () => {
       onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currMinutesBtnRef : undefined
     };
+    const styledProps = {
+      isCurrentListItem,
+      isDisabled
+    };
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem,
       selected: convertToPositiveNumberIfPossible(minutesString) === currMinuteNum
-    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
-      isCurrentListItem: isCurrentListItem,
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread(_objectSpread({}, styledProps), {}, {
       "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
       "aria-label": "".concat(minutesString, " minutes"),
       "aria-disabled": isDisabled,
-      isDisabled: isDisabled,
       buttonType: "raw",
       size: "m",
       onClick: e => handleTimeWheelBtnChangeMinutes(minutesString, e),
       tabIndex: tabIndex,
       role: "spinbutton",
-      "aria-valuemax": "59",
-      "aria-valuemin": "0",
+      "aria-valuemax": 59,
+      "aria-valuemin": 0,
       "aria-valuenow": currMinuteNum,
       "aria-valuetext": "".concat(minutesString, " minutes")
     }, btnProps), {}, {

package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js

@@ -4,10 +4,10 @@ import { TimeWheelIconTrigger } from './TimeWheelIconTrigger.js';
 import { TimeWheelWrapper } from './TimeWheelWrapper.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { useConfigTimePickerCTX } from './useConfigTimePickerCTX.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var _TimeWheelIconTrigger, _TimeWheelWrapper;
-
+var _TimeWheelIconTrigger, _TimeWheelWrapper, _WrappedTimeWheelCont;
 const WrappedTimeWheelContext = _ref => {
   let {
     children
@@ -18,19 +18,14 @@ const WrappedTimeWheelContext = _ref => {
   }, void 0, children);
 };
 
-const WrapWithTimeWheelContext = Component => {
-  var _WrappedTimeWheelCont;
-
-  return () => _WrappedTimeWheelCont || (_WrappedTimeWheelCont = /*#__PURE__*/_jsx(WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx(Component, {})));
-}; // we use the HoC to be able to use the useContext and be sure it's correctly initialized
-// the HoC is Reused in CalendarWithTimeWheel
-
-const TimeWheel = WrapWithTimeWheelContext(() => {
+const TimeWheelContent = () => {
   const {
     showTimePicker,
-    isControllerOnly,
     handleMenuWrapperKeyDown
   } = useContext(TimeWheelContext);
+  const {
+    isControllerOnly
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [isControllerOnly ? null : _TimeWheelIconTrigger || (_TimeWheelIconTrigger = /*#__PURE__*/_jsx(TimeWheelIconTrigger, {})), isControllerOnly || showTimePicker ? /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/_jsx("div", {
@@ -38,6 +33,9 @@ const TimeWheel = WrapWithTimeWheelContext(() => {
       }, void 0, _TimeWheelWrapper || (_TimeWheelWrapper = /*#__PURE__*/_jsx(TimeWheelWrapper, {})))
     }) : null]
   });
-});
+}; // we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized
+
+
+const TimeWheel = () => _WrappedTimeWheelCont || (_WrappedTimeWheelCont = /*#__PURE__*/_jsx(WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx(TimeWheelContent, {})));
 
-export { TimeWheel, WrapWithTimeWheelContext };
+export { TimeWheel, WrappedTimeWheelContext };

package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js

@@ -1,6 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext } from 'react';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelsLegend, StyledTimePickerWheelWrapper } from './Styleds.js';
 import { HoursList } from './HoursList.js';
 import { MinutesList } from './MinutesList.js';
@@ -16,9 +17,11 @@ const TimeWheelContent = /*#__PURE__*/React.memo(_ref => {
   const {
     hours,
     minutes,
-    meridiem,
-    isControllerOnly
+    meridiem
   } = useContext(TimeWheelContext);
+  const {
+    isControllerOnly
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(StyledTimePickerContainer, {
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,

package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js

@@ -1,71 +1,7 @@
-import { createRef, createContext } from 'react';
+import { createContext } from 'react';
 
 /* eslint-disable @typescript-eslint/indent */
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
-const defaultTimePickerContext = {
-  ariaCurrentValueForInputs: '',
-  tempTimeString: '',
-  showTimePicker: false,
-  setShowTimePicker: noop,
-  setPopperElement: noop,
-  setArrowElement: noop,
-  usePopperHelpers: null,
-  handleToggleTimePicker: noop,
-  handleSetTriggerRef: noop,
-  handleMenuWrapperKeyDown: noop,
-  currHourNum: 1,
-  hours: '01',
-  visibleHours: [''],
-  handlePrevHour: noop,
-  handleNextHour: noop,
-  handleTimeWheelBtnChangeHours: noop,
-  currMinuteNum: 1,
-  minutes: '00',
-  visibleMinutes: [''],
-  handlePrevMinute: noop,
-  handleNextMinute: noop,
-  handleTimeWheelBtnChangeMinutes: noop,
-  // currSecondNum: 1,
-  // seconds: '00',
-  // visibleSeconds: [''],
-  // handlePrevSecond: noop,
-  // handleNextSecond: noop,
-  // handleTimeWheelBtnChangeSeconds: noop,
-  meridiem: 'AM',
-  handleTimeWheelBtnChangeMeridiem: noop,
-  isControllerOnly: false,
-  autoFocusHourTimeWheel: false,
-  handlePrevHourBtnOnKeyDown: noop,
-  handleCurrHourOnKeyDown: noop,
-  handleNextHourBtnOnKeyDown: noop,
-  handlePrevMinuteBtnOnKeyDown: noop,
-  handleCurrMinutesOnKeyDown: noop,
-  handleNextMinuteBtnOnKeyDown: noop,
-  // handlePrevSecondBtnOnKeyDown: noop,
-  // handleCurrSecondsOnKeyDown: noop,
-  // handleNextSecondBtnOnKeyDown: noop,
-  handlePrevMeridiemBtnOnKeyDown: noop,
-  handleCurrMeridiemOnKeyDown: noop,
-  handleNextMeridiemBtnOnKeyDown: noop,
-  handlePickerIconKeyDown: noop,
-  prevHourBtnRef: /*#__PURE__*/createRef(),
-  currHourBtnRef: /*#__PURE__*/createRef(),
-  nextHourBtnRef: /*#__PURE__*/createRef(),
-  prevMinutesBtnRef: /*#__PURE__*/createRef(),
-  currMinutesBtnRef: /*#__PURE__*/createRef(),
-  nextMinutesBtnRef: /*#__PURE__*/createRef(),
-  // prevSecondsBtnRef: createRef<HTMLButtonElement>(),
-  // currSecondsBtnRef: createRef<HTMLButtonElement>(),
-  // nextSecondsBtnRef: createRef<HTMLButtonElement>(),
-  prevMeridiemBtnRef: /*#__PURE__*/createRef(),
-  currMeridiemBtnRef: /*#__PURE__*/createRef(),
-  nextMeridiemBtnRef: /*#__PURE__*/createRef(),
-  getIsDisabledTime: () => false,
-  disabled: false
-};
+const defaultTimePickerContext = {};
 /** Context for cross component communication */
 
 const TimeWheelContext = /*#__PURE__*/createContext(defaultTimePickerContext);

package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -4,6 +4,7 @@ import { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';
 import { RecentDocuments } from '@elliemae/ds-icons';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 
 var _RecentDocuments;
 // this is particularly useful due to how usePopper needs to check the references
@@ -13,10 +14,14 @@ const TimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleTimePicker,
-    handlePickerIconKeyDown,
-    ariaCurrentValueForInputs,
-    disabled
+    handlePickerIconKeyDown
   } = useContext(TimeWheelContext);
+  const {
+    props: {
+      disabled
+    },
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
   return useMemo(() => /*#__PURE__*/_jsx(DSButtonV2, {
     "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",

package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js

@@ -7,6 +7,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { TimeWheelContent } from './TimeWheelContent.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -23,9 +24,11 @@ const TimeWheelWrapper = () => {
     usePopperHelpers: {
       styles,
       attributes
-    },
-    isControllerOnly
+    }
   } = useContext(TimeWheelContext);
+  const {
+    isControllerOnly
+  } = useContext(ControlledDateTimePickerContext);
   if (isControllerOnly) return _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx(TimeWheelContent, {
     showShadow: true
   }));

package/esm/date-time-picker/parts/Pickers/TimeWheel/useConfigTimePickerCTX.js

@@ -1,126 +1,24 @@
-import { useContext, useMemo } from 'react';
-import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo } from 'react';
 import { usePopperTriggerLogic } from './usePopperTriggerLogic.js';
 import { useCurrentDisplayedWheelsLogic } from './useCurrentDisplayedWheelsLogic.js';
 import { useKeyboardHandlers } from './useKeyboardHandlers.js';
 
-/* eslint-disable max-statements */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useConfigTimePickerCTX = () => {
-  const {
-    props: {
-      minutesInterval,
-      getIsDisabledTime,
-      disabled
-    },
-    tempTimeString,
-    prevHourBtnRef,
-    currHourBtnRef,
-    nextHourBtnRef,
-    prevMinutesBtnRef,
-    currMinutesBtnRef,
-    nextMinutesBtnRef,
-    prevMeridiemBtnRef,
-    currMeridiemBtnRef,
-    nextMeridiemBtnRef,
-    isControllerOnly,
-    autoFocusHourTimeWheel,
-    ariaCurrentValueForInputs
-  } = useContext(ControlledDateTimePickerContext);
-  const {
-    currHourNum,
-    hours,
-    visibleHours,
-    handlePrevHour,
-    handleNextHour,
-    handleTimeWheelBtnChangeHours,
-    currMinuteNum,
-    minutes,
-    visibleMinutes,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMinutes,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem
-  } = useCurrentDisplayedWheelsLogic({
-    minutesInterval
-  });
-  const {
-    showTimePicker,
-    setShowTimePicker,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleTimePicker,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown
-  } = usePopperTriggerLogic();
-  const {
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
-    handlePickerIconKeyDown
-  } = useKeyboardHandlers({
-    handlePrevHour,
-    handleNextHour,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMeridiem
+  const currentDisplayedTimeWheelLogic = useCurrentDisplayedWheelsLogic();
+  const popperLogic = usePopperTriggerLogic();
+  const keyboardHandlers = useKeyboardHandlers({
+    currentDisplayedTimeWheelLogic
   });
-  return useMemo(() => ({
-    tempTimeString,
-    isControllerOnly,
-    autoFocusHourTimeWheel,
-    showTimePicker,
-    setShowTimePicker,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleTimePicker,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown,
-    currHourNum,
-    hours,
-    visibleHours,
-    handlePrevHour,
-    handleNextHour,
-    handleTimeWheelBtnChangeHours,
-    currMinuteNum,
-    minutes,
-    visibleMinutes,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMinutes,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem,
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
-    handlePickerIconKeyDown,
-    prevHourBtnRef,
-    currHourBtnRef,
-    nextHourBtnRef,
-    prevMinutesBtnRef,
-    currMinutesBtnRef,
-    nextMinutesBtnRef,
-    prevMeridiemBtnRef,
-    currMeridiemBtnRef,
-    nextMeridiemBtnRef,
-    getIsDisabledTime,
-    ariaCurrentValueForInputs,
-    disabled
-  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime, ariaCurrentValueForInputs, disabled]);
+  return useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, currentDisplayedTimeWheelLogic), popperLogic), keyboardHandlers), [currentDisplayedTimeWheelLogic, popperLogic, keyboardHandlers]);
 };
 
 export { useConfigTimePickerCTX };

package/esm/date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js

@@ -1,9 +1,10 @@
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import { useMemo, useCallback } from 'react';
+import { useContext, useMemo, useCallback } from 'react';
 import { useTimeInputs } from '../../TimeInputs/useTimeInputs.js';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
-import { prependStringWithPlaceHolders } from '../../../utils/stringHelpers.js';
+import { deconstructValuesFromTimeString, prependStringWithPlaceHolders } from '../../../utils/stringHelpers.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 
 const totalHoursList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
 const hoursInterval = 1; // using this just to unify the logic between how hours and minutes are handled
@@ -16,78 +17,75 @@ const getTotalMinuteListWithStep = function () {
   return new Array(length).fill('_').map((_v, i) => prependStringWithPlaceHolders("".concat(i * step), 2));
 };
 
-const useCurrentDisplayedWheelsLogic = _ref => {
-  let {
-    minutesInterval
-  } = _ref;
+const useCurrentDisplayedWheelsLogic = () => {
   const {
+    minutesInterval,
+    onTimeWheelOpenStartingTime,
     hours,
     minutes,
-    // seconds,
-    meridiem = 'AM',
+    meridiem
+  } = useContext(ControlledDateTimePickerContext);
+  const {
     handleChangeHours,
     handleChangeMinutes,
-    // handleChangeSeconds,
     handleChangeMeridiem
   } = useTimeInputs();
+  const {
+    startingHours,
+    startingMinutes,
+    startingMeridiem
+  } = useMemo(() => {
+    const startingVals = deconstructValuesFromTimeString(onTimeWheelOpenStartingTime);
+    return {
+      startingHours: startingVals.hours,
+      startingMinutes: startingVals.minutes,
+      startingMeridiem: startingVals.meridiem
+    };
+  }, [onTimeWheelOpenStartingTime]);
   const currHourNum = useMemo(() => {
     const hoursAsNum = convertToPositiveNumberIfPossible(hours);
-    if (hoursAsNum === -1) return 1;
-    return hoursAsNum;
-  }, [hours]);
+
+    if (hours && hoursAsNum !== -1) {
+      return hoursAsNum;
+    }
+
+    const startingHoursAsNum = convertToPositiveNumberIfPossible(startingHours);
+    if (startingHoursAsNum === -1) return 1;
+    return startingHoursAsNum;
+  }, [hours, startingHours]);
   const currMinuteNum = useMemo(() => {
     const minutesAsNum = convertToPositiveNumberIfPossible(minutes);
-    if (minutesAsNum === -1) return 0;
-    return minutesAsNum;
-  }, [minutes]);
+
+    if (minutes && minutesAsNum !== -1) {
+      return minutesAsNum;
+    }
+
+    const startingMinutesAsNum = convertToPositiveNumberIfPossible(startingMinutes);
+    if (startingMinutesAsNum === -1) return 0;
+    return startingMinutesAsNum;
+  }, [minutes, startingMinutes]);
+  const currMeridiem = useMemo(() => {
+    if (meridiem !== '') return meridiem;
+    if (startingMeridiem !== '') return startingMeridiem;
+    return 'AM';
+  }, [meridiem, startingMeridiem]);
   const totalMinutesList = useMemo(() => getTotalMinuteListWithStep(minutesInterval), [minutesInterval]);
   const currMinuteIndex = useMemo(() => Math.floor(currMinuteNum / minutesInterval), [currMinuteNum, minutesInterval]);
-  const currHoursIndex = useMemo(() => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset, [currHourNum]); // const currSecondNum = useMemo(() => {
-  //   const secondsAsNum = convertToPositiveNumberIfPossible(seconds);
-  //   if (secondsAsNum === -1) return 0;
-  //   return secondsAsNum;
-  // }, [seconds]);
-
+  const currHoursIndex = useMemo(() => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset, [currHourNum]);
   const visibleHours = useMemo(() => {
-    const newHours = []; // if (currHoursIndex >= 2) newHours.push(totalHoursList[currHoursIndex - 2]);
-    // else newHours.push(null);
-
+    const newHours = [];
     if (currHoursIndex >= 1) newHours.push(totalHoursList[currHoursIndex - 1]);else newHours.push(null);
     newHours.push(totalHoursList[currHoursIndex]);
-    if (currHoursIndex <= 11) newHours.push(totalHoursList[currHoursIndex + 1]);else newHours.push(null); // if (currHoursIndex <= 10) newHours.push(totalHoursList[currHoursIndex + 2]);
-    // else newHours.push(null);
-
+    if (currHoursIndex <= 11) newHours.push(totalHoursList[currHoursIndex + 1]);else newHours.push(null);
     return newHours;
   }, [currHoursIndex]);
   const visibleMinutes = useMemo(() => {
-    const newMinutes = []; // if (currMinuteIndex >= 2)
-    //   newMinutes.push(totalMinutesList[currMinuteIndex - 2]);
-    // else newMinutes.push(null);
-
+    const newMinutes = [];
     if (currMinuteIndex >= 1) newMinutes.push(totalMinutesList[currMinuteIndex - 1]);else newMinutes.push(null);
     newMinutes.push(totalMinutesList[currMinuteIndex]);
-    if (currMinuteIndex < totalMinutesList.length) newMinutes.push(totalMinutesList[currMinuteIndex + 1]);else newMinutes.push(null); // if (currMinuteIndex < totalMinutesList.length -1)
-    //   newMinutes.push(totalMinutesList[currMinuteIndex + 2]);
-    // else newMinutes.push(null);
-
+    if (currMinuteIndex < totalMinutesList.length) newMinutes.push(totalMinutesList[currMinuteIndex + 1]);else newMinutes.push(null);
     return newMinutes;
-  }, [currMinuteIndex, totalMinutesList]); // const visibleSeconds = useMemo(() => {
-  //   const newSeconds = [];
-  //   if (currSecondNum >= 3)
-  //     newSeconds.push(totalMinutesList[currSecondNum - 3]);
-  //   else newSeconds.push(null);
-  //   if (currSecondNum >= 2)
-  //     newSeconds.push(totalMinutesList[currSecondNum - 2]);
-  //   else newSeconds.push(null);
-  //   newSeconds.push(totalMinutesList[currSecondNum - 1]);
-  //   if (currSecondNum <= 59) newSeconds.push(totalMinutesList[currSecondNum]);
-  //   else newSeconds.push(null);
-  //   if (currSecondNum <= 58)
-  //     newSeconds.push(totalMinutesList[currSecondNum + 1]);
-  //   else newSeconds.push(null);
-  //   return newSeconds;
-  // }, [currSecondNum]);
-
+  }, [currMinuteIndex, totalMinutesList]);
   const handleTimeWheelBtnChangeHours = useCallback((newHours, e) => {
     handleChangeHours(newHours, e);
   }, [handleChangeHours]);
@@ -113,64 +111,24 @@ const useCurrentDisplayedWheelsLogic = _ref => {
   }, [handleChangeCurrMinute, minutesInterval]);
   const handleNextMinute = useCallback(e => {
     handleChangeCurrMinute(minutesInterval, e);
-  }, [handleChangeCurrMinute, minutesInterval]); // const handleTimeWheelBtnChangeSeconds = useCallback(
-  //   (newSeconds, e) => {
-  //     handleChangeSeconds(newSeconds, e);
-  //   },
-  //   [handleChangeSeconds],
-  // );
-  // const handleChangeCurrSecond = useCallback(
-  //   (offset, e) => {
-  //     const newS = currSecondNum + offset;
-  //     if (newS >= 0 && newS <= 59)
-  //       handleChangeSeconds(prependStringWithPlaceHolders(`${newS}`, 2), e);
-  //   },
-  //   [currSecondNum, handleChangeSeconds],
-  // );
-  // const handlePrevSecond = useCallback(
-  //   (e) => {
-  //     handleChangeCurrSecond(-1, e);
-  //   },
-  //   [handleChangeCurrSecond],
-  // );
-  // const handleNextSecond = useCallback(
-  //   (e) => {
-  //     handleChangeCurrSecond(1, e);
-  //   },
-  //   [handleChangeCurrSecond],
-  // );
-
+  }, [handleChangeCurrMinute, minutesInterval]);
   const handleTimeWheelBtnChangeMeridiem = useCallback((newMeridiem, e) => {
     handleChangeMeridiem(newMeridiem, e);
   }, [handleChangeMeridiem]);
   return useMemo(() => ({
     currHourNum,
-    hours,
     visibleHours,
     handlePrevHour,
     handleNextHour,
     handleTimeWheelBtnChangeHours,
     currMinuteNum,
-    minutes,
     visibleMinutes,
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
-    // currSecondNum,
-    // seconds,
-    // visibleSeconds,
-    // handlePrevSecond,
-    // handleNextSecond,
-    // handleTimeWheelBtnChangeSeconds,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem
-  }), [currHourNum, currMinuteNum, // currSecondNum,
-  handleNextHour, handleNextMinute, // handleNextSecond,
-  handlePrevHour, handlePrevMinute, // handlePrevSecond,
-  handleTimeWheelBtnChangeHours, handleTimeWheelBtnChangeMeridiem, handleTimeWheelBtnChangeMinutes, // handleTimeWheelBtnChangeSeconds,
-  hours, meridiem, minutes, // seconds,
-  visibleHours, visibleMinutes // visibleSeconds,
-  ]);
+    handleTimeWheelBtnChangeMeridiem,
+    currMeridiem
+  }), [currHourNum, currMinuteNum, currMeridiem, handleNextHour, handleNextMinute, handlePrevHour, handlePrevMinute, handleTimeWheelBtnChangeHours, handleTimeWheelBtnChangeMeridiem, handleTimeWheelBtnChangeMinutes, visibleHours, visibleMinutes]);
 };
 
 export { useCurrentDisplayedWheelsLogic };

package/esm/date-time-picker/parts/Pickers/TimeWheel/useKeyboardHandlers.js

@@ -5,12 +5,15 @@ import { homeEndKeys, homeEndAllArrowKeys } from '../../../utils/constants.js';
 /* eslint-disable @typescript-eslint/indent */
 const useKeyboardHandlers = _ref => {
   let {
+    currentDisplayedTimeWheelLogic
+  } = _ref;
+  const {
     handlePrevHour,
     handleNextHour,
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMeridiem
-  } = _ref;
+  } = currentDisplayedTimeWheelLogic;
   const {
     withAnyInputs,
     isWithTimeInputs,

package/esm/date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js

@@ -47,7 +47,7 @@ const usePopperTriggerLogic = () => {
   useOnClickOutside(popperElement, e => {
     var _pickerButtonRef$curr, _pickerButtonRef$curr2;
 
-    if (!(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeTimePicker();
+    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeTimePicker();
   });
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;

package/esm/date-time-picker/parts/TimeInputs/HHInput.js

@@ -25,9 +25,7 @@ const HHInput = /*#__PURE__*/React.memo(_ref => {
     autoFocusHourInput
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidHour(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidHour(e.target.value)) {
       e.preventDefault();
       return;
     }