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

package/cjs/ComboBox/v1/DSComboBox.js

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

package/cjs/ComboBox/v1/withSelectStringValueConverter.js

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

package/cjs/ComboBox/v3/ComboBox.js

@@ -18,9 +18,8 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _Container;
 
 const DSComboBox = props => {
-  // if we detect wrong props configuration we throw meaningful errors
   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

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

package/cjs/ComboBox/v3/ComboboxDataTestids.js

@@ -9,7 +9,9 @@ const ComboboxDataTestid = {
   SELECT_ALL_BUTTON: 'combobox-all-btn',
   CLEAR_ALL_BUTTON: 'combobox-clear-btn',
   DROPDOWN: 'combobox-dropdown-btn',
-  OPTION: 'combobox-option'
+  OPTION: 'combobox-option',
+  SHOW_ALL_BUTTON: 'combobox-show-all-btn',
+  SHOW_SELECTED_OPTIONS_BUTTON: 'combobox-selected-options-btn'
 };
 
 exports.ComboboxDataTestid = ComboboxDataTestid;

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

@@ -2,44 +2,82 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var reactVirtual = require('react-virtual');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
 
-const useComboBox = props => {
-  var _inputRef$current;
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const useComboBox = props => {
   const [showPopover, setShowPopover] = React.useState(false);
-  const [referenceElement, setReferenceElement] = React.useState();
+  const [referenceElement, setReferenceElement] = React.useState(null);
   const [showSelectedValue, setShowSelectedValue] = React.useState(false);
+  const [showSelectedOptions, setShowSelectedOptions] = React.useState(false);
   const [hasFocus, setHasFocus] = React.useState(false);
   const [focusOptionIdx, setCurrentOption] = React.useState('');
-  const inputRef = React.useRef();
-  const listRef = React.useRef();
-  const selectedOptionsRef = React.useRef();
-  const controlsWrapperRef = React.useRef();
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const wrapperListRef = React.useRef(null);
+  const selectedOptionsRef = React.useRef(null);
+  const controlsWrapperRef = React.useRef(null);
+  const pillGroupRef = React.useRef(null);
   const propsWithDefaults = useGetPropsWithDefault.useGetComboBoxWithDefaultsProps(props);
   const {
-    options
+    options,
+    selectedValues
   } = propsWithDefaults; // ---------------------------------------------------------------------------
-  // Focusing first option when dropdown opens or input changes
+  // Menu Options with/out selected filter
   // ---------------------------------------------------------------------------
 
-  React.useEffect(() => {
-    if (showPopover) {
-      for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
-        setCurrentOption(options[i].dsId);
-        break;
+  const selectedValuesWithSections = React.useCallback(() => {
+    var _items2;
+
+    const multiSelectedValue = selectedValues;
+    const items = [];
+    options.forEach(option => {
+      const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
+
+      if (isSelectedValue) {
+        items.push(option);
       }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [showPopover, (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]); // ===========================================================================
+      if (option.type === 'section') {
+        var _items;
+
+        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
+          items[items.length - 1] = option;
+        } else {
+          items.push(option);
+        }
+      }
+    });
+
+    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
+      items.pop();
+    }
+
+    return items;
+  }, [options, selectedValues]);
+  const correctOptions = React.useMemo(() => showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0 ? selectedValuesWithSections() : options, [options, selectedValuesWithSections, selectedValues, showSelectedOptions]); // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
   const virtualListHelpers = reactVirtual.useVirtual({
-    size: propsWithDefaults.options.length,
+    size: correctOptions.length,
     parentRef: listRef,
     overscan: 15,
     paddingStart: 0
@@ -51,10 +89,12 @@ const useComboBox = props => {
     let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       align: 'center'
     };
-    virtualListHelpers.scrollToIndex(propsWithDefaults.options.findIndex(opt => opt.dsId === dsId), opts);
-  }, [propsWithDefaults.options, virtualListHelpers]);
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), opts);
+  }, [correctOptions, virtualListHelpers]);
   const ctx = React.useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      options: correctOptions
+    }),
     virtualListHelpers,
     showPopover,
     referenceElement,
@@ -65,13 +105,17 @@ const useComboBox = props => {
     selectedOptionsRef,
     controlsWrapperRef,
     hasFocus,
+    pillGroupRef,
+    showSelectedOptions,
+    wrapperListRef,
+    setShowSelectedOptions,
     setHasFocus,
     setCurrentOption,
     scrollOptionIntoView,
     setShowSelectedValue,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, showPopover, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
   return ctx;
 };
 

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

