@elliemae/ds-date-picker 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/components/DatePickerController/DatePickerController.js

@@ -0,0 +1,360 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+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/web.dom-collections.iterator.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 lodash = require('lodash');
+var PropTypes = require('prop-types');
+var moment = require('moment');
+require('react-dates/initialize');
+var reactDates = require('react-dates');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsIcons = require('@elliemae/ds-icons');
+var defaultPhrases = require('../../defaultPhrases.js');
+var DatePickerRenderMonth = require('../DatePickerRenderMonth/DatePickerRenderMonth.js');
+var DatePickerNavigation = require('../DatePickerNavigation/DatePickerNavigation.js');
+var DatePickerDay = require('../DatePickerDay/DatePickerDay.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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+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 {
+  classNameElement,
+  classNameBlock
+} = dsClassnames.convertPropToCssClassName('datepicker-range');
+const focusElementOnOpen = lodash.debounce((datePickerDom, firstFocusableItemDom, focusCurrentDate) => {
+  if (datePickerDom) {
+    const currentDay = Array.from(datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__today')).filter(el => !el.className.includes('CalendarDay__outside'))[0];
+    const [calendarDaySelected] = datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__selected');
+
+    if (calendarDaySelected) {
+      var _calendarDaySelected$;
+
+      calendarDaySelected === null || calendarDaySelected === void 0 ? void 0 : (_calendarDaySelected$ = calendarDaySelected.focus) === null || _calendarDaySelected$ === void 0 ? void 0 : _calendarDaySelected$.call(calendarDaySelected);
+    } else if (focusCurrentDate && !calendarDaySelected) currentDay.focus();else {
+      var _navButton$focus;
+
+      const navButton = firstFocusableItemDom === null || firstFocusableItemDom === void 0 ? void 0 : firstFocusableItemDom.closest('.DayPickerNavigation_button>div');
+      navButton === null || navButton === void 0 ? void 0 : (_navButton$focus = navButton.focus) === null || _navButton$focus === void 0 ? void 0 : _navButton$focus.call(navButton);
+    }
+  }
+}, 100);
+class DSDatePickerController extends React__default["default"].Component {
+  // eslint-disable-next-line react/static-property-placement
+  constructor(props) {
+    super(props);
+
+    this.handleMouseUp = () => {
+      var _focusedElement$blur;
+
+      const focusedElement = document.activeElement;
+      focusedElement === null || focusedElement === void 0 ? void 0 : (_focusedElement$blur = focusedElement.blur) === null || _focusedElement$blur === void 0 ? void 0 : _focusedElement$blur.call(focusedElement);
+    };
+
+    this.handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
+      const [lastDay] = restOfDays.slice(-1);
+      const {
+        onClickEscape
+      } = this.props;
+
+      switch (event.key) {
+        case 'Home':
+          firstDay.focus();
+          break;
+
+        case 'End':
+          lastDay.focus();
+          break;
+
+        case 'Escape':
+          onClickEscape();
+          break;
+      }
+    };
+
+    this.getSafeValue = () => {
+      const {
+        value,
+        date,
+        defaultValue
+      } = this.props;
+      const {
+        selectedDate
+      } = this.state;
+      if (value) return moment__default["default"](value);
+      if (date) return moment__default["default"](date);
+      if (defaultValue) return moment__default["default"](defaultValue);
+      if (selectedDate) return moment__default["default"](selectedDate);
+      return null;
+    };
+
+    this.isControlled = () => {
+      const {
+        value,
+        date
+      } = this.props;
+      return Boolean(value) || Boolean(date);
+    };
+
+    this.handleDateChange = date => {
+      const {
+        readOnly,
+        onDateChange,
+        onChange
+      } = this.props;
+
+      if (!readOnly) {
+        if (!this.isControlled()) {
+          this.setState({
+            selectedDate: date
+          });
+        }
+
+        onDateChange(date);
+        onChange(date);
+      }
+    };
+
+    this.handleChange = dataInput => {
+      const {
+        onDateChange,
+        onChange
+      } = this.props;
+      const momentvalue = moment__default["default"](dataInput.target.value);
+      this.setState({
+        selectedDate: momentvalue
+      });
+      onDateChange(momentvalue);
+      onChange(momentvalue);
+    };
+
+    this.handleNavClick = (date, nav) => {
+      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
+      const {
+        onPrevMonthClick,
+        onNextMonthClick
+      } = this.props;
+
+      if (nav === 'prev') {
+        var _prev$focus;
+
+        prev === null || prev === void 0 ? void 0 : (_prev$focus = prev.focus) === null || _prev$focus === void 0 ? void 0 : _prev$focus.call(prev);
+        onPrevMonthClick(date);
+      } else {
+        var _next$focus;
+
+        next === null || next === void 0 ? void 0 : (_next$focus = next.focus) === null || _next$focus === void 0 ? void 0 : _next$focus.call(next);
+        onNextMonthClick(date);
+      }
+    };
+
+    this.insideBlur = event => {
+      const {
+        datePicker
+      } = this.state;
+
+      if (!datePicker.current.contains(event.currentTarget)) {
+        this.props.onClose();
+      }
+    };
+
+    this.state = {
+      selectedDate: null,
+      firstFocusableItem: /*#__PURE__*/React__default["default"].createRef(),
+      datePicker: /*#__PURE__*/React__default["default"].createRef()
+    };
+  }
+
+  componentDidMount() {
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);
+    document.addEventListener('keydown', this.handleKeyDown, false);
+    setTimeout(() => {
+      focusElementOnOpen(datePicker === null || datePicker === void 0 ? void 0 : datePicker.current, firstFocusableItem === null || firstFocusableItem === void 0 ? void 0 : firstFocusableItem.current, this.props.focusCurrentDate);
+    }, 400);
+  }
+
+  componentWillUnmount() {
+    const {
+      datePicker
+    } = this.state;
+    datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  render() {
+    const {
+      numberOfMonths,
+      enableOutsideDays,
+      transitionDuration,
+      initialVisibleMonth,
+      firstDayOfWeek,
+      keepOpenOnDateSelect,
+      hideKeyboardShortcutsPanel,
+      onClose,
+      phrases,
+      displayFormatDay,
+      isDayBlocked,
+      isOutsideRange,
+      isDayHighlighted,
+      onOutsideClick,
+      key,
+      calendarProps
+    } = this.props;
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    const safedate = this.getSafeValue();
+    const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;
+    return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      onBlur: this.insideBlur,
+      ref: datePicker,
+      className: classNameBlock('wrapper-day-picker-single-date-controller'),
+      "data-testid": "calendar-wrapper"
+    }, calendarProps), {}, {
+      children: /*#__PURE__*/_jsx__default["default"](reactDates.DayPickerSingleDateController, {
+        date: safedate,
+        enableOutsideDays: enableOutsideDays,
+        firstDayOfWeek: firstDayOfWeek,
+        focused: true,
+        hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+        initialVisibleMonth: safeinitialMonth,
+        isDayBlocked: isDayBlocked,
+        isDayHighlighted: isDayHighlighted,
+        isOutsideRange: isOutsideRange,
+        keepOpenOnDateSelect: keepOpenOnDateSelect,
+        navNext: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
+          className: classNameElement('navigation-next')
+        }),
+        navPrev: /*#__PURE__*/_jsx__default["default"](DatePickerNavigation, {
+          className: classNameElement('navigation-prev'),
+          icon: dsIcons.ChevronLeft,
+          innerRef: firstFocusableItem
+        }),
+        renderMonthElement: DatePickerRenderMonth.renderMonthElement,
+        numberOfMonths: numberOfMonths,
+        onClose: onClose,
+        onDateChange: this.handleDateChange,
+        onNextMonthClick: e => {
+          this.handleNavClick(e, 'next');
+        },
+        onOutsideClick: onOutsideClick,
+        onPrevMonthClick: e => {
+          this.handleNavClick(e, 'prev');
+        },
+        phrases: phrases,
+        renderDayContents: date => /*#__PURE__*/_jsx__default["default"](DatePickerDay, {
+          className: classNameElement('day-contents'),
+          date: date.format(displayFormatDay)
+        }),
+        transitionDuration: transitionDuration,
+        onTab: e => {
+          if (e.target.classList.contains('CalendarDay')) {
+            e.preventDefault();
+            onClose();
+          }
+        }
+      }, key)
+    })));
+  }
+
+}
+DSDatePickerController.defaultProps = {
+  date: '',
+  value: '',
+  enableOutsideDays: false,
+  initialVisibleMonth: moment__default["default"](),
+  firstDayOfWeek: 0,
+  keepOpenOnDateSelect: true,
+  hideKeyboardShortcutsPanel: true,
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onChange: () => null,
+  onClickEscape: () => null,
+  onDateChange: () => null,
+  phrases: defaultPhrases.SingleDatePickerPhrases,
+  // displayFormat: 'L',
+  displayFormatDay: 'D',
+  transitionDuration: 0,
+  // verticalSpacing: 0,
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
+  numberOfMonths: 1
+};
+DSDatePickerController.defaultProps = {
+  date: '',
+  value: '',
+  enableOutsideDays: false,
+  initialVisibleMonth: moment__default["default"](),
+  firstDayOfWeek: 0,
+  keepOpenOnDateSelect: true,
+  hideKeyboardShortcutsPanel: true,
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onClickEscape: () => null,
+  onChange: () => null,
+  onDateChange: () => null,
+  phrases: PropTypes__default["default"].shape({
+    calendarLabel: PropTypes__default["default"].string,
+    closeDatePicker: PropTypes__default["default"].string,
+    clearDates: PropTypes__default["default"].string,
+    focusStartDate: PropTypes__default["default"].string,
+    jumpToPrevMonth: PropTypes__default["default"].string,
+    jumpToNextMonth: PropTypes__default["default"].string,
+    keyboardShortcuts: PropTypes__default["default"].string,
+    showKeyboardShortcutsPanel: PropTypes__default["default"].string,
+    hideKeyboardShortcutsPanel: PropTypes__default["default"].string,
+    openThisPanel: PropTypes__default["default"].string,
+    enterKey: PropTypes__default["default"].string,
+    leftArrowRightArrow: PropTypes__default["default"].string,
+    upArrowDownArrow: PropTypes__default["default"].string,
+    pageUpPageDown: PropTypes__default["default"].string,
+    homeEnd: PropTypes__default["default"].string,
+    escape: PropTypes__default["default"].string,
+    questionMark: PropTypes__default["default"].string,
+    selectFocusedDate: PropTypes__default["default"].string,
+    moveFocusByOneDay: PropTypes__default["default"].string,
+    moveFocusByOneWeek: PropTypes__default["default"].string,
+    moveFocusByOneMonth: PropTypes__default["default"].string,
+    moveFocustoStartAndEndOfWeek: PropTypes__default["default"].string,
+    returnFocusToInput: PropTypes__default["default"].string,
+    keyboardNavigationInstructions: PropTypes__default["default"].string,
+    chooseAvailableStartDate: PropTypes__default["default"].func,
+    chooseAvailableEndDate: PropTypes__default["default"].func,
+    dateIsUnavailable: PropTypes__default["default"].func,
+    dateIsSelected: PropTypes__default["default"].func
+  }),
+  // displayFormat: 'L',
+  displayFormatDay: 'D',
+  transitionDuration: 0,
+  // verticalSpacing: 0,
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
+  numberOfMonths: 1
+};
+
+module.exports = DSDatePickerController;

