@elliemae/ds-controlled-form 2.0.0-alpha.11 → 2.0.0-alpha.12

package/cjs/controlled-checkbox/ControlledCheckbox.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactDesc = require('react-desc');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var propTypes = require('./propTypes.js');
 var styles = require('./styles.js');
 var useValidateProps = require('./config/useValidateProps.js');
@@ -16,9 +17,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const DSControlledCheckbox = props => {
-  useValidateProps.useValidateProps(props, DSControlledCheckboxWithSchema.toTypescript());
+  useValidateProps.useValidateProps(props, propTypes.propTypes);
   const checkboxRef = React.useRef();
   const {
+    autoFocus,
     checked,
     ariaControls,
     ariaLabel,
@@ -37,7 +39,9 @@ const DSControlledCheckbox = props => {
       checkboxRef.current.click();
     }
   }, []);
-  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCheckBox, {
+  return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
+    "data-testid": "ds-checkbox-container"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCheckBox, {
     checked: props.checked,
     hasError: hasError,
     disabled: disabled,
@@ -58,14 +62,17 @@ const DSControlledCheckbox = props => {
     value: value,
     onChange: onChange,
     id: id,
-    "data-testid": "ds-checkbox"
+    "data-testid": "ds-checkbox",
+    autoFocus: autoFocus
   })), label && /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
     htmlFor: id,
     disabled: disabled,
     readOnly: readOnly,
     checked: checked,
     "data-testid": "ds-checkbox-label"
-  }, void 0, label));
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: label
+  })));
 };
 
 const DSControlledCheckboxWithSchema = reactDesc.describe(DSControlledCheckbox);

package/cjs/controlled-checkbox/config/useValidateProps.js

@@ -8,8 +8,8 @@ const throwError = message => {
   throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
 };
 
-const useValidateProps = (props, schema) => {
-  dsPropsHelpers.useValidateTypescriptPropTypes(props, schema);
+const useValidateProps = (props, propTypes) => {
+  dsPropsHelpers.useValidateTypescriptPropTypes(props, propTypes);
 
   if (typeof props.label === 'undefined' && typeof props.ariaLabel === 'undefined') {
     throwError("Please provide a label or ariaLabel property to use this component.");

package/cjs/controlled-checkbox/propTypes.js

@@ -5,17 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 const propTypes = {
-  checked: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.bool, reactDesc.PropTypes.oneOf(['mixed'])]).isRequired.description('Wether the checkbox is invalid or not.'),
+  checked: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.bool, reactDesc.PropTypes.oneOf(['mixed'])]).isRequired.description('Whether the checkbox is invalid or not.'),
   value: reactDesc.PropTypes.string.description('Checkbox value property.'),
   name: reactDesc.PropTypes.string.isRequired.description('Checkbox name property.'),
   label: reactDesc.PropTypes.string.description('Checkbox Label property. This label is also going to be used as an aria-label for screen readers.'),
   id: reactDesc.PropTypes.string.isRequired.description('Checkbox unique id property, this property is required for accesibility purposes.'),
   readOnly: reactDesc.PropTypes.bool.description('Checkbox readOnly property.'),
-  hasError: reactDesc.PropTypes.bool.description('Wether the checkbox has error or not.'),
-  disabled: reactDesc.PropTypes.bool.description('Wether the checkbox is disabled or not.'),
+  hasError: reactDesc.PropTypes.bool.description('Whether the checkbox has error or not.'),
+  disabled: reactDesc.PropTypes.bool.description('Whether the checkbox is disabled or not.'),
   ariaControls: reactDesc.PropTypes.string.description('This string is required when you use a mixed checkbox. It contains all the ids that this checkbox is controlling.'),
   ariaLabel: reactDesc.PropTypes.string.description('Checkbox aria-label property. This property is going to be required if there is no label property added.'),
-  innerRef: reactDesc.PropTypes.func.description('Checkbox input ref.')
+  innerRef: reactDesc.PropTypes.func.description('Checkbox input ref.'),
+  autoFocus: reactDesc.PropTypes.bool.description('Whether you want the checkbox to be autofocused on render')
 };
 
 exports.propTypes = propTypes;

package/cjs/controlled-checkbox/styles.js

