@elliemae/ds-controlled-form 2.0.0-next.9 → 2.0.0-rc.12

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

@@ -3,36 +3,41 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
+var constants = require('../../../utils/constants.js');
 
 /* eslint-disable @typescript-eslint/indent */
-const useKeyboardHandlers = ({
-  handlePrevHour,
-  handleNextHour,
-  handlePrevMinute,
-  handleNextMinute,
-  // handlePrevSecond,
-  // handleNextSecond,
-  handleTimeWheelBtnChangeMeridiem,
-  prevMonthBtnRef,
-  prevHourBtnRef,
-  currHourBtnRef,
-  nextHourBtnRef,
-  prevMinutesBtnRef,
-  currMinutesBtnRef,
-  nextMinutesBtnRef,
-  // prevSecondsBtnRef,
-  // currSecondsBtnRef,
-  // nextSecondsBtnRef,
-  prevMeridiemBtnRef,
-  currMeridiemBtnRef,
-  nextMeridiemBtnRef,
-  hideDate,
-  hideTime,
-  monthInputRef,
-  hourInputRef,
-  isWithCalendarToo,
-  isControllerOnly
-}) => {
+const useKeyboardHandlers = _ref => {
+  let {
+    handlePrevHour,
+    handleNextHour,
+    handlePrevMinute,
+    handleNextMinute,
+    handleTimeWheelBtnChangeMeridiem
+  } = _ref;
+  const {
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isWithCalendarToo,
+    isControllerOnly,
+    hideDate,
+    hideTime,
+    monthInputRef,
+    hourInputRef,
+    meridiemInputRef,
+    yearInputRef,
+    prevMonthBtnRef,
+    prevHourBtnRef,
+    currHourBtnRef,
+    nextHourBtnRef,
+    prevMinutesBtnRef,
+    currMinutesBtnRef,
+    nextMinutesBtnRef,
+    prevMeridiemBtnRef,
+    currMeridiemBtnRef,
+    nextMeridiemBtnRef
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const onHomeKeyDownInsideTimeWheel = React.useCallback(() => {
     var _prevMonthBtnRef$curr, _prevMonthBtnRef$curr2, _currHourBtnRef$curre, _currHourBtnRef$curre2;
 
@@ -52,21 +57,23 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End'];
-    const stopPropagationKeys = ['Home', 'End'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDownTriggerIcon();
-  }, [onHomeKeyDownTriggerIcon]);
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else if (isWithDateInputs) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onHomeKeyDownTriggerIcon, withAnyInputs, yearInputRef]);
   const handleCurrHourOnKeyDown = React.useCallback(e => {
     const {
       key,
       shiftKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     let didTriggerHourChange = false;
 
     if (key === 'ArrowUp') {
@@ -105,10 +112,8 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     let didTriggerMinuteChange = false;
 
     if (key === 'ArrowUp') {
@@ -130,7 +135,6 @@ const useKeyboardHandlers = ({
     if (key === 'ArrowRight') {
       var _currMeridiemBtnRef$c5, _currMeridiemBtnRef$c6;
 
-      // currSecondsBtnRef?.current?.focus?.();
       currMeridiemBtnRef === null || currMeridiemBtnRef === void 0 ? void 0 : (_currMeridiemBtnRef$c5 = currMeridiemBtnRef.current) === null || _currMeridiemBtnRef$c5 === void 0 ? void 0 : (_currMeridiemBtnRef$c6 = _currMeridiemBtnRef$c5.focus) === null || _currMeridiemBtnRef$c6 === void 0 ? void 0 : _currMeridiemBtnRef$c6.call(_currMeridiemBtnRef$c5);
     }
 
@@ -142,45 +146,14 @@ const useKeyboardHandlers = ({
 
       return currMinutesBtnRef === null || currMinutesBtnRef === void 0 ? void 0 : (_currMinutesBtnRef$cu3 = currMinutesBtnRef.current) === null || _currMinutesBtnRef$cu3 === void 0 ? void 0 : (_currMinutesBtnRef$cu4 = _currMinutesBtnRef$cu3.focus) === null || _currMinutesBtnRef$cu4 === void 0 ? void 0 : _currMinutesBtnRef$cu4.call(_currMinutesBtnRef$cu3);
     });
-  }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef]); // const handleCurrSecondsOnKeyDown = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     let didTriggerSecondChange = false;
-  //     if (key === 'ArrowUp') {
-  //       handlePrevSecond(e);
-  //       didTriggerSecondChange = true;
-  //     }
-  // if (key === 'ArrowDown') {
-  //       handleNextSecond(e);
-  //       didTriggerSecondChange = true;
-  //     }
-  // if (key === 'ArrowLeft') {
-  //       currMinutesBtnRef?.current?.focus?.();
-  //     }
-  // if (key === 'ArrowRight') {
-  //       currMeridiemBtnRef?.current?.focus?.();
-  //     }
-  //     // ensure the focus is in the correct button after up/down arrow
-  //     if (didTriggerSecondChange) setTimeout(() => currSecondsBtnRef?.current?.focus?.(), 10);
-  //   },
-  //   [
-  //     currMeridiemBtnRef,
-  //     currMinutesBtnRef,
-  //     currSecondsBtnRef,
-  //     handleNextSecond,
-  //     handlePrevSecond,
-  //   ],
-  // );
-
+  }, [onHomeKeyDownInsideTimeWheel, onEndKeyDownInsideTimeWheel, handlePrevMinute, handleNextMinute, currHourBtnRef, currMeridiemBtnRef, currMinutesBtnRef]);
   const handleCurrMeridiemOnKeyDown = React.useCallback(e => {
     const {
       key,
       shiftKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
     let didTriggerMeridiemChange = false;
 
     if (key === 'ArrowUp') {
@@ -220,10 +193,8 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _prevMinutesBtnRef$cu, _prevMinutesBtnRef$cu2;
@@ -244,10 +215,8 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _prevMeridiemBtnRef$c, _prevMeridiemBtnRef$c2;
@@ -270,35 +239,17 @@ const useKeyboardHandlers = ({
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]); // const handlePrevSecondBtnOnKeyDown = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     if (key === 'ArrowRight') {
-  //       prevMeridiemBtnRef?.current?.focus?.();
-  //     }
-  // if (key === 'ArrowLeft') {
-  //       prevMinutesBtnRef?.current?.focus?.();
-  //     }
-  // if (key === 'ArrowDown') {
-  //       currSecondsBtnRef?.current?.focus?.();
-  //     }
-  //   },
-  //   [currSecondsBtnRef, prevMeridiemBtnRef, prevMinutesBtnRef],
-  // );
-
+  }, [currMinutesBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel, prevHourBtnRef, prevMeridiemBtnRef]);
   const handlePrevMeridiemBtnOnKeyDown = React.useCallback(e => {
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowLeft') {
       var _prevMinutesBtnRef$cu3, _prevMinutesBtnRef$cu4;
 
-      // prevSecondsBtnRef?.current?.focus?.();
       prevMinutesBtnRef === null || prevMinutesBtnRef === void 0 ? void 0 : (_prevMinutesBtnRef$cu3 = prevMinutesBtnRef.current) === null || _prevMinutesBtnRef$cu3 === void 0 ? void 0 : (_prevMinutesBtnRef$cu4 = _prevMinutesBtnRef$cu3.focus) === null || _prevMinutesBtnRef$cu4 === void 0 ? void 0 : _prevMinutesBtnRef$cu4.call(_prevMinutesBtnRef$cu3);
     }
 
@@ -315,10 +266,8 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _nextMinutesBtnRef$cu, _nextMinutesBtnRef$cu2;
@@ -339,15 +288,12 @@ const useKeyboardHandlers = ({
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowRight') {
       var _nextMeridiemBtnRef$c, _nextMeridiemBtnRef$c2;
 
-      // nextSecondsBtnRef?.current?.focus?.();
       nextMeridiemBtnRef === null || nextMeridiemBtnRef === void 0 ? void 0 : (_nextMeridiemBtnRef$c = nextMeridiemBtnRef.current) === null || _nextMeridiemBtnRef$c === void 0 ? void 0 : (_nextMeridiemBtnRef$c2 = _nextMeridiemBtnRef$c.focus) === null || _nextMeridiemBtnRef$c2 === void 0 ? void 0 : _nextMeridiemBtnRef$c2.call(_nextMeridiemBtnRef$c);
     }
 
@@ -365,30 +311,13 @@ const useKeyboardHandlers = ({
 
     if (key === 'Home') onHomeKeyDownInsideTimeWheel();
     if (key === 'End') onEndKeyDownInsideTimeWheel();
-  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]); // const handleNextSecondBtnOnKeyDown = useCallback(
-  //   (e) => {
-  //     const { key } = e;
-  //     if (key === 'ArrowRight') {
-  //       nextMeridiemBtnRef?.current?.focus?.();
-  //     }
-  // if (key === 'ArrowLeft') {
-  //       nextMinutesBtnRef?.current?.focus?.();
-  //     }
-  // if (key === 'ArrowUp') {
-  //       currSecondsBtnRef?.current?.focus?.();
-  //     }
-  //   },
-  //   [currSecondsBtnRef, nextMeridiemBtnRef, nextMinutesBtnRef],
-  // );
-
+  }, [currMinutesBtnRef, nextHourBtnRef, nextMeridiemBtnRef, onEndKeyDownInsideTimeWheel, onHomeKeyDownInsideTimeWheel]);
   const handleNextMeridiemBtnOnKeyDown = React.useCallback(e => {
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndAllArrowKeys.includes(key)) e.stopPropagation();
 
     if (key === 'ArrowLeft') {
       var _nextMinutesBtnRef$cu3, _nextMinutesBtnRef$cu4;
@@ -412,17 +341,11 @@ const useKeyboardHandlers = ({
     handlePrevMinuteBtnOnKeyDown,
     handleCurrMinutesOnKeyDown,
     handleNextMinuteBtnOnKeyDown,
-    // handlePrevSecondBtnOnKeyDown,
-    // handleCurrSecondsOnKeyDown,
-    // handleNextSecondBtnOnKeyDown,
     handlePrevMeridiemBtnOnKeyDown,
     handleCurrMeridiemOnKeyDown,
     handleNextMeridiemBtnOnKeyDown,
     handlePickerIconKeyDown
-  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, // handleCurrSecondsOnKeyDown,
-  handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, // handleNextSecondBtnOnKeyDown,
-  handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, // handlePrevSecondBtnOnKeyDown,
-  handlePickerIconKeyDown]);
+  }), [handleCurrHourOnKeyDown, handleCurrMeridiemOnKeyDown, handleCurrMinutesOnKeyDown, handleNextHourBtnOnKeyDown, handleNextMeridiemBtnOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevHourBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handlePickerIconKeyDown]);
 };
 
 exports.useKeyboardHandlers = useKeyboardHandlers;

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

@@ -5,15 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 
-const usePopperTriggerLogic = ({
-  pickerButtonRef,
-  currHourBtnRef,
-  onPickerClose,
-  onPickerOpen,
-  isWithCalendarToo
-}) => {
+const usePopperTriggerLogic = () => {
+  const {
+    pickerButtonRef,
+    props: {
+      onPickerClose,
+      onPickerOpen
+    },
+    currHourBtnRef,
+    isWithCalendarToo
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [showTimePicker, setShowTimePicker] = React.useState(false);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);

package/cjs/controlled-date-time-picker/parts/Styleds.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var dsButton = require('@elliemae/ds-button');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,21 +22,53 @@ const StyledColonSeparator = /*#__PURE__*/styled__default["default"](dsGrid.Grid
 })(["padding-bottom:1px;margin:auto;"]);
 const Styled2DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
   componentId: "sc-1t4k08s-3"
-})(["width:100%;height:100%;"]);
+})(["width:100%;height:100%;", ""], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? "color: #616b7f;" : "";
+});
 const StyledMin4DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
   componentId: "sc-1t4k08s-4"
-})(["width:100%;height:100%;"]);
+})(["width:100%;height:100%;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? "color: #616b7f;" : "";
+});
 const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-5"
-})(["width:max-content;align-items:center;", " border-radius:2px;padding-left:", ";padding-right:", ";position:relative;"], ({
-  theme,
-  isControllerOnly,
-  hasError
-}) => isControllerOnly ? undefined : "\n  height: 28px;    \n  border: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], ";\n  "), ({
-  justPicker
-}) => justPicker ? '0' : '2px', ({
-  withAnyPicker
-}) => withAnyPicker ? '' : '0');
+})(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
+  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
+}, _ref4 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref4;
+  if (hasError) return theme.colors.danger[900];
+  if (disabled) return theme.colors.neutral[400];
+  return theme.colors.neutral[200];
+}, _ref5 => {
+  let {
+    justPicker
+  } = _ref5;
+  return justPicker ? '0' : '2px';
+}, _ref6 => {
+  let {
+    withAnyPicker
+  } = _ref6;
+  return withAnyPicker ? '' : '0';
+}, _ref7 => {
+  let {
+    theme,
+    disabled
+  } = _ref7;
+  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+});
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1t4k08s-6"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 48px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
@@ -45,23 +77,35 @@ const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-8"
-})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], ({
-  isControllerOnly
-}) => isControllerOnly ? undefined : 'height: 26px;', ({
-  theme,
-  isControllerOnly,
-  hasError
-}) => isControllerOnly ? undefined : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    "));
+})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
+  return isControllerOnly ? "" : "height: 26px;";
+}, _ref9 => {
+  let {
+    theme,
+    isControllerOnly,
+    hasError
+  } = _ref9;
+  return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
+});
 const StyledFocusWithIn = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-9"
