@elliemae/ds-form 2.0.0-rc.1 → 2.0.0-rc.13

package/cjs/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -22,50 +22,41 @@ var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var _MultiAllyMessages;
 
 const MultiSelectedValuesContainer = () => {
+  var _inputRef$current2;
+
   const {
     props: {
-      onChange,
       selectedValues
     },
-    inputRef
+    inputRef,
+    pillGroupRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const pillGroupRef = React.useRef(null);
   const multiSelectedValue = selectedValues;
-  const pillsToShow = useGroupPills.useGroupPills(pillGroupRef);
+  const pillsToShow = useGroupPills.useGroupPills();
   const correctPillsToShow = pillsToShow || 1;
-
-  const handleClick = e => {
-    // prevent toggle drowpdown on pills remove
-    e.stopPropagation();
-  };
-
-  const pills = React.useMemo(() => {
-    const handleRemove = option => {
-      onChange(option);
-      inputRef.current.focus();
-    };
-
-    return /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-      onClick: handleClick,
-      style: {
-        width: 'max-content'
-      }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {
-      innerRef: pillGroupRef
-    }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
-      labelTruncated: inputRef.current.value === '' || correctPillsToShow !== pillsToShow,
+  const pills = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    style: {
+      width: 'max-content'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {
+    innerRef: pillGroupRef
+  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => {
+    var _inputRef$current;
+
+    return /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+      size: "s",
+      labelTruncated: ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '' || correctPillsToShow !== pillsToShow,
       label: option.label,
-      type: "removable",
-      onRemove: () => handleRemove(option)
-    }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
-      labelTruncated: false,
-      label: "+".concat(multiSelectedValue.length - correctPillsToShow),
-      type: "value",
-      tooltipValue: multiSelectedValue.slice(correctPillsToShow).map(val => val.label).join(', ')
-    }, "grouped")));
-  }, [pillsToShow, onChange, inputRef, multiSelectedValue, correctPillsToShow]);
+      type: "value"
+    }, option.value);
+  }), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    size: "s",
+    labelTruncated: false,
+    label: "+".concat(multiSelectedValue.length - correctPillsToShow),
+    type: "value"
+  }, "grouped"))), [pillsToShow, pillGroupRef, inputRef, multiSelectedValue, correctPillsToShow]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [multiSelectedValue.length > 0 && !inputRef.current.value && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx__default["default"](MultiAllyMessages.MultiAllyMessages, {}))), pills]
+    children: [multiSelectedValue.length > 0 && !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx__default["default"](MultiAllyMessages.MultiAllyMessages, {}))), pills]
   });
 };
 

package/cjs/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js

@@ -18,13 +18,14 @@ const getGroupedPillWidth = remainingPills => {
   return 8 * (digits - 1) + 31;
 };
 
-const useGroupPills = pillGroupRef => {
+const useGroupPills = () => {
   const {
     props: {
       selectedValues
     },
     selectedOptionsRef,
-    controlsWrapperRef
+    controlsWrapperRef,
+    pillGroupRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const [pillsToShow, setPillsToShow] = React.useState(multiSelectedValues.length);
@@ -43,7 +44,7 @@ const useGroupPills = pillGroupRef => {
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-removable')];
+      const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-value')];
       const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
@@ -52,10 +53,13 @@ const useGroupPills = pillGroupRef => {
           lastPillFit = idx;
         }
       });
-      const nextPillsToShow = lastPillFit + 1;
 
-      if (nextPillsToShow !== pillsToShow) {
-        setPillsToShow(nextPillsToShow);
+      if (!(multiSelectedValues.length > 0 && pillsToShow !== multiSelectedValues.length)) {
+        const nextPillsToShow = lastPillFit + 1;
+
+        if (nextPillsToShow !== pillsToShow) {
+          setPillsToShow(nextPillsToShow);
+        }
       }
 
       pillGroupRef.current.style.width = 'fit-content';

package/cjs/ComboBox/v3/propTypes.js

@@ -5,17 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 const propTypes = {
-  placeholder: reactDesc.PropTypes.string.description('').defaultValue(''),
-  options: reactDesc.PropTypes.array.description('').defaultValue([]),
-  selectedValues: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object), reactDesc.PropTypes.object]).description(''),
-  autoFocus: reactDesc.PropTypes.bool.description('').defaultValue('false'),
-  hasError: reactDesc.PropTypes.bool.description('').defaultValue('false'),
-  onChange: reactDesc.PropTypes.func.description('').defaultValue(''),
-  onSelectAll: reactDesc.PropTypes.func.description('').defaultValue(''),
-  onFilter: reactDesc.PropTypes.func.description('').defaultValue(''),
-  onCreate: reactDesc.PropTypes.func.description('').defaultValue(''),
-  onClear: reactDesc.PropTypes.func.description('').defaultValue(''),
-  onClearAll: reactDesc.PropTypes.func.description('').defaultValue('')
+  placeholder: reactDesc.PropTypes.string.description('input s placeholder value').defaultValue(''),
+  options: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.object]).description('List of options').defaultValue([]),
+  selectedValues: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object), reactDesc.PropTypes.object]).description('Array of option or single option selected'),
+  autoFocus: reactDesc.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
+  hasError: reactDesc.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  onChange: reactDesc.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
+  onSelectAll: reactDesc.PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
+  onFilter: reactDesc.PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
+  onCreate: reactDesc.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
+  onClearAll: reactDesc.PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
+  onMenuOpen: reactDesc.PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
+  inputMinWidth: reactDesc.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
+  menuMinWidth: reactDesc.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
+  menuMaxHeight: reactDesc.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
+  withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
 };
 
 exports.propTypes = propTypes;

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