@@ -11,60 +11,96 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-349ih4-0"
-})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], ({
-  theme
-}) => theme.space.xs);
+})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space.xs;
+});
 const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-349ih4-1"
-})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], ({
-  theme
-}) => theme.space.xs, ({
-  theme
-}) => theme.space.xs, ({
-  theme,
-  hasError
-}) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400], ({
-  theme,
-  disabled
-}) => styleHelpers.handleBackgroundColor(theme, disabled), ({
-  theme,
-  checked,
-  disabled,
-  readOnly,
-  hasError
-}) => styleHelpers.handleCheckmark(theme, checked, disabled, readOnly, hasError), ({
-  theme,
-  hasError,
-  disabled
-}) => !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined, ({
-  theme,
-  checked,
-  disabled,
-  readOnly,
-  hasError
-}) => styleHelpers.handleCheckmark(theme, checked, disabled, readOnly, hasError, true), ({
-  theme,
-  checked,
-  disabled
-}) => !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined, ({
-  theme,
-  hasError,
-  disabled,
-  readOnly
-}) => !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined);
+})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space.xs;
+}, _ref4 => {
+  let {
+    theme,
+    hasError
+  } = _ref4;
+  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
+}, _ref5 => {
+  let {
+    theme,
+    disabled
+  } = _ref5;
+  return styleHelpers.handleBackgroundColor(theme, disabled);
+}, _ref6 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    hasError
+  } = _ref6;
+  return styleHelpers.handleCheckmark(theme, checked, disabled, readOnly, hasError);
+}, _ref7 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref7;
+  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
+}, _ref8 => {
+  let {
+    theme,
+    checked,
+    disabled,
+    readOnly,
+    hasError
+  } = _ref8;
+  return styleHelpers.handleCheckmark(theme, checked, disabled, readOnly, hasError, true);
+}, _ref9 => {
+  let {
+    theme,
+    checked,
+    disabled
+  } = _ref9;
+  return !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined;
+}, _ref10 => {
+  let {
+    theme,
+    hasError,
+    disabled,
+    readOnly
+  } = _ref10;
+  return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
+});
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
   componentId: "sc-349ih4-2"
-})(["&:hover{cursor:pointer;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
+})(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
 const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
   componentId: "sc-349ih4-3"
-})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;"], ({
-  theme
-}) => theme.space.xxs, ({
-  theme,
-  disabled,
-  readOnly,
-  checked
-}) => disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800]);
+})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xxs;
+}, _ref12 => {
+  let {
+    theme,
+    disabled,
+    readOnly,
+    checked
+  } = _ref12;
+  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+});
 
 exports.StyledCheckBox = StyledCheckBox;
 exports.StyledContainer = StyledContainer;

package/cjs/controlled-checkbox/utils/setMultipleRefs.js

