@elliemae/ds-form 2.0.0-rc.4 → 2.0.0-rc.8

package/cjs/ComboBox/v3/ComboBox.js

@@ -19,7 +19,7 @@ var _Container;
 
 const DSComboBox = props => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, ComboBoxCTX.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, DSComboBoxWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
   const ctx = useComboBox.useComboBox(props);
   return /*#__PURE__*/_jsx__default["default"](ComboBoxCTX.ComboBoxContext.Provider, {
     value: ctx

package/cjs/ComboBox/v3/ComboBoxCTX.js

@@ -21,7 +21,6 @@ const defaultProps = {
   onCreate: undefined,
   withToggle: false,
   onChange: noop,
-  onClear: noop,
   onKeyDown: noop,
   onFilter: noop,
   onMenuOpen: noop

package/cjs/ComboBox/v3/parts/controls/styled.js

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
 var Grid = require('@elliemae/ds-grid');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const focusStyle = /*#__PURE__*/styled.css(["border:2px solid ", ";"], _ref => {
-  let {
-    theme,
-    hasError
-  } = _ref;
-
-  if (hasError) {
-    return theme.colors.danger[900];
+var _templateObject, _templateObject2;
+const normalBorder = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid\n    ", ";\n"])), props => {
+  if (props.hasError) {
+    return props.theme.colors.danger[900];
   }
 
+  return props.theme.colors.neutral[400];
+});
+const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  border: 2px solid ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.colors.brand[700];
 });
 const StyledControlsWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-64uci7-0"
-})(["background:transparent;position:relative;border:1px solid ", ";border-radius:2px;min-width:", "px;align-items:center;align-content:center;height:28px;padding-left:8px;margin:", ";", ""], props => {
-  if (props.hasError) {
-    return props.theme.colors.danger[900];
-  }
-
-  return props.theme.colors.neutral[400];
-}, _ref2 => {
+})(["background:transparent;position:relative;border-radius:2px;min-width:", ";align-items:center;align-content:center;height:28px;padding-left:8px;margin:", ";&::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;", " pointer-events:none;z-index:7;}"], _ref2 => {
   let {
-    minWidth
+    minWidth,
+    inline
   } = _ref2;
-  return minWidth;
+  return inline ? '' : "".concat(minWidth, "px");
 }, _ref3 => {
   let {
     inline
@@ -43,7 +43,7 @@ const StyledControlsWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid)
   let {
     hasFocus
   } = _ref4;
-  return hasFocus && focusStyle;
+  return hasFocus ? focusBorder : normalBorder;
 });
 const StyledSelection = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-64uci7-1"

package/cjs/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js

@@ -25,9 +25,6 @@ const DropdownIndicator = () => {
     "aria-expanded": showPopover,
     "aria-haspopup": "listbox",
     buttonType: "text",
-    style: {
-      height: '100%'
-    },
     icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](ChevronSmallDown__default["default"], {})),
     tabIndex: -1
   });

package/cjs/ComboBox/v3/parts/dropdown-indicator/styled.js

