@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/ComboBoxFreeSolo/components/SingleValueRemove.js

@@ -0,0 +1,63 @@
+'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 _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var Select = require('react-select');
+var styled = require('styled-components');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+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 DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _CloseXsmall;
+
+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 StyledButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-cikqh1-0"
+})(["padding-right:8px;width:1.16rem !important;height:auto;z-index:10;color:'#000';"]);
+
+const SingleValueRemove = props => {
+  // eslint-disable-next-line react/prop-types
+  const {
+    clearValue
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(Select.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+      "data-testid": "free-solo-pill-clear-btn",
+      "aria-label": "clear-indicator",
+      buttonType: "text",
+      className: "clear-indicator",
+      icon: _CloseXsmall || (_CloseXsmall = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+        fill: "#000"
+      })),
+      onClick: () => clearValue()
+    }))
+  }));
+};
+
+SingleValueRemove.style = base => _objectSpread(_objectSpread({}, base), {}, {
+  padding: 0,
+  height: '16px',
+  backgroundColor: '#EBF6FF',
+  ':hover': {
+    backgroundColor: '#EBF6FF'
+  }
+});
+
+exports.SingleValueRemove = SingleValueRemove;

package/cjs/ComboBoxFreeSolo/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var ComboBoxFreeSolo = require('./ComboBoxFreeSolo.js');
+
+
+
+module.exports = ComboBoxFreeSolo;