@@ -2,6 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
 function setMultipleRefs(refs) {
   return value => {
     refs.forEach(ref => {

package/cjs/controlled-checkbox/utils/styleHelpers.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /* eslint-disable max-params */
-const handleCheckMarkColor = ({
-  colors
-}, disabled, readOnly, hasError, checked, isHovering) => {
+const handleCheckMarkColor = (_ref, disabled, readOnly, hasError, checked, isHovering) => {
+  let {
+    colors
+  } = _ref;
+
   if (hasError) {
     return colors.danger[900];
   }
@@ -20,7 +22,9 @@ const handleCheckMarkColor = ({
 
   return colors.brand[500];
 };
-const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHovering = false) => {
+const handleCheckmark = function (theme, checked, disabled, readOnly, hasError) {
+  let isHovering = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+
   if (checked === 'mixed') {
     return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
   }
@@ -31,9 +35,11 @@ const handleCheckmark = (theme, checked, disabled, readOnly, hasError, isHoverin
 
   return undefined;
 };
-const handleBackgroundColor = ({
-  colors
-}, disabled) => {
+const handleBackgroundColor = (_ref2, disabled) => {
+  let {
+    colors
+  } = _ref2;
+
   if (disabled) {
     return colors.neutral['080'];
   }

package/cjs/controlled-date-range-picker/ControlledDateRangePickerDatatestid.js

@@ -3,24 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const ControlledDateRangePickerDatatestid = {
-  FROM_DATE_INPUTS: {
-    MONTH: 'ds-controlled-date-range-picker-from-month-input',
-    DAY: 'ds-controlled-date-range-picker-from-day-input',
-    YEAR: 'ds-controlled-date-range-picker-from-year-input'
-  },
-  TO_DATE_INPUTS: {
-    MONTH: 'ds-controlled-date-range-picker-to-month-input',
-    DAY: 'ds-controlled-date-range-picker-to-day-input',
-    YEAR: 'ds-controlled-date-range-picker-to-year-input'
-  },
-  PICKER_ICON: 'ds-controlled-date-range-picker-calendar-trigger-icon',
-  CALENDAR: {
-    DAY: 'ds-controlled-date-range-picker-calendar-day',
-    FROM_DAY: 'ds-controlled-date-range-picker-calendar-from-day',
-    TO_DAY: 'ds-controlled-date-range-picker-calendar-to-day'
-  },
-  FROM_CLEAR_BUTTON: 'ds-controlled-date-range-picker-from-clear-btn',
-  TO_CLEAR_BUTTON: 'ds-controlled-date-range-picker-to-clear-btn'
+  WRAPPER: 'ds-controlled-date-range-picker-wrapper'
 };
 
 exports.ControlledDateRangePickerDatatestid = ControlledDateRangePickerDatatestid;

package/cjs/controlled-date-range-picker/config/useControlledDateRangePicker.js

@@ -2,16 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var uid = require('uid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
 var useRangePickerLogic = require('./useRangePickerLogic.js');
 var ControlledDateRangePickerTypes = require('../ControlledDateRangePickerTypes.js');
 
-/* eslint-disable max-lines */
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 useControlledDateRangePicker = props => {
   const instanceUID = React.useMemo(() => uid.uid(6), []);
   const propsWithDefaults = useGetPropsWithDefault.useGetDateRangePickerWithDefaultsProps(props);
+  const dataAttrs = dsPropsHelpers.getDataProps(props);
   const {
     type
   } = propsWithDefaults;
@@ -20,13 +34,15 @@ const useControlledDateRangePicker = props => {
   const isControllerOnly = type === ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;
   const rangePickerLogic = useRangePickerLogic.useRangePickerLogic(propsWithDefaults);
   const ctx = React.useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     instanceUID,
     rangePickerLogic,
     withInputs,
     withIcon,
     isControllerOnly
-  }), [instanceUID, isControllerOnly, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
+  }), [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
   return ctx;
 };
 

package/cjs/controlled-date-range-picker/config/useRangePickerLogic.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/es.string.replace.js');
 var dateHelpers = require('../../controlled-date-time-picker/utils/dateHelpers.js');
 
@@ -16,18 +23,19 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 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__default["default"](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 useRangePickerLogic = ({
-  fromDate,
-  onFromDateChange,
-  onMonthFromChange,
-  onDayFromChange,
-  onYearFromChange,
-  toDate,
-  onMonthToChange,
-  onDayToChange,
-  onYearToChange,
-  onToDateChange
-}) => {
+const useRangePickerLogic = _ref => {
+  let {
+    fromDate,
+    onFromDateChange,
+    onMonthFromChange,
+    onDayFromChange,
+    onYearFromChange,
+    toDate,
+    onMonthToChange,
+    onDayToChange,
+    onYearToChange,
+    onToDateChange
+  } = _ref;
   // the implementation is based on controlled-date-time-picker that is not meant to "understand"
   // the "from" - "to" logic on click, we are "overloading" the "from" - "to" logic here
   // we track wheter we are going to set the "from" OR "to" controlled date based on this toggle

package/cjs/controlled-date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -6,8 +6,15 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
 var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@babel/runtime/helpers/defineProperty');
 var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
 

package/cjs/controlled-date-range-picker/parts/ControlledDateRangeContent.js

@@ -2,6 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var styled = require('styled-components');
@@ -9,30 +15,45 @@ var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js')
 var ControlledDateRangeFromDate = require('./ControlledDateRangeFromDate.js');
 var ControlledDateRangeToDate = require('./ControlledDateRangeToDate.js');
 var ControlledDateRangeCalendar = require('./ControlledDateRangeCalendar.js');
+var ControlledDateRangePickerDatatestid = require('../ControlledDateRangePickerDatatestid.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _ControlledDateRangeF, _ControlledDateRangeT, _ControlledDateRangeC;
+
+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__default["default"](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 StyledWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-e4pfvj-0"
-})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], ({
-  isControllerOnly
-}) => isControllerOnly ? undefined : 'gap: 0px 8px;');
+})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], _ref => {
+  let {
+    isControllerOnly
+  } = _ref;
+  return isControllerOnly ? undefined : 'gap: 0px 8px;';
+});
 const ControlledDateRangeContent = () => {
   const {
+    props: {
+      dataAttrs
+    },
     withIcon,
     withInputs,
     isControllerOnly
   } = React.useContext(ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx__default["default"](StyledWrapper, {
-    isControllerOnly: isControllerOnly
-  }, void 0, withInputs ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeFromDate.ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeToDate.ControlledDateRangeToDate, {}))]
-  }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeCalendar.ControlledDateRangeCalendar, {})) : null);
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledWrapper, _objectSpread(_objectSpread({
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateRangePickerDatatestid.ControlledDateRangePickerDatatestid.WRAPPER
+  }, dataAttrs), {}, {
+    children: [withInputs ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeFromDate.ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeToDate.ControlledDateRangeToDate, {}))]
+    }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeCalendar.ControlledDateRangeCalendar, {})) : null]
+  }));
 };
 
 exports.ControlledDateRangeContent = ControlledDateRangeContent;

