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

package/esm/ComboBox/v3/ComboBox.js

@@ -11,7 +11,7 @@ var _Container;
 
 const DSComboBox = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSComboBoxWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const ctx = useComboBox(props);
   return /*#__PURE__*/_jsx(ComboBoxContext.Provider, {
     value: ctx

package/esm/ComboBox/v3/ComboBoxCTX.js

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

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

@@ -1,31 +1,30 @@
-import styled, { css } from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 
-const focusStyle = /*#__PURE__*/css(["border:2px solid ", ";"], _ref => {
-  let {
-    theme,
-    hasError
-  } = _ref;
-
-  if (hasError) {
-    return theme.colors.danger[900];
+var _templateObject, _templateObject2;
+const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n"])), props => {
+  if (props.hasError) {
+    return props.theme.colors.danger[900];
   }
 
+  return props.theme.colors.neutral[400];
+});
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
   return theme.colors.brand[700];
 });
 const StyledControlsWrapper = /*#__PURE__*/styled(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
@@ -35,7 +34,7 @@ const StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
   let {
     hasFocus
   } = _ref4;
-  return hasFocus && focusStyle;
+  return hasFocus ? focusBorder : normalBorder;
 });
 const StyledSelection = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-64uci7-1"

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

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

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

@@ -3,6 +3,6 @@ import DSButton from '@elliemae/ds-button';
 
 const StyledDropDownButton = /*#__PURE__*/styled(DSButton).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']);
 
 export { StyledDropDownButton };

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

@@ -1,17 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import { DSControlledToggle } from '@elliemae/ds-controlled-form';
 import { noop } from 'lodash';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledHeaderListWrapper, StyledSelectedItems, StyledShowAllButton, StyledSeparator, StyledButtonSelection, StyledButton } from './styled.js';
+import { StyledHeaderListWrapper, StyledSelectedItems, StyledButton, StyledSeparator, StyledButtonSelection, StyledNoOptionsSelected, StyledShowAllButton } from './styled.js';
 import { getSelectableOptions } from '../../utils/listHelper.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { useHeaderListHandlers } from './useHeaderListHandlers.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var _div, _StyledSeparator, _StyledSeparator2;
+var _StyledSeparator, _StyledNoOptionsSelec, _StyledSeparator2;
 
 const HeaderList = () => {
+  var _inputRef$current;
+
   const {
     props: {
       onSelectAll,
@@ -20,7 +21,8 @@ const HeaderList = () => {
       selectedValues,
       options
     },
-    showSelectedOptions
+    showSelectedOptions,
+    inputRef
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(options);
@@ -36,13 +38,38 @@ const HeaderList = () => {
   return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, withToggle ? /*#__PURE__*/jsx(Fragment, {
-    children: multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(DSControlledToggle, {
-      labelOn: "".concat(multiSelectedValues.length, " SELECTED"),
-      labelOff: "Show ".concat(multiSelectedValues.length, " SELECTED"),
-      checked: showSelectedOptions,
-      onChange: handleToggle
-    }) : _div || (_div = /*#__PURE__*/_jsx("div", {}, void 0, "0 SELECTED"))
+  }, void 0, /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, onSelectAll && /*#__PURE__*/_jsx(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": ComboboxDataTestid.SELECT_ALL_BUTTON,
+    buttonType: "text",
+    labelText: "All",
+    size: "s",
+    onMouseDown: handleOnMouseDown,
+    onBlur: handleOnBlurSelectAll,
+    onClick: handleClickOnSelectAll
+  }), onSelectAll && onClearAll && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+    orientation: "vertical",
+    position: "center",
+    type: "group-level",
+    margin: "none"
+  }))), onClearAll && /*#__PURE__*/_jsx(StyledButton, {
+    disabled: multiSelectedValues.length === 0,
+    tabIndex: 0,
+    "data-testid": ComboboxDataTestid.CLEAR_ALL_BUTTON,
+    buttonType: "text",
+    size: "s",
+    labelText: "Clear",
+    onMouseDown: handleOnMouseDown,
+    onBlur: handleOnBlurClearAll,
+    onClick: handleClickOnClearAll
+  })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, withToggle ? /*#__PURE__*/jsx(Fragment, {
+    children: multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx(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(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))
   }) : /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(StyledShowAllButton, {
       buttonType: "text",
@@ -55,7 +82,7 @@ const HeaderList = () => {
       style: {
         fontWeight: showSelectedOptions ? '300' : '600'
       }
-    }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+    }), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
       orientation: "vertical",
       position: "center",
       type: "group-level",
@@ -63,37 +90,13 @@ const HeaderList = () => {
     })), /*#__PURE__*/_jsx(StyledButtonSelection, {
       tabIndex: showSelectedOptions ? -1 : 0,
       "data-testid": 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 : noop,
       labelText: "".concat(multiSelectedValues.length, " SELECTED"),
       size: "s"
     })]
-  })), /*#__PURE__*/_jsx(StyledSelectedItems, {}, void 0, onSelectAll && /*#__PURE__*/_jsx(StyledButton, {
-    disabled: selectableOptions.length === multiSelectedValues.length,
-    "data-testid": ComboboxDataTestid.SELECT_ALL_BUTTON,
-    buttonType: "text",
-    labelText: "All",
-    size: "s",
-    onMouseDown: handleOnMouseDown,
-    onBlur: handleOnBlurSelectAll,
-    onClick: handleClickOnSelectAll
-  }), onSelectAll && onClearAll && (_StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
-    orientation: "vertical",
-    position: "center",
-    type: "group-level",
-    margin: "none"
-  }))), onClearAll && /*#__PURE__*/_jsx(StyledButton, {
-    disabled: multiSelectedValues.length === 0,
-    tabIndex: 0,
-    "data-testid": ComboboxDataTestid.CLEAR_ALL_BUTTON,
-    buttonType: "text",
-    size: "s",
-    labelText: "Clear",
-    onMouseDown: handleOnMouseDown,
-    onBlur: handleOnBlurClearAll,
-    onClick: handleClickOnClearAll
   })));
 };
 

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

@@ -1,10 +1,12 @@
-import styled, { css } from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import DSButton from '@elliemae/ds-button';
 import DSSeparator from '@elliemae/ds-separator';
 
-/* eslint-disable max-len */
+var _templateObject;
 
-const selectedStyle = isSelected => css(["border-bottom:2px solid ", ";cursor:", ";"], props => isSelected ? props.theme.colors.brand[700] : '#FFF', isSelected && 'default');
+const selectedStyle = isSelected => css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.div.withConfig({
   componentId: "sc-dazbzt-0"
@@ -17,7 +19,7 @@ const StyledButton = /*#__PURE__*/styled(DSButton).withConfig({
 })(["padding:0 ", ";align-items:center;"], props => props.theme.space.xxs);
 const StyledGeneralSelectionButton = /*#__PURE__*/styled(DSButton).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;
@@ -32,5 +34,8 @@ const StyledShowAllButton = /*#__PURE__*/styled(StyledGeneralSelectionButton).wi
 const StyledSelectedItems = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-dazbzt-6"
 })(["display:flex;align-items:center;"]);
+const StyledNoOptionsSelected = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-dazbzt-7"
+})(["padding:0 ", ";"], props => props.theme.space.xxs);
 
-export { StyledButton, StyledButtonSelection, StyledHeaderListWrapper, StyledSelectedItems, StyledSeparator, StyledShowAllButton };
+export { StyledButton, StyledButtonSelection, StyledHeaderListWrapper, StyledNoOptionsSelected, StyledSelectedItems, StyledSeparator, StyledShowAllButton };

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

@@ -21,14 +21,13 @@ const useHeaderListHandlers = () => {
       inputRef.current.focus();
     }
   }, [inputRef, onClearAll, multiSelectedValues]);
-  const handleOnBlurClearAll = useCallback(e => {
-    e.preventDefault();
-    inputRef.current.focus();
+  const handleOnBlurClearAll = 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 = useCallback(() => {
     onSelectAll();
     inputRef.current.focus();
-    setShowPopover(false);
   }, [onSelectAll, inputRef, setShowPopover]);
   const handleClickOnClearAll = useCallback(e => {
     setShowSelectedOptions(false);

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

@@ -32,34 +32,39 @@ const MenuList = () => {
     }
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
+  const withHeader = !inline && multiple && options.length > 0;
   const {
     ItemRenderer
   } = useItemRenderer();
   useMenuList();
   useOnElementResize(controlsWrapperRef);
-  const listWidth = inline ? '100%' : menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth);
-  const handleOnClick = useCallback(() => {
+  const listWidth = menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth);
+  const handleOnFocus = useCallback(() => {
     inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.focus();
   }, [inputRef]);
   return /*#__PURE__*/jsxs(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(HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
+    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), options.length > 0 ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
+      tabIndex: -1,
       maxHeight: menuMaxHeight,
       ref: listRef,
       style: {
-        marginTop: !inline && multiple && options.length > 0 && '28px'
+        marginTop: withHeader && '28px'
       },
       children: /*#__PURE__*/_jsx(StyledList, {
         tabIndex: -1,
         "aria-expanded": showPopover,
-        onFocus: handleOnClick,
+        onFocus: handleOnFocus,
         "data-testid": ComboboxDataTestid.LIST,
         style: {
-          height: totalSize
+          height: totalSize,
+          margin: inline ? '0px' : '8px 0px'
         }
       }, void 0, ItemRenderer)
     }) : _EmptyState || (_EmptyState = /*#__PURE__*/_jsx(EmptyState, {}))]

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

@@ -2,17 +2,18 @@ import styled from 'styled-components';
 
 const StyledListWrapper = /*#__PURE__*/styled.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.ul.withConfig({
   componentId: "sc-1uedyf-1"
-})(["position:relative;padding:0;margin:8px 0px;"]);
+})(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled.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");
 });
 
 export { StyledList, StyledListWrapper, StyledVirtualListWrapper };

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

@@ -6,6 +6,7 @@ const useMenuList = () => {
 
   const {
     props: {
+      inline,
       selectedValues,
       onMenuOpen,
       options
@@ -24,7 +25,7 @@ const useMenuList = () => {
       }
     };
 
-    if (showPopover) {
+    if (showPopover || inline) {
       onMenuOpen();
 
       if (inputRef.current.value !== '') {
@@ -50,7 +51,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]);
 };
 
 export { useMenuList };

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

@@ -13,6 +13,8 @@ import { jsxs, Fragment } from 'react/jsx-runtime';
 var _MultiAllyMessages;
 
 const MultiSelectedValuesContainer = () => {
+  var _inputRef$current2;
+
   const {
     props: {
       selectedValues
@@ -29,19 +31,23 @@ const MultiSelectedValuesContainer = () => {
     }
   }, void 0, /*#__PURE__*/_jsx(DSPillGroupV2, {
     innerRef: pillGroupRef
-  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx(DSPillV2, {
-    size: "s",
-    labelTruncated: inputRef.current.value === '' || correctPillsToShow !== pillsToShow,
-    label: option.label,
-    type: "value"
-  }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx(DSPillV2, {
+  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => {
+    var _inputRef$current;
+
+    return /*#__PURE__*/_jsx(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(DSPillV2, {
     size: "s",
     labelTruncated: false,
     label: "+".concat(multiSelectedValue.length - correctPillsToShow),
     type: "value"
   }, "grouped"))), [pillsToShow, pillGroupRef, inputRef, multiSelectedValue, correctPillsToShow]);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [multiSelectedValue.length > 0 && !inputRef.current.value && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx(MultiAllyMessages, {}))), pills]
+    children: [multiSelectedValue.length > 0 && !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx(MultiAllyMessages, {}))), pills]
   });
 };
 

package/esm/ComboBox/v3/propTypes.js

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

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

@@ -50,7 +50,7 @@ const useKeyboardNavigation = () => {
 
     onKeyDown(e, currentItem); // =============================================================================
     // ENTER KEY TO CREATE ELEMENTS
-    // =============================================================================
+    // ======================================================      =================
 
     if (e.key === 'Enter' && onCreate && !selectableOptions.length) {
       onCreate(targetElement.value);
@@ -65,7 +65,7 @@ const useKeyboardNavigation = () => {
     if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
       e.preventDefault();
 
-      if (!showPopover) {
+      if (!showPopover && !inline) {
         setShowPopover(true);
       } else {
         selectOption();
@@ -88,8 +88,9 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
       if (showPopover || inline) {
-        e.preventDefault();
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
@@ -99,8 +100,9 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
       if (showPopover || inline) {
-        e.preventDefault();
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
@@ -110,7 +112,7 @@ const useKeyboardNavigation = () => {
           const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
-        }, 1);
+        });
       }
     } // =============================================================================
     // ESCAPE
@@ -118,9 +120,9 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Escape' && !inline) {
-      setShowPopover(false);
-      onFilter('');
-      inputRef.current.value = '';
+      setShowPopover(false); // TODO confirm funcionality
+      // onFilter('');
+      // inputRef.current.value = '';
     } // =============================================================================
     // BACKSPACE
     // =============================================================================
@@ -138,9 +140,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/esm/MenuItem/components/MenuItem/index.js

@@ -10,7 +10,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const MenuItem = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, MenuItemWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
   const {
     dsId,
     label,

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

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const Section = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, MenuSectionItemWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
   const {
     label,
     wrapperStyles,

package/esm/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -5,7 +5,6 @@ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text'
 import { Checkmark } from '@elliemae/ds-icons';
 import Grid from '@elliemae/ds-grid';
 import { itemProps, defaultProps } from '../../props.js';
-import { StyledItemChecked, StyledItemLabel } from './styled.js';
 import { StyledGlobalMenuItemWrapper } from '../styled.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -42,15 +41,16 @@ const SingleMenuItem = props => {
     pr: render ? 0 : 40,
     "data-testid": dataTestid,
     children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {
-      cols: ['min-content', 'auto'],
+      cols: ['16px', 'auto'],
       height: "16px",
-      gutter: "xxs"
-    }, void 0, /*#__PURE__*/_jsx(StyledItemChecked, {}, void 0, isSelected && /*#__PURE__*/_jsx(Checkmark, {
+      gutter: "xxs",
+      alignItems: "center"
+    }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, isSelected && /*#__PURE__*/_jsx(Checkmark, {
       size: "s",
       color: ['brand-primary', '600']
-    })), /*#__PURE__*/_jsx(StyledItemLabel, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    })), /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
       value: label
-    })))
+    }))
   });
 };
 

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

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

package/esm/MenuItem/components/styled.js

@@ -1,12 +1,16 @@
-import styled, { css } from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
 import { position, layout } from 'styled-system';
 
+var _templateObject, _templateObject2;
+
 const borderOutside = function (color) {
   let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return 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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = () => css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
+const disabledOption = () => css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n"])));
 
 const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);