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

package/cjs/DateInputV2/components/helpers.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lodash = require('lodash');
+var utils = require('./utils.js');
+
+const callChange = (event, handlers, isArrowChange) => {
+  if (event.target.name === 'day') handlers.onDayChange(event, isArrowChange);
+  if (event.target.name === 'month') handlers.onMonthChange(event, isArrowChange);
+  if (event.target.name === 'year') handlers.onYearChange(event, isArrowChange);
+};
+
+const setTarget = (event, v) => {
+  const n = lodash.cloneDeep(event);
+  let newValue = parseInt(n.target.value || 0, 10) + v;
+  if (newValue < 1) newValue = '01';
+  if (event.target.name === 'day' && newValue > 31) newValue = 31;
+  if (event.target.name === 'month' && newValue > 12) newValue = 12;
+  n.target.value = newValue;
+  return n;
+}; // eslint-disable-next-line max-statements, complexity
+
+
+const onKeyDownHelper = (event, handlers) => {
+  switch (event.key) {
+    case 'ArrowLeft':
+      {
+        event.preventDefault();
+        utils.focusPreviousInput(event.target);
+        break;
+      }
+
+    case 'ArrowUp':
+      {
+        event.preventDefault();
+        const n = setTarget(event, 1);
+        callChange(n, handlers, true);
+        break;
+      }
+
+    case 'ArrowDown':
+      {
+        event.preventDefault();
+        const n = setTarget(event, -1);
+        callChange(n, handlers, true);
+        break;
+      }
+
+    case 'ArrowRight':
+      {
+        event.preventDefault();
+        utils.focusNextInput(event.target);
+        break;
+      }
+
+    case 'Tab':
+      {
+        if (event.shiftKey) break;
+        if (event.target.value.length > 0 && event.target.name !== 'year') event.preventDefault();
+        callChange(event, handlers);
+        break;
+      }
+
+    case 'Backspace':
+      {
+        // HTML Date input behavior, clear everything when deleting
+        event.preventDefault();
+        const n = lodash.cloneDeep(event);
+        n.target.value = '';
+        callChange(n, handlers, true);
+        break;
+      }
+  }
+};
+
+exports.onKeyDownHelper = onKeyDownHelper;

package/cjs/DateInputV2/components/props.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var lodash = require('lodash');
+
+const props = {
+  /** Props to inject to date input wrapper */
+  containerProps: reactDesc.PropTypes.object.description('Props to inject to date input wrapper'),
+
+  /**
+   * Triggers the onBlur when focus moves out of date input
+   */
+  onBlur: reactDesc.PropTypes.func.description('Triggers the onBlur when focus moves out of date input'),
+
+  /**
+   * Triggers the onFocus when the component gets the focus
+   */
+  onFocus: reactDesc.PropTypes.func.description('Triggers the onFocus when the component gets the focus'),
+
+  /**
+   * Triggers the onKeyDown
+   */
+  onKeyDown: reactDesc.PropTypes.func.description('Triggers the onKeyDown'),
+
+  /**
+   * Allows a function that is triggered once the date input changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the date input changes'),
+
+  /**
+   * Triggers when the date is completely set and  only once you have blurred the
+   * corresponding input. For example if you are editing the day and the year and month
+   * are already set, once you completely set the day it will trigger.
+   */
+  onDateChange: reactDesc.PropTypes.func.description(' Triggers when the date is completely set and  only once you have blurred the corresponding input. For example if you are editing the day and the year and month are already set, once you completely set the day it will trigger.'),
+
+  /**
+   * Triggers the onError once one input date is wrong
+   */
+  onError: reactDesc.PropTypes.func.description('Triggers the onError once one input date is wrong'),
+
+  /**
+   * Default value once the component is initialized MMDDYYYY
+   */
+  value: reactDesc.PropTypes.string.description('Default value once the component is initialized MMDDYYYY'),
+
+  /**
+   * Whether the date input is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the date input is disabled or not'),
+
+  /**
+   * tab index
+   */
+  tabIndex: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.string]).description('tab index')
+};
+const defaultProps = {
+  onFocus: lodash.noop,
+  onBlur: lodash.noop,
+  onChange: lodash.noop,
+  onDateChange: lodash.noop,
+  onKeyDown: lodash.noop,
+  onError: lodash.noop,
+  value: '',
+  disabled: false,
+  containerProps: {}
+};
+
+exports.defaultProps = defaultProps;
+exports.props = props;

