@elliemae/ds-form 2.0.0-rc.6 → 2.0.0

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

@@ -28,22 +28,25 @@ const useItemRenderer = () => {
     inputRef,
     setShowPopover,
     focusOptionIdx,
-    virtualListHelpers: {
-      virtualItems
-    }
+    virtualListHelpers
   } = useContext(ComboBoxContext);
+  const {
+    virtualItems
+  } = virtualListHelpers;
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
   const handleClick = 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]);
@@ -88,9 +91,7 @@ const useItemRenderer = () => {
 
     return /*#__PURE__*/jsx(Fragment, {});
   }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
-  return useMemo(() => ({
-    ItemRenderer
-  }), [ItemRenderer]);
+  return ItemRenderer;
 };
 
 export { useItemRenderer };

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

@@ -33,7 +33,7 @@ const useKeyboardNavigation = () => {
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = useCallback(() => {
     if (multiple) {
-      onFilter(inputRef.current.value);
+      if (inputRef.current) onFilter(inputRef.current.value);
     } else {
       onFilter('');
       if (inputRef.current) inputRef.current.value = '';
@@ -81,7 +81,6 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'a' && e.ctrlKey && multiple) {
       onSelectAll();
-      setShowPopover(false);
     } // =============================================================================
     // ARROWS UP AND DOWN
     // =============================================================================
@@ -130,8 +129,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);
       }
@@ -142,7 +140,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
+  };
 };
 
 export { useKeyboardNavigation };

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

