@elliemae/ds-controlled-form 2.3.0-alpha.9 → 2.3.0-next.11

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

@@ -0,0 +1,96 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useCallback, useMemo } from 'react';
+import { usePopper } from 'react-popper';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
+
+const usePopperTriggerLogic = _ref => {
+  let {
+    focusedDay,
+    resetFocusedDayToStartDate,
+    showCalendar,
+    setShowCalendar,
+    tryToFocusCurrentlyDataIsFocusedDay
+  } = _ref;
+  const {
+    props: {
+      onPickerOpen,
+      onPickerClose
+    },
+    prevMonthBtnRef,
+    pickerButtonRef
+  } = useContext(ControlledDateTimePickerContext);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }]
+  }); // onOpen we try to focus the day we should focus, if we should focus one
+
+  const handleOnPickerOpen = useCallback(() => {
+    onPickerOpen();
+    tryToFocusCurrentlyDataIsFocusedDay();
+  }, [onPickerOpen, tryToFocusCurrentlyDataIsFocusedDay]);
+  const openCalendar = useCallback(() => {
+    if (focusedDay) setTimeout(() => {
+      var _focusedDay$dayBtnRef, _focusedDay$dayBtnRef2, _focusedDay$dayBtnRef3;
+
+      return focusedDay === null || focusedDay === void 0 ? void 0 : (_focusedDay$dayBtnRef = focusedDay.dayBtnRef) === null || _focusedDay$dayBtnRef === void 0 ? void 0 : (_focusedDay$dayBtnRef2 = _focusedDay$dayBtnRef.current) === null || _focusedDay$dayBtnRef2 === void 0 ? void 0 : (_focusedDay$dayBtnRef3 = _focusedDay$dayBtnRef2.focus) === null || _focusedDay$dayBtnRef3 === void 0 ? void 0 : _focusedDay$dayBtnRef3.call(_focusedDay$dayBtnRef2);
+    }, 100);else setTimeout(() => {
+      var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2;
+
+      return prevMonthBtnRef === null || prevMonthBtnRef === void 0 ? void 0 : (_prevMonthBtnRef$curr = prevMonthBtnRef.current) === null || _prevMonthBtnRef$curr === void 0 ? void 0 : (_prevMonthBtnRef$curr2 = _prevMonthBtnRef$curr.focus) === null || _prevMonthBtnRef$curr2 === void 0 ? void 0 : _prevMonthBtnRef$curr2.call(_prevMonthBtnRef$curr);
+    }, 100);
+    setShowCalendar(true);
+    handleOnPickerOpen();
+  }, [focusedDay, handleOnPickerOpen, prevMonthBtnRef, setShowCalendar]);
+  const closeCalendar = useCallback(() => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
+    setShowCalendar(false);
+    onPickerClose();
+    resetFocusedDayToStartDate();
+    pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);
+  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, pickerButtonRef]);
+  const handleToggleCalendar = useCallback(() => {
+    const isOpening = !showCalendar;
+    if (isOpening) openCalendar();else closeCalendar();
+  }, [closeCalendar, openCalendar, showCalendar]);
+  const handleSetTriggerRef = useCallback(newRef => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [pickerButtonRef]);
+  const handleMenuWrapperKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+
+    if (key === 'Escape') {
+      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
+
+      closeCalendar();
+      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+    }
+  }, [closeCalendar, pickerButtonRef]);
+  useOnClickOutside(popperElement, e => {
+    var _pickerButtonRef$curr5, _pickerButtonRef$curr6;
+
+    if (!(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr5 = pickerButtonRef.current) !== null && _pickerButtonRef$curr5 !== void 0 && (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.contains) !== null && _pickerButtonRef$curr6 !== void 0 && _pickerButtonRef$curr6.call(_pickerButtonRef$curr5, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
+  });
+  return useMemo(() => ({
+    closeCalendar,
+    handleSetTriggerRef,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendar,
+    handleMenuWrapperKeyDown
+  }), [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, usePopperHelpers]);
+};
+
+export { usePopperTriggerLogic };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js

@@ -0,0 +1,28 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTrigger.js';
+import { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper.js';
+import { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';
+import { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX.js';
+import { WrapWithCalendarContext } from '../Calendar/Calendar.js';
+import { WrapWithTimeWheelContext } from '../TimeWheel/TimeWheel.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _CalendarWithTimeWhee, _CalendarWithTimeWhee2;
+const CalendarWithTimeWheel = WrapWithCalendarContext(WrapWithTimeWheelContext(() => {
+  const ctx = useConfigCalendarWithTimeWheelCTX();
+  const {
+    showCalendarWithTimeWheel,
+    isControllerOnly,
+    handleMenuWrapperKeyDown
+  } = ctx;
+  return /*#__PURE__*/_jsx(CalendarWithTimeWheelContext.Provider, {
+    value: ctx
+  }, void 0, isControllerOnly ? null : _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx(CalendarWithTimeWheelIconTrigger, {})), isControllerOnly || showCalendarWithTimeWheel ? /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      onKeyDown: handleMenuWrapperKeyDown
+    }, void 0, _CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx(CalendarWithTimeWheelWrapper, {})))
+  }) : null);
+}));
+
+export { CalendarWithTimeWheel };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js