@@ -20,7 +20,9 @@ var _Controls, _MenuList, _MenuList2;
 const Container = () => {
   const {
     props: {
-      inline
+      inline,
+      startPlacementPreference,
+      placementOrderPreference
     },
     showPopover,
     inputRef,
@@ -30,28 +32,36 @@ const Container = () => {
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const handleCloseMenu = React.useCallback(() => {
     setShowPopover(false);
-    inputRef.current.blur();
+    if (inputRef.current) inputRef.current.blur();
   }, [inputRef, setShowPopover]);
   const handleMouseDown = React.useCallback(e => {
     e.preventDefault();
   }, []);
+  const handleOnClickContainer = React.useCallback(() => {
+    setShowPopover(!showPopover);
+  }, [setShowPopover, showPopover]);
   const StyledContainer = inline ? styled.StyledContainerInline : styled.StyledContainerWithPopper;
-  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsxs(StyledContainer, {
-    ref: setReferenceElement,
-    children: [_Controls || (_Controls = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})) : null]
-  }), !inline ? /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
-    customOffset: [0, 5],
-    closeContextMenu: handleCloseMenu,
-    referenceElement: referenceElement,
-    showPopover: showPopover,
-    withoutPortal: true,
-    withoutArrow: true,
-    withoutAnimation: true,
-    zIndex: 10
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
-    tabIndex: -1,
-    onMouseDown: handleMouseDown
-  }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))) : null);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledContainer, {
+      ref: setReferenceElement,
+      onClick: handleOnClickContainer,
+      children: [_Controls || (_Controls = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})) : null]
+    }), !inline ? /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+      customOffset: [0, 5],
+      closeContextMenu: handleCloseMenu,
+      referenceElement: referenceElement,
+      showPopover: showPopover,
+      startPlacementPreference: startPlacementPreference,
+      placementOrderPreference: placementOrderPreference,
+      withoutPortal: true,
+      withoutArrow: true,
+      withoutAnimation: true,
+      zIndex: 10
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
+      tabIndex: -1,
+      onMouseDown: handleMouseDown
+    }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))) : null]
+  });
 };
 
 exports.Container = Container;

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

@@ -23,6 +23,7 @@ const Controls = () => {
   const {
     props: {
       inline,
+      inputMinWidth,
       hasError,
       selectedValues
     },
@@ -49,10 +50,11 @@ const Controls = () => {
     }
   };
 
-  const cols = !inline ? ['minmax(0px,max-content)', 'minmax(0px, auto)', '29px'] : ['minmax(0px, auto)'];
+  const cols = !inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)'];
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledControlsWrapper, {
     ref: controlsWrapperRef,
     cols: cols,
+    minWidth: inputMinWidth,
     hasError: hasError,
     hasFocus: hasFocus,
     inline: inline,

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

@@ -2,33 +2,55 @@
 
 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);
 
+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;align-items:center;align-content:center;height:28px;padding-left:8px;margin:", ";", " &:hover{border:1px solid ", ";}"], props => props.hasError ? props.theme.colors.danger[900] : props.theme.colors.neutral[400], _ref => {
+})(["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,
     inline
-  } = _ref;
+  } = _ref2;
+  return inline ? '' : "".concat(minWidth, "px");
+}, _ref3 => {
+  let {
+    inline
+  } = _ref3;
   return inline ? '10px 16px' : 'none';
-}, props => props.hasFocus && focusMixin, props => props.theme.colors.brand[600]);
-const focusMixin = /*#__PURE__*/styled.css(["&::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:7;}"], _ref2 => {
+}, _ref4 => {
   let {
-    theme
-  } = _ref2;
-  return theme.colors.brand[700];
+    hasFocus
+  } = _ref4;
+  return hasFocus ? focusBorder : normalBorder;
 });
 const StyledSelection = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-64uci7-1"
 })(["font-size:13px;margin-right:3px;line-height:13px;display:flex;"]);
 const StyledHeaderActionsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-64uci7-2"
-})(["align-items:center;align-self:stretch;display:flex;box-sizing:border-box;height:26px;.em-ds-button--text:focus::after{border:none;}"]);
+})(["align-items:center;align-self:stretch;display:flex;box-sizing:border-box;height:28px;.em-ds-button--text:focus::after{border:none;}"]);
 const StyleDropdownIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-64uci7-3"
 })([""]);

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

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

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

