@elliemae/ds-controlled-form 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/controlled-combobox/utils/hooks/useKeyboardNavigation.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+var React = require('react');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var listHelper = require('../listHelper.js');
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      inline,
+      onSelectAll,
+      onCancel,
+      onKeyDown,
+      onChange,
+      onCreate,
+      options,
+      selectedValues,
+      onFilter,
+      withoutPortal,
+      innerRef
+    },
+    setShowPopover,
+    showPopover,
+    focusOptionIdx,
+    setCurrentOption,
+    scrollOptionIntoView,
+    selectAllCheckboxRef,
+    toggleSelectionButtonRef
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.dsId === focusOptionIdx);
+  const selectOption = React.useCallback(() => {
+    if (multiple) {
+      if (innerRef.current) onFilter(innerRef.current.value);
+    } else {
+      onFilter('');
+      if (innerRef.current) innerRef.current.value = '';
+    }
+
+    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
+    onChange(selectedOption);
+    if (!selectedOption.disabled && !multiple) setShowPopover(false);
+  }, [multiple, options, focusOptionIdx, setShowPopover, onFilter, innerRef, onChange]);
+  const onInputKeyDown = React.useCallback(e => {
+    const targetElement = e.target; // =============================================================================
+    // CUSTOM KEYS
+    // =============================================================================
+
+    onKeyDown(e, currentItem); // =============================================================================
+    // ENTER KEY TO CREATE ELEMENTS
+    // =============================================================================
+
+    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'creatable') {
+      onCreate(targetElement.value);
+      onFilter('');
+      if (innerRef.current) innerRef.current.value = '';
+      return;
+    } // =============================================================================
+    // Enter and space on selection
+    // =============================================================================
+
+
+    if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!showPopover && !inline) {
+        setShowPopover(true);
+      } else {
+        selectOption();
+      }
+    }
+
+    if (e.key === 'Enter' && e.altKey) {
+      setShowPopover(false);
+    }
+
+    if (e.key === 'a' && e.ctrlKey && multiple) {
+      onSelectAll();
+    } // =============================================================================
+    // ARROWS UP AND DOWN
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (showPopover || inline) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (showPopover || inline) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape') {
+      var _innerRef$current;
+
+      if (onCancel) onCancel();
+
+      if (innerRef.current && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) !== '') {
+        onFilter('');
+        innerRef.current.value = '';
+      }
+
+      if (!inline) setShowPopover(false);
+    } // =============================================================================
+    // BACKSPACE
+    // =============================================================================
+
+
+    if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
+      if (multiple && !targetElement.value) {
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
+      } else {
+        onChange(null);
+      }
+
+      onFilter('');
+    }
+
+    if (e.key === 'Tab' && !inline && !withoutPortal) {
+      var _selectAllCheckboxRef;
+
+      const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
+
+      if (element) {
+        e.preventDefault();
+        element.focus();
+      }
+    } // if (e.key === 'Tab' && multiple) {
+    // }
+
+  }, [currentItemIndex, options, currentItem, innerRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
+  return {
+    onInputKeyDown
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/controlled-combobox/utils/hooks/useOnElementResize.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+// Taken and modified from https://stackoverflow.com/a/60218754
+
+const useOnElementResize = targetRef => {
+  var _targetRef$current, _targetRef$current2;
+
+  const [width, setWidth] = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
+  const [height, setHeight] = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
+  const observer = React.useRef(null);
+  React.useEffect(() => {
+    function outputsize() {
+      if (targetRef.current) {
+        setWidth(targetRef.current.offsetWidth);
+        setHeight(targetRef.current.offsetHeight);
+      }
+    }
+
+    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
+    return () => {
+      var _observer$current;
+
+      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+    };
+  }, [targetRef]);
+  return React.useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
+};
+
+exports.useOnElementResize = useOnElementResize;

package/cjs/controlled-combobox/utils/listHelper.js

@@ -0,0 +1,39 @@
+'use strict';
+
+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.some.js');
+require('core-js/modules/esnext.iterator.some.js');
+
+const getSelectableOptions = options => options.filter(option => option.type === 'option' && !option.disabled);
+const getOptions = options => options.filter(option => option.type === 'option');
+const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
+const isSelectedValueMultiple = value => Array.isArray(value);
+const isSelected = (value, activeOption) => {
+  if (isSelectedValueMultiple(value)) {
+    const multiValue = value;
+    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
+  }
+
+  const singleValue = value;
+  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
+};
+const findInCircularList = function (list, from, criteria) {
+  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+    if (criteria(list[i])) return i;
+  }
+
+  return from; // return same item
+};
+
+exports.findInCircularList = findInCircularList;
+exports.getOptions = getOptions;
+exports.getSelectableOptions = getSelectableOptions;
+exports.isSelected = isSelected;
+exports.isSelectedValueEmpty = isSelectedValueEmpty;
+exports.isSelectedValueMultiple = isSelectedValueMultiple;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var useControlledDateRangePicker = require('./config/useControlledDateRangePicker.js');
+var ControlledDateRangeContent = require('./parts/ControlledDateRangeContent.js');
+var propTypes = require('./propTypes.js');
+var ControlledDateRangePickerCTX = require('./ControlledDateRangePickerCTX.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _ControlledDateRangeC;
+
+const DSControlledDateRangePicker = props => {
+  const ctx = useControlledDateRangePicker.useControlledDateRangePicker(props);
+  return /*#__PURE__*/_jsx__default["default"](ControlledDateRangePickerCTX.ControlledDateRangePickerContext.Provider, {
+    value: ctx
+  }, void 0, _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx__default["default"](ControlledDateRangeContent.ControlledDateRangeContent, {})));
+};
+
+const DSControlledDateRangePickerWithSchema = reactDesc.describe(DSControlledDateRangePicker);
+DSControlledDateRangePickerWithSchema.propTypes = propTypes.propTypes;
+
+exports.DSControlledDateRangePicker = DSControlledDateRangePicker;
+exports.DSControlledDateRangePickerWithSchema = DSControlledDateRangePickerWithSchema;

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

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultReturnFalse = () => false;
+
+const defaultProps = {
+  type: 'full-date-range',
+  fromDate: '',
+  onFromDateChange: noop,
+  onMonthFromChange: noop,
+  onDayFromChange: noop,
+  onYearFromChange: noop,
+  hasError: false,
+  pickerFooterMsg: '',
+  toDate: '',
+  onToDateChange: noop,
+  onMonthToChange: noop,
+  onDayToChange: noop,
+  onYearToChange: noop,
+  emptyPickerStartingMonth: undefined,
+  onCalendarOpenFocusedDay: undefined,
+  isClearable: false,
+  getIsDisabledDay: defaultReturnFalse,
+  getIsOutOfRangeDay: defaultReturnFalse,
+  autoFocus: false
+};
+const defaultContext = {
+  props: defaultProps,
+  rangePickerLogic: {
+    latestChangedDate: '',
+    onCalendarOpen: noop,
+    onCalendarClose: noop,
+    handleFromDateChange: noop,
+    handleToDateChange: noop,
+    handlePickerDateChange: noop,
+    handlePickerMonthDateChange: noop,
+    handlePickerDayDateChange: noop,
+    handlePickerYearDateChange: noop,
+    getIsStartRangeDay: defaultReturnFalse,
+    getIsDayInRange: defaultReturnFalse,
+    getIsEndRangeDay: defaultReturnFalse
+  },
+  instanceUID: '',
+  withInputs: false,
+  withIcon: false,
+  isControllerOnly: false
+};
+/** Context for cross component communication */
+
+const ControlledDateRangePickerContext = /*#__PURE__*/React.createContext(defaultContext);
+
+exports.ControlledDateRangePickerContext = ControlledDateRangePickerContext;
+exports["default"] = ControlledDateRangePickerContext;
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const ControlledDateRangePickerDatatestid = {
+  WRAPPER: 'ds-controlled-date-range-picker-wrapper'
+};
+
+exports.ControlledDateRangePickerDatatestid = ControlledDateRangePickerDatatestid;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* eslint-disable @typescript-eslint/prefer-as-const */
+const CONTROLLED_DATE_RANGE_PICKER_TYPES = {
+  FULL: 'full-date-range',
+  CONTROLLER_ONLY: 'date-range-picker-controller-only',
+  PICKER: 'date-range-picker',
+  INPUTS: 'date-range-inputs'
+};
+
+exports.CONTROLLED_DATE_RANGE_PICKER_TYPES = CONTROLLED_DATE_RANGE_PICKER_TYPES;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+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');
+
+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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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;
+  const withInputs = type === ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.INPUTS;
+  const withIcon = type === ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.FULL || type === ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.PICKER;
+  const isControllerOnly = type === ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;
+  const rangePickerLogic = useRangePickerLogic.useRangePickerLogic(propsWithDefaults);
+  const ctx = React.useMemo(() => ({
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
+    instanceUID,
+    rangePickerLogic,
+    withInputs,
+    withIcon,
+    isControllerOnly
+  }), [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
+  return ctx;
+};
+
+exports.useControlledDateRangePicker = useControlledDateRangePicker;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
+
+// we have to merge the "default" nested default values with what the user gives us...
+const useGetDateRangePickerWithDefaultsProps = props => dsPropsHelpers.useMemoMergePropsWithDefault(props, ControlledDateRangePickerCTX.defaultProps);
+
+exports.useGetDateRangePickerWithDefaultsProps = useGetDateRangePickerWithDefaultsProps;

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

@@ -0,0 +1,176 @@
+'use strict';
+
+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');
+
+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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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
+  const [calendarChangeIsFrom, setCalendarChangeIsFrom] = React.useState(true);
+  const [latestChangedDate, setLatestChangedDate] = React.useState(fromDate);
+  React.useEffect(() => {
+    setLatestChangedDate(fromDate);
+  }, [fromDate]);
+  React.useEffect(() => {
+    setLatestChangedDate(toDate);
+  }, [toDate]);
+  const getChangedDayStringValues = React.useCallback(changedDay => {
+    // based on wheter we are handling a "from"/"to" change, we calculate some values
+    const dateFromString = calendarChangeIsFrom ? changedDay : fromDate;
+    const dateFrom = dateHelpers.getDayFromDateString(dateFromString);
+    const dateToString = calendarChangeIsFrom ? toDate : changedDay;
+    const dateTo = dateHelpers.getDayFromDateString(dateToString); // we force the "from" to ALWAYS be before the "to" date
+
+    const isToBeforeFrom = (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;
+    const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;
+    const newDateToString = isToBeforeFrom ? dateFromString : dateToString;
+    const forcingToDatePick = isToBeforeFrom ? calendarChangeIsFrom : false; // next change should be based on
+    //   the force pick next interactions
+    //   toggle between from/to  if we didn't force any pick
+
+    let nextToggleStateIsFrom = !calendarChangeIsFrom;
+    if (forcingFromDatePick) nextToggleStateIsFrom = false;
+    if (forcingToDatePick) nextToggleStateIsFrom = true;
+    return {
+      newDateFromString,
+      forcingFromDatePick,
+      newDateToString,
+      forcingToDatePick,
+      isToBeforeFrom,
+      nextToggleStateIsFrom,
+      currentClickCountAsFrom: !nextToggleStateIsFrom
+    };
+  }, [fromDate, calendarChangeIsFrom, toDate]);
+  const handlePickerMonthDateChange = React.useCallback((newMonth, e, metaInfo) => {
+    const {
+      newDateString
+    } = metaInfo;
+    const {
+      currentClickCountAsFrom
+    } = getChangedDayStringValues(newDateString);
+    if (currentClickCountAsFrom) onMonthFromChange(newMonth, e, metaInfo);else onMonthToChange(newMonth, e, metaInfo);
+  }, [getChangedDayStringValues, onMonthFromChange, onMonthToChange]);
+  const handlePickerDayDateChange = React.useCallback((newDay, e, metaInfo) => {
+    const {
+      newDateString
+    } = metaInfo;
+    const {
+      currentClickCountAsFrom
+    } = getChangedDayStringValues(newDateString);
+    if (currentClickCountAsFrom) onDayFromChange(newDay, e, metaInfo);else onDayToChange(newDay, e, metaInfo);
+  }, [getChangedDayStringValues, onDayFromChange, onDayToChange]);
+  const handlePickerYearDateChange = React.useCallback((newYear, e, metaInfo) => {
+    const {
+      newDateString
+    } = metaInfo;
+    const {
+      currentClickCountAsFrom
+    } = getChangedDayStringValues(newDateString);
+    if (currentClickCountAsFrom) onYearFromChange(newYear, e, metaInfo);else onYearToChange(newYear, e, metaInfo);
+  }, [getChangedDayStringValues, onYearFromChange, onYearToChange]); // every time the calendar opens/closes, we assume first click is "from"
+
+  const onCalendarOpen = React.useCallback(() => {
+    setCalendarChangeIsFrom(true);
+  }, []);
+  const onCalendarClose = React.useCallback(() => {
+    setCalendarChangeIsFrom(true);
+  }, []);
+  const handlePickerDateChange = React.useCallback((changedDay, metaInfo) => {
+    const {
+      newDateFromString,
+      newDateToString,
+      nextToggleStateIsFrom,
+      isToBeforeFrom
+    } = getChangedDayStringValues(changedDay); // every "change" on the picker range we calculate it as a new "onChange" for both values
+    // and we pass over the correct "new" from/to value
+
+    onFromDateChange(newDateFromString, _objectSpread(_objectSpread({}, metaInfo), {}, {
+      automaticSwitchedDates: isToBeforeFrom
+    }));
+    onToDateChange(newDateToString, _objectSpread(_objectSpread({}, metaInfo), {}, {
+      automaticSwitchedDates: isToBeforeFrom
+    })); // and we notify what the next change type should be
+
+    setCalendarChangeIsFrom(nextToggleStateIsFrom);
+  }, [getChangedDayStringValues, onFromDateChange, onToDateChange]);
+  const getIsStartRangeDay = React.useCallback(dayString => dayString === fromDate, [fromDate]);
+  const getIsDayInRange = React.useCallback(dayString => {
+    var _getDayFromDateString;
+
+    const dayFrom = dateHelpers.getDayFromDateString(fromDate);
+    const dayTo = dateHelpers.getDayFromDateString(toDate);
+    if (!dayFrom || !dayTo || !dayString) return false;
+    const newDayTime = (_getDayFromDateString = dateHelpers.getDayFromDateString(dayString)) === null || _getDayFromDateString === void 0 ? void 0 : _getDayFromDateString.getTime();
+    return newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();
+  }, [fromDate, toDate]);
+  const getIsEndRangeDay = React.useCallback(dayString => dayString === toDate, [toDate]);
+  const getIsToBeforeFrom = React.useCallback((fromString, toString) => {
+    const dateFrom = dateHelpers.getDayFromDateString(fromString);
+    const dateTo = dateHelpers.getDayFromDateString(toString);
+    return (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+  }, []);
+  const handleFromDateChange = React.useCallback((newVal, metaInfo) => {
+    const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);
+    onFromDateChange(newVal, _objectSpread(_objectSpread({}, metaInfo), {}, {
+      rangeDateChangeType: 'from',
+      isIncorrectOrder
+    }));
+  }, [getIsToBeforeFrom, onFromDateChange, toDate]);
+  const handleToDateChange = React.useCallback((newVal, metaInfo) => {
+    const isIncorrectOrder = getIsToBeforeFrom(fromDate, newVal);
+    onToDateChange(newVal, _objectSpread(_objectSpread({}, metaInfo), {}, {
+      rangeDateChangeType: 'to',
+      isIncorrectOrder
+    }));
+  }, [fromDate, getIsToBeforeFrom, onToDateChange]);
+  return React.useMemo(() => ({
+    latestChangedDate,
+    onCalendarOpen,
+    onCalendarClose,
+    handleFromDateChange,
+    handleToDateChange,
+    handlePickerDateChange,
+    handlePickerMonthDateChange,
+    handlePickerDayDateChange,
+    handlePickerYearDateChange,
+    getIsStartRangeDay,
+    getIsDayInRange,
+    getIsEndRangeDay
+  }), [latestChangedDate, onCalendarOpen, onCalendarClose, handleFromDateChange, handleToDateChange, handlePickerDateChange, handlePickerMonthDateChange, handlePickerDayDateChange, handlePickerYearDateChange, getIsStartRangeDay, getIsDayInRange, getIsEndRangeDay]);
+};
+
+exports.useRangePickerLogic = useRangePickerLogic;

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* eslint-disable max-len */
+
+/* eslint-disable max-statements */
+
+/* eslint-disable max-lines */
+
+/* eslint-disable complexity */
+// const PREPEND = `ControlledDateTimePicker:
+//   Invalid configuration detected::
+//     `;
+// const NOT_A_DEFECT = '';
+// // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
+// const INLINE_RECEIVED_PREPEND = `
+//     Received:`;
+// const throwInvalidDateTimeError = (invalidValue) => {
+//   throw new Error(
+//     `${PREPEND}the "dateTime" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,
+//   );
+// };
+// const throwUncontrolledDateError = (date, onDateChange) => {
+//   throw new Error(
+//     `${PREPEND}you are trying to use a date selector while providing a non-string "date" or providing a non-function to "onDateChange"
+//   the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+//   Received:
+//     ${date}(${typeof date})
+//     ${onDateChange}(${typeof onDateChange})
+//   ${NOT_A_DEFECT}`,
+//   );
+// };
+const useValidateProps = props => {};
+
+exports.useValidateProps = useValidateProps;

package/cjs/controlled-date-range-picker/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

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

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ControlledDateRangePicker = require('./ControlledDateRangePicker.js');
+var ControlledDateRangePickerDatatestid = require('./ControlledDateRangePickerDatatestid.js');
+var ControlledDateRangePickerTypes = require('./ControlledDateRangePickerTypes.js');
+
+
+
+exports.DSControlledDateRangePicker = ControlledDateRangePicker.DSControlledDateRangePicker;
+exports.DSControlledDateRangePickerWithSchema = ControlledDateRangePicker.DSControlledDateRangePickerWithSchema;
+exports.ControlledDateRangePickerDatatestid = ControlledDateRangePickerDatatestid.ControlledDateRangePickerDatatestid;
+exports.CONTROLLED_DATE_RANGE_PICKER_TYPES = ControlledDateRangePickerTypes.CONTROLLED_DATE_RANGE_PICKER_TYPES;