@@ -0,0 +1,20 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds.js';
+import { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter.js';
+import { TimeWheelContent } from '../TimeWheel/TimeWheelContent.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+
+var _StyledCalendar, _TimeWheelContent, _CalendarWithTimeWhee;
+const CalendarWithTimeWheelContent = () => {
+  const {
+    isControllerOnly
+  } = useContext(ControlledDateTimePickerContext);
+  return /*#__PURE__*/_jsx(StyledCalendarWithTimeWheelWrapper, {
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL
+  }, void 0, _StyledCalendar || (_StyledCalendar = /*#__PURE__*/_jsx(StyledCalendar, {})), _TimeWheelContent || (_TimeWheelContent = /*#__PURE__*/_jsx(TimeWheelContent, {})), _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx(CalendarWithTimeWheelFooter, {})));
+};
+
+export { CalendarWithTimeWheelContent };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultCalendarWithTimeWheelContext = {
+  ariaCurrentValueForInputs: '',
+  showCalendarWithTimeWheel: false,
+  setPopperElement: noop,
+  setArrowElement: noop,
+  usePopperHelpers: null,
+  handleSetTriggerRef: noop,
+  handleToggleCalendarWithTimeWheel: noop,
+  handleMenuWrapperKeyDown: noop,
+  handlePickerIconKeyDown: noop,
+  isControllerOnly: false,
+  disabled: false
+};
+/** Context for cross component communication */
+
+const CalendarWithTimeWheelContext = /*#__PURE__*/createContext(defaultCalendarWithTimeWheelContext);
+
+export { CalendarWithTimeWheelContext, CalendarWithTimeWheelContext as default, defaultCalendarWithTimeWheelContext };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js

@@ -0,0 +1,18 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { CalendarWithTimeWheelFooterMessage } from './Styleds.js';
+
+const CalendarWithTimeWheelFooter = () => {
+  const {
+    props: {
+      pickerFooterMsg,
+      hasError
+    }
+  } = useContext(ControlledDateTimePickerContext);
+  return pickerFooterMsg !== undefined && hasError ? /*#__PURE__*/_jsx(CalendarWithTimeWheelFooterMessage, {
+    role: "alert"
+  }, void 0, pickerFooterMsg) : null;
+};
+
+export { CalendarWithTimeWheelFooter };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -0,0 +1,34 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useMemo } from 'react';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { DatePicker } from '@elliemae/ds-icons';
+import { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';
+import { StyledIconTriggerButton } from './Styleds.js';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+
+var _DatePicker;
+// this is particularly useful due to how usePopper needs to check the references
+// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
+
+const CalendarWithTimeWheelIconTrigger = () => {
+  const {
+    handleSetTriggerRef,
+    handleToggleCalendarWithTimeWheel,
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs,
+    disabled
+  } = useContext(CalendarWithTimeWheelContext);
+  return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
+    "aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
+    variant: BUTTON_VARIANT.DEFAULT,
+    innerRef: handleSetTriggerRef,
+    onClick: handleToggleCalendarWithTimeWheel,
+    onKeyDown: handlePickerIconKeyDown,
+    "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
+    disabled: disabled
+  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendarWithTimeWheel]);
+};
+
+export { CalendarWithTimeWheelIconTrigger };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

