@elliemae/ds-controlled-form 2.0.0-alpha.1 → 2.0.0-alpha.13

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

@@ -1,15 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import CloseMedium from '@elliemae/ds-icons/CloseMedium';
-import { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
+import { CloseMedium } from '@elliemae/ds-icons';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
 import { StyledClearButton } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
 import { useClearButton } from './useClearButton.js';
 
-var _CloseMedium;
 const ClearButton = () => {
   const {
     onClearClick,
+    onClearButtonKeyDown,
     clearButtonRef,
     withAnyPicker,
     withClearBtn
@@ -17,15 +18,17 @@ const ClearButton = () => {
   return /*#__PURE__*/_jsx(StyledClearButton, {
     shouldDisplay: withClearBtn,
     "aria-label": "clear selected date",
-    buttonType: "text",
-    leftIcon: _CloseMedium || (_CloseMedium = /*#__PURE__*/_jsx(CloseMedium, {})),
-    size: "m",
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
     variant: BUTTON_VARIANT.DEFAULT,
     "data-testid": ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
     innerRef: clearButtonRef,
     onClick: onClearClick,
+    onKeyDown: onClearButtonKeyDown,
     withAnyPicker: withAnyPicker
-  });
+  }, void 0, /*#__PURE__*/_jsx(CloseMedium, {
+    color: DSIconColors.PRIMARY
+  }));
 };
 
 export { ClearButton };

package/esm/controlled-date-time-picker/parts/ClearButton/useClearButton.js

@@ -7,15 +7,60 @@ const useClearButton = () => {
     handleClearAll,
     clearButtonRef,
     withAnyPicker,
-    withClearBtn
+    withClearBtn,
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isTimeSelector,
+    hourInputRef,
+    monthInputRef,
+    pickerButtonRef,
+    meridiemInputRef,
+    yearInputRef,
+    setLatestInteractionRegion
   } = useContext(ControlledDateTimePickerContext);
-  const onClearClick = useCallback(e => handleClearAll(e), [handleClearAll]);
+  const focusFirstRegion = useCallback(() => {
+    var _hourInputRef$current, _hourInputRef$current2, _monthInputRef$curren, _monthInputRef$curren2;
+
+    if (withAnyInputs) if (isTimeSelector) 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);else 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);
+  }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
+  const onClearClick = useCallback(e => {
+    handleClearAll(e);
+    setLatestInteractionRegion('clear-btn');
+    focusFirstRegion();
+  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
+  const onHomeKeyDown = useCallback(() => {
+    focusFirstRegion();
+  }, [focusFirstRegion]);
+  const onEndKeyDown = useCallback(() => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
+    if (withAnyPicker) 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);
+  }, [withAnyPicker, pickerButtonRef]);
+  const onClearButtonKeyDown = useCallback(e => {
+    const {
+      key
+    } = e;
+    const preventDefaultKeys = ['Home', 'End'];
+    const stopPropagationKeys = ['Home', 'End'];
+    if (preventDefaultKeys.includes(key)) e.preventDefault();
+    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (key === 'Home') onHomeKeyDown();
+    if (key === 'End') onEndKeyDown();
+
+    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, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
   return useMemo(() => ({
     onClearClick,
+    onClearButtonKeyDown,
     clearButtonRef,
     withAnyPicker,
     withClearBtn
-  }), [onClearClick, clearButtonRef, withAnyPicker, withClearBtn]);
+  }), [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]);
 };
 
 export { useClearButton };

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

@@ -1,3 +1,9 @@
+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 React from 'react';
 import { Grid } from '@elliemae/ds-grid';