@@ -10,7 +10,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
   componentId: "sc-1ue5xik-0"
-})(["font-size:13px;line-height:13px;border:none;padding:0;outline:none;&:focus{outline:none;}"]);
+})(["font-size:13px;line-height:13px;border:none;padding:0;outline:none;color:", ";&:focus{outline:none;}"], props => props.theme.colors.neutral[700]);
 const StyledInputPlaceHolder = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1ue5xik-1"
 })(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], props => props.theme.colors.neutral[500]);

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

@@ -14,23 +14,23 @@ const useControlsInput = () => {
   const {
     props: {
       selectedValues,
-      options,
       placeholder,
       onFilter
     },
     setShowPopover,
     setCurrentOption,
     inputRef,
-    listRef,
+    wrapperListRef,
     setHasFocus,
-    setShowSelectedValue
+    setShowSelectedValue,
+    setShowSelectedOptions
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const [width, setWidth] = React.useState();
-  const span = React.useRef(null);
+  const [width, setWidth] = React.useState(1);
+  const spanReference = React.useRef(null);
   React.useEffect(() => {
-    var _span$current;
+    var _spanReference$curren;
 
-    setWidth(((_span$current = span.current) === null || _span$current === void 0 ? void 0 : _span$current.offsetWidth) || 1);
+    setWidth(((_spanReference$curren = spanReference.current) === null || _spanReference$curren === void 0 ? void 0 : _spanReference$curren.offsetWidth) || 1);
   }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
   React.useEffect(() => {
     setShowSelectedValue(true);
@@ -38,31 +38,29 @@ const useControlsInput = () => {
   // and refresh selected values and update filter outside value.
 
   const handleOnChange = React.useCallback(e => {
-    if (e.target.value) setShowSelectedValue(false);
+    setShowSelectedOptions(false);
+    if (e.currentTarget.value) setShowSelectedValue(false);
     setShowPopover(true);
-    onFilter(e.target.value);
-  }, [onFilter, setShowPopover, setShowSelectedValue]);
+    onFilter(e.currentTarget.value);
+  }, [onFilter, setShowPopover, setShowSelectedOptions, setShowSelectedValue]);
   const handleOnBlur = React.useCallback(() => {
+    setHasFocus(false);
     setTimeout(() => {
-      var _listRef$current;
+      var _wrapperListRef$curre;
 
-      if (!(listRef !== null && listRef !== void 0 && (_listRef$current = listRef.current) !== null && _listRef$current !== void 0 && _listRef$current.contains(document.activeElement))) {
+      if (!(wrapperListRef !== null && wrapperListRef !== void 0 && (_wrapperListRef$curre = wrapperListRef.current) !== null && _wrapperListRef$curre !== void 0 && _wrapperListRef$curre.contains(document.activeElement))) {
         setShowPopover(false);
       }
 
       setCurrentOption('');
-      setHasFocus(false);
       setShowSelectedValue(true);
       onFilter('');
       if (inputRef.current) inputRef.current.value = '';
-    }, 100);
-  }, [setHasFocus, setCurrentOption, listRef, onFilter, inputRef, setShowPopover, setShowSelectedValue]);
+    });
+  }, [setHasFocus, setCurrentOption, wrapperListRef, onFilter, inputRef, setShowPopover, setShowSelectedValue]);
   const handleOnFocus = React.useCallback(() => {
     setHasFocus(true);
-    setShowPopover(true);
-    const firstItem = listHelper.findInCircularList(options, -1, opt => !['section', 'separator'].includes(opt.type));
-    setCurrentOption(options[firstItem] ? options[firstItem].dsId : '');
-  }, [setHasFocus, options, setCurrentOption, setShowPopover]);
+  }, [setHasFocus]);
   const showPlaceholder = !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.replace(/\s/g, '\u00a0');
   return React.useMemo(() => ({
@@ -72,8 +70,8 @@ const useControlsInput = () => {
     showPlaceholder,
     spanReferenceText,
     width,
-    span
-  }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, span]);
+    spanReference
+  }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference]);
 };
 
 exports.useControlsInput = useControlsInput;

package/cjs/ComboBox/v3/parts/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"
-})([""]);
+})(["box-sizing:border-box;width:100;& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
 
 exports.StyledDropDownButton = StyledDropDownButton;