@@ -11,10 +11,10 @@ const useOnElementResize = targetRef => {
   const observer = useRef(null);
   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/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -44,11 +44,8 @@ const shouldUpdateSvgPath = (_ref2, prevSizes) => {
 class FloatingLabelInputImpl extends Component {
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "resizeObserver", new ResizeObserver(() => this.updatePath()));
-
-    _defineProperty(this, "prevSizes", {});
-
+    this.resizeObserver = new ResizeObserver(() => this.updatePath());
+    this.prevSizes = {};
     this.wrapperRef = /*#__PURE__*/React.createRef();
     this.outlinePathRef = /*#__PURE__*/React.createRef();
     this.outlineIdleRef = /*#__PURE__*/React.createRef();
@@ -188,8 +185,8 @@ class FloatingLabelInputImpl extends Component {
 
 }
 
-_defineProperty(FloatingLabelInputImpl, "defaultProps", {
+FloatingLabelInputImpl.defaultProps = {
   onChange: () => null
-});
+};
 
 export { FloatingLabelInputImpl as default };

package/esm/FormItem/ValidationFieldWrapper.js

@@ -105,8 +105,7 @@ class ValidationFieldWrapper extends Component {
   }
 
 }
-
-_defineProperty(ValidationFieldWrapper, "defaultProps", {
+ValidationFieldWrapper.defaultProps = {
   validateOnBlur: false,
   validateOnChange: false,
   name: '',
@@ -115,6 +114,6 @@ _defineProperty(ValidationFieldWrapper, "defaultProps", {
   validate: () => null,
   onChange: () => null,
   onBlur: () => null
-});
+};
 
 export { ValidationFieldWrapper as default };

package/esm/Input/InputAddonWrapper.js

@@ -105,11 +105,10 @@ class InputAddonWrapper extends Component {
   }
 
 }
-
-_defineProperty(InputAddonWrapper, "defaultProps", {
+InputAddonWrapper.defaultProps = {
   rightComponents: [],
   leftComponents: [],
   containerProps: {}
-});
+};
 
 export { InputAddonWrapper as default };

package/esm/Input/InputImpl.js

@@ -1,6 +1,6 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 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';
@@ -54,12 +54,10 @@ const noop = () => null;
 class InputImpl extends Component {
   constructor(props) {
     super(props);
+    this.ref = void 0;
+    this.refTooltip = void 0;
 
-    _defineProperty(this, "ref", void 0);
-
-    _defineProperty(this, "refTooltip", void 0);
-
-    _defineProperty(this, "handleOnChange", e => {
+    this.handleOnChange = e => {
       const {
         onChange,
         max
@@ -75,9 +73,9 @@ class InputImpl extends Component {
           isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth
         });
       }
-    });
+    };
 
-    _defineProperty(this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur,
         onChange,
@@ -99,9 +97,9 @@ class InputImpl extends Component {
       this.setState({
         active: false
       });
-    });
+    };
 
-    _defineProperty(this, "handleFocus", e => {
+    this.handleFocus = e => {
       const {
         onFocus
       } = this.props;
@@ -109,30 +107,30 @@ class InputImpl extends Component {
       this.setState({
         active: true
       });
-    });
+    };
 
-    _defineProperty(this, "handleMouseEnter", () => {
+    this.handleMouseEnter = () => {
       if (!this.state.showTooltip) {
         this.setState({
           showTooltip: true
         });
       }
-    });
+    };
 
-    _defineProperty(this, "handleMouseLeave", () => {
+    this.handleMouseLeave = () => {
       if (this.state.showTooltip) {
         this.setState({
           showTooltip: false
         });
       }
-    });
+    };
 
-    _defineProperty(this, "setWidth", () => {
+    this.setWidth = () => {
       const client = this.refTooltip.current.getBoundingClientRect();
       this.setState({
         width: client.width
       });
-    });
+    };
 
     this.state = {
       width: -1,

package/esm/InputGroup/AddonWrapper.js

@@ -1,11 +1,11 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { jsxs } from 'react/jsx-runtime';
@@ -19,8 +19,7 @@ const InputAddon = aggregatedClasses('span')(blockName, 'addon');
 class AddonWrapper extends Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty(this, "state", {});
+    this.state = {};
   }
 
   render() {
@@ -40,7 +39,6 @@ class AddonWrapper extends Component {
   }
 
 }
-
-_defineProperty(AddonWrapper, "defaultProps", {});
+AddonWrapper.defaultProps = {};
 
 export { AddonWrapper as default };

package/esm/InputMask/DSInputMaskDeprecated.js

@@ -88,12 +88,10 @@ class DSInputMaskDeprecated extends Component {
 
     super(props);
     _this = this;
+    this.lastkey = null;
+    this.lastkeycode = null;
 
-    _defineProperty(this, "lastkey", null);
-
-    _defineProperty(this, "lastkeycode", null);
-
-    _defineProperty(this, "conformValue", function (rawValueOrEvent, currentCaretPosition) {
+    this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
       let {
         skipCaretPositioning = false,
         skipOnChangeCallback = false
@@ -205,9 +203,9 @@ class DSInputMaskDeprecated extends Component {
         if (!skipOnChangeCallback) onChange(event);
         if (!skipCaretPositioning) setTimeout(() => setCaretPosition(_this.inputref, caretPos));
       });
-    });
+    };
 
-    _defineProperty(this, "handleOnChange", e => {
+    this.handleOnChange = e => {
       var _e$target;
 
       const rawValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '';
@@ -216,9 +214,9 @@ class DSInputMaskDeprecated extends Component {
       } = e.target;
       const currentCaretPosition = selectionEnd;
       this.conformValue(rawValue, currentCaretPosition);
-    });
+    };
 
-    _defineProperty(this, "handleKeyDown", e => {
+    this.handleKeyDown = e => {
       e.stopPropagation();
       const {
         onKeyDown
@@ -226,9 +224,9 @@ class DSInputMaskDeprecated extends Component {
       this.lastkey = e.key;
       this.lastkeycode = e.keyCode;
       onKeyDown(e);
-    });
+    };
 
-    _defineProperty(this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur
       } = this.props;
@@ -236,7 +234,7 @@ class DSInputMaskDeprecated extends Component {
         focus: false
       });
       onBlur(e);
-    });
+    };
 
     this.inputref = /*#__PURE__*/React.createRef();
     this.state = {

package/esm/SearchBox/NavSearchBox.js

@@ -123,7 +123,9 @@ const NavSearchBox = props => {
     totalResults,
     value,
     onBlur,
-    placeholder
+    placeholder,
+    autoFocus,
+    innerRef
   } = props;
 
   const handleChange = e => {
@@ -154,6 +156,8 @@ const NavSearchBox = props => {
     onKeyDown: handleKeyDown,
     placeholder: placeholder,
     value: value,
+    autoFocus: autoFocus,
+    innerRef: innerRef,
     rightComponent: /*#__PURE__*/_jsx(ToolbarRightAddons, {
       showClear: !!value,
       onNext: onNext,

package/esm/SearchBox/withSearchable.js

@@ -3,8 +3,8 @@ 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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React, { Component } from 'react';
 import { debounce } from '@elliemae/ds-utilities';
 import { jsx } from 'react/jsx-runtime';
@@ -19,9 +19,7 @@ const withSearchable = WrappedComponent => {
   class Searchable extends Component {
     constructor(props) {
       super(props);
-
-      _defineProperty(this, "debouncedSearch", debounce(this.handleSearch, 200));
-
+      this.debouncedSearch = debounce(this.handleSearch, 200);
       this.state = {
         value: props.value
       };

package/esm/Toggle/DSToggleImpl.js

@@ -17,7 +17,7 @@ class DSToggleImpl extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "onDragStart", clientX => {
+    this.onDragStart = clientX => {
       const {
         startPoint,
         checked,
@@ -37,9 +37,9 @@ class DSToggleImpl extends Component {
         drag
       }); // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
       else this.setDragOnChange(checked); // set initial position
-    });
+    };
 
-    _defineProperty(this, "onDragStop", e => {
+    this.onDragStop = e => {
       const {
         checked
       } = this.state; // const { checked: checkedProp, } = this.props
@@ -49,25 +49,25 @@ class DSToggleImpl extends Component {
         this.setState(cleanDrag); // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position
       } else this.setDragOnChange(checked); // set initial position
 
-    });
+    };
 
-    _defineProperty(this, "onBlur", e => {
+    this.onBlur = e => {
       const {
         onBlur,
         id
       } = this.props;
       if (onBlur) onBlur(e, id);
-    });
+    };
 
-    _defineProperty(this, "onFocus", e => {
+    this.onFocus = e => {
       const {
         onFocus,
         id
       } = this.props;
       if (onFocus) onFocus(e, id);
-    });
+    };
 
-    _defineProperty(this, "onChange", e => {
+    this.onChange = e => {
       const {
         checked
       } = this.state;
@@ -90,26 +90,26 @@ class DSToggleImpl extends Component {
       onChange(e, id); // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position
 
       this.setDragOnChange(newCheck); // set new position
-    });
+    };
 
-    _defineProperty(this, "onMouseEnter", () => {
+    this.onMouseEnter = () => {
       this.setState({
         inside: true
       });
-    });
+    };
 
-    _defineProperty(this, "onMouseLeave", () => {
+    this.onMouseLeave = () => {
       this.setState({
         inside: false
       });
-    });
+    };
 
-    _defineProperty(this, "onMouseMove", event => {
+    this.onMouseMove = event => {
       event.preventDefault();
       this.onDragStart(event.clientX);
-    });
+    };
 
-    _defineProperty(this, "onMouseDown", event => {
+    this.onMouseDown = event => {
       this.onDragStart(event.clientX);
       this.setState({
         startPoint: event.clientX,
@@ -117,36 +117,36 @@ class DSToggleImpl extends Component {
       });
       window.addEventListener('mousemove', this.onMouseMove);
       window.addEventListener('mouseup', this.onMouseUp);
-    });
+    };
 
-    _defineProperty(this, "onMouseUp", event => {
+    this.onMouseUp = event => {
       this.onDragStop(event);
       window.removeEventListener('mousemove', this.onMouseMove);
       window.removeEventListener('mouseup', this.onMouseUp);
-    });
+    };
 
-    _defineProperty(this, "onTouchCancel", () => {
+    this.onTouchCancel = () => {
       this.setState({
         inside: false
       });
-    });
+    };
 
-    _defineProperty(this, "onTouchEnd", event => {
+    this.onTouchEnd = event => {
       event.preventDefault();
       this.onDragStop(event);
-    });
+    };
 
-    _defineProperty(this, "onTouchMove", event => {
+    this.onTouchMove = event => {
       this.onDragStart(event.touches[0].clientX);
-    });
+    };
 
-    _defineProperty(this, "onTouchStart", event => {
+    this.onTouchStart = event => {
       this.onDragStart(event.touches[0].clientX);
       this.setState({
         startPoint: event.touches[0].clientX,
         isDragging: true
       });
-    });
+    };
 
     this.state = {
       checked: props.checked || false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form",
   "module": "./esm/index.js",
@@ -515,10 +515,6 @@
       "import": "./esm/ComboBox/v3/utils/listHelper.js",
       "require": "./cjs/ComboBox/v3/utils/listHelper.js"
     },
-    "./ComboBox/v3/utils/hooks/useOnWindowResize": {
-      "import": "./esm/ComboBox/v3/utils/hooks/useOnWindowResize.js",
-      "require": "./cjs/ComboBox/v3/utils/hooks/useOnWindowResize.js"
-    },
     "./ComboBox/v3/utils/hooks/useOnElementResize": {
       "import": "./esm/ComboBox/v3/utils/hooks/useOnElementResize.js",
       "require": "./cjs/ComboBox/v3/utils/hooks/useOnElementResize.js"
@@ -936,22 +932,28 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.0-rc.6",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.6",
-    "@elliemae/ds-classnames": "2.0.0-rc.6",
-    "@elliemae/ds-grid": "2.0.0-rc.6",
-    "@elliemae/ds-icon": "2.0.0-rc.6",
-    "@elliemae/ds-icons": "2.0.0-rc.6",
-    "@elliemae/ds-menu": "2.0.0-rc.6",
-    "@elliemae/ds-overlay": "2.0.0-rc.6",
-    "@elliemae/ds-popper": "2.0.0-rc.6",
-    "@elliemae/ds-separator": "2.0.0-rc.6",
-    "@elliemae/ds-shared": "2.0.0-rc.6",
-    "@elliemae/ds-system": "2.0.0-rc.6",
-    "@elliemae/ds-text-wrapper": "2.0.0-rc.6",
-    "@elliemae/ds-tooltip": "2.0.0-rc.6",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.6",
-    "@elliemae/ds-utilities": "2.0.0-rc.6",
+    "@elliemae/ds-button": "2.0.0",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0",
+    "@elliemae/ds-classnames": "2.0.0",
+    "@elliemae/ds-controlled-form": "2.0.0",
+    "@elliemae/ds-dropdownmenu": "2.0.0",
+    "@elliemae/ds-form": "2.0.0",
+    "@elliemae/ds-grid": "2.0.0",
+    "@elliemae/ds-icon": "2.0.0",
+    "@elliemae/ds-icons": "2.0.0",
+    "@elliemae/ds-menu": "2.0.0",
+    "@elliemae/ds-overlay": "2.0.0",
+    "@elliemae/ds-pills": "2.0.0",
+    "@elliemae/ds-popper": "2.0.0",
+    "@elliemae/ds-popperjs": "2.0.0",
+    "@elliemae/ds-props-helpers": "2.0.0",
+    "@elliemae/ds-separator": "2.0.0",
+    "@elliemae/ds-shared": "2.0.0",
+    "@elliemae/ds-system": "2.0.0",
+    "@elliemae/ds-text-wrapper": "2.0.0",
+    "@elliemae/ds-tooltip": "2.0.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0",
+    "@elliemae/ds-utilities": "2.0.0",
     "memoize-one": "~5.1.1",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",
@@ -966,13 +968,19 @@
     "uid": "~2.0.0"
   },
   "devDependencies": {
-    "styled-components": "~5.3.3"
+    "@testing-library/dom": "~8.11.1",
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.3",
+    "styled-system": "~5.1.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
   },
   "publishConfig": {
     "access": "public",