@@ -7,8 +13,13 @@ import { DateInputs } from './DateInputs/DateInputs.js';
 import { TimeInputs } from './TimeInputs/TimeInputs.js';
 import { PickersIcons } from './Pickers/PickersIcons.js';
 import { ClearButton } from './ClearButton/ClearButton.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 var _DateInputs, _TimeInputs, _ClearButton, _PickersIcons;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const ControlledDateTimePickerContent = () => {
   const {
     hideDate,
@@ -22,8 +33,11 @@ const ControlledDateTimePickerContent = () => {
     shouldPreserveClearableSpace,
     isControllerOnly,
     props: {
-      hasError
-    }
+      hasError,
+      dataAttrs,
+      disabled
+    },
+    onGlobalKeyDown
   } = React.useContext(ControlledDateTimePickerContext);
   const resetLatestInteraction = React.useCallback(() => {
     setLatestInteractionRegion('');
@@ -35,18 +49,24 @@ const ControlledDateTimePickerContent = () => {
   const rightControlCols = [];
   if (shouldPreserveClearableSpace) rightControlCols.push('28px');
   if (withAnyPicker) rightControlCols.push('auto');
-  return /*#__PURE__*/_jsx(StyledInputsWrapperGrid, {
-    cols: mainCols,
-    gutter: "xxs",
-    pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
-    justPicker: hideDate && hideTime,
-    withAnyPicker: withAnyPicker,
-    onBlur: resetLatestInteraction,
-    hasError: hasError,
-    isControllerOnly: isControllerOnly
-  }, void 0, hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx(DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx(TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx(Grid, {
-    cols: rightControlCols
-  }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx(ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx(PickersIcons, {})) : null) : null);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs(StyledInputsWrapperGrid, _objectSpread(_objectSpread({
+      cols: mainCols,
+      gutter: "xxs",
+      pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
+      justPicker: hideDate && hideTime,
+      withAnyPicker: withAnyPicker,
+      onBlur: resetLatestInteraction,
+      onKeyDown: onGlobalKeyDown,
+      hasError: hasError,
+      isControllerOnly: isControllerOnly,
+      disabled: disabled
+    }, dataAttrs), {}, {
+      children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx(DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx(TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx(Grid, {
+        cols: rightControlCols
+      }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx(ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx(PickersIcons, {})) : null) : null]
+    }))
+  });
 };
 
 export { ControlledDateTimePickerContent };

package/esm/controlled-date-time-picker/parts/DateInputs/DDInput.js

@@ -11,15 +11,18 @@ const isInvalidDay = day => {
   return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;
 };
 
-const DDInput = /*#__PURE__*/React.memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  contextRef,
-  placeholder
-}) => {
+const DDInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    contextRef,
+    placeholder,
+    ariaCurrentValueForInputs
+  } = _ref;
   const validateOnChange = useCallback(e => {
     var _e$target;
 
@@ -38,8 +41,10 @@ const DDInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "day input field",
-    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY
+    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

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

@@ -15,6 +15,7 @@ const DateInputs = () => {
     month,
     day,
     year,
+    autoFocusMonthInput,
     onMonthChange,
     onDayChange,
     onYearChange,
@@ -26,13 +27,15 @@ const DateInputs = () => {
     onYearFocus,
     onMonthKeyDown,
     onDayKeyDown,
-    onYearKeyDown
+    onYearKeyDown,
+    disabled
   } = useDateInputs(); // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo
 
   const {
     monthInputRef,
     dayInputRef,
-    yearInputRef
+    yearInputRef,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.largeInputWidth]
@@ -43,7 +46,10 @@ const DateInputs = () => {
     onKeyDown: onMonthKeyDown,
     value: month,
     contextRef: monthInputRef,
-    placeholder: "MM"
+    autoFocusMonthInput: autoFocusMonthInput,
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(DDInput, {
@@ -53,7 +59,9 @@ const DateInputs = () => {
     onKeyDown: onDayKeyDown,
     value: day,
     contextRef: dayInputRef,
-    placeholder: "DD"
+    placeholder: "DD",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(YYYYInput, {
@@ -63,7 +71,9 @@ const DateInputs = () => {
     onKeyDown: onYearKeyDown,
     value: year,
     contextRef: yearInputRef,
-    placeholder: "YYYY"
+    placeholder: "YYYY",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })));
 };
 

package/esm/controlled-date-time-picker/parts/DateInputs/MMInput.js

@@ -11,15 +11,19 @@ const isInvalidMonth = month => {
   return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;
 };
 
-const MMInput = /*#__PURE__*/React.memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  contextRef
-}) => {
+const MMInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    contextRef,
+    autoFocusMonthInput,
+    ariaCurrentValueForInputs
+  } = _ref;
   const validateOnChange = useCallback(e => {
     var _e$target;
 
@@ -31,6 +35,7 @@ const MMInput = /*#__PURE__*/React.memo(({
     onChange(e);
   }, [onChange]);
   return /*#__PURE__*/jsx(Styled2DigitsInput, {
+    autoFocus: autoFocusMonthInput,
     onChange: validateOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -38,8 +43,10 @@ const MMInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "month input field",
-    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH
+    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

package/esm/controlled-date-time-picker/parts/DateInputs/YYYYInput.js

@@ -11,15 +11,18 @@ const isInvalidYear = year => {
   return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;
 };
 
-const YYYYInput = /*#__PURE__*/React.memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  contextRef
-}) => {
+const YYYYInput = /*#__PURE__*/React.memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    contextRef,
+    ariaCurrentValueForInputs
+  } = _ref;
   const validateOnChange = useCallback(e => {
     var _e$target;
 
@@ -38,8 +41,10 @@ const YYYYInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "year input field",
-    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR
+    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });