@elliemae/ds-controlled-form 2.0.0-rc.1 → 2.0.0-rc.10

package/cjs/controlled-checkbox/ControlledCheckbox.js

@@ -17,7 +17,7 @@ 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,

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/styles.js

@@ -84,7 +84,7 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
 });
 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;display:inherit;"], _ref11 => {

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/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');
@@ -14,10 +20,15 @@ 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;"], _ref => {
@@ -28,16 +39,21 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 });
 const ControlledDateRangeContent = () => {
   const {
+    props: {
+      dataAttrs
+    },
     withIcon,
     withInputs,
     isControllerOnly
   } = React.useContext(ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx__default["default"](StyledWrapper, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledWrapper, _objectSpread(_objectSpread({
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateRangePickerDatatestid.ControlledDateRangePickerDatatestid.WRAPPER
-  }, 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);
+  }, 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-time-picker/config/useControlledDateTimePicker.js

@@ -10,6 +10,7 @@ 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');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
 var useGetDestructuredValues = require('./useGetDestructuredValues.js');
 var ControlledDateTimePickerTypes = require('../ControlledDateTimePickerTypes.js');
@@ -54,6 +55,7 @@ const useControlledDateTimePicker = props => {
   const currMeridiemBtnRef = React.useRef();
   const nextMeridiemBtnRef = React.useRef();
   const propsWithDefaults = useGetPropsWithDefault.useGetDatePickerWithDefaultsProps(props);
+  const dataAttrs = dsPropsHelpers.getDataProps(props);
   const {
     type,
     getIsDisabledDay,
@@ -361,7 +363,9 @@ const useControlledDateTimePicker = props => {
     if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
   }, [handleClearAll, onFillWithCurrentDateKeys]);
   const ctx = React__default["default"].useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     monthInputRef,
     dayInputRef,
     yearInputRef,
@@ -448,7 +452,7 @@ const useControlledDateTimePicker = props => {
     announcedTimeValues,
     ariaCurrentValueForInputs,
     onGlobalKeyDown
-  }), [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
+  }), [dataAttrs, propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
   );
   return ctx;
 };

package/cjs/controlled-date-time-picker/parts/ControlledDateTimePickerContent.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 dsGrid = require('@elliemae/ds-grid');
@@ -15,10 +21,15 @@ 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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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__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 ControlledDateTimePickerContent = () => {
   const {
     hideDate,
@@ -33,6 +44,7 @@ const ControlledDateTimePickerContent = () => {
     isControllerOnly,
     props: {
       hasError,
+      dataAttrs,
       disabled
     },
     onGlobalKeyDown
@@ -48,7 +60,7 @@ const ControlledDateTimePickerContent = () => {
   if (shouldPreserveClearableSpace) rightControlCols.push('28px');
   if (withAnyPicker) rightControlCols.push('auto');
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/_jsx__default["default"](Styleds.StyledInputsWrapperGrid, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Styleds.StyledInputsWrapperGrid, _objectSpread(_objectSpread({
       cols: mainCols,
       gutter: "xxs",
       pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
@@ -59,9 +71,11 @@ const ControlledDateTimePickerContent = () => {
       hasError: hasError,
       isControllerOnly: isControllerOnly,
       disabled: disabled
-    }, void 0, hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx__default["default"](DateInputs.DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx__default["default"](TimeInputs.TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      cols: rightControlCols
-    }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx__default["default"](ClearButton.ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx__default["default"](PickersIcons.PickersIcons, {})) : null) : null)
+    }, dataAttrs), {}, {
+      children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx__default["default"](DateInputs.DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx__default["default"](TimeInputs.TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        cols: rightControlCols
+      }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx__default["default"](ClearButton.ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx__default["default"](PickersIcons.PickersIcons, {})) : null) : null]
+    }))
   });
 };
 

package/esm/controlled-checkbox/ControlledCheckbox.js

@@ -9,7 +9,7 @@ import { setMultipleRefs } from './utils/setMultipleRefs.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DSControlledCheckbox = props => {
-  useValidateProps(props, DSControlledCheckboxWithSchema.toTypescript());
+  useValidateProps(props, propTypes);
   const checkboxRef = useRef();
   const {
     autoFocus,

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

@@ -4,8 +4,8 @@ const throwError = message => {
   throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
 };
 
-const useValidateProps = (props, schema) => {
-  useValidateTypescriptPropTypes(props, schema);
+const useValidateProps = (props, propTypes) => {
+  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/esm/controlled-checkbox/styles.js

@@ -76,7 +76,7 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
 });
 const StyledInput = /*#__PURE__*/styled.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.label.withConfig({
   componentId: "sc-349ih4-3"
 })(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {

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

@@ -1,13 +1,23 @@
+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 { useMemo } from 'react';
 import { uid } from 'uid';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 import { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
 import { useRangePickerLogic } from './useRangePickerLogic.js';
 import { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';
 
-/* eslint-disable max-lines */
+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 useControlledDateRangePicker = props => {
   const instanceUID = useMemo(() => uid(6), []);
   const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);
+  const dataAttrs = getDataProps(props);
   const {
     type
   } = propsWithDefaults;
@@ -16,13 +26,15 @@ const useControlledDateRangePicker = props => {
   const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;
   const rangePickerLogic = useRangePickerLogic(propsWithDefaults);
   const ctx = 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/esm/controlled-date-range-picker/parts/ControlledDateRangeContent.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 { useContext } from 'react';
 import styled from 'styled-components';
@@ -9,6 +15,10 @@ import { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePicke
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
 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(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.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;"], _ref => {
@@ -19,16 +29,21 @@ const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
 });
 const ControlledDateRangeContent = () => {
   const {
+    props: {
+      dataAttrs
+    },
     withIcon,
     withInputs,
     isControllerOnly
   } = useContext(ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx(StyledWrapper, {
+  return /*#__PURE__*/jsxs(StyledWrapper, _objectSpread(_objectSpread({
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateRangePickerDatatestid.WRAPPER
-  }, void 0, withInputs ? /*#__PURE__*/jsxs(Fragment, {
-    children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
-  }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null);
+  }, dataAttrs), {}, {
+    children: [withInputs ? /*#__PURE__*/jsxs(Fragment, {
+      children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
+    }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null]
+  }));
 };
 
 export { ControlledDateRangeContent };

package/esm/controlled-date-time-picker/config/useControlledDateTimePicker.js

@@ -6,6 +6,7 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 import { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
 import { useGetDestructuredValues } from './useGetDestructuredValues.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../ControlledDateTimePickerTypes.js';
@@ -45,6 +46,7 @@ const useControlledDateTimePicker = props => {
   const currMeridiemBtnRef = useRef();
   const nextMeridiemBtnRef = useRef();
   const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
+  const dataAttrs = getDataProps(props);
   const {
     type,
     getIsDisabledDay,
@@ -352,7 +354,9 @@ const useControlledDateTimePicker = props => {
     if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
   }, [handleClearAll, onFillWithCurrentDateKeys]);
   const ctx = React.useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     monthInputRef,
     dayInputRef,
     yearInputRef,
@@ -439,7 +443,7 @@ const useControlledDateTimePicker = props => {
     announcedTimeValues,
     ariaCurrentValueForInputs,
     onGlobalKeyDown
-  }), [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
+  }), [dataAttrs, propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
   );
   return ctx;
 };

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,9 +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 } from 'react/jsx-runtime';
+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,
@@ -24,6 +34,7 @@ const ControlledDateTimePickerContent = () => {
     isControllerOnly,
     props: {
       hasError,
+      dataAttrs,
       disabled
     },
     onGlobalKeyDown
@@ -39,7 +50,7 @@ const ControlledDateTimePickerContent = () => {
   if (shouldPreserveClearableSpace) rightControlCols.push('28px');
   if (withAnyPicker) rightControlCols.push('auto');
   return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/_jsx(StyledInputsWrapperGrid, {
+    children: /*#__PURE__*/jsxs(StyledInputsWrapperGrid, _objectSpread(_objectSpread({
       cols: mainCols,
       gutter: "xxs",
       pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
@@ -50,9 +61,11 @@ const ControlledDateTimePickerContent = () => {
       hasError: hasError,
       isControllerOnly: isControllerOnly,
       disabled: disabled
-    }, 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)
+    }, 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]
+    }))
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -452,24 +452,31 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-rc.1",
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-form-layout-blocks": "2.0.0-rc.1",
-    "@elliemae/ds-grid": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
-    "@elliemae/ds-props-helpers": "2.0.0-rc.1",
-    "@elliemae/ds-system": "2.0.0-rc.1",
-    "@elliemae/pui-theme": "2.2.3",
+    "@elliemae/ds-button": "2.0.0-rc.10",
+    "@elliemae/ds-form-layout-blocks": "2.0.0-rc.10",
+    "@elliemae/ds-grid": "2.0.0-rc.10",
+    "@elliemae/ds-icon": "2.0.0-rc.10",
+    "@elliemae/ds-icons": "2.0.0-rc.10",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.10",
+    "@elliemae/ds-system": "2.0.0-rc.10",
+    "@elliemae/ds-tooltip": "2.0.0-rc.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.10",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",
     "uid": "~2.0.0"
   },
   "devDependencies": {
+    "@elliemae/pui-theme": "~2.2.5",
+    "@testing-library/dom": "~8.11.1",
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3",
     "styled-system": "~5.1.5"
   },
   "peerDependencies": {
+    "@elliemae/pui-theme": "^2.2.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.3",

package/types/controlled-checkbox/ControlledCheckbox.d.ts

@@ -1,21 +1,71 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { DSControlledCheckboxPropsT } from './index.d';
 declare const DSControlledCheckbox: {
     (props: DSControlledCheckboxPropsT): JSX.Element;
     propTypes: {
         checked: any;
-        value: any;
+        value: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         name: any;
-        label: any;
+        label: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
         id: any;
-        readOnly: any;
-        hasError: any;
-        disabled: any;
-        ariaControls: any;
-        ariaLabel: any;
-        innerRef: any;
-        autoFocus: any;
+        readOnly: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        hasError: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        disabled: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        ariaControls: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        ariaLabel: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        autoFocus: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const DSControlledCheckboxWithSchema: any;
+declare const DSControlledCheckboxWithSchema: {
+    (props?: DSControlledCheckboxPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSControlledCheckbox, DSControlledCheckboxWithSchema };

package/types/controlled-checkbox/config/useValidateProps.d.ts

@@ -1,2 +1,2 @@
 import { DSControlledCheckboxPropsT } from '../index.d';
-export declare const useValidateProps: (props: DSControlledCheckboxPropsT, schema: unknown) => void;
+export declare const useValidateProps: (props: DSControlledCheckboxPropsT, propTypes: unknown) => void;