package/cjs/components/DatePickerDay/DatePickerDay.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const Day = _ref => {
+  let {
+    className = 'date-picker-content-day',
+    date = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: className,
+    "data-testid": "datepicker-day-".concat(date)
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "".concat(className, "-half"),
+    "data-testid": "datepicker-day"
+  }, void 0, date));
+};
+
+module.exports = Day;

package/cjs/components/DatePickerDropdown.js

@@ -0,0 +1,65 @@
+'use strict';
+
+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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSPopper = require('@elliemae/ds-popper');
+var DatePickerPicker = require('./DatePickerPicker/DatePickerPicker.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+
+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 {
+  classNameElement
+} = dsClassnames.convertPropToCssClassName('datepicker-range');
+
+const noop = () => null;
+
+function DatePickerDropdown(_ref) {
+  let {
+    disabled = false,
+    readOnly,
+    onClick = noop,
+    isOpen,
+    menu,
+    zIndex = 1,
+    pickerProps,
+    pickerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    contentComponent: menu,
+    isOpen: isOpen,
+    modifiers: {
+      preventOverflow: {
+        enabled: true,
+        padding: 0,
+        boundariesElement: 'window'
+      }
+    },
+    showArrow: false,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DatePickerPicker.Picker, _objectSpread(_objectSpread({
+      innerRef: pickerRef
+    }, pickerProps), {}, {
+      className: classNameElement('picker'),
+      disabled: disabled,
+      onClick: onClick,
+      readOnly: readOnly
+    }))),
+    zIndex: zIndex
+  });
+}
+
+module.exports = DatePickerDropdown;