package/cjs/DateInputV2/components/propsTypes.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+const DateInputsPropTypes = {
+  innerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
+  onBlur: PropTypes__default["default"].func,
+  onChange: PropTypes__default["default"].func,
+  onDateChange: PropTypes__default["default"].func,
+  onCustomKeyDown: PropTypes__default["default"].func,
+  onError: PropTypes__default["default"].func,
+  format: PropTypes__default["default"].string,
+  showMonth: PropTypes__default["default"].bool,
+  showDay: PropTypes__default["default"].bool,
+  showYear: PropTypes__default["default"].bool,
+  step: PropTypes__default["default"].number,
+  yearMaxRange: PropTypes__default["default"].number,
+  disabled: PropTypes__default["default"].bool,
+  yearMinRange: PropTypes__default["default"].number,
+  time: PropTypes__default["default"].string,
+  tabIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
+};
+
+exports.DateInputsPropTypes = DateInputsPropTypes;

package/cjs/DateInputV2/components/styled.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const DateInputFluidContainer = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-ads423-0"
+})(["width:100%;height:100%;align-items:center;"]);
+const DateInputWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-ads423-1"
+})(["align-items:center;align-content:center;", " width:102px;&:focus{outline-style:none;box-shadow:none;border-color:transparent;}"], _ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
+  return disabled ? "\n    background: ".concat(theme.colors.neutral[100], ";\n    color: ").concat(theme.colors.neutral[500], ";\n    ") : '';
+});
+const DateInputInput = /*#__PURE__*/styled__default["default"].input.withConfig({
+  componentId: "sc-ads423-2"
+})(["outline:none;border:none;border-radius:0;width:", ";height:", ";", " padding-left:4px;padding-right:0px;&::placeholder{font-size:95%;font-style:italic;}:-moz-placeholder{font-size:95%;font-style:italic;}::-moz-placeholder{font-size:95%;font-style:italic;}&:focus{background:", ";background-clip:content-box;}::-moz-selection{background:transparent;}::selection{background:transparent;}"], props => props.size === 'l' ? '38px' : '25px', props => props.theme.space.xs, _ref2 => {
+  let {
+    disabled,
+    theme
+  } = _ref2;
+  return disabled ? "\n  background: ".concat(theme.colors.neutral[100], ";\n  color: ").concat(theme.colors.neutral[500], ";\n  ") : '';
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.brand['300'];
+});
+const DateInputDivider = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-ads423-3"
+})(["padding:1px;text-align:center;"]);
+
+exports.DateInputDivider = DateInputDivider;
+exports.DateInputFluidContainer = DateInputFluidContainer;
+exports.DateInputInput = DateInputInput;
+exports.DateInputWrapper = DateInputWrapper;