@@ -12,6 +12,6 @@ var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 const StyledDropDownButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-1ijoe1w-0"
-})(["& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
+})(["box-sizing:border-box;width:100;& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
 
 exports.StyledDropDownButton = StyledDropDownButton;

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var dsControlledForm = require('@elliemae/ds-controlled-form');
 var lodash = require('lodash');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var styled = require('./styled.js');
@@ -17,9 +16,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _div, _StyledSeparator, _StyledSeparator2;
+var _StyledSeparator, _StyledNoOptionsSelec, _StyledSeparator2;
 
 const HeaderList = () => {
+  var _inputRef$current;
+
   const {
     props: {
       onSelectAll,
@@ -28,7 +29,8 @@ const HeaderList = () => {
       selectedValues,
       options
     },
-    showSelectedOptions
+    showSelectedOptions,
+    inputRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = listHelper.getSelectableOptions(options);
@@ -44,13 +46,38 @@ const HeaderList = () => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, withToggle ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledToggle, {
-      labelOn: "".concat(multiSelectedValues.length, " SELECTED"),
-      labelOff: "Show ".concat(multiSelectedValues.length, " SELECTED"),
-      checked: showSelectedOptions,
-      onChange: handleToggle
-    }) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "0 SELECTED"))
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, onSelectAll && /*#__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",
+    labelText: "All",
+    size: "s",
+    onMouseDown: handleOnMouseDown,
+    onBlur: handleOnBlurSelectAll,
+    onClick: handleClickOnSelectAll
+  }), onSelectAll && onClearAll && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
+    orientation: "vertical",
+    position: "center",
+    type: "group-level",
+    margin: "none"
+  }))), onClearAll && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
+    disabled: multiSelectedValues.length === 0,
+    tabIndex: 0,
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.CLEAR_ALL_BUTTON,
+    buttonType: "text",
+    size: "s",
+    labelText: "Clear",
+    onMouseDown: handleOnMouseDown,
+    onBlur: handleOnBlurClearAll,
+    onClick: handleClickOnClearAll
+  })), /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, withToggle ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {
+      buttonType: "text",
+      disabled: !showSelectedOptions && selectableOptions.length === multiSelectedValues.length,
+      onClick: handleToggle,
+      labelText: !showSelectedOptions ? "".concat(multiSelectedValues.length, " SELECTED") : 'SHOW ALL',
+      size: "s"
+    }) : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx__default["default"](styled.StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))
   }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledShowAllButton, {
       buttonType: "text",
@@ -63,7 +90,7 @@ const HeaderList = () => {
       style: {
         fontWeight: showSelectedOptions ? '300' : '600'
       }
-    }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
+    }), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
       orientation: "vertical",
       position: "center",
       type: "group-level",
@@ -71,37 +98,13 @@ const HeaderList = () => {
     })), /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {
       tabIndex: showSelectedOptions ? -1 : 0,
       "data-testid": ComboboxDataTestids.ComboboxDataTestid.SHOW_SELECTED_OPTIONS_BUTTON,
-      disabled: multiSelectedValues.length === 0,
+      disabled: multiSelectedValues.length === 0 || !showSelectedOptions && selectableOptions.length === multiSelectedValues.length,
       buttonType: "text",
       isSelected: showSelectedOptions,
       onClick: !showSelectedOptions ? handleToggle : lodash.noop,
       labelText: "".concat(multiSelectedValues.length, " SELECTED"),
       size: "s"
     })]
-  })), /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, onSelectAll && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
-    disabled: selectableOptions.length === multiSelectedValues.length,
-    "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECT_ALL_BUTTON,
-    buttonType: "text",
-    labelText: "All",
-    size: "s",
-    onMouseDown: handleOnMouseDown,
-    onBlur: handleOnBlurSelectAll,
-    onClick: handleClickOnSelectAll
-  }), onSelectAll && onClearAll && (_StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {
-    orientation: "vertical",
-    position: "center",
-    type: "group-level",
-    margin: "none"
-  }))), onClearAll && /*#__PURE__*/_jsx__default["default"](styled.StyledButton, {
-    disabled: multiSelectedValues.length === 0,
-    tabIndex: 0,
-    "data-testid": ComboboxDataTestids.ComboboxDataTestid.CLEAR_ALL_BUTTON,
-    buttonType: "text",
-    size: "s",
-    labelText: "Clear",
-    onMouseDown: handleOnMouseDown,
-    onBlur: handleOnBlurClearAll,
-    onClick: handleClickOnClearAll
   })));
 };
 

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

@@ -2,19 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
 var DSButton = require('@elliemae/ds-button');
 var DSSeparator = require('@elliemae/ds-separator');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
 
-/* eslint-disable max-len */
+var _templateObject;
 
-const selectedStyle = isSelected => styled.css(["border-bottom:2px solid ", ";cursor:", ";"], props => isSelected ? props.theme.colors.brand[700] : '#FFF', isSelected && 'default');
+const selectedStyle = isSelected => dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  & span {\n    border-bottom: 2px solid ", ";\n  }\n  cursor: ", ";\n"])), props => isSelected ? props.theme.colors.brand[700] : '#FFF', isSelected && 'default');
 
 const StyledHeaderListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-dazbzt-0"