package/cjs/components/DatePickerHeader/DatePickerHeader.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var moment = require('moment');
+var dsForm = require('@elliemae/ds-form');
+var dsClassnames = require('@elliemae/ds-classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const DATE_FORMAT = 'MMDDYYYY';
+const blockname = 'date-picker-header';
+const Header = dsClassnames.aggregatedClasses('div')(blockname);
+
+const isFn = variable => typeof variable === 'function';
+
+const DatePickerHeader = _ref => {
+  let {
+    onInputChange = () => null,
+    selectedDate,
+    updateKeyDate
+  } = _ref;
+  const [value, setValue] = React.useState(isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format) ? selectedDate.format(DATE_FORMAT) : '');
+  React.useEffect(() => {
+    if (isFn(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format)) {
+      setValue(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.format(DATE_FORMAT));
+    }
+  }, [selectedDate]);
+
+  const handleOnChange = newDate => {
+    setValue(newDate);
+  };
+
+  const handleOnKeyDown = e => {
+    if (e.key === 'Enter' && value.length === DATE_FORMAT.length) {
+      const momentValue = moment__default["default"](value, DATE_FORMAT);
+      onInputChange(momentValue);
+      updateKeyDate(momentValue);
+    }
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
+    onChange: handleOnChange,
+    onKeyDown: handleOnKeyDown,
+    value: value,
+    containerProps: {
+      'data-testid': 'start-date'
+    }
+  })));
+};
+
+module.exports = DatePickerHeader;