@@ -15,6 +15,8 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       inline,
+      onSelectAll,
+      onKeyDown,
       onChange,
       onCreate,
       options,
@@ -32,9 +34,10 @@ const useKeyboardNavigation = () => {
   const multiple = Array.isArray(selectedValues);
   const selectableOptions = listHelper.getOptions(options);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  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 = '';
@@ -46,9 +49,13 @@ const useKeyboardNavigation = () => {
   }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
   const onInputKeyDown = React.useCallback(e => {
     const targetElement = e.target; // =============================================================================
-    // ENTER KEY TO CREATE ELEMENTS
+    // CUSTOM KEYS
     // =============================================================================
 
+    onKeyDown(e, currentItem); // =============================================================================
+    // ENTER KEY TO CREATE ELEMENTS
+    // ======================================================      =================
+
     if (e.key === 'Enter' && onCreate && !selectableOptions.length) {
       onCreate(targetElement.value);
       onFilter('');
@@ -62,7 +69,7 @@ const useKeyboardNavigation = () => {
     if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
       e.preventDefault();
 
-      if (!showPopover) {
+      if (!showPopover && !inline) {
         setShowPopover(true);
       } else {
         selectOption();
@@ -74,14 +81,19 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'Enter' && e.ctrlKey && multiple) {
       setShowPopover(false);
+    }
+
+    if (e.key === 'a' && e.ctrlKey && multiple) {
+      onSelectAll();
     } // =============================================================================
     // ARROWS UP AND DOWN
     // =============================================================================
 
 
     if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
       if (showPopover || inline) {
-        e.preventDefault();
         const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
@@ -91,8 +103,9 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
       if (showPopover || inline) {
-        e.preventDefault();
         const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
@@ -102,7 +115,7 @@ const useKeyboardNavigation = () => {
           const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
-        }, 1);
+        });
       }
     } // =============================================================================
     // ESCAPE
@@ -110,7 +123,9 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Escape' && !inline) {
-      setShowPopover(false);
+      setShowPopover(false); // TODO confirm funcionality
+      // onFilter('');
+      // inputRef.current.value = '';
     } // =============================================================================
     // BACKSPACE
     // =============================================================================
@@ -118,37 +133,20 @@ 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);
       }
 
       onFilter('');
       setShowSelectedValue(true);
-    } // =============================================================================
-    // SHIFT + TAB ON SINGLE SELECT: SELECT AND RETURN TO INPUT
-    // =============================================================================
-
-
-    if (e.key === 'Tab' && e.shiftKey && !multiple && showPopover) {
-      selectOption();
-      e.preventDefault();
-    } // =============================================================================
-    // TAB + SINGLE SELECT
-    // =============================================================================
-
-
-    if (e.key === 'Tab' && showPopover && !multiple) {
-      selectOption();
-      setShowPopover(false);
     }
 
-    if (e.key === 'Tab' && inline) {
-      e.preventDefault();
-    }
-  }, [scrollOptionIntoView, currentItemIndex, options, selectableOptions, inputRef, multiple, showPopover, selectedValues, inline, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption]);
-  return onInputKeyDown;
+    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
+  };
 };
 
 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,