@@ -0,0 +1,45 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';
+import { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _CalendarWithTimeWhee, _CalendarWithTimeWhee2;
+
+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 CalendarWithTimeWheelWrapper = () => {
+  const {
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers: {
+      attributes,
+      styles
+    },
+    isControllerOnly
+  } = useContext(CalendarWithTimeWheelContext);
+  if (isControllerOnly) return _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx(CalendarWithTimeWheelContent, {}));
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    ref: setPopperElement,
+    style: _objectSpread(_objectSpread({}, styles.popper), {}, {
+      background: 'white',
+      zIndex: 110
+    })
+  }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
+    children: [_CalendarWithTimeWhee2 || (_CalendarWithTimeWhee2 = /*#__PURE__*/_jsx(CalendarWithTimeWheelContent, {})), /*#__PURE__*/jsx("div", {
+      ref: setArrowElement,
+      style: styles.arrow
+    })]
+  }));
+};
+
+export { CalendarWithTimeWheelWrapper };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.js

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { CalendarContent } from '../Calendar/CalendarContent.js';
+
+const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-h2xj8r-0"
+})(["color:", ";width:26px;height:26px;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand['600'];
+});
+const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-h2xj8r-1"
+})(["background:", ";", " display:grid;grid-template-columns:260px 192px;grid-template-rows:1fr;column-gap:0;& > div:last-of-type{box-shadow:-1px 0 0 0 ", ";margin-left:1px;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral['000'];
+}, _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
+  return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral[200];
+});
+const StyledCalendar = /*#__PURE__*/styled(CalendarContent).withConfig({
+  componentId: "sc-h2xj8r-2"
+})(["box-shadow:none;"]);
+const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
+  componentId: "sc-h2xj8r-3"
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;grid-column:1/3;"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral[300];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space.xxs2;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.space.xxs2;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.danger[900];
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fontWeights.thin;
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontSizes.microText[200];
+});
+
+export { CalendarWithTimeWheelFooterMessage, StyledCalendar, StyledCalendarWithTimeWheelWrapper, StyledIconTriggerButton };

package/esm/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -0,0 +1,119 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useContext, useState, useCallback, useMemo } from 'react';
+import { usePopper } from 'react-popper';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
+import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
+import { CalendarContext } from '../Calendar/CalendarContext.js';
+import { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';
+import { homeEndKeys } from '../../../utils/constants.js';
+
+const useConfigCalendarWithTimeWheelCTX = () => {
+  const {
+    pickerButtonRef,
+    props: {
+      type,
+      onPickerOpen,
+      onPickerClose,
+      disabled
+    },
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    withAnyInputs,
+    isWithTimeInputs,
+    meridiemInputRef,
+    yearInputRef,
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
+  const {
+    handleToggleCalendar
+  } = useContext(CalendarContext);
+  const {
+    handleToggleTimePicker
+  } = useContext(TimeWheelContext);
+  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);
+  const onHomeKeyDown = useCallback(() => {
+    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
+
+    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
+  }, [hideDate, hideTime, monthInputRef, hourInputRef]);
+  const handlePickerIconKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+    if (homeEndKeys.includes(key)) e.preventDefault();
+    if (homeEndKeys.includes(key)) e.stopPropagation();
+    if (key === 'Home') onHomeKeyDown();
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }]
+  });
+  const openCalendar = useCallback(e => {
+    setShowCalendarWithTimeWheel(true);
+    onPickerOpen();
+    setTimeout(() => handleToggleCalendar(e));
+    setTimeout(() => handleToggleTimePicker(e));
+  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);
+  const closeCalendar = useCallback(e => {
+    setShowCalendarWithTimeWheel(false);
+    onPickerClose();
+    setTimeout(() => handleToggleCalendar(e));
+    setTimeout(() => handleToggleTimePicker(e));
+  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);
+  const handleToggleCalendarWithTimeWheel = useCallback(e => {
+    if (!showCalendarWithTimeWheel) openCalendar(e);else closeCalendar(e);
+  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
+  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))) closeCalendar(e);
+  });
+  const handleSetTriggerRef = useCallback(newRef => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [pickerButtonRef]);
+  const handleMenuWrapperKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+
+    if (key === 'Escape') {
+      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
+
+      closeCalendar(e);
+      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+    }
+  }, [closeCalendar, pickerButtonRef]);
+  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
+  return useMemo(() => ({
+    showCalendarWithTimeWheel,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleCalendarWithTimeWheel,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown,
+    handlePickerIconKeyDown,
+    isControllerOnly,
+    disabled,
+    ariaCurrentValueForInputs
+  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly, disabled, ariaCurrentValueForInputs]);
+};
+
+export { useConfigCalendarWithTimeWheelCTX };

