@elliemae/ds-controlled-form 1.57.1-rc.0 → 2.0.0-alpha.11

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

@@ -1,40 +1,20 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import { useContext, useState, useCallback, useMemo } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
-import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
-import '../../../ControlledDateTimePickerTypes.js';
 
-var usePopperTriggerLogic = function usePopperTriggerLogic() {
-  var _useContext = useContext(ControlledDateTimePickerContext),
-      pickerButtonRef = _useContext.pickerButtonRef,
-      _useContext$props = _useContext.props,
-      onPickerClose = _useContext$props.onPickerClose,
-      onPickerOpen = _useContext$props.onPickerOpen,
-      currHourBtnRef = _useContext.currHourBtnRef,
-      isWithCalendarToo = _useContext.isWithCalendarToo;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showTimePicker = _useState2[0],
-      setShowTimePicker = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      referenceElement = _useState4[0],
-      setReferenceElement = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      popperElement = _useState6[0],
-      setPopperElement = _useState6[1];
-
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      arrowElement = _useState8[0],
-      setArrowElement = _useState8[1];
-
-  var usePopperHelpers = usePopper(referenceElement, popperElement, {
+const usePopperTriggerLogic = ({
+  pickerButtonRef,
+  currHourBtnRef,
+  onPickerClose,
+  onPickerOpen,
+  isWithCalendarToo
+}) => {
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const usePopperHelpers = usePopper(referenceElement, popperElement, {
     modifiers: [{
       name: 'arrow',
       options: {
@@ -42,15 +22,15 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       }
     }]
   });
-  var closeTimePicker = useCallback(function () {
+  const closeTimePicker = useCallback(() => {
     setShowTimePicker(false);
     onPickerClose();
   }, [onPickerClose]);
-  var handleToggleTimePicker = useCallback(function () {
-    setShowTimePicker(function (oldShowCalendar) {
+  const handleToggleTimePicker = useCallback(() => {
+    setShowTimePicker(oldShowCalendar => {
       if (!oldShowCalendar) {
         onPickerOpen();
-        if (!isWithCalendarToo) setTimeout(function () {
+        if (!isWithCalendarToo) setTimeout(() => {
           var _currHourBtnRef$curre, _currHourBtnRef$curre2;
 
           return currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre = currHourBtnRef.current) === null || _currHourBtnRef$curre === void 0 ? void 0 : (_currHourBtnRef$curre2 = _currHourBtnRef$curre.focus) === null || _currHourBtnRef$curre2 === void 0 ? void 0 : _currHourBtnRef$curre2.call(_currHourBtnRef$curre);
@@ -60,17 +40,19 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       return !oldShowCalendar;
     });
   }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
-  useOnClickOutside(popperElement, function (e) {
+  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();
   });
-  var handleSetTriggerRef = useCallback(function (newRef) {
+  const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
   }, [pickerButtonRef]);
-  var handleMenuWrapperKeyDown = useCallback(function (e) {
-    var key = e.key;
+  const handleMenuWrapperKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
 
     if (key === 'Escape') {
       var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
@@ -79,19 +61,16 @@ var usePopperTriggerLogic = function usePopperTriggerLogic() {
       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);
     }
   }, [closeTimePicker, pickerButtonRef]);
-  return useMemo(function () {
-    return {
-      showTimePicker: showTimePicker,
-      setShowTimePicker: setShowTimePicker,
-      setPopperElement: setPopperElement,
-      setArrowElement: setArrowElement,
-      usePopperHelpers: usePopperHelpers,
-      handleToggleTimePicker: handleToggleTimePicker,
-      handleSetTriggerRef: handleSetTriggerRef,
-      handleMenuWrapperKeyDown: handleMenuWrapperKeyDown
-    };
-  }, [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
+  return useMemo(() => ({
+    showTimePicker,
+    setShowTimePicker,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleTimePicker,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown
+  }), [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
 };
 
 export { usePopperTriggerLogic };
-//# sourceMappingURL=usePopperTriggerLogic.js.map

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

@@ -3,79 +3,56 @@ import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-var ResettedInput = /*#__PURE__*/styled.input.withConfig({
+const ResettedInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-1t4k08s-0"
 })(["border:none;box-shadow:none;background:none;text-align:center;height:100%;display:flex;align-items:center;:focus{outline:none;}padding-top:2px;"]);
-var StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
+const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-1"
 })(["padding-top:2px;margin:auto;"]);
-var StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
+const StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-2"
 })(["padding-bottom:1px;margin:auto;"]);
-var Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
+const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   componentId: "sc-1t4k08s-3"
-})(["width:100%;height:100%;", ""], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? "color: #616b7f;" : "";
-});
-var StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
+})(["width:100%;height:100%;"]);
+const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   componentId: "sc-1t4k08s-4"
-})(["width:100%;height:100%;", ""], function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? "color: #616b7f;" : "";
-});
-var StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
+})(["width:100%;height:100%;"]);
+const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-5"
-})(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], function (_ref3) {
-  var isControllerOnly = _ref3.isControllerOnly;
-  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      hasError = _ref4.hasError,
-      disabled = _ref4.disabled;
-  if (hasError) return theme.colors.danger[900];
-  if (disabled) return theme.colors.neutral[400];
-  return theme.colors.neutral[200];
-}, function (_ref5) {
-  var justPicker = _ref5.justPicker;
-  return justPicker ? '0' : '2px';
-}, function (_ref6) {
-  var withAnyPicker = _ref6.withAnyPicker;
-  return withAnyPicker ? '' : '0';
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      disabled = _ref7.disabled;
-  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
-});
-var StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
+})(["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');
+const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.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;}"]);
-var StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
+const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1t4k08s-7"
 })(["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;}"]);