package/cjs/DateInputV2/components/utils.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var moment = require('moment');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const currentYear = new Date().getFullYear();
+
+const getNextSibling = (elem, selector) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling; // If there's no selector, return the first sibling
+
+  if (!selector) return sibling; // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.nextElementSibling;
+  }
+
+  return sibling;
+};
+
+const getPreviousSibling = (elem, selector) => {
+  let sibling = elem.previousElementSibling;
+  if (!selector) return sibling;
+
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+
+  return sibling;
+};
+
+const isArrowIncrementDecrement = key => key === 'ArrowDown' || key === 'ArrowUp'; // TODO remove and keep `true` behavior ( PUI-4141 )
+
+const setNativeValue = (element, value) => {
+  if (!Object.getOwnPropertyDescriptor(element, 'value')) return;
+  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
+  const prototype = Object.getPrototypeOf(element);
+  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+
+  if (valueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    valueSetter.call(element, value);
+  }
+
+  element.dispatchEvent(new Event('input', {
+    bubbles: true
+  }));
+};
+
+const formatTimeNumber = (value, shouldAddLeadingZeros, leadingZeros) => {
+  if (value === null || value === undefined) return '';
+  return shouldAddLeadingZeros ? dsUtilities.addLeadingZeros(leadingZeros)(value) : String(value);
+};
+
+const getFormattedDay = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = dsUtilities.parseInt(v, 10);
+  if (parsedValue > 31) return '31';
+  return formatTimeNumber(parseTimeNumberFromText(v), true, 2);
+};
+const getShouldShortcircuitDay = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = dsUtilities.parseInt(v, 10);
+  if (parsedValue > 31) return true; // if the first input is in range 4-9 then there is no other option
+  // so we auto advance
+
+  if (parsedValue > 3 && parsedValue < 10) return true;
+  return false;
+};
+const getFormattedYear = value => {
+  const v = value.length > 4 ? value.slice(-4) : value;
+  if (dsUtilities.parseInt(v) > 9999) return '9999';
+  return formatTimeNumber(parseTimeNumberFromText(v), true, 4);
+};
+const getFormattedMonth = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = dsUtilities.parseInt(v, 10);
+  if (parsedValue > 12) return '12';
+  return formatTimeNumber(parseTimeNumberFromText(v), true, 2);
+};
+const getShouldShortcircuitMonth = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = dsUtilities.parseInt(v, 10);
+  if (parsedValue > 12) return true; // if the first input is in range 2-9 then there is no other option
+  // so we auto advance
+
+  if (parsedValue > 1 && parsedValue < 10) return true;
+  return false;
+};
+const parseTimeNumberFromText = stringValue => {
+  const parsedInt = dsUtilities.parseInt(stringValue);
+  if (dsUtilities.isNaN(parsedInt)) return null;
+  return parsedInt;
+}; // trigger onBlur for entire DateInput control if focus is not in day, month, year
+
+const triggerOnBlur = function (blurEvent) {
+  let onBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
+  const {
+    target: currentEl = {},
+    relatedTarget
+  } = blurEvent || {};
+  const nextElement = currentEl.nextElementSibling;
+  const {
+    nextElementSibling
+  } = nextElement || {}; // relatedTarget points to the element that is currently having focus
+
+  if (!nextElementSibling || nextElementSibling !== relatedTarget) {
+    onBlur(blurEvent);
+  }
+};
+const focusNextInput = currentEl => {
+  var _getNextSibling;
+
+  (_getNextSibling = getNextSibling(currentEl, 'input')) === null || _getNextSibling === void 0 ? void 0 : _getNextSibling.focus();
+};
+const focusPreviousInput = currentEl => {
+  var _getPreviousSibling;
+
+  (_getPreviousSibling = getPreviousSibling(currentEl, 'input')) === null || _getPreviousSibling === void 0 ? void 0 : _getPreviousSibling.focus();
+};
+const getValidTimeNumber = function (_ref, number) {
+  let {
+    min,
+    max
+  } = _ref;
+  let valueString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let onError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => null;
+  if (valueString === '0' || number === 0) return null;
+  if (number === undefined || number === null) return null;
+
+  if (number > max) {
+    onError();
+    return max;
+  }
+
+  if (number < min) {
+    onError();
+    return min;
+  }
+
+  return number;
+};
+const shouldFocusNextInput = function (max) {
+  let number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let stringValue = arguments.length > 2 ? arguments[2] : undefined;
+  if (stringValue.length > 1) return true;
+  return number * 10 > max;
+};
+const getDateValuesFromTime = (time, format) => {
+  if (!time || !time.format) return {};
+  time.format('MM');
+  time.format('DD');
+  time.format('YYYY');
+  return {
+    month: getFormattedMonth(format),
+    day: getFormattedDay(format),
+    year: getFormattedYear(format)
+  };
+};
+const resetTimeValues = () => ({
+  month: '',
+  day: '',
+  year: ''
+});
+const onInputFocus = e => {
+  e.preventDefault();
+  e.stopPropagation(); // we select the whole value to be able to override the value on first key
+  // we don't use selection color to be consistent with the highlight of the input
+
+  e.target.select();
+};
+const getNextTimeValue = function (value, target, yearMinRange, yearMaxRange) {
+  let step = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let incrementing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
+  const parsedValue = parseTimeNumberFromText(value);
+  let result = incrementing ? parsedValue + step : parsedValue - step;
+
+  if (target === 'year') {
+    if (result < yearMinRange) result = currentYear;
+    if (result > yearMaxRange) result = currentYear;
+  }
+
+  return result;
+};
+const focusNextInputIfNeeded = (currentEl, max, number, stringValue, currentKey) => {
+  if (shouldFocusNextInput(max, number, stringValue) && !isArrowIncrementDecrement(currentKey)) {
+    focusNextInput(currentEl);
+  }
+};
+const commonInputProps = function () {
+  let digits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
+  let onKeyDown = arguments.length > 1 ? arguments[1] : undefined;
+  let placeholder = arguments.length > 2 ? arguments[2] : undefined;
+  const props = {
+    pattern: '[0-9]*',
+    placeholder,
+    type: 'text',
+    onKeyDown,
+    onFocus: onInputFocus
+  };
+  if (digits === 4) props.placeholder = 'YYYY';
+  return props;
+};
+const handleCompletedDate = (time, date, show, INTERNAL_V2_NO_MUTATION) => {
+  // clone time to avoid mutation when INTERNAL_V2_NO_MUTATION is true
+  const newDate = INTERNAL_V2_NO_MUTATION ? time && moment__default["default"](time) || moment__default["default"]() : time || moment__default["default"]();
+  const {
+    year,
+    month,
+    day
+  } = date;
+  const {
+    showYear,
+    showMonth,
+    showDay
+  } = show;
+  if (time && !year && !month && !day) return '';
+  newDate.value = "".concat(year, "-").concat(month, "-").concat(day);
+  if (showMonth && month) newDate.month(dsUtilities.parseInt(month - 1, 10));
+  if (showDay && day) newDate.date(dsUtilities.parseInt(day, 10));
+  if (showYear && year) newDate.year(dsUtilities.parseInt(year, 10));
+  return newDate;
+};
+const isTimeCompletelySet = (date, show, range) => {
+  let neededValues = [];
+  const {
+    year,
+    month,
+    day
+  } = date;
+  const {
+    showYear,
+    showMonth,
+    showDay
+  } = show;
+  const {
+    yearMinRange,
+    yearMaxRange
+  } = range;
+  if (showMonth) neededValues = [...neededValues, month || null];
+  if (showDay) neededValues = [...neededValues, day || null];
+  if (showYear) neededValues = [...neededValues, year || null];
+  const isValidYear = year < yearMaxRange && year > yearMinRange;
+  return !neededValues.some(value => !value) && isValidYear;
+};
+
+exports.commonInputProps = commonInputProps;
+exports.focusNextInput = focusNextInput;
+exports.focusNextInputIfNeeded = focusNextInputIfNeeded;
+exports.focusPreviousInput = focusPreviousInput;
+exports.getDateValuesFromTime = getDateValuesFromTime;
+exports.getFormattedDay = getFormattedDay;
+exports.getFormattedMonth = getFormattedMonth;
+exports.getFormattedYear = getFormattedYear;
+exports.getNextTimeValue = getNextTimeValue;
+exports.getShouldShortcircuitDay = getShouldShortcircuitDay;
+exports.getShouldShortcircuitMonth = getShouldShortcircuitMonth;
+exports.getValidTimeNumber = getValidTimeNumber;
+exports.handleCompletedDate = handleCompletedDate;
+exports.isArrowIncrementDecrement = isArrowIncrementDecrement;
+exports.isTimeCompletelySet = isTimeCompletelySet;
+exports.onInputFocus = onInputFocus;
+exports.parseTimeNumberFromText = parseTimeNumberFromText;
+exports.resetTimeValues = resetTimeValues;
+exports.setNativeValue = setNativeValue;
+exports.shouldFocusNextInput = shouldFocusNextInput;
+exports.triggerOnBlur = triggerOnBlur;

