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

package/esm/ComboBox/v2/components/SingleValueLabel.js

@@ -0,0 +1,16 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PopperPositions } from '@elliemae/ds-popper';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+
+function SingleValueLabel(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    tooltipPlacement: PopperPositions.TOP,
+    value: children
+  });
+}
+
+export { SingleValueLabel as default };

package/esm/ComboBox/v2/components/ValueContainer.js

@@ -0,0 +1,54 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useRef, useContext, useState } from 'react';
+import { components } from 'react-select';
+import { cx } from '@elliemae/ds-utilities';
+import { DropDownContext } from '../context.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children"];
+
+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(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; }
+function ValueContainer(_ref) {
+  let {
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const valueContainerRef = useRef(null);
+  const {
+    changeMenuOpen,
+    inputInFocus,
+    value,
+    clearable,
+    removeDropdownIndicator
+  } = useContext(DropDownContext);
+  const [touchClick, setTouchClick] = useState(false);
+  return /*#__PURE__*/jsx("div", {
+    "data-testid": "combobox-value-container",
+    onClick: e => {
+      e.stopPropagation();
+      changeMenuOpen(true);
+    },
+    onTouchStart: () => setTouchClick(true),
+    onTouchEnd: () => {
+      if (touchClick) changeMenuOpen(true);
+      setTouchClick(false);
+    },
+    ref: valueContainerRef,
+    className: cx('combobox-v2-value-container', inputInFocus && 'in-focus', value && clearable && 'has-value', removeDropdownIndicator && 'dropdown-indicator-removed'),
+    children: /*#__PURE__*/jsx(components.ValueContainer, _objectSpread(_objectSpread({}, rest), {}, {
+      children: children
+    }))
+  });
+}
+
+export { ValueContainer, ValueContainer as default };

package/esm/ComboBox/v2/components/calculateWidth.js

@@ -0,0 +1,22 @@
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+
+const letterFactor = 5.7;
+const fixedSpace = 45;
+function calculateWidth(options) {
+  // get longest label string
+  const longest = options.reduce((a, b) => {
+    if (a && a.label && b && b.label) return a.label.length > b.label.length ? a : b;
+    return 0; // Calling reduce on an empty array without an initialValue will throw a TypeError.
+  }, options[0] || null);
+
+  if (longest && longest.label && longest.label.length) {
+    // if (longest.label.length > fixedSpace) return fixedSpace * letterFactor
+    return longest.label.length * letterFactor + fixedSpace;
+  }
+
+  return 0;
+}
+
+export { calculateWidth };

package/esm/ComboBox/v2/components/getoptions.js

@@ -0,0 +1,13 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+const getOptions = _ref => {
+  let {
+    showAllOption,
+    isMulti,
+    allOption,
+    options
+  } = _ref;
+  return showAllOption && isMulti ? [allOption, ...options] : options;
+};
+
+export { getOptions };

package/esm/ComboBox/v2/components/useMenuListHeight.js

@@ -0,0 +1,80 @@
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+/* eslint-disable no-restricted-syntax */
+
+/* eslint-disable max-statements */
+
+/* eslint-disable complexity */
+
+/* eslint-disable max-params */
+const GROUP_PADDING = 16;
+const GROUP_TITLE = 13.44;
+const SEPARATOR = 17;
+
+function isGroup(opts) {
+  return opts.length && opts[0].type.name === 'Group';
+}
+
+function countOptions(opts) {
+  let count = opts.length;
+
+  if (isGroup(opts)) {
+    if (opts.length === 1) {
+      count = opts[0].props.options.length;
+    } else {
+      count = opts.reduce((o1, o2) => o1.props.options.length + o2.props.options.length);
+    }
+  }
+
+  return count;
+}
+
+const useMenuListHeight = (elements, maxElements, itemSize, remainingHeight) => {
+  const amountOfOptions = countOptions(elements);
+  const elementSlotsToShow = amountOfOptions < maxElements || !maxElements ? amountOfOptions : maxElements;
+  let calculatedHeight = itemSize * elementSlotsToShow;
+
+  if (elementSlotsToShow === 1) {
+    var _elements$, _elements$$props, _elements$$props$data;
+
+    if ((_elements$ = elements[0]) !== null && _elements$ !== void 0 && (_elements$$props = _elements$.props) !== null && _elements$$props !== void 0 && (_elements$$props$data = _elements$$props.data) !== null && _elements$$props$data !== void 0 && _elements$$props$data.hasSeparator) calculatedHeight += 40;else calculatedHeight += 25;
+  } // add pixels for group type (title and padding)
+
+
+  if (isGroup(elements)) {
+    let groupElementsShowed = 0;
+
+    for (const group of elements) {
+      var _currentOptions$props, _currentOptions$props2, _currentOptions$props3, _currentOptions$props4;
+
+      if (groupElementsShowed >= elementSlotsToShow) {
+        break;
+      }
+
+      const currentOptions = group;
+      groupElementsShowed += (currentOptions === null || currentOptions === void 0 ? void 0 : (_currentOptions$props = currentOptions.props) === null || _currentOptions$props === void 0 ? void 0 : (_currentOptions$props2 = _currentOptions$props.options) === null || _currentOptions$props2 === void 0 ? void 0 : _currentOptions$props2.length) || 0;
+      calculatedHeight += GROUP_PADDING + GROUP_TITLE;
+
+      if (currentOptions !== null && currentOptions !== void 0 && (_currentOptions$props3 = currentOptions.props) !== null && _currentOptions$props3 !== void 0 && (_currentOptions$props4 = _currentOptions$props3.data) !== null && _currentOptions$props4 !== void 0 && _currentOptions$props4.hasSeparator) {
+        calculatedHeight += SEPARATOR;
+      }
+    }
+  }
+
+  let height;
+
+  if (maxElements) {
+    height = calculatedHeight;
+  } else if (remainingHeight > calculatedHeight) {
+    height = calculatedHeight;
+  } else {
+    height = remainingHeight;
+  }
+
+  return height;
+};
+
+export { useMenuListHeight };

package/esm/ComboBox/v2/components/utils.js

@@ -0,0 +1,3 @@
+const getGroupHeaderPosition = string => string.match(/group(.*)/g)[0].match(/[0-9]/g)[0];
+
+export { getGroupHeaderPosition };

package/esm/ComboBox/v2/context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const DropDownContext = /*#__PURE__*/React.createContext();
+
+export { DropDownContext };

package/esm/ComboBox/v2/index.js

@@ -0,0 +1 @@
+export { ComboBoxWithSchema, DSComboBox2, DSComboBox2 as default } from './Combobox.js';

package/esm/ComboBox/v2/mockOptions.js

@@ -0,0 +1,18 @@
+const options = [{
+  value: 'id_1',
+  label: 'Luke Skywalker'
+}, {
+  value: 'id_2',
+  label: 'Obi-Wan Kenobi'
+}, {
+  value: 'id_3',
+  label: 'Padme Amidala'
+}, {
+  value: 'id_4',
+  label: 'Han Solo'
+}, {
+  value: 'id_5',
+  label: 'Anakin Skywalker'
+}];
+
+export { options as default };

package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js

@@ -0,0 +1,88 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { noop } from 'lodash';
+import '../ComboBox/v1/DSComboBox.js';
+import { DSComboBox2 } from '../ComboBox/v2/Combobox.js';
+import { MultiValueLabel } from './components/MultiValueLabel.js';
+import { MultiValueRemove } from './components/MultiValueRemove.js';
+import { SingleValue } from './components/SingleValue.js';
+import { SingleValueRemove } from './components/SingleValueRemove.js';
+
+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(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 customStyles = {
+  multiValueRemove: MultiValueRemove.style,
+  clearIndicator: SingleValueRemove.style,
+  multiValue: base => _objectSpread(_objectSpread({}, base), {}, {
+    borderRadius: '10px',
+    backgroundColor: '#ebf6ff'
+  }),
+  valueContainer: base => _objectSpread(_objectSpread({}, base), {}, {
+    display: '-webkit-box',
+    flexWrap: 'nowrap',
+    overflowX: 'scroll',
+    overflowY: 'hidden',
+    '-ms-overflow-style': 'none',
+    // IE and Edge
+    'scrollbar-width': 'none',
+    // Firefox
+    '::-webkit-scrollbar': {
+      display: 'none'
+    } // Chrome
+
+  })
+};
+
+function ComboBoxFreeSolo(_ref) {
+  let {
+    isMulti = false,
+    options = {},
+    value = [],
+    onChange = noop,
+    onChangeV2 = noop,
+    onInputChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    containerProps = {},
+    disabled = false,
+    menuIsOpen = false,
+    placeholder = 'Select values',
+    formatCreateLabel = val => "Create ".concat(val),
+    maxOptions = undefined
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSComboBox2, {
+    isFreeSolo: true,
+    clearable: true,
+    isMulti: isMulti,
+    value: value,
+    options: options,
+    keepTypedValue: false,
+    placeholder: placeholder,
+    disabled: disabled,
+    menuIsOpen: menuIsOpen,
+    formatCreateLabel: formatCreateLabel,
+    createOptionPosition: "first",
+    onChange: onChange,
+    onChangeV2: onChangeV2,
+    onInputChange: onInputChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    containerProps: containerProps,
+    maxOptions: maxOptions,
+    components: {
+      MultiValueLabel,
+      MultiValueRemove,
+      SingleValue
+    },
+    componentsStyle: customStyles
+  });
+}
+
+export { ComboBoxFreeSolo as default };

package/esm/ComboBoxFreeSolo/components/MultiValueLabel.js

@@ -0,0 +1,36 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const RemovablePillWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1qoa267-0"
+})(["display:flex;align-items:center;outline:none;height:", ";max-width:90%;margin:0;padding:0 4px;background-color:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";& + div{border-top-right-radius:", ";border-bottom-right-radius:", ";}"], props => props.theme.space.xs, props => props.theme.colors.brand[200], props => props.theme.fontSizes.value[600], props => props.theme.fontSizes.value[600], props => props.theme.fontSizes.value[600], props => props.theme.fontSizes.value[600]);
+const PillLabel = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1qoa267-1"
+})(["margin:0 4px;color:", ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], props => props.theme.colors.neutral[800]);
+
+const RemovablePill = _ref => {
+  let {
+    label,
+    clear
+  } = _ref;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(RemovablePillWrapper, {
+      "data-testid": "pill-wrapper"
+    }, void 0, /*#__PURE__*/_jsx(PillLabel, {}, void 0, label)), clear]
+  });
+};
+
+const MultiValueLabel = _ref2 => {
+  let {
+    children,
+    clear
+  } = _ref2;
+  return /*#__PURE__*/_jsx(RemovablePill, {
+    label: children,
+    clear: clear
+  });
+};
+
+export { MultiValueLabel };