package/cjs/controlled-date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -7,8 +7,15 @@ var React = require('react');
 var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
 var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
 var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@babel/runtime/helpers/defineProperty');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/controlled-date-range-picker/parts/ControlledDateRangeToDate.js

@@ -7,8 +7,15 @@ var React = require('react');
 var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
 var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
 var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@babel/runtime/helpers/defineProperty');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/controlled-date-time-picker/ControlledDateTimePickerCTX.js

@@ -40,6 +40,7 @@ const defaultProps = {
   onCalendarOpenFocusedDay: undefined,
   minutesInterval: 1,
   isClearable: false,
+  disabled: false,
   hasError: false,
   autoFocus: false,
   preventCloseOnSelection: false,
@@ -70,6 +71,9 @@ const defaultContext = {
   prevMeridiemBtnRef: /*#__PURE__*/React.createRef(),
   currMeridiemBtnRef: /*#__PURE__*/React.createRef(),
   nextMeridiemBtnRef: /*#__PURE__*/React.createRef(),
+  firstSegmentRef: /*#__PURE__*/React.createRef(),
+  lastSegmentRef: /*#__PURE__*/React.createRef(),
+  ariaCurrentValueForInputs: '',
   dateStringFromProps: '',
   tempDateString: '__/__/____',
   // setDateString: mockedStringStateSetter,
@@ -78,6 +82,12 @@ const defaultContext = {
   handleChangeComposedDateTimeString: noop,
   handleChangeComposedDateString: noop,
   handleChangeComposedTimeString: noop,
+  handleChangeMonth: noop,
+  handleChangeDay: noop,
+  handleChangeYear: noop,
+  handleChangeHours: noop,
+  handleChangeMinutes: noop,
+  handleChangeMeridiem: noop,
   handleClearAll: noop,
   hideDate: false,
   hideTime: false,
@@ -104,7 +114,8 @@ const defaultContext = {
   autoFocusHourTimeWheel: false,
   shouldPreserveClearableSpace: false,
   latestInteractionRegion: '',
-  setLatestInteractionRegion: mockedSetLatestInteractionRegion
+  setLatestInteractionRegion: mockedSetLatestInteractionRegion,
+  onGlobalKeyDown: noop
 };
 /** Context for cross component communication */
 

package/cjs/controlled-date-time-picker/ControlledDateTimePickerDatatestid.js

@@ -23,6 +23,11 @@ const ControlledDateTimePickerDatatestid = {
     PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',
     DAY: 'ds-controlled-date-time-picker-calendar-day',
     FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',
+    START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day',
+    // <-nuevo
+    IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day',
+    // <-nuevo
+    END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',
     SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',
     SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',
     NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',