@@ -27,7 +30,7 @@ const StyledButton = /*#__PURE__*/styled__default["default"](DSButton__default["
 })(["padding:0 ", ";align-items:center;"], props => props.theme.space.xxs);
 const StyledGeneralSelectionButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-dazbzt-3"
-})(["border-radius:0px;padding:", ";margin:0;align-items:center;", " transition:unset;"], props => props.theme.space.xxs, _ref => {
+})(["border-radius:0px;padding:0 ", ";margin:0;align-items:center;", " transition:unset;"], props => props.theme.space.xxs, _ref => {
   let {
     isSelected
   } = _ref;
@@ -42,10 +45,14 @@ const StyledShowAllButton = /*#__PURE__*/styled__default["default"](StyledGenera
 const StyledSelectedItems = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-dazbzt-6"
 })(["display:flex;align-items:center;"]);
+const StyledNoOptionsSelected = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-dazbzt-7"
+})(["padding:0 ", ";"], props => props.theme.space.xxs);
 
 exports.StyledButton = StyledButton;
 exports.StyledButtonSelection = StyledButtonSelection;
 exports.StyledHeaderListWrapper = StyledHeaderListWrapper;
+exports.StyledNoOptionsSelected = StyledNoOptionsSelected;
 exports.StyledSelectedItems = StyledSelectedItems;
 exports.StyledSeparator = StyledSeparator;
 exports.StyledShowAllButton = StyledShowAllButton;

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

@@ -25,14 +25,13 @@ const useHeaderListHandlers = () => {
       inputRef.current.focus();
     }
   }, [inputRef, onClearAll, multiSelectedValues]);
-  const handleOnBlurClearAll = React.useCallback(e => {
-    e.preventDefault();
-    inputRef.current.focus();
+  const handleOnBlurClearAll = React.useCallback(e => {// since ux change order from the action buttons this is unneccesary. will comment until review finish
+    // e.preventDefault();
+    // inputRef.current.focus();
   }, [inputRef]);
   const handleClickOnSelectAll = React.useCallback(() => {
     onSelectAll();
     inputRef.current.focus();
-    setShowPopover(false);
   }, [onSelectAll, inputRef, setShowPopover]);
   const handleClickOnClearAll = React.useCallback(e => {
     setShowSelectedOptions(false);

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

@@ -40,34 +40,39 @@ const MenuList = () => {
     }
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
+  const withHeader = !inline && multiple && options.length > 0;
   const {
     ItemRenderer
   } = useItemRenderer.useItemRenderer();
   useMenuList.useMenuList();
   useOnElementResize.useOnElementResize(controlsWrapperRef);
-  const listWidth = inline ? '100%' : menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth);
-  const handleOnClick = React.useCallback(() => {
+  const listWidth = menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth);
+  const handleOnFocus = React.useCallback(() => {
     inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
   }, [inputRef]);
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledListWrapper, {
+    tabIndex: -1,
     ref: wrapperListRef,
+    inline: inline,
     onMouseDown: e => e.preventDefault(),
     minWidth: listWidth,
     id: "combo-listbox",
     role: "listbox",
-    children: [!inline && multiple && options.length > 0 && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
+    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
+      tabIndex: -1,
       maxHeight: menuMaxHeight,
       ref: listRef,
       style: {
-        marginTop: !inline && multiple && options.length > 0 && '28px'
+        marginTop: withHeader && '28px'
       },
       children: /*#__PURE__*/_jsx__default["default"](styled.StyledList, {
         tabIndex: -1,
         "aria-expanded": showPopover,
-        onFocus: handleOnClick,
+        onFocus: handleOnFocus,
         "data-testid": ComboboxDataTestids.ComboboxDataTestid.LIST,
         style: {
-          height: totalSize
+          height: totalSize,
+          margin: inline ? '0px' : '8px 0px'
         }
       }, void 0, ItemRenderer)
     }) : _EmptyState || (_EmptyState = /*#__PURE__*/_jsx__default["default"](index.EmptyState, {}))]

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

@@ -10,17 +10,18 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1uedyf-0"
-})(["min-width:", "px;"], props => props.minWidth);
+})(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
 const StyledList = /*#__PURE__*/styled__default["default"].ul.withConfig({
   componentId: "sc-1uedyf-1"
-})(["position:relative;padding:0;margin:8px 0px;"]);
+})(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1uedyf-2"
-})(["overflow-y:auto;max-height:", "px;"], _ref => {
+})(["overflow-y:auto;max-height:", ";"], _ref => {
   let {
-    maxHeight
+    maxHeight,
+    inline
   } = _ref;
-  return maxHeight || '400';
+  return inline ? '' : "".concat(!maxHeight ? '400' : maxHeight, "px");
 });
 
 exports.StyledList = StyledList;

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