package/esm/ComboBoxFreeSolo/components/MultiValueRemove.js

@@ -0,0 +1,35 @@
+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';
+import styled from 'styled-components';
+import { components } from 'react-select';
+import { CloseXsmall } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+var _PillCloseAddon;
+
+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(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 PillCloseAddon = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-kbngzd-0"
+})(["cursor:pointer;height:", ";& > span{height:auto;}"], props => props.theme.space.xs);
+
+const MultiValueRemove = props => /*#__PURE__*/jsx(components.MultiValueRemove, _objectSpread(_objectSpread({}, props), {}, {
+  children: _PillCloseAddon || (_PillCloseAddon = /*#__PURE__*/_jsx(PillCloseAddon, {}, void 0, /*#__PURE__*/_jsx(CloseXsmall, {})))
+}));
+
+MultiValueRemove.style = base => _objectSpread(_objectSpread({}, base), {}, {
+  paddingLeft: 0,
+  height: '100%',
+  ':hover': {
+    backgroundColor: '#EBF6FF'
+  }
+});
+
+export { MultiValueRemove };

package/esm/ComboBoxFreeSolo/components/SingleValue.js

@@ -0,0 +1,27 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { SingleValueRemove } from './SingleValueRemove.js';
+import { MultiValueLabel } from './MultiValueLabel.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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 SingleValue = props => {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(MultiValueLabel, {
+    clear: /*#__PURE__*/jsx(SingleValueRemove, _objectSpread({}, props))
+  }, void 0, children);
+};
+
+export { SingleValue };