package/cjs/DateInput/DSDateInput.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+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');
+var reactDesc = require('react-desc');
+var dsUtilities = require('@elliemae/ds-utilities');
+var DSInput = require('../Input/DSInput.js');
+var DateInputImpl = require('./components/DateInputImpl.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["onChange", "onKeyDown"];
+
+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 DSDateInput = _ref => {
+  let {
+    innerRef,
+    className,
+    style,
+    onFocus,
+    onBlur,
+    onClear,
+    onChange,
+    onKeyDown,
+    onError,
+    format,
+    value,
+    clearable,
+    disabled,
+    yearMaxRange,
+    yearMinRange,
+    containerProps,
+    // TODO remove and keep `true` behavior ( PUI-4141 )
+    INTERNAL_V2_NO_MUTATION
+  } = _ref;
+  const [valueDate, setValueDate] = React.useState(value);
+  React.useEffect(() => {
+    if (value) {
+      setValueDate(value);
+    }
+  }, [value]);
+  const handleOnClear = React.useCallback(() => {
+    dsUtilities.runAll(onClear, setValueDate(''));
+  }, [onClear]);
+  const handleKeyDown = React.useCallback((e, date, inputOnKeyDown) => {
+    inputOnKeyDown(e, date);
+  }, []);
+  const handleOnChange = React.useCallback((date, inputOnChange) => {
+    setValueDate(date);
+    inputOnChange(date);
+  }, []);
+  return /*#__PURE__*/_jsx__default["default"](DSInput["default"], {
+    className: "".concat(className, " input-date-input "),
+    clearable: clearable,
+    containerProps: containerProps,
+    customInputType: _ref2 => {
+      let {
+        onChange: inputOnChange,
+        onKeyDown: inputOnKeyDown
+      } = _ref2,
+          restInputProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+      return /*#__PURE__*/jsxRuntime.jsx(DateInputImpl, _objectSpread(_objectSpread({
+        INTERNAL_V2_NO_MUTATION: INTERNAL_V2_NO_MUTATION,
+        disabled: disabled,
+        format: format,
+        onChange: date => handleOnChange(date, inputOnChange),
+        onError: onError,
+        onKeyDown: (e, date) => handleKeyDown(e, date, inputOnKeyDown),
+        value: valueDate
+      }, restInputProps), {}, {
+        style: style,
+        yearMaxRange: yearMaxRange,
+        yearMinRange: yearMinRange,
+        onFocus: onFocus
+      }));
+    },
+    disableTooltip: false,
+    disabled: disabled,
+    innerRef: innerRef,
+    onBlur: onBlur,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onClear: handleOnClear,
+    value: valueDate
+  });
+};
+
+DSDateInput.defaultProps = defaultProps.defaultProps;
+const DSDateInputWithSchema = reactDesc.describe(DSDateInput).deprecated('use DateInputV2 instead');
+DSDateInputWithSchema.propTypes = props.props;
+
+exports.DateInputImpl = DateInputImpl;
+exports.DSDateInputWithSchema = DSDateInputWithSchema;
+exports["default"] = DSDateInput;

package/cjs/DateInput/components/DateInputImpl.js

@@ -0,0 +1,80 @@
+'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');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DateInputs = require('./DateInputs.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);
+
+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 blockName = 'input-time';
+const DateInputContainer = dsClassnames.aggregatedClasses('div')(blockName);
+
+const getVisibleTimeByFormat = format => ({
+  showMonth: format.indexOf('MM') > -1 || format.indexOf('M') > -1,
+  showDay: format.indexOf('DD') > -1 || format.indexOf('D') > -1,
+  showYear: format.indexOf('YYYY') > -1
+});
+
+const DateInputImpl = _ref => {
+  let {
+    format,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyDown,
+    onError,
+    className,
+    value,
+    disabled,
+    yearMaxRange,
+    yearMinRange,
+    onFocus,
+    // eslint-disable-next-line react/prop-types
+    INTERNAL_V2_NO_MUTATION
+  } = _ref;
+  const inputContainerRef = React.useRef();
+
+  const handleFocus = e => {
+    onFocus();
+
+    if (!e.target.type) {
+      inputContainerRef.current.querySelector('input').focus();
+    }
+  };
+
+  const visibleInputs = React.useMemo(() => getVisibleTimeByFormat(format), [format]);
+  return /*#__PURE__*/_jsx__default["default"](DateInputContainer, {
+    className: className,
+    disabled: disabled,
+    innerRef: innerRef,
+    onClick: handleFocus
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(DateInputs, _objectSpread({
+    disabled: disabled,
+    format: format,
+    INTERNAL_V2_NO_MUTATION: INTERNAL_V2_NO_MUTATION,
+    innerRef: inputContainerRef,
+    onBlur: onBlur,
+    onChange: onChange,
+    onCustomKeyDown: onKeyDown,
+    onError: onError,
+    time: value,
+    yearMaxRange: yearMaxRange,
+    yearMinRange: yearMinRange
+  }, visibleInputs)));
+};
+
+module.exports = DateInputImpl;

package/cjs/DateInput/components/DateInputs.js

@@ -0,0 +1,405 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.filter.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');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsUtilities = require('@elliemae/ds-utilities');
+var utils = require('./utils.js');
+
+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);
+
+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 blockName = 'input-date-group';
+const InputTimesGroup = dsClassnames.aggregatedClasses('div')(blockName);
+const MonthInput = dsClassnames.aggregatedClasses('input')(blockName, 'input input-month');
+const DayInput = dsClassnames.aggregatedClasses('input')(blockName, 'input input-day');
+const YearInput = dsClassnames.aggregatedClasses('input')(blockName, 'input input-year');
+const Divider = dsClassnames.aggregatedClasses('span')(blockName, 'divider', _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+}); // eslint-disable-next-line react/prop-types
+
+const DateDivider = _ref2 => {
+  let {
+    content = ':',
+    value = ''
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](Divider, {
+    value: !!value
+  }, void 0, content);
+};
+
+const DateInputs = _ref3 => {
+  let {
+    innerRef,
+    onBlur,
+    onChange,
+    onCustomKeyDown,
+    onError,
+    format = '',
+    showMonth = true,
+    showDay = true,
+    showYear = true,
+    step = 1,
+    yearMaxRange,
+    disabled,
+    yearMinRange,
+    time,
+    // TODO remove and keep `true` behavior ( PUI-4141 )
+    INTERNAL_V2_NO_MUTATION // eslint-disable-line react/prop-types
+
+  } = _ref3;
+  const [currentKey, setCurrentKey] = React.useState('ArrowUp');
+  const [month, setMonth] = React.useState('');
+  const [day, setDay] = React.useState('');
+  const [year, setYear] = React.useState('');
+  const prevTime = dsUtilities.usePrevious(time);
+  const prevFormat = dsUtilities.usePrevious(format);
+  let digits = 2;
+  let placeholder = '';
+  React.useEffect(() => {
+    if (time) {
+      const dateValues = utils.getDateValuesFromTime(time, format);
+      setMonth(dateValues.month);
+      setDay(dateValues.day);
+      setYear(dateValues.year);
+    }
+  }, [format, time]);
+  React.useEffect(() => {
+    if (!time && prevTime) {
+      setMonth('');
+      setDay('');
+      setYear('');
+      onChange('');
+    }
+
+    if (time && prevTime && time.format && time.format(format) !== prevTime.format(prevFormat)) {
+      const dateValues = utils.getDateValuesFromTime(time, format);
+      setMonth(dateValues.month);
+      setDay(dateValues.day);
+      setYear(dateValues.year);
+    }
+  }, [time, prevTime, format, prevFormat, onChange]);
+  const isCompletedDate = React.useCallback(() => utils.isTimeCompletelySet({
+    year,
+    month,
+    day
+  }, {
+    showYear,
+    showMonth,
+    showDay
+  }, {
+    yearMinRange,
+    yearMaxRange
+  }), [day, month, showDay, showMonth, showYear, year, yearMaxRange, yearMinRange]);
+  React.useEffect(() => {
+    if (INTERNAL_V2_NO_MUTATION) {
+      const dateValues = utils.getDateValuesFromTime(time, format);
+
+      if (dateValues.day !== day && isCompletedDate()) {
+        onChange(utils.handleCompletedDate(time, {
+          year,
+          month,
+          day
+        }, {
+          showYear,
+          showMonth,
+          showDay
+        }, INTERNAL_V2_NO_MUTATION));
+      } else if (dateValues.month !== month && isCompletedDate()) {
+        onChange(utils.handleCompletedDate(time, {
+          year,
+          month,
+          day
+        }, {
+          showYear,
+          showMonth,
+          showDay
+        }, INTERNAL_V2_NO_MUTATION));
+      } else if (dateValues.year !== year && isCompletedDate()) {
+        onChange(utils.handleCompletedDate(time, {
+          year,
+          month,
+          day
+        }, {
+          showYear,
+          showMonth,
+          showDay
+        }, INTERNAL_V2_NO_MUTATION));
+      }
+    }
+  }, [INTERNAL_V2_NO_MUTATION, day, format, isCompletedDate, month, onChange, showDay, showMonth, showYear, time, year]);
+
+  const triggerChange = () => utils.handleCompletedDate(time, {
+    year,
+    month,
+    day
+  }, {
+    showYear,
+    showMonth,
+    showDay
+  }, INTERNAL_V2_NO_MUTATION);
+
+  const handleYearChange = e => {
+    const {
+      value
+    } = e.target;
+    const yearValue = utils.parseTimeNumberFromText(value);
+    const yearRange = {
+      min: 1,
+      max: 9999
+    };
+    const nextYear = utils.getValidTimeNumber(yearRange, yearValue, value, onError);
+    setYear(utils.formatYear(format, nextYear));
+
+    if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {
+      onChange(triggerChange());
+    }
+
+    utils.focusNextInputIfNeeded(e.target, yearRange.max, nextYear, value, currentKey);
+  };
+
+  const handleMonthChange = e => {
+    const {
+      value
+    } = e.target;
+    const monthValue = utils.parseTimeNumberFromText(value);
+    const monthRange = {
+      min: 1,
+      max: 12
+    };
+    const nextMonth = utils.getValidTimeNumber(monthRange, monthValue, value, onError);
+    setMonth(utils.formatMonth(format, nextMonth));
+
+    if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {
+      onChange(triggerChange());
+    }
+
+    utils.focusNextInputIfNeeded(e.target, monthRange.max, nextMonth, value, currentKey);
+  };
+
+  const handleDayChange = e => {
+    const {
+      value
+    } = e.target;
+    const dayValue = utils.parseTimeNumberFromText(value);
+    const dayRange = {
+      min: 1,
+      max: 31
+    };
+    const nextDay = utils.getValidTimeNumber(dayRange, dayValue, value, onError);
+    setDay(utils.formatDay(format, nextDay));
+
+    if (isCompletedDate() && !INTERNAL_V2_NO_MUTATION) {
+      onChange(triggerChange());
+    }
+
+    if (value !== day) utils.focusNextInputIfNeeded(e.target, dayRange.max, nextDay, value, currentKey);
+  }; // eslint-disable-next-line complexity
+
+
+  const onKeyDown = function (event) {
+    let shouldIncrementDecrement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const {
+      value,
+      name
+    } = event.target;
+    const change = {
+      day: v => handleDayChange({
+        target: {
+          value: v
+        }
+      }),
+      month: v => handleMonthChange({
+        target: {
+          value: v
+        }
+      }),
+      year: v => handleYearChange({
+        target: {
+          value: v
+        }
+      })
+    };
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        {
+          event.preventDefault();
+          utils.focusPreviousInput(event.target);
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          if (shouldIncrementDecrement) {
+            event.preventDefault();
+            setCurrentKey(event.key);
+            const incrementedValue = utils.getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, true);
+
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name](incrementedValue);
+            } else {
+              utils.setNativeValue(event.target, incrementedValue);
+            }
+          }
+
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          if (shouldIncrementDecrement) {
+            event.preventDefault();
+            setCurrentKey(event.key);
+            const decrementedValue = utils.getNextTimeValue(value, name, yearMinRange, yearMaxRange, step, false);
+
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name](decrementedValue);
+            } else {
+              utils.setNativeValue(event.target, decrementedValue);
+            }
+          }
+
+          break;
+        }
+
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          utils.focusNextInput(event.target);
+          break;
+        }
+
+      case 'Backspace':
+        {
+          event.preventDefault();
+
+          if (!value) {
+            utils.focusPreviousInput(event.target);
+          } else {
+            // eslint-disable-next-line no-lonely-if
+            if (INTERNAL_V2_NO_MUTATION) {
+              change[name]('');
+            } else {
+              utils.setNativeValue(event.target, '');
+            }
+          }
+
+          break;
+        }
+
+      case 'Enter':
+        {
+          if (onCustomKeyDown && isCompletedDate()) onCustomKeyDown(event, triggerChange());
+          setCurrentKey(null);
+          break;
+        }
+
+      default:
+        if (onCustomKeyDown) onCustomKeyDown(event);
+        setCurrentKey(null);
+    }
+  };
+
+  const renderMonthInput = () => {
+    if (!showMonth) return null;
+    placeholder = 'MM';
+
+    const onMonthInputBlur = e => {
+      handleMonthChange(e);
+      utils.triggerOnBlur(e, onBlur);
+    };
+
+    return /*#__PURE__*/React.createElement(MonthInput, _objectSpread(_objectSpread({}, utils.commonInputProps(digits, onKeyDown, placeholder)), {}, {
+      autocomplete: "off",
+      key: "month-input",
+      "data-testid": "month",
+      disabled: disabled,
+      name: "month",
+      onBlur: onMonthInputBlur,
+      onChange: handleMonthChange,
+      value: month
+    }));
+  };
+
+  const renderDayInput = () => {
+    if (!showDay) return null;
+    placeholder = 'DD';
+
+    const onDayInputBlur = e => {
+      handleDayChange(e);
+      utils.triggerOnBlur(e, onBlur);
+    };
+
+    return /*#__PURE__*/React.createElement(DayInput, _objectSpread(_objectSpread({}, utils.commonInputProps(digits, onKeyDown, placeholder)), {}, {
+      autocomplete: "off",
+      key: "day-input",
+      "data-testid": "day",
+      disabled: disabled,
+      name: "day",
+      onBlur: onDayInputBlur,
+      onChange: handleDayChange,
+      value: day
+    }));
+  };
+
+  const renderYearInput = () => {
+    if (!showYear) return null;
+    placeholder = 'YY';
+    digits = 4;
+
+    const onYearInputBlur = e => {
+      handleYearChange(e);
+      utils.triggerOnBlur(e, onBlur);
+    };
+
+    return /*#__PURE__*/React.createElement(YearInput, _objectSpread(_objectSpread({}, utils.commonInputProps(digits, onKeyDown, placeholder)), {}, {
+      autocomplete: "off",
+      key: "seconds-input",
+      "data-testid": "year",
+      disabled: disabled,
+      name: "year",
+      onBlur: onYearInputBlur,
+      onChange: handleYearChange,
+      value: year
+    }));
+  };
+
+  const renderDateInputs = () => {
+    const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /*#__PURE__*/_jsx__default["default"](DateDivider, {
+      content: " / ",
+      value: input.props.value
+    }, index) : null, input]) : acc, []);
+    return [inputsWithDividers, /*#__PURE__*/React__default["default"].createElement('span', {
+      key: 'span'
+    }) // hack for next/prev focus
+    ];
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](InputTimesGroup, {
+    innerRef: innerRef
+  }, void 0, renderDateInputs());
+};
+
+module.exports = DateInputs;