package/cjs/InputGroup/AddonWrapper.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
@@ -14,8 +14,8 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -26,8 +26,7 @@ const InputAddon = dsClassnames.aggregatedClasses('span')(blockName, 'addon');
 class AddonWrapper extends React.Component {
   constructor() {
     super(...arguments);
-
-    _defineProperty__default["default"](this, "state", {});
+    this.state = {};
   }
 
   render() {
@@ -47,7 +46,6 @@ class AddonWrapper extends React.Component {
   }
 
 }
-
-_defineProperty__default["default"](AddonWrapper, "defaultProps", {});
+AddonWrapper.defaultProps = {};
 
 module.exports = AddonWrapper;

package/cjs/InputMask/DSInputMaskDeprecated.js

@@ -96,12 +96,10 @@ class DSInputMaskDeprecated extends React.Component {
 
     super(props);
     _this = this;
+    this.lastkey = null;
+    this.lastkeycode = null;
 
-    _defineProperty__default["default"](this, "lastkey", null);
-
-    _defineProperty__default["default"](this, "lastkeycode", null);
-
-    _defineProperty__default["default"](this, "conformValue", function (rawValueOrEvent, currentCaretPosition) {
+    this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
       let {
         skipCaretPositioning = false,
         skipOnChangeCallback = false
@@ -213,9 +211,9 @@ class DSInputMaskDeprecated extends React.Component {
         if (!skipOnChangeCallback) onChange(event);
         if (!skipCaretPositioning) setTimeout(() => setCaretPosition(_this.inputref, caretPos));
       });
-    });
+    };
 
-    _defineProperty__default["default"](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) || '';
@@ -224,9 +222,9 @@ class DSInputMaskDeprecated extends React.Component {
       } = e.target;
       const currentCaretPosition = selectionEnd;
       this.conformValue(rawValue, currentCaretPosition);
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleKeyDown", e => {
+    this.handleKeyDown = e => {
       e.stopPropagation();
       const {
         onKeyDown
@@ -234,9 +232,9 @@ class DSInputMaskDeprecated extends React.Component {
       this.lastkey = e.key;
       this.lastkeycode = e.keyCode;
       onKeyDown(e);
-    });
+    };
 
-    _defineProperty__default["default"](this, "handleBlur", e => {
+    this.handleBlur = e => {
       const {
         onBlur
       } = this.props;
@@ -244,7 +242,7 @@ class DSInputMaskDeprecated extends React.Component {
         focus: false
       });
       onBlur(e);
-    });
+    };
 
     this.inputref = /*#__PURE__*/React__default["default"].createRef();
     this.state = {

package/cjs/MenuItem/components/MenuItem/index.js

@@ -19,7 +19,7 @@ var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
 const MenuItem = props$1 => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, MenuItemWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
   const {
     dsId,
     label,

package/cjs/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -34,6 +34,7 @@ const MultiMenuItem = props => {
   } = props;
   return /*#__PURE__*/jsxRuntime.jsx(styled.StyledGlobalMenuItemWrapper, {
     id: dsId,
+    disabled: disabled,
     isActive: isActive,
     isSelected: isSelected,
     isFocus: isFocus,

package/cjs/MenuItem/components/Section/index.js

@@ -18,7 +18,7 @@ var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
 const Section = props$1 => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, MenuSectionItemWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
   const {
     label,
     wrapperStyles,

package/cjs/MenuItem/components/Section/styled.js

@@ -14,7 +14,7 @@ const StyledGroupLabel = /*#__PURE__*/styled__default["default"].span.withConfig
 })(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
 const StyledSectionWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
   componentId: "sc-6xya9j-1"
-})(["", " ", " list-style:none;padding:0px 16px;"], styledSystem.position, styledSystem.layout);
+})(["", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], styledSystem.position, styledSystem.layout);
 
 exports.StyledGroupLabel = StyledGroupLabel;
 exports.StyledSectionWrapper = StyledSectionWrapper;

package/cjs/MenuItem/components/Separator/styled.js

@@ -11,10 +11,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledSeparator = /*#__PURE__*/styled__default["default"].hr.withConfig({
   componentId: "sc-1xat2d9-0"
-})(["border:none;height:1px;background-color:", ";;"], props => props.theme.colors.neutral[500]);
+})(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
 const StyledSeparatorWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
   componentId: "sc-1xat2d9-1"
-})(["list-style:none;margin:0px 16px;", " ", ""], styledSystem.position, styledSystem.layout);
+})(["list-style:none;padding:0px 16px;", " ", ""], styledSystem.position, styledSystem.layout);
 
 exports.StyledSeparator = StyledSeparator;
 exports.StyledSeparatorWrapper = StyledSeparatorWrapper;

package/cjs/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -9,7 +9,6 @@ var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var dsIcons = require('@elliemae/ds-icons');
 var Grid = require('@elliemae/ds-grid');
 var props = require('../../props.js');
-var styled$1 = require('./styled.js');
 var styled = require('../styled.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -51,15 +50,16 @@ const SingleMenuItem = props => {
     pr: render ? 0 : 40,
     "data-testid": dataTestid,
     children: render ? render(props) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-      cols: ['min-content', 'auto'],
+      cols: ['16px', 'auto'],
       height: "16px",
-      gutter: "xxs"
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemChecked, {}, void 0, isSelected && /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
+      gutter: "xxs",
+      alignItems: "center"
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, isSelected && /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
       size: "s",
       color: ['brand-primary', '600']
-    })), /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemLabel, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    })), /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
       value: label
-    })))
+    }))
   });
 };