@elliemae/ds-form 2.0.0-rc.7 → 2.0.1-rc.0

package/cjs/ComboBox/v1/DSComboBox.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/web.dom-collections.iterator.js');
@@ -37,9 +37,9 @@ 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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
@@ -67,36 +67,32 @@ const getValues = (option, isMulti, valueProperty) => {
 class DSComboBox extends React__default["default"].Component {
   constructor(props) {
     super(props);
-
-    _defineProperty__default["default"](this, "forceFocus", false);
-
-    _defineProperty__default["default"](this, "isHover", undefined);
-
-    _defineProperty__default["default"](this, "handleHover", lodash.debounce(value => {
+    this.forceFocus = false;
+    this.isHover = undefined;
+    this.handleHover = lodash.debounce(value => {
       if (this.state.isHover === this.isHover) return;
       if (!this.unmount) this.setState({
         isHover: value
       });
-    }, 0));
-
-    _defineProperty__default["default"](this, "state", {
+    }, 0);
+    this.state = {
       focus: null,
       isHover: undefined
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleOutsideScroll", () => {
+    this.handleOutsideScroll = () => {
       if (this.isHover !== true && !this.unmount) {
         this.isHover = false;
         this.handleHover(false);
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleHoverRef", value => {
+    this.handleHoverRef = value => {
       this.isHover = value;
       this.handleHover(value);
-    });
+    };
 
-    _defineProperty__default["default"](this, "onKeyDownClear", e => {
+    this.onKeyDownClear = e => {
       // if (e.key === 'ArrowRight') {
       //   this.arrow.focus()
       // } else if (e.key === 'ArrowLeft') {
@@ -105,9 +101,9 @@ class DSComboBox extends React__default["default"].Component {
       if (e.keyCode === 32 || e.keyCode === 13) {
         this.select.focus();
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleKeyDown", e => {
+    this.handleKeyDown = e => {
       // if (e.key === 'ArrowRight') e.preventDefault()
       // if (e.target.type === 'text' && e.key === 'ArrowRight') {
       //   if (this.clear && this.clear.focus) {
@@ -127,7 +123,7 @@ class DSComboBox extends React__default["default"].Component {
         if (!value && e.key === ' ') e.preventDefault();
         this.props.onKeyDown(e);
       };
-    });
+    };
 
     this.clear = /*#__PURE__*/React__default["default"].createRef();
     this.arrow = /*#__PURE__*/React__default["default"].createRef();
@@ -338,9 +334,9 @@ class DSComboBox extends React__default["default"].Component {
 
 }
 
-_defineProperty__default["default"](DSComboBox, "defaultProps", {
+DSComboBox.defaultProps = {
   showAllOption: false
-});
+};
 var DSComboBox$1 = withSelectStringValueConverter(reactMeasure.withContentRect('bounds')(DSComboBox));
 
 Object.defineProperty(exports, 'components', {

package/cjs/ComboBox/v1/withSelectStringValueConverter.js

@@ -50,8 +50,7 @@ const withSelectStringValueConverter = WrappedComponent => {
   return _temp = _class = class extends React.Component {
     constructor() {
       super(...arguments);
-
-      _defineProperty__default["default"](this, "state", {});
+      this.state = {};
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -74,10 +73,10 @@ const withSelectStringValueConverter = WrappedComponent => {
       }));
     }
 
-  }, _defineProperty__default["default"](_class, "defaultProps", {
+  }, _class.defaultProps = {
     valueProperty: 'value',
     labelProperty: 'label'
-  }), _temp;
+  }, _temp;
 };
 
 module.exports = withSelectStringValueConverter;

package/cjs/ComboBox/v3/ComboBoxCTX.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var lodash = require('lodash');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
 const defaultProps = {
   placeholder: '',
   options: [],
@@ -16,36 +15,36 @@ const defaultProps = {
   autoFocus: false,
   startPlacementPreference: 'bottom-start',
   placementOrderPreference: ['bottom-start', 'bottom-end'],
-  onClearAll: undefined,
-  onSelectAll: undefined,
-  onCreate: undefined,
+  onClearAll: lodash.noop,
+  onSelectAll: lodash.noop,
+  onCreate: lodash.noop,
   withToggle: false,
-  onChange: noop,
-  onKeyDown: noop,
-  onFilter: noop,
-  onMenuOpen: noop
+  onChange: lodash.noop,
+  onKeyDown: lodash.noop,
+  onFilter: lodash.noop,
+  onMenuOpen: lodash.noop
 };
 const defaultContext = {
   props: defaultProps,
   showPopover: false,
-  setShowPopover: noop,
-  scrollOptionIntoView: noop,
-  referenceElement: undefined,
+  setShowPopover: lodash.noop,
+  scrollOptionIntoView: lodash.noop,
+  referenceElement: null,
   hasFocus: false,
-  setHasFocus: noop,
+  setHasFocus: lodash.noop,
   pillGroupRef: /*#__PURE__*/React.createRef(),
-  setReferenceElement: noop,
+  setReferenceElement: lodash.noop,
   inputRef: /*#__PURE__*/React.createRef(),
   listRef: /*#__PURE__*/React.createRef(),
   wrapperListRef: /*#__PURE__*/React.createRef(),
   controlsWrapperRef: /*#__PURE__*/React.createRef(),
   selectedOptionsRef: /*#__PURE__*/React.createRef(),
   showSelectedValue: false,
-  setShowSelectedValue: noop,
+  setShowSelectedValue: lodash.noop,
   focusOptionIdx: '',
-  setCurrentOption: noop,
+  setCurrentOption: lodash.noop,
   showSelectedOptions: false,
-  setShowSelectedOptions: noop
+  setShowSelectedOptions: lodash.noop
 };
 /** Context for cross component communication */
 

package/cjs/ComboBox/v3/config/useComboBox.js

@@ -24,16 +24,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const useComboBox = props => {
   const [showPopover, setShowPopover] = React.useState(false);
-  const [referenceElement, setReferenceElement] = React.useState();
+  const [referenceElement, setReferenceElement] = React.useState(null);
   const [showSelectedValue, setShowSelectedValue] = React.useState(false);
   const [showSelectedOptions, setShowSelectedOptions] = React.useState(false);
   const [hasFocus, setHasFocus] = React.useState(false);
   const [focusOptionIdx, setCurrentOption] = React.useState('');
-  const inputRef = React.useRef();
-  const listRef = React.useRef();
-  const wrapperListRef = React.useRef();
-  const selectedOptionsRef = React.useRef();
-  const controlsWrapperRef = React.useRef();
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const wrapperListRef = React.useRef(null);
+  const selectedOptionsRef = React.useRef(null);
+  const controlsWrapperRef = React.useRef(null);
   const pillGroupRef = React.useRef(null);
   const propsWithDefaults = useGetPropsWithDefault.useGetComboBoxWithDefaultsProps(props);
   const {

package/cjs/ComboBox/v3/parts/container/Container.js

@@ -32,7 +32,7 @@ const Container = () => {
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const handleCloseMenu = React.useCallback(() => {
     setShowPopover(false);
-    inputRef.current.blur();
+    if (inputRef.current) inputRef.current.blur();
   }, [inputRef, setShowPopover]);
   const handleMouseDown = React.useCallback(e => {
     e.preventDefault();

package/cjs/ComboBox/v3/parts/controls-input/ControlsInput.js

@@ -25,9 +25,11 @@ const ControlsInput = () => {
     focusOptionIdx,
     inputRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const onInputKeyDown = useKeyboardNavigation.useKeyboardNavigation();
   const {
-    span,
+    onInputKeyDown
+  } = useKeyboardNavigation.useKeyboardNavigation();
+  const {
+    spanReference,
     width,
     spanReferenceText,
     showPlaceholder,
@@ -36,7 +38,7 @@ const ControlsInput = () => {
     handleOnFocus
   } = useControlsInput.useControlsInput();
   return /*#__PURE__*/_jsx__default["default"](styled.StyledInputWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledInputWidthReference, {
-    ref: span,
+    ref: spanReference,
     children: spanReferenceText
   }), /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: showPlaceholder

package/cjs/ComboBox/v3/parts/controls-input/useControlsInput.js

@@ -25,12 +25,12 @@ const useControlsInput = () => {
     setShowSelectedValue,
     setShowSelectedOptions
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const [width, setWidth] = React.useState();
-  const span = React.useRef(null);
+  const [width, setWidth] = React.useState(1);
+  const spanReference = React.useRef(null);
   React.useEffect(() => {
-    var _span$current;
+    var _spanReference$curren;
 
-    setWidth(((_span$current = span.current) === null || _span$current === void 0 ? void 0 : _span$current.offsetWidth) || 1);
+    setWidth(((_spanReference$curren = spanReference.current) === null || _spanReference$curren === void 0 ? void 0 : _spanReference$curren.offsetWidth) || 1);
   }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
   React.useEffect(() => {
     setShowSelectedValue(true);
@@ -39,9 +39,9 @@ const useControlsInput = () => {
 
   const handleOnChange = React.useCallback(e => {
     setShowSelectedOptions(false);
-    if (e.target.value) setShowSelectedValue(false);
+    if (e.currentTarget.value) setShowSelectedValue(false);
     setShowPopover(true);
-    onFilter(e.target.value);
+    onFilter(e.currentTarget.value);
   }, [onFilter, setShowPopover, setShowSelectedOptions, setShowSelectedValue]);
   const handleOnBlur = React.useCallback(() => {
     setHasFocus(false);
@@ -70,8 +70,8 @@ const useControlsInput = () => {
     showPlaceholder,
     spanReferenceText,
     width,
-    span
-  }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, span]);
+    spanReference
+  }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference]);
 };
 
 exports.useControlsInput = useControlsInput;

package/cjs/ComboBox/v3/parts/header-list/HeaderList.js

@@ -32,6 +32,8 @@ const HeaderList = () => {
     showSelectedOptions,
     inputRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const isSelectAllSupplied = onSelectAll !== lodash.noop;
+  const isClearAllSupplied = onClearAll !== lodash.noop;
   const multiSelectedValues = selectedValues;
   const selectableOptions = listHelper.getSelectableOptions(options);
   const {
@@ -46,7 +48,7 @@ const HeaderList = () => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, onSelectAll && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, isSelectAllSupplied && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
     disabled: (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== '' || selectableOptions.length === multiSelectedValues.length,
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECT_ALL_BUTTON,
     buttonType: "text",
@@ -55,12 +57,12 @@ const HeaderList = () => {
     onMouseDown: handleOnMouseDown,
     onBlur: handleOnBlurSelectAll,
     onClick: handleClickOnSelectAll
-  }), onSelectAll && onClearAll && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
+  }), isSelectAllSupplied && isClearAllSupplied && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
     orientation: "vertical",
     position: "center",
     type: "group-level",
     margin: "none"
-  }))), onClearAll && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
+  }))), isClearAllSupplied && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
     disabled: multiSelectedValues.length === 0,
     tabIndex: 0,
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.CLEAR_ALL_BUTTON,

package/cjs/ComboBox/v3/parts/menu-list/MenuList.js

@@ -41,14 +41,14 @@ const MenuList = () => {
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const withHeader = !inline && multiple && options.length > 0;
-  const {
-    ItemRenderer
-  } = useItemRenderer.useItemRenderer();
+  const ItemRenderer = useItemRenderer.useItemRenderer();
   useMenuList.useMenuList();
   useOnElementResize.useOnElementResize(controlsWrapperRef);
-  const listWidth = menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth);
+  const listWidth = React.useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), [menuMinWidth, referenceElement]);
   const handleOnFocus = React.useCallback(() => {
-    inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
+    var _inputRef$current;
+
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledListWrapper, {
     tabIndex: -1,
@@ -60,11 +60,10 @@ const MenuList = () => {
     role: "listbox",
     children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
       tabIndex: -1,
+      inline: inline,
       maxHeight: menuMaxHeight,
       ref: listRef,
-      style: {
-        marginTop: withHeader && '28px'
-      },
+      withHeader: withHeader,
       children: /*#__PURE__*/_jsx__default["default"](styled.StyledList, {
         tabIndex: -1,
         "aria-expanded": showPopover,

package/cjs/ComboBox/v3/parts/menu-list/styled.js

@@ -16,12 +16,16 @@ const StyledList = /*#__PURE__*/styled__default["default"].ul.withConfig({
 })(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1uedyf-2"
-})(["overflow-y:auto;max-height:", ";"], _ref => {
+})(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
   let {
-    maxHeight,
-    inline
+    withHeader
   } = _ref;
-  return inline ? '' : "".concat(!maxHeight ? '400' : maxHeight, "px");
+  return withHeader ? '28px' : '';
+}, _ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return !maxHeight ? '400px' : "".concat(maxHeight, "px");
 });
 
 exports.StyledList = StyledList;

package/cjs/ComboBox/v3/parts/menu-list/useItemRenderer.js

@@ -36,22 +36,25 @@ const useItemRenderer = () => {
     inputRef,
     setShowPopover,
     focusOptionIdx,
-    virtualListHelpers: {
-      virtualItems
-    }
+    virtualListHelpers
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const {
+    virtualItems
+  } = virtualListHelpers;
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? dsForm.MultiMenuItem : dsForm.SingleMenuItem;
   const handleClick = React.useCallback((option, e) => {
+    var _inputRef$current;
+
     if (!multiple) {
       setShowPopover(false);
-      inputRef.current.value = '';
-    } else {
+      if (inputRef.current) inputRef.current.value = '';
+    } else if (inputRef.current) {
       onFilter(inputRef.current.value);
     }
 
     onChange(option);
-    inputRef.current.focus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     e.stopPropagation();
     e.preventDefault();
   }, [onFilter, onChange, setShowPopover, multiple, inputRef]);
@@ -96,9 +99,7 @@ const useItemRenderer = () => {
 
     return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
-  return React.useMemo(() => ({
-    ItemRenderer
-  }), [ItemRenderer]);
+  return ItemRenderer;
 };
 
 exports.useItemRenderer = useItemRenderer;

package/cjs/ComboBox/v3/utils/hooks/useKeyboardNavigation.js

@@ -37,7 +37,7 @@ const useKeyboardNavigation = () => {
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = React.useCallback(() => {
     if (multiple) {
-      onFilter(inputRef.current.value);
+      if (inputRef.current) onFilter(inputRef.current.value);
     } else {
       onFilter('');
       if (inputRef.current) inputRef.current.value = '';
@@ -85,7 +85,6 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'a' && e.ctrlKey && multiple) {
       onSelectAll();
-      setShowPopover(false);
     } // =============================================================================
     // ARROWS UP AND DOWN
     // =============================================================================
@@ -134,8 +133,7 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
       if (multiple && !targetElement.value) {
-        const multiSelectedValues = selectedValues;
-        if (multiSelectedValues.length > 0) onChange(multiSelectedValues[multiSelectedValues.length - 1]);
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
       } else {
         onChange(null);
       }
@@ -146,7 +144,9 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'Tab' && inline) ;
   }, [scrollOptionIntoView, currentItemIndex, options, currentItem, selectableOptions, inputRef, multiple, showPopover, selectedValues, inline, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption]);
-  return onInputKeyDown;
+  return {
+    onInputKeyDown
+  };
 };
 
 exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/ComboBox/v3/utils/hooks/useOnElementResize.js

@@ -15,10 +15,10 @@ const useOnElementResize = targetRef => {
   const observer = React.useRef(null);
   React.useEffect(() => {
     function outputsize() {
-      var _targetRef$current3, _targetRef$current4;
-
-      setWidth((_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.offsetWidth);
-      setHeight((_targetRef$current4 = targetRef.current) === null || _targetRef$current4 === void 0 ? void 0 : _targetRef$current4.offsetHeight);
+      if (targetRef.current) {
+        setWidth(targetRef.current.offsetWidth);
+        setHeight(targetRef.current.offsetHeight);
+      }
     }
 
     observer.current = new ResizeObserver(outputsize).observe(targetRef.current);

package/cjs/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -53,11 +53,8 @@ const shouldUpdateSvgPath = (_ref2, prevSizes) => {
 class FloatingLabelInputImpl extends React.Component {
   constructor(props) {
     super(props);
-
-    _defineProperty__default["default"](this, "resizeObserver", new resizeObserver.ResizeObserver(() => this.updatePath()));
-
-    _defineProperty__default["default"](this, "prevSizes", {});
-
+    this.resizeObserver = new resizeObserver.ResizeObserver(() => this.updatePath());
+    this.prevSizes = {};
     this.wrapperRef = /*#__PURE__*/React__default["default"].createRef();
     this.outlinePathRef = /*#__PURE__*/React__default["default"].createRef();
     this.outlineIdleRef = /*#__PURE__*/React__default["default"].createRef();
@@ -197,8 +194,8 @@ class FloatingLabelInputImpl extends React.Component {
 
 }
 
-_defineProperty__default["default"](FloatingLabelInputImpl, "defaultProps", {
+FloatingLabelInputImpl.defaultProps = {
   onChange: () => null
-});
+};
 
 module.exports = FloatingLabelInputImpl;

package/cjs/FormItem/ValidationFieldWrapper.js

@@ -111,8 +111,7 @@ class ValidationFieldWrapper extends React.Component {
   }
 
 }
-
-_defineProperty__default["default"](ValidationFieldWrapper, "defaultProps", {
+ValidationFieldWrapper.defaultProps = {
   validateOnBlur: false,
   validateOnChange: false,
   name: '',
@@ -121,6 +120,6 @@ _defineProperty__default["default"](ValidationFieldWrapper, "defaultProps", {
   validate: () => null,
   onChange: () => null,
   onBlur: () => null
-});
+};
 
 module.exports = ValidationFieldWrapper;

package/cjs/Input/InputAddonWrapper.js

@@ -112,11 +112,10 @@ class InputAddonWrapper extends React.Component {
   }
 
 }
-
-_defineProperty__default["default"](InputAddonWrapper, "defaultProps", {
+InputAddonWrapper.defaultProps = {
   rightComponents: [],
   leftComponents: [],
   containerProps: {}
-});
+};
 
 module.exports = InputAddonWrapper;

package/cjs/Input/InputImpl.js

@@ -1,8 +1,8 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 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');
@@ -20,9 +20,9 @@ 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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
@@ -66,12 +66,10 @@ const noop = () => null;
 class InputImpl extends React.Component {
   constructor(props) {
     super(props);
+    this.ref = void 0;
+    this.refTooltip = void 0;
 
-    _defineProperty__default["default"](this, "ref", void 0);
-
-    _defineProperty__default["default"](this, "refTooltip", void 0);
-
-    _defineProperty__default["default"](this, "handleOnChange", e => {
+    this.handleOnChange = e => {
       const {
         onChange,
         max
@@ -87,9 +85,9 @@ class InputImpl extends React.Component {
           isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth
         });
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur,
         onChange,
@@ -111,9 +109,9 @@ class InputImpl extends React.Component {
       this.setState({
         active: false
       });
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleFocus", e => {
+    this.handleFocus = e => {
       const {
         onFocus
       } = this.props;
@@ -121,30 +119,30 @@ class InputImpl extends React.Component {
       this.setState({
         active: true
       });
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleMouseEnter", () => {
+    this.handleMouseEnter = () => {
       if (!this.state.showTooltip) {
         this.setState({
           showTooltip: true
         });
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleMouseLeave", () => {
+    this.handleMouseLeave = () => {
       if (this.state.showTooltip) {
         this.setState({
           showTooltip: false
         });
       }
-    });
+    };
 
-    _defineProperty__default["default"](this, "setWidth", () => {
+    this.setWidth = () => {
       const client = this.refTooltip.current.getBoundingClientRect();
       this.setState({
         width: client.width
       });
-    });
+    };
 
     this.state = {
       width: -1,