package/cjs/DateInputV2/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DateInputs = require('./components/DateInputs.js');
+var DSDateInput = require('./components/DSDateInput.js');
+
+
+
+exports.DateInputsV2Impl = DateInputs.DateInputs;
+exports.DSDateInputV2 = DSDateInput.DSDateInputV2;
+exports.DSDateInputV2WithSchema = DSDateInput.DSDateInputV2WithSchema;
+exports["default"] = DSDateInput.DSDateInputV2;

package/cjs/ExpandableInput/DSExpandableInput.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var ExpandableInputImpl = require('./ExpandableInputImpl.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const DSExpandableInput = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    className = '',
+    style = {},
+    triggerComponent = undefined,
+    children,
+    isOpen = false,
+    onOpen = () => null,
+    onClose = () => null,
+    onBlur = () => null,
+    width = undefined
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](ExpandableInputImpl, {
+    className: className,
+    containerProps: containerProps,
+    innerRef: innerRef,
+    isOpen: isOpen,
+    onBlur: onBlur,
+    onClose: onClose,
+    onOpen: onOpen,
+    style: style,
+    triggerComponent: triggerComponent,
+    width: width
+  }, void 0, children);
+};
+
+module.exports = DSExpandableInput;

package/cjs/ExpandableInput/ExpandableInputImpl.js