package/esm/ComboBoxFreeSolo/components/SingleValueRemove.js

@@ -0,0 +1,52 @@
+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';
+import { components } from 'react-select';
+import styled from 'styled-components';
+import { CloseXsmall } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { jsx } from 'react/jsx-runtime';
+
+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(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(DSButton).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__*/jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/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(CloseXsmall, {
+        fill: "#000"
+      })),
+      onClick: () => clearValue()
+    }))
+  }));
+};
+
+SingleValueRemove.style = base => _objectSpread(_objectSpread({}, base), {}, {
+  padding: 0,
+  height: '16px',
+  backgroundColor: '#EBF6FF',
+  ':hover': {
+    backgroundColor: '#EBF6FF'
+  }
+});
+
+export { SingleValueRemove };

package/esm/ComboBoxFreeSolo/index.js

@@ -0,0 +1 @@
+export { default } from './ComboBoxFreeSolo.js';

package/esm/DateInput/DSDateInput.js

@@ -0,0 +1,104 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect, useCallback } from 'react';
+import { describe } from 'react-desc';
+import { runAll } from '@elliemae/ds-utilities';
+import DSInput from '../Input/DSInput.js';
+import DateInputImpl from './components/DateInputImpl.js';
+export { default as DateInputImpl } from './components/DateInputImpl.js';
+import { props } from './props.js';
+import { defaultProps } from './defaultProps.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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] = useState(value);
+  useEffect(() => {
+    if (value) {
+      setValueDate(value);
+    }
+  }, [value]);
+  const handleOnClear = useCallback(() => {
+    runAll(onClear, setValueDate(''));
+  }, [onClear]);
+  const handleKeyDown = useCallback((e, date, inputOnKeyDown) => {
+    inputOnKeyDown(e, date);
+  }, []);
+  const handleOnChange = useCallback((date, inputOnChange) => {
+    setValueDate(date);
+    inputOnChange(date);
+  }, []);
+  return /*#__PURE__*/_jsx(DSInput, {
+    className: "".concat(className, " input-date-input "),
+    clearable: clearable,
+    containerProps: containerProps,
+    customInputType: _ref2 => {
+      let {
+        onChange: inputOnChange,
+        onKeyDown: inputOnKeyDown
+      } = _ref2,
+          restInputProps = _objectWithoutProperties(_ref2, _excluded);
+
+      return /*#__PURE__*/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;
+const DSDateInputWithSchema = describe(DSDateInput).deprecated('use DateInputV2 instead');
+DSDateInputWithSchema.propTypes = props;
+
+export { DSDateInputWithSchema, DSDateInput as default };

package/esm/DateInput/components/DateInputImpl.js

@@ -0,0 +1,73 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useRef, useMemo } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DateInputs from './DateInputs.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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 = 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 = useRef();
+
+  const handleFocus = e => {
+    onFocus();
+
+    if (!e.target.type) {
+      inputContainerRef.current.querySelector('input').focus();
+    }
+  };
+
+  const visibleInputs = useMemo(() => getVisibleTimeByFormat(format), [format]);
+  return /*#__PURE__*/_jsx(DateInputContainer, {
+    className: className,
+    disabled: disabled,
+    innerRef: innerRef,
+    onClick: handleFocus
+  }, void 0, /*#__PURE__*/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)));
+};
+
+export { DateInputImpl as default };