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

package/cjs/controlled-checkbox/ControlledCheckbox.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.url.to-json.js');
 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');
@@ -17,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.toJSON());
+  useValidateProps.useValidateProps(props, propTypes.propTypes);
   const checkboxRef = React.useRef();
   const {
+    autoFocus,
     checked,
     ariaControls,
     ariaLabel,
@@ -38,12 +39,15 @@ 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,
     readOnly: readOnly
   }, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.StyledInput, {
+    disabled: disabled,
     ref: ref => setMultipleRefs.setMultipleRefs([checkboxRef, innerRef])(ref),
     onKeyDown: handleOnKeyDown,
     type: "checkbox",
@@ -58,14 +62,17 @@ const DSControlledCheckbox = props => {
     value: value,
     onChange: onChange,
     id: id,
-    "data-testid": "ds-checkbox"
-  })), label && /*#__PURE__*/_jsx__default['default'](styles.StyledLabel, {
+    "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

@@ -5,20 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 
 const throwError = message => {
-  throw new Error(`DSControlledCheckbox:: ${message}
-  `);
+  throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
 };
 
-const useValidateProps = (props, schema) => {
-  dsPropsHelpers.useValidatePropTypes(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.`);
+    throwError("Please provide a label or ariaLabel property to use this component.");
   }
 
   if (props.checked === 'mixed' && typeof props.ariaControls === 'undefined') {
-    throwError(`Please provide an ariaControls property to use a checkbox mixed state. 
-      This property must be a string containing all the ids that this mixed checkbox is controlling.`);
+    throwError("Please provide an ariaControls property to use a checkbox mixed state. \n      This property must be a string containing all the ids that this mixed checkbox is controlling.");
   }
 };
 

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

@@ -9,62 +9,98 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+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);
-const StyledCheckBox = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["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[500], ({
-  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 ${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  ${theme.colors.brand[600]}` : undefined);
-const StyledInput = /*#__PURE__*/styled__default['default'].input.withConfig({
+})(["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;"]);
-const StyledLabel = /*#__PURE__*/styled__default['default'].label.withConfig({
+})(["&: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,38 +22,24 @@ 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 {
-      position: absolute;
-    content: '';
-    top: 6px;
-    left: 3px;
-    background: ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-    width: ${theme.space.xxs};
-    height: 2px;
-    }`;
+    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    }");
   }
 
   if (checked) {
-    return `&:before {
-      position: absolute;
-      content: '';
-          top: 3px;
-          left: 2px;
-          border-left: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          border-bottom: 2px solid ${handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering)};
-          height: 5px;
-          width: 10px;
-          transform: rotate(-45deg);
-    }`;
+    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, disabled, readOnly, hasError, checked, isHovering), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
   }
 
   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/ControlledDateRangePicker.js

@@ -18,9 +18,9 @@ var _ControlledDateRangeC;
 
 const DSControlledDateRangePicker = props => {
   const ctx = useControlledDateRangePicker.useControlledDateRangePicker(props);
-  return /*#__PURE__*/_jsx__default['default'](ControlledDateRangePickerCTX.ControlledDateRangePickerContext.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](ControlledDateRangePickerCTX.ControlledDateRangePickerContext.Provider, {
     value: ctx
-  }, void 0, _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx__default['default'](ControlledDateRangeContent.ControlledDateRangeContent, {})));
+  }, void 0, _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeContent.ControlledDateRangeContent, {})));
 };
 
 const DSControlledDateRangePickerWithSchema = reactDesc.describe(DSControlledDateRangePicker);

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

@@ -27,7 +27,8 @@ const defaultProps = {
   onCalendarOpenFocusedDay: undefined,
   isClearable: false,
   getIsDisabledDay: defaultReturnFalse,
-  getIsOutOfRangeDay: defaultReturnFalse
+  getIsOutOfRangeDay: defaultReturnFalse,
+  autoFocus: false
 };
 const defaultContext = {
   props: defaultProps,
@@ -55,5 +56,5 @@ const defaultContext = {
 const ControlledDateRangePickerContext = /*#__PURE__*/React.createContext(defaultContext);
 
 exports.ControlledDateRangePickerContext = ControlledDateRangePickerContext;
-exports['default'] = ControlledDateRangePickerContext;
+exports["default"] = ControlledDateRangePickerContext;
 exports.defaultProps = defaultProps;

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

@@ -3,8 +3,16 @@
 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');
 
@@ -14,19 +22,20 @@ 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
-}) => {
+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 = _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,7 +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');
 
@@ -39,7 +47,7 @@ const ControlledDateRangeCalendar = () => {
     },
     isControllerOnly
   } = React.useContext(ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](ControlledDateTimePicker.DSControlledDateTimePicker, {
+  return /*#__PURE__*/_jsx__default["default"](ControlledDateTimePicker.DSControlledDateTimePicker, {
     type: isControllerOnly ? ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY : ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER,
     date: latestChangedDate,
     onDateChange: handlePickerDateChange,

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,26 +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;
-const StyledWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+
+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;gap:0px 8px;grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"]);
+})(["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, {}, 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,7 +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 }; }
@@ -24,13 +32,14 @@ const ControlledDateRangeFromDate = () => {
       isClearable,
       getIsDisabledDay,
       getIsOutOfRangeDay,
-      hasError
+      hasError,
+      autoFocus
     },
     rangePickerLogic: {
       handleFromDateChange
     }
   } = React.useContext(ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](ControlledDateTimePicker.DSControlledDateTimePicker, {
+  return /*#__PURE__*/_jsx__default["default"](ControlledDateTimePicker.DSControlledDateTimePicker, {
     type: ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS,
     date: fromDate,
     onDateChange: handleFromDateChange,
@@ -40,7 +49,8 @@ const ControlledDateRangeFromDate = () => {
     isClearable: isClearable,
     getIsDisabledDay: getIsDisabledDay,
     getIsOutOfRangeDay: getIsOutOfRangeDay,
-    hasError: hasError
+    hasError: hasError,
+    autoFocus: autoFocus
   });
 };