@elliemae/ds-controlled-form 2.4.1-rc.5 → 2.4.1-rc.9

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

@@ -14,6 +14,7 @@ require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var numberHelpers = require('../../../utils/numberHelpers.js');
 var Styleds = require('./Styleds.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
@@ -31,22 +32,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__default["default"](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
+  } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
     prevMinutesBtnRef,
     currMinutesBtnRef,
     nextMinutesBtnRef,
-    getIsDisabledTime
-  } = React.useContext(TimeWheelContext.TimeWheelContext);
+    getIsDisabledTime,
+    minutes
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
@@ -57,9 +60,9 @@ const MinutesList = () => {
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
-    const key = "timewheel-minutes-".concat(minutesString);
+    const key = "timewheel-minutes-".concat(minutesString || '');
     if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
-    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
+    const currMinutesTimeString = "".concat(currHourNum, ":").concat(minutesString, " ").concat(currMeridiem);
     const isEmptyCurrValueCurrentListItem = !minutes && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -68,23 +71,25 @@ const MinutesList = () => {
       onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,
       innerRef: isCurrentListItem ? currMinutesBtnRef : undefined
     };
+    const styledProps = {
+      isCurrentListItem,
+      isDisabled
+    };
     return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem,
       selected: numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum
-    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({
-      isCurrentListItem: isCurrentListItem,
+    }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread(_objectSpread({}, styledProps), {}, {
       "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && numberHelpers.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/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js

@@ -8,14 +8,14 @@ var TimeWheelIconTrigger = require('./TimeWheelIconTrigger.js');
 var TimeWheelWrapper = require('./TimeWheelWrapper.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
 var useConfigTimePickerCTX = require('./useConfigTimePickerCTX.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _TimeWheelIconTrigger, _TimeWheelWrapper;
-
+var _TimeWheelIconTrigger, _TimeWheelWrapper, _WrappedTimeWheelCont;
 const WrappedTimeWheelContext = _ref => {
   let {
     children
@@ -26,19 +26,14 @@ const WrappedTimeWheelContext = _ref => {
   }, void 0, children);
 };
 
-const WrapWithTimeWheelContext = Component => {
-  var _WrappedTimeWheelCont;
-
-  return () => _WrappedTimeWheelCont || (_WrappedTimeWheelCont = /*#__PURE__*/_jsx__default["default"](WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](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
   } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
+    isControllerOnly
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [isControllerOnly ? null : _TimeWheelIconTrigger || (_TimeWheelIconTrigger = /*#__PURE__*/_jsx__default["default"](TimeWheelIconTrigger.TimeWheelIconTrigger, {})), isControllerOnly || showTimePicker ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: /*#__PURE__*/_jsx__default["default"]("div", {
@@ -46,7 +41,10 @@ const TimeWheel = WrapWithTimeWheelContext(() => {
       }, void 0, _TimeWheelWrapper || (_TimeWheelWrapper = /*#__PURE__*/_jsx__default["default"](TimeWheelWrapper.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__default["default"](WrappedTimeWheelContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](TimeWheelContent, {})));
 
 exports.TimeWheel = TimeWheel;
-exports.WrapWithTimeWheelContext = WrapWithTimeWheelContext;
+exports.WrappedTimeWheelContext = WrappedTimeWheelContext;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var Styleds = require('./Styleds.js');
 var HoursList = require('./HoursList.js');
 var MinutesList = require('./MinutesList.js');
@@ -25,9 +26,11 @@ const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(_ref => {
   const {
     hours,
     minutes,
-    meridiem,
-    isControllerOnly
+    meridiem
   } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
+    isControllerOnly
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerContainer, {
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,

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

@@ -5,71 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('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__*/React.createRef(),
-  currHourBtnRef: /*#__PURE__*/React.createRef(),
-  nextHourBtnRef: /*#__PURE__*/React.createRef(),
-  prevMinutesBtnRef: /*#__PURE__*/React.createRef(),
-  currMinutesBtnRef: /*#__PURE__*/React.createRef(),
-  nextMinutesBtnRef: /*#__PURE__*/React.createRef(),
-  // prevSecondsBtnRef: createRef<HTMLButtonElement>(),
-  // currSecondsBtnRef: createRef<HTMLButtonElement>(),
-  // nextSecondsBtnRef: createRef<HTMLButtonElement>(),
-  prevMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  currMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  nextMeridiemBtnRef: /*#__PURE__*/React.createRef(),
-  getIsDisabledTime: () => false,
-  disabled: false
-};
+const defaultTimePickerContext = {};
 /** Context for cross component communication */
 
 const TimeWheelContext = /*#__PURE__*/React.createContext(defaultTimePickerContext);

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

@@ -8,6 +8,7 @@ var DSButton = require('@elliemae/ds-button');
 var dsIcons = require('@elliemae/ds-icons');
 var TimeWheelContext = require('./TimeWheelContext.js');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,10 +22,14 @@ const TimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleTimePicker,
-    handlePickerIconKeyDown,
-    ariaCurrentValueForInputs,
-    disabled
+    handlePickerIconKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
+    props: {
+      disabled
+    },
+    ariaCurrentValueForInputs
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](DSButton.DSButtonV2, {
     "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",

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

@@ -11,6 +11,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var TimeWheelContent = require('./TimeWheelContent.js');
 var TimeWheelContext = require('./TimeWheelContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -32,9 +33,11 @@ const TimeWheelWrapper = () => {
     usePopperHelpers: {
       styles,
       attributes
-    },
-    isControllerOnly
+    }
   } = React.useContext(TimeWheelContext.TimeWheelContext);
+  const {
+    isControllerOnly
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   if (isControllerOnly) return _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx__default["default"](TimeWheelContent.TimeWheelContent, {
     showShadow: true
   }));

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

@@ -2,129 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var usePopperTriggerLogic = require('./usePopperTriggerLogic.js');
 var useCurrentDisplayedWheelsLogic = require('./useCurrentDisplayedWheelsLogic.js');
 var useKeyboardHandlers = require('./useKeyboardHandlers.js');
 
-/* eslint-disable max-statements */
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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
-  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const {
-    currHourNum,
-    hours,
-    visibleHours,
-    handlePrevHour,
-    handleNextHour,
-    handleTimeWheelBtnChangeHours,
-    currMinuteNum,
-    minutes,
-    visibleMinutes,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMinutes,
-    meridiem,
-    handleTimeWheelBtnChangeMeridiem
-  } = useCurrentDisplayedWheelsLogic.useCurrentDisplayedWheelsLogic({
-    minutesInterval
-  });
-  const {
-    showTimePicker,
-    setShowTimePicker,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleTimePicker,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown
-  } = usePopperTriggerLogic.usePopperTriggerLogic();
-  const {
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown,
-    handlePickerIconKeyDown
-  } = useKeyboardHandlers.useKeyboardHandlers({
-    handlePrevHour,
-    handleNextHour,
-    handlePrevMinute,
-    handleNextMinute,
-    handleTimeWheelBtnChangeMeridiem
+  const currentDisplayedTimeWheelLogic = useCurrentDisplayedWheelsLogic.useCurrentDisplayedWheelsLogic();
+  const popperLogic = usePopperTriggerLogic.usePopperTriggerLogic();
+  const keyboardHandlers = useKeyboardHandlers.useKeyboardHandlers({
+    currentDisplayedTimeWheelLogic
   });
-  return React.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 React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, currentDisplayedTimeWheelLogic), popperLogic), keyboardHandlers), [currentDisplayedTimeWheelLogic, popperLogic, keyboardHandlers]);
 };
 
 exports.useConfigTimePickerCTX = useConfigTimePickerCTX;

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

@@ -8,6 +8,7 @@ var React = require('react');
 var useTimeInputs = require('../../TimeInputs/useTimeInputs.js');
 var numberHelpers = require('../../../utils/numberHelpers.js');
 var stringHelpers = require('../../../utils/stringHelpers.js');
+var ControlledDateTimePickerCTX = require('../../../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
@@ -20,78 +21,75 @@ const getTotalMinuteListWithStep = function () {
   return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders("".concat(i * step), 2));
 };
 
-const useCurrentDisplayedWheelsLogic = _ref => {
-  let {
-    minutesInterval
-  } = _ref;
+const useCurrentDisplayedWheelsLogic = () => {
   const {
+    minutesInterval,
+    onTimeWheelOpenStartingTime,
     hours,
     minutes,
-    // seconds,
-    meridiem = 'AM',
+    meridiem
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const {
     handleChangeHours,
     handleChangeMinutes,
-    // handleChangeSeconds,
     handleChangeMeridiem
   } = useTimeInputs.useTimeInputs();
+  const {
+    startingHours,
+    startingMinutes,
+    startingMeridiem
+  } = React.useMemo(() => {
+    const startingVals = stringHelpers.deconstructValuesFromTimeString(onTimeWheelOpenStartingTime);
+    return {
+      startingHours: startingVals.hours,
+      startingMinutes: startingVals.minutes,
+      startingMeridiem: startingVals.meridiem
+    };
+  }, [onTimeWheelOpenStartingTime]);
   const currHourNum = React.useMemo(() => {
     const hoursAsNum = numberHelpers.convertToPositiveNumberIfPossible(hours);
-    if (hoursAsNum === -1) return 1;
-    return hoursAsNum;
-  }, [hours]);
+
+    if (hours && hoursAsNum !== -1) {
+      return hoursAsNum;
+    }
+
+    const startingHoursAsNum = numberHelpers.convertToPositiveNumberIfPossible(startingHours);
+    if (startingHoursAsNum === -1) return 1;
+    return startingHoursAsNum;
+  }, [hours, startingHours]);
   const currMinuteNum = React.useMemo(() => {
     const minutesAsNum = numberHelpers.convertToPositiveNumberIfPossible(minutes);
-    if (minutesAsNum === -1) return 0;
-    return minutesAsNum;
-  }, [minutes]);
+
+    if (minutes && minutesAsNum !== -1) {
+      return minutesAsNum;
+    }
+
+    const startingMinutesAsNum = numberHelpers.convertToPositiveNumberIfPossible(startingMinutes);
+    if (startingMinutesAsNum === -1) return 0;
+    return startingMinutesAsNum;
+  }, [minutes, startingMinutes]);
+  const currMeridiem = React.useMemo(() => {
+    if (meridiem !== '') return meridiem;
+    if (startingMeridiem !== '') return startingMeridiem;
+    return 'AM';
+  }, [meridiem, startingMeridiem]);
   const totalMinutesList = React.useMemo(() => getTotalMinuteListWithStep(minutesInterval), [minutesInterval]);
   const currMinuteIndex = React.useMemo(() => Math.floor(currMinuteNum / minutesInterval), [currMinuteNum, minutesInterval]);
-  const currHoursIndex = React.useMemo(() => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset, [currHourNum]); // const currSecondNum = useMemo(() => {
-  //   const secondsAsNum = convertToPositiveNumberIfPossible(seconds);
-  //   if (secondsAsNum === -1) return 0;
-  //   return secondsAsNum;
-  // }, [seconds]);
-
+  const currHoursIndex = React.useMemo(() => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset, [currHourNum]);
   const visibleHours = React.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 = React.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 = React.useCallback((newHours, e) => {
     handleChangeHours(newHours, e);
   }, [handleChangeHours]);
@@ -117,64 +115,24 @@ const useCurrentDisplayedWheelsLogic = _ref => {
   }, [handleChangeCurrMinute, minutesInterval]);
   const handleNextMinute = React.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 = React.useCallback((newMeridiem, e) => {
     handleChangeMeridiem(newMeridiem, e);
   }, [handleChangeMeridiem]);
   return React.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]);
 };
 
 exports.useCurrentDisplayedWheelsLogic = useCurrentDisplayedWheelsLogic;

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

@@ -9,12 +9,15 @@ var constants = require('../../../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/cjs/date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js

@@ -51,7 +51,7 @@ const usePopperTriggerLogic = () => {
   useOnClickOutside.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 = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;