@@ -10,6 +10,7 @@ const useMenuList = () => {
 
   const {
     props: {
+      inline,
       selectedValues,
       onMenuOpen,
       options
@@ -28,7 +29,7 @@ const useMenuList = () => {
       }
     };
 
-    if (showPopover) {
+    if (showPopover || inline) {
       onMenuOpen();
 
       if (inputRef.current.value !== '') {
@@ -54,7 +55,7 @@ const useMenuList = () => {
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [showPopover, hasFocus, (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
+  }, [showPopover, inline, hasFocus, (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
 };
 
 exports.useMenuList = useMenuList;

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

@@ -22,6 +22,8 @@ var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var _MultiAllyMessages;
 
 const MultiSelectedValuesContainer = () => {
+  var _inputRef$current2;
+
   const {
     props: {
       selectedValues
@@ -38,19 +40,23 @@ const MultiSelectedValuesContainer = () => {
     }
   }, 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, {
-    size: "s",
-    labelTruncated: inputRef.current.value === '' || correctPillsToShow !== pillsToShow,
-    label: option.label,
-    type: "value"
-  }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+  }, 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: "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/propTypes.js

@@ -5,22 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 const propTypes = {
-  placeholder: reactDesc.PropTypes.string.description('').defaultValue(''),
-  options: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.object]).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(''),
-  onMenuOpen: 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('').defaultValue('false')
+  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

@@ -54,7 +54,7 @@ const useKeyboardNavigation = () => {
 
     onKeyDown(e, currentItem); // =============================================================================
     // ENTER KEY TO CREATE ELEMENTS
-    // =============================================================================
+    // ======================================================      =================
 
     if (e.key === 'Enter' && onCreate && !selectableOptions.length) {
       onCreate(targetElement.value);
@@ -69,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();
@@ -92,8 +92,9 @@ const useKeyboardNavigation = () => {
 
 
     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);
@@ -103,8 +104,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);
@@ -114,7 +116,7 @@ const useKeyboardNavigation = () => {
           const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
-        }, 1);
+        });
       }
     } // =============================================================================
     // ESCAPE
@@ -122,9 +124,9 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Escape' && !inline) {
-      setShowPopover(false);
-      onFilter('');
-      inputRef.current.value = '';
+      setShowPopover(false); // TODO confirm funcionality
+      // onFilter('');
+      // inputRef.current.value = '';
     } // =============================================================================
     // BACKSPACE
     // =============================================================================
@@ -142,9 +144,7 @@ const useKeyboardNavigation = () => {
       setShowSelectedValue(true);
     }
 
-    if (e.key === 'Tab' && inline) {
-      e.preventDefault();
-    }
+    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;
 };

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/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/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
-    })))
+    }))
   });
 };
 

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

@@ -39,7 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const SubmenuItem = props$1 => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, SubmenuItemWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
   const {
     dsId,
     label,

package/cjs/MenuItem/components/styled.js

@@ -2,19 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
 var styledSystem = require('styled-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+var _templateObject, _templateObject2;
+
 const borderOutside = function (color) {
   let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return styled.css([":after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:", "px solid ", ";pointer-events:none;z-index:7;}"], width, color);
+  return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: ", "px solid ", ";\n    pointer-events: none;\n    z-index: 7;\n  }\n"])), width, color);
 };
 
-const disabledOption = () => styled.css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
+const disabledOption = () => dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n"])));
 
 const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);