@@ -0,0 +1,103 @@
+'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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var utils = require('@elliemae/ds-shared/utils');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('../Input/InputImpl.js');
+var InputAddonWrapper = require('../Input/InputAddonWrapper.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);
+
+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 = 'expandable-input';
+const ExpandableInput = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return {
+    opened: isOpen
+  };
+});
+const InputWrapper = dsClassnames.aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', _ref2 => {
+  let {
+    isOpen
+  } = _ref2;
+  return {
+    opened: isOpen
+  };
+});
+class ExpandableInputImpl extends React.Component {
+  constructor() {
+    super();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isOpen
+    } = this.props;
+    if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();
+  }
+
+  render() {
+    const {
+      innerRef,
+      triggerComponent,
+      children,
+      width,
+      isOpen,
+      onOpen,
+      onClose,
+      onBlur,
+      containerProps
+    } = this.props;
+    const InputComponent = React__default["default"].Children.only(children);
+
+    const handleTriggerClick = e => {
+      if (utils.isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);
+
+      if (isOpen) {
+        onClose();
+      } else {
+        onOpen();
+      }
+    };
+
+    return /*#__PURE__*/jsxRuntime.jsx(ExpandableInput, _objectSpread(_objectSpread({}, containerProps), {}, {
+      classProps: {
+        isOpen
+      },
+      innerRef: innerRef,
+      style: {
+        width: isOpen && width
+      },
+      children: /*#__PURE__*/_jsx__default["default"](InputWrapper, {
+        rightComponents: [/*#__PURE__*/React.cloneElement(triggerComponent, {
+          key: 'handler',
+          onClick: handleTriggerClick
+        })]
+      }, void 0, /*#__PURE__*/React.cloneElement(InputComponent, {
+        className: 'expandable-input__input',
+        innerRef: node => this.input = node,
+        onBlur
+      }))
+    }));
+  }
+
+}
+
+module.exports = ExpandableInputImpl;

package/cjs/ExpandableInput/index.js

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