package/esm/controlled-date-time-picker/parts/Pickers/PickersIcons.js

@@ -0,0 +1,26 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
+import { StyledPickersIconsWrapperGrid } from '../Styleds.js';
+import { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';
+import { Calendar } from './Calendar/Calendar.js';
+import { TimeWheel } from './TimeWheel/TimeWheel.js';
+
+var _Calendar, _TimeWheel, _CalendarWithTimeWhee;
+const PickersIcons = () => {
+  const {
+    hideDatePicker,
+    hideTimePicker,
+    hideDateTimePicker,
+    isControllerOnly,
+    props: {
+      hasError
+    }
+  } = React.useContext(ControlledDateTimePickerContext);
+  return /*#__PURE__*/_jsx(StyledPickersIconsWrapperGrid, {
+    hasError: hasError,
+    isControllerOnly: isControllerOnly
+  }, void 0, !hideDatePicker && hideTimePicker && hideDateTimePicker ? _Calendar || (_Calendar = /*#__PURE__*/_jsx(Calendar, {})) : null, hideDatePicker && !hideTimePicker && hideDateTimePicker ? _TimeWheel || (_TimeWheel = /*#__PURE__*/_jsx(TimeWheel, {})) : null, hideDatePicker && hideTimePicker && !hideDateTimePicker ? _CalendarWithTimeWhee || (_CalendarWithTimeWhee = /*#__PURE__*/_jsx(CalendarWithTimeWheel, {})) : null);
+};
+
+export { PickersIcons };

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

@@ -0,0 +1,97 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.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 { useContext } from 'react';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
+import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn, StyledTimeBtn } from './Styleds.js';
+import { TimeWheelContext } from './TimeWheelContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _ChevronSmallUp, _ChevronSmallDown;
+
+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 HoursList = () => {
+  const {
+    currHourNum,
+    hours,
+    minutes,
+    meridiem,
+    visibleHours,
+    handlePrevHour,
+    handleNextHour,
+    handleTimeWheelBtnChangeHours,
+    handlePrevHourBtnOnKeyDown,
+    handleCurrHourOnKeyDown,
+    handleNextHourBtnOnKeyDown,
+    prevHourBtnRef,
+    currHourBtnRef,
+    nextHourBtnRef,
+    getIsDisabledTime,
+    autoFocusHourTimeWheel
+  } = useContext(TimeWheelContext);
+  return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
+    "aria-label": "subtract one hour",
+    buttonType: "raw",
+    size: "m",
+    onClick: handlePrevHour,
+    onKeyDown: handlePrevHourBtnOnKeyDown,
+    innerRef: prevHourBtnRef,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
+    tabIndex: -1
+  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleHours.map(hourString => {
+    const key = "timewheel-hour-".concat(hourString);
+    if (!hourString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
+    const currHourTimeString = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
+    const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;
+    const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
+    const isDisabled = getIsDisabledTime(currHourTimeString);
+    const tabIndex = isCurrentListItem ? 0 : -1;
+    const btnProps = {
+      onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,
+      innerRef: isCurrentListItem ? currHourBtnRef : undefined
+    };
+    return /*#__PURE__*/_jsx(StyledWheelListItem, {
+      isCurrentListItem: isCurrentListItem
+    }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({
+      isCurrentListItem: isCurrentListItem,
+      autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
+      "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
+      selected: hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum,
+      "aria-label": "".concat(hourString, " hours"),
+      "aria-disabled": isDisabled,
+      isDisabled: isDisabled,
+      buttonType: "raw",
+      size: "m",
+      onClick: e => handleTimeWheelBtnChangeHours(hourString, e),
+      tabIndex: tabIndex,
+      role: "spinbutton",
+      "aria-valuemax": "12",
+      "aria-valuemin": "1",
+      "aria-valuenow": currHourNum,
+      "aria-valuetext": "".concat(hourString, " hours")
+    }, btnProps), {}, {
+      children: hourString
+    })));
+  }), /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
+    "aria-label": "add one hour",
+    buttonType: "raw",
+    size: "m",
+    onClick: handleNextHour,
+    onKeyDown: handleNextHourBtnOnKeyDown,
+    innerRef: nextHourBtnRef,
+    tabIndex: -1,
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
+};
+
+export { HoursList };