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

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

@@ -4,70 +4,108 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var dsGrid = require('@elliemae/ds-grid');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 /* eslint-disable max-lines */
-const ResettedInput = /*#__PURE__*/styled__default['default'].input.withConfig({
+const ResettedInput = /*#__PURE__*/styled__default["default"].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;"]);
-const StyledSeparator = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const StyledSeparator = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-1"
 })(["padding-top:2px;margin:auto;"]);
-const StyledColonSeparator = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const StyledColonSeparator = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-2"
 })(["padding-bottom:1px;margin:auto;"]);
-const Styled2DigitsInput = /*#__PURE__*/styled__default['default'](ResettedInput).withConfig({
+const Styled2DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
   componentId: "sc-1t4k08s-3"
-})(["width:100%;height:100%;"]);
-const StyledMin4DigitsInput = /*#__PURE__*/styled__default['default'](ResettedInput).withConfig({
+})(["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%;"]);
-const StyledInputsWrapperGrid = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+})(["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 : `
-  height: 28px;    
-  border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]};
-  `, ({
-  justPicker
-}) => justPicker ? '0' : '2px', ({
-  withAnyPicker
-}) => withAnyPicker ? '' : '0');
-const StyledDateInputsWrapperGrid = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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;}"]);
-const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled__default["default"].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;}"]);
-const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-1t4k08s-8"
-})(["position:relative;", " & > .em-ds-button--text:not([disabled]){height:26px;width:26px;&:focus{&:after{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);}}}: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 : `
-    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
-    `);
-const StyledFocusWithIn = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+})(["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__default['default']).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:", ";&.em-ds-button--m.em-ds-button--icon-only{width:27px;}&.em-ds-button--text:not([disabled]){&:focus{&:after{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);}}}"], ({
-  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,15 +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,
-  contextRef
-}) => {
+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;
 
@@ -39,6 +43,7 @@ const HHInput = /*#__PURE__*/React__default['default'].memo(({
     onChange(e);
   }, [onChange]);
   return /*#__PURE__*/jsxRuntime.jsx(Styleds.Styled2DigitsInput, {
+    autoFocus: autoFocusHourInput,
     onChange: validateOnChange,
     onBlur: onBlur,
     onFocus: onFocus,
@@ -46,8 +51,10 @@ const HHInput = /*#__PURE__*/React__default['default'].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "hours input field",
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
+    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
@@ -22,15 +23,18 @@ const isInvalidMeridiem = meridiem => {
   return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;
 };
 
-const MeridiemInput = /*#__PURE__*/React__default['default'].memo(({
-  onChange,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  value,
-  placeholder,
-  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;
 
@@ -49,8 +53,10 @@ const MeridiemInput = /*#__PURE__*/React__default['default'].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "meridiem input field",
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

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

@@ -19,15 +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,
-  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;
 
@@ -46,8 +49,10 @@ const MinutesInput = /*#__PURE__*/React__default['default'].memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "minutes input field",
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
+    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
+    disabled: disabled,
+    "aria-disabled": disabled
   });
 });
 

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

@@ -24,6 +24,8 @@ const TimeInputs = () => {
     minutes,
     // seconds,
     meridiem,
+    autoFocusHourInput,
+    disabled,
     onHoursChange,
     onMinutesChange,
     // onSecondsChange,
@@ -39,42 +41,49 @@ 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
+    meridiemInputRef,
+    ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth]
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default['default'](HHInput.HHInput, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](HHInput.HHInput, {
     value: hours,
     onChange: onHoursChange,
     onBlur: onHoursBlur,
     onFocus: onHoursFocus,
     onKeyDown: onHoursKeyDown,
     contextRef: hourInputRef,
-    placeholder: "HH"
-  })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx__default['default'](Styleds.StyledColonSeparator, {
+    placeholder: "HH",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    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, {
+  }, void 0, ":")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MinutesInput.MinutesInput, {
     value: minutes,
     onChange: onMinutesChange,
     onBlur: onMinutesBlur,
     onFocus: onMeridiemFocus,
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
-    placeholder: "MM"
-  })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default['default'](Styleds.StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx__default['default'](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default['default'](MeridiemInput.MeridiemInput, {
+    placeholder: "MM",
+    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,
     onBlur: onMeridiemBlur,
     onFocus: onMinutesFocus,
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
-    placeholder: "AM"
+    placeholder: "AM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
   })));
 };