-var StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
+const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(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;", "}"], function (_ref8) {
-  var isControllerOnly = _ref8.isControllerOnly;
-  return isControllerOnly ? "" : "height: 26px;";
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      isControllerOnly = _ref9.isControllerOnly,
-      hasError = _ref9.hasError;
-  return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
-});
-var StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
+})(["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    "));
+const StyledFocusWithIn = /*#__PURE__*/styled(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;}}"], function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colors.brand[700];
-});
-var StyledClearButton = /*#__PURE__*/styled(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;}}"], ({
+  theme
+}) => theme.colors.brand[700]);
+const StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1t4k08s-10"
-})(["height:26px;position:relative;visibility:", ";"], function (_ref11) {
-  var shouldDisplay = _ref11.shouldDisplay;
-  return shouldDisplay ? 'visible' : 'hidden';
-});
+})(["height:26px;position:relative;visibility:", ";"], ({
+  shouldDisplay
+}) => shouldDisplay ? 'visible' : 'hidden');
 
 export { Styled2DigitsInput, StyledClearButton, StyledColonSeparator, StyledDateInputsWrapperGrid, StyledFocusWithIn, StyledInputsWrapperGrid, StyledMin4DigitsInput, StyledPickersIconsWrapperGrid, StyledSeparator, StyledTimeInputsWrapperGrid };
-//# sourceMappingURL=Styleds.js.map

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

@@ -1,30 +1,28 @@
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
 
-var regExpNumbers = /^[0-9]+$/;
+const regExpNumbers = /^[0-9]+$/;
 
-var isInvalidHour = function isInvalidHour(hours) {
+const isInvalidHour = hours => {
   if (hours === '') return false;
-  var numberOnly = regExpNumbers.test(hours);
+  const numberOnly = regExpNumbers.test(hours);
   return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;
 };
 
-var HHInput = /*#__PURE__*/React.memo(function (_ref) {
-  var onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      placeholder = _ref.placeholder,
-      ariaCurrentValueForInputs = _ref.ariaCurrentValueForInputs,
-      contextRef = _ref.contextRef,
-      autoFocusHourInput = _ref.autoFocusHourInput;
-  var validateOnChange = useCallback(function (e) {
+const HHInput = /*#__PURE__*/React.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  placeholder,
+  ariaCurrentValueForInputs,
+  contextRef,
+  autoFocusHourInput
+}) => {
+  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)) {
@@ -34,7 +32,7 @@ var HHInput = /*#__PURE__*/React.memo(function (_ref) {
 
     onChange(e);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(Styled2DigitsInput, {
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
     autoFocus: autoFocusHourInput,
     onChange: validateOnChange,
     onBlur: onBlur,
@@ -44,11 +42,8 @@ var HHInput = /*#__PURE__*/React.memo(function (_ref) {
     ref: contextRef,
     placeholder: placeholder,
     "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
-    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
-    disabled: disabled,
-    "aria-disabled": disabled
+    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
   });
 });
 
 export { HHInput };
-//# sourceMappingURL=HHInput.js.map

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

@@ -1,38 +1,31 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
 
-var validFirstDigits = ['a', 'A', 'p', 'P'];
-var validSecondDigits = ['m', 'M'];
+const validFirstDigits = ['a', 'A', 'p', 'P'];
+const validSecondDigits = ['m', 'M'];
 
-var isInvalidMeridiem = function isInvalidMeridiem(meridiem) {
+const isInvalidMeridiem = meridiem => {
   if (meridiem === '') return false;
-
-  var _meridiem$split = meridiem === null || meridiem === void 0 ? void 0 : meridiem.split(''),
-      _meridiem$split2 = _slicedToArray(_meridiem$split, 2),
-      firstDigit = _meridiem$split2[0],
-      secondDigit = _meridiem$split2[1];
-
-  var isValidFirstDigit = meridiem.length < 1 && !firstDigit || validFirstDigits.includes(firstDigit);
-  var isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);
+  const [firstDigit, secondDigit] = meridiem === null || meridiem === void 0 ? void 0 : meridiem.split('');
+  const isValidFirstDigit = meridiem.length < 1 && !firstDigit || validFirstDigits.includes(firstDigit);
+  const isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);
   return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;
 };
 
-var MeridiemInput = /*#__PURE__*/React.memo(function (_ref) {
-  var onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      placeholder = _ref.placeholder,
-      ariaCurrentValueForInputs = _ref.ariaCurrentValueForInputs,
-      contextRef = _ref.contextRef;
-  var validateOnChange = useCallback(function (e) {
+const MeridiemInput = /*#__PURE__*/React.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  placeholder,
+  ariaCurrentValueForInputs,
+  contextRef
+}) => {
+  const validateOnChange = useCallback(e => {
     var _e$target;
 
     if (isInvalidMeridiem(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
@@ -42,7 +35,7 @@ var MeridiemInput = /*#__PURE__*/React.memo(function (_ref) {
 
     onChange(e);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(Styled2DigitsInput, {
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
     onChange: validateOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -51,11 +44,8 @@ var MeridiemInput = /*#__PURE__*/React.memo(function (_ref) {
     ref: contextRef,
     placeholder: placeholder,
     "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
-    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
-    disabled: disabled,
-    "aria-disabled": disabled
+    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
   });
 });
 
 export { MeridiemInput };
-//# sourceMappingURL=MeridiemInput.js.map

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

@@ -1,29 +1,27 @@
 import React, { useCallback } from 'react';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
 import { Styled2DigitsInput } from '../Styleds.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
 
-var regExpNumbers = /^[0-9]+$/;
+const regExpNumbers = /^[0-9]+$/;
 
-var isInvalidMinute = function isInvalidMinute(minutes) {
+const isInvalidMinute = minutes => {
   if (minutes === '') return false;
-  var numberOnly = regExpNumbers.test(minutes);
+  const numberOnly = regExpNumbers.test(minutes);
   return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;
 };
 
-var MinutesInput = /*#__PURE__*/React.memo(function (_ref) {
-  var onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      value = _ref.value,
-      disabled = _ref.disabled,
-      placeholder = _ref.placeholder,
-      ariaCurrentValueForInputs = _ref.ariaCurrentValueForInputs,
-      contextRef = _ref.contextRef;
-  var validateOnChange = useCallback(function (e) {
+const MinutesInput = /*#__PURE__*/React.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  placeholder,
+  ariaCurrentValueForInputs,
+  contextRef
+}) => {
+  const validateOnChange = useCallback(e => {
     var _e$target;
 
     if (isInvalidMinute(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
@@ -33,7 +31,7 @@ var MinutesInput = /*#__PURE__*/React.memo(function (_ref) {
 
     onChange(e);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(Styled2DigitsInput, {
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
     onChange: validateOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -42,11 +40,8 @@ var MinutesInput = /*#__PURE__*/React.memo(function (_ref) {
     ref: contextRef,
     placeholder: placeholder,
     "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
-    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
-    disabled: disabled,
-    "aria-disabled": disabled
+    "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
   });
 });
 
 export { MinutesInput };
-//# sourceMappingURL=MinutesInput.js.map

package/esm/controlled-date-time-picker/parts/TimeInputs/SSInput.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { Styled2DigitsInput } from '../Styleds.js';
+import { jsx } from 'react/jsx-runtime';
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidMonth = seconds => {
+  if (seconds === '') return false;
+  const numberOnly = regExpNumbers.test(seconds);
+  return seconds.length > 2 || !numberOnly || Number.parseInt(seconds, 10) > 60;
+};
+
+const SSInput = /*#__PURE__*/React.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  placeholder,
+  contextRef
+}) => {
+  const validateOnChange = useCallback(e => {
+    var _e$target;
+
+    if (isInvalidMonth(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsx(Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "seconds input field",
+    "data-testid": "ds-controlled-date-time-picker-second-input"
+  });
+});
+
+export { SSInput };

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

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
 import { HHInput } from './HHInput.js';
@@ -7,45 +8,42 @@ import { MeridiemInput } from './MeridiemInput.js';
 import { useTimeInputs } from './useTimeInputs.js';
 import { fixedValues } from '../config.js';
 import { StyledFocusWithIn, StyledColonSeparator, StyledSeparator } from '../Styleds.js';
-import '../../ControlledDateTimePickerTypes.js';
-import '../../ControlledDateTimePickerDatatestid.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '../../utils/constants.js';
-import '../../utils/stringHelpers.js';
-import '../../utils/numberHelpers.js';
-import 'styled-components';
-import '@elliemae/ds-button';
 
-var TimeInputs = function TimeInputs() {
-  var _useTimeInputs = useTimeInputs(),
-      hours = _useTimeInputs.hours,
-      minutes = _useTimeInputs.minutes,
-      meridiem = _useTimeInputs.meridiem,
-      autoFocusHourInput = _useTimeInputs.autoFocusHourInput,
-      disabled = _useTimeInputs.disabled,
-      onHoursChange = _useTimeInputs.onHoursChange,
-      onMinutesChange = _useTimeInputs.onMinutesChange,
-      onMeridiemChange = _useTimeInputs.onMeridiemChange,
-      onHoursBlur = _useTimeInputs.onHoursBlur,
-      onMinutesBlur = _useTimeInputs.onMinutesBlur,
-      onMeridiemBlur = _useTimeInputs.onMeridiemBlur,
-      onHoursFocus = _useTimeInputs.onHoursFocus,
-      onMeridiemFocus = _useTimeInputs.onMeridiemFocus,
-      onMinutesFocus = _useTimeInputs.onMinutesFocus,
-      onHoursKeyDown = _useTimeInputs.onHoursKeyDown,
-      onMinutesKeyDown = _useTimeInputs.onMinutesKeyDown,
-      onMeridiemKeyDown = _useTimeInputs.onMeridiemKeyDown; // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo
+var _StyledColonSeparator, _StyledSeparator;
+const TimeInputs = () => {
+  const {
+    hours,
+    minutes,
+    // seconds,
+    meridiem,
+    autoFocusHourInput,
+    onHoursChange,
+    onMinutesChange,
+    // onSecondsChange,
+    onMeridiemChange,
+    onHoursBlur,
+    onMinutesBlur,
+    // onSecondsBlur,
+    onMeridiemBlur,
+    onHoursFocus,
+    onMeridiemFocus,
+    onMinutesFocus,
+    onHoursKeyDown,
+    onMinutesKeyDown,
+    // onSecondsKeyDown,
+    onMeridiemKeyDown
+  } = useTimeInputs(); // we do this here so HHInput,MinutesInput,SSInput MeridiemInput can be pure components memoized via React.memo
 
-
-  var _useContext = useContext(ControlledDateTimePickerContext),
-      hourInputRef = _useContext.hourInputRef,
-      minutesInputRef = _useContext.minutesInputRef,
-      meridiemInputRef = _useContext.meridiemInputRef,
-      ariaCurrentValueForInputs = _useContext.ariaCurrentValueForInputs;
-
-  return /*#__PURE__*/React.createElement(Grid, {
+  const {
+    hourInputRef,
+    minutesInputRef,
+    // secondsInputRef,
+    meridiemInputRef,
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
+  return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth]
-  }, /*#__PURE__*/React.createElement(StyledFocusWithIn, null, /*#__PURE__*/React.createElement(HHInput, {
+  }, void 0, /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(HHInput, {
     value: hours,
     onChange: onHoursChange,
     onBlur: onHoursBlur,
@@ -54,11 +52,10 @@ var TimeInputs = function TimeInputs() {
     contextRef: hourInputRef,
     placeholder: "HH",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    autoFocusHourInput: autoFocusHourInput,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(StyledColonSeparator, {
+    autoFocusHourInput: autoFocusHourInput
+  })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx(StyledColonSeparator, {
     alignItems: "center"
-  }, ":"), /*#__PURE__*/React.createElement(StyledFocusWithIn, null, /*#__PURE__*/React.createElement(MinutesInput, {
+  }, void 0, ":")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(MinutesInput, {
     value: minutes,
     onChange: onMinutesChange,
     onBlur: onMinutesBlur,
@@ -66,9 +63,8 @@ var TimeInputs = function TimeInputs() {
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
     placeholder: "MM",
-    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(StyledSeparator, null, " "), /*#__PURE__*/React.createElement(StyledFocusWithIn, null, /*#__PURE__*/React.createElement(MeridiemInput, {
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
+  })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(MeridiemInput, {
     value: meridiem,
     onChange: onMeridiemChange,
     onBlur: onMeridiemBlur,
@@ -76,10 +72,8 @@ var TimeInputs = function TimeInputs() {
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
     placeholder: "AM",
-    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })));
 };
 
 export { TimeInputs };
-//# sourceMappingURL=TimeInputs.js.map