package/cjs/components/DatePickerNavigation/DatePickerNavigation.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
+var Icon = require('@elliemae/ds-basic/Icon');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
+
+const Navigation = _ref => {
+  let {
+    className = 'date-picker-navigation',
+    icon: Icon$1 = ChevronRight__default["default"],
+    color = Icon.DSIconColors.NEUTRAL,
+    size = Icon.DSIconSizes.S,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    tabIndex: 0,
+    "data-testid": "date-picker-nav"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Icon$1, {
+    className: className,
+    color: color,
+    innerRef: innerRef,
+    size: size
+  }));
+};
+
+module.exports = Navigation;

package/cjs/components/DatePickerPicker/DatePickerPicker.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var PropTypes = require('prop-types');
+var Icon = require('@elliemae/ds-basic/Icon');
+var DatePicker = require('@elliemae/ds-icons/DatePicker');
+var DSButton = require('@elliemae/ds-button');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _DatePicker;
+
+const _excluded = ["className", "disabled", "icon", "size", "buttonActionType", "onClick", "onBlur", "readOnly", "tabIndex", "innerRef"];
+const Picker = _ref => {
+  let {
+    className = 'date-picker-icon',
+    disabled = false,
+    icon = _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](DatePicker__default["default"], {})),
+    size = Icon.DSIconSizes.M,
+    buttonActionType = 'secondary',
+    onClick = () => null,
+    onBlur = () => null,
+    readOnly = false,
+    tabIndex = 0,
+    innerRef
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    innerRef: innerRef,
+    "aria-label": rest['aria-label'] || 'Date Picker Button',
+    buttonType: buttonActionType,
+    className: className,
+    color: !disabled ? Icon.DSIconColors.PRIMARY : Icon.DSIconColors.NEUTRAL,
+    disabled: disabled,
+    icon: icon,
+    onBlur: onBlur,
+    onClick: onClick,
+    readOnly: readOnly,
+    size: size,
+    tabIndex: tabIndex,
+    "data-testid": "btn-date-picker"
+  });
+};
+const PickerPropsTypes = {
+  innerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
+  className: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  icon: PropTypes__default["default"].element,
+  size: PropTypes__default["default"].oneOf(propTypes.iconSizes),
+  buttonActionType: PropTypes__default["default"].oneOf(DSButton.buttonTypes),
+  onClick: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onBlur: PropTypes__default["default"].func,
+  readOnly: PropTypes__default["default"].bool,
+  tabIndex: PropTypes__default["default"].number
+};
+
+exports.Picker = Picker;
+exports.PickerPropsTypes = PickerPropsTypes;
+exports["default"] = Picker;