-})(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], ({
-  theme
-}) => theme.colors.brand[700]);
-const StyledClearButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
+})(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.brand[700];
+});
+const StyledClearButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-1t4k08s-10"
-})(["height:26px;position:relative;visibility:", ";"], ({
-  shouldDisplay
-}) => shouldDisplay ? 'visible' : 'hidden');
+})(["height:26px;position:relative;visibility:", ";"], _ref11 => {
+  let {
+    shouldDisplay
+  } = _ref11;
+  return shouldDisplay ? 'visible' : 'hidden';
+});
 
 exports.Styled2DigitsInput = Styled2DigitsInput;
 exports.StyledClearButton = StyledClearButton;

package/cjs/controlled-date-time-picker/parts/TimeInputs/HHInput.js

@@ -19,17 +19,19 @@ const isInvalidHour = hours => {
   return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;
 };
 
-const HHInput = /*#__PURE__*/React__default["default"].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  ariaCurrentValueForInputs,
-  contextRef,
-  autoFocusHourInput
-}) => {
+const HHInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef,
+    autoFocusHourInput
+  } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
 
@@ -50,7 +52,9 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(({
     ref: contextRef,
     placeholder: placeholder,
     "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

package/cjs/controlled-date-time-picker/parts/TimeInputs/MeridiemInput.js

@@ -23,16 +23,18 @@ const isInvalidMeridiem = meridiem => {
   return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;
 };
 
-const MeridiemInput = /*#__PURE__*/React__default["default"].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  ariaCurrentValueForInputs,
-  contextRef
-}) => {
+const MeridiemInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef
+  } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
 
@@ -52,7 +54,9 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(({
     ref: contextRef,
     placeholder: placeholder,
     "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

package/cjs/controlled-date-time-picker/parts/TimeInputs/MinutesInput.js

@@ -19,16 +19,18 @@ const isInvalidMinute = minutes => {
   return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;
 };
 
-const MinutesInput = /*#__PURE__*/React__default["default"].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  ariaCurrentValueForInputs,
-  contextRef
-}) => {
+const MinutesInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef
+  } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
 
@@ -48,7 +50,9 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(({
     ref: contextRef,
     placeholder: placeholder,
     "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

package/cjs/controlled-date-time-picker/parts/TimeInputs/TimeInputs.js

@@ -25,6 +25,7 @@ const TimeInputs = () => {
     // seconds,
     meridiem,
     autoFocusHourInput,
+    disabled,
     onHoursChange,
     onMinutesChange,
     // onSecondsChange,
@@ -40,12 +41,11 @@ const TimeInputs = () => {
     onMinutesKeyDown,
     // onSecondsKeyDown,
     onMeridiemKeyDown
-  } = useTimeInputs.useTimeInputs(); // we do this here so HHInput,MinutesInput,SSInput MeridiemInput can be pure components memoized via React.memo
+  } = useTimeInputs.useTimeInputs(); // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo
 
   const {
     hourInputRef,
     minutesInputRef,
-    // secondsInputRef,
     meridiemInputRef,
     ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
@@ -60,7 +60,8 @@ const TimeInputs = () => {
     contextRef: hourInputRef,
     placeholder: "HH",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    autoFocusHourInput: autoFocusHourInput
+    autoFocusHourInput: autoFocusHourInput,
+    disabled: disabled
   })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledColonSeparator, {
     alignItems: "center"
   }, void 0, ":")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MinutesInput.MinutesInput, {
@@ -71,7 +72,8 @@ const TimeInputs = () => {
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
     placeholder: "MM",
-    ariaCurrentValueForInputs: ariaCurrentValueForInputs
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MeridiemInput.MeridiemInput, {
     value: meridiem,
     onChange: onMeridiemChange,
@@ -80,7 +82,8 @@ const TimeInputs = () => {
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
     placeholder: "AM",
-    ariaCurrentValueForInputs: ariaCurrentValueForInputs
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })));
 };