@elliemae/ds-controlled-form 2.3.3-rc.0 → 2.4.0-rc.2

package/cjs/{controlled-combobox → combobox}/config/useCorrectOptions.js

@@ -10,14 +10,13 @@ require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var uid = require('uid');
-var lodash = require('lodash');
+var constants = require('../constants.js');
 
-const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
+const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
     options,
     selectedValues,
-    onCreate,
-    innerRef
+    onCreate
   } = propsWithDefaults;
   const selectedValuesWithSections = React.useCallback(() => {
     var _items2;
@@ -31,10 +30,10 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
         items.push(option);
       }
 
-      if (option.type === 'section') {
+      if (option.type === constants.MENU_OPTION_TYPES.SECTION) {
         var _items;
 
-        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
+        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === constants.MENU_OPTION_TYPES.SECTION) {
           items[items.length - 1] = option;
         } else {
           items.push(option);
@@ -42,7 +41,7 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
       }
     });
 
-    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
+    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === constants.MENU_OPTION_TYPES.SECTION) {
       items.pop();
     }
 
@@ -53,24 +52,18 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
       return selectedValuesWithSections();
     }
 
-    if (onCreate !== lodash.noop && innerRef.current && innerRef.current.value !== '' && options.findIndex(option => {
-      var _innerRef$current;
-
-      return option.type === 'option' && option.label === (innerRef === null || innerRef === void 0 ? void 0 : (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
-    }) === -1) {
-      var _innerRef$current2;
-
-      const creatableUuid = uid.uid(6);
+    if (onCreate && inputValue && options.findIndex(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+      const creatableUuid = uid.uid();
       const creatableItem = {
         dsId: "creatable-".concat(creatableUuid),
-        label: (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.value,
+        label: inputValue,
         type: 'creatable'
       };
       return [creatableItem, ...options];
     }
 
     return options;
-  }, [options, onCreate, innerRef, selectedValuesWithSections, selectedValues, showSelectedOptions]);
+  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);
   return correctOptions;
 };
 

package/cjs/combobox/constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MENU_OPTION_TYPES = {
+  OPTION: 'option',
+  SECTION: 'section',
+  SEPARATOR: 'separator'
+};
+const INTERNAL_MENU_OPTION_TYPES = {
+  CREATABLE: 'creatable'
+};
+
+exports.INTERNAL_MENU_OPTION_TYPES = INTERNAL_MENU_OPTION_TYPES;
+exports.MENU_OPTION_TYPES = MENU_OPTION_TYPES;

package/cjs/{controlled-combobox/parts/a11y-messages/FocusMenuItem.js → combobox/parts/A11yFocusedOption.js}

@@ -7,16 +7,16 @@ require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
-var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBoxCTX = require('../ComboBoxCTX.js');
 var styled = require('./styled.js');
-var listHelper = require('../../utils/listHelper.js');
-var jsxRuntime = require('react/jsx-runtime');
+var listHelper = require('../utils/listHelper.js');
+var sharedTypes = require('../sharedTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const FocusMenuItem = () => {
+const A11yFocusedOption = () => {
   const {
     props: {
       options
@@ -25,22 +25,16 @@ const FocusMenuItem = () => {
     showPopover
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const selectabledOptions = listHelper.getSelectableOptions(options);
-  const focusOption = options.find(option => option.dsId === focusOptionIdx);
+  const focusOption = options.find(option => !sharedTypes.isSeparator(option) && option.dsId === focusOptionIdx);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
-  const msg = React.useMemo(() => {
-    if (showPopover) {
-      return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
-        "aria-live": "polite",
-        "aria-atomic": "false",
-        "aria-relevant": "additions text"
-      }, void 0, "option ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " focused.").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, " "));
-    }
-
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return React.useMemo(() => {
+    if (!sharedTypes.isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, void 0, "option ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " focused.").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, " "));
+    return null;
   }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: msg
-  });
 };
 
-exports.FocusMenuItem = FocusMenuItem;
+exports.A11yFocusedOption = A11yFocusedOption;

package/cjs/combobox/parts/A11ySelectedValues.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var ComboBoxCTX = require('../ComboBoxCTX.js');
+var styled = require('./styled.js');
+var ComboboxDataTestids = require('../ComboboxDataTestids.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const A11ySelectedValues = () => {
+  const {
+    props: {
+      selectedValues
+    }
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  return React.useMemo(() => {
+    let msg = 'No Option Selected';
+
+    if (Array.isArray(selectedValues)) {
+      if (selectedValues.length > 0) {
+        msg = "Options selected: ".concat(selectedValues.map(item => item.label).join(', '));
+      }
+
+      msg = 'No Options Selected';
+    } else if (selectedValues) {
+      msg = "Option selected: ".concat(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.label);
+    }
+
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
+      id: "combobox-selected-items",
+      "data-testid": ComboboxDataTestids.ComboboxDataTestid.ALLY_SELECTED_VALUES,
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, void 0, msg);
+  }, [selectedValues]);
+};
+
+exports.A11ySelectedValues = A11ySelectedValues;

package/cjs/combobox/parts/DropdownIndicator.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var React = require('react');
+var dsSystem = require('@elliemae/ds-system');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
+var ComboBoxCTX = require('../ComboBoxCTX.js');
+var ComboboxDataTestids = require('../ComboboxDataTestids.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject;
+const StyledDropDownButton = dsSystem.styled(DSButton.DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:focus::after {\n    border: none;\n  }\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
+  let {
+    theme,
+    disabled
+  } = _ref;
+  return disabled ? 'red' : theme.colors.brand['700'];
+});
+const DropdownIndicator = () => {
+  const {
+    props: {
+      disabled
+    },
+    showPopover
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const colorButton = React.useMemo(() => disabled ? ['neutral', 400] : ['brand-primary', 700], [disabled]);
+  const handleOnClick = React.useCallback(e => {
+    e.preventDefault();
+  }, []);
+  return /*#__PURE__*/_jsx__default["default"](StyledDropDownButton, {
+    onClick: handleOnClick,
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
+    "aria-controls": "combo-listbox",
+    "aria-labelledby": "combo-label",
+    disabled: disabled,
+    "aria-expanded": showPopover,
+    "aria-haspopup": "listbox",
+    "aria-hidden": true,
+    buttonType: "icon",
+    tabIndex: -1
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+    color: colorButton
+  }));
+};
+
+exports.DropdownIndicator = DropdownIndicator;

package/cjs/{controlled-combobox → combobox}/parts/container/Container.js

@@ -17,6 +17,7 @@ var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var styled = require('./styled.js');
 var Controls = require('../controls/Controls.js');
 var MenuList = require('../menu-list/MenuList.js');
+var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,56 +26,80 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-var _Controls, _MenuList, _MenuList2;
+var _Controls, _MenuList, _Controls2, _MenuList2;
 
 const _excluded = ["placeholder", "onKeyDown", "onChange"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const Container = () => {
+  var _StyledPopperWrapper;
+
   const {
     props,
+    setShowPopover,
     showPopover,
     setReferenceElement,
     referenceElement
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const {
     inline,
+    onMenuOpen,
+    onMenuClose,
+    innerRef,
     startPlacementPreference,
     placementOrderPreference,
     withoutPortal,
     zIndex
   } = props;
-  const handleMouseDown = React.useCallback(e => {
-    e.preventDefault();
-  }, []);
   const StyledContainer = inline ? styled.StyledContainerInline : styled.StyledContainerWithPopper;
   const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(props); // Removing possible collisionable props
 
-  const rest = _objectWithoutProperties__default["default"](globalAttributes, _excluded);
+  const globalsAttrs = _objectWithoutProperties__default["default"](globalAttributes, _excluded);
+
+  const handleMouseDown = React.useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleCloseMenu = React.useCallback(() => {
+    setShowPopover(false);
+    if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
+  }, [innerRef, setShowPopover]);
+  React.useEffect(() => {
+    const closeMenuOnWindowBlur = () => setShowPopover(false);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledContainer, _objectSpread(_objectSpread({
-      ref: setReferenceElement
-    }, rest), {}, {
-      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],
-      referenceElement: referenceElement,
-      showPopover: showPopover,
-      startPlacementPreference: startPlacementPreference,
-      placementOrderPreference: placementOrderPreference,
-      withoutPortal: withoutPortal,
-      withoutArrow: true,
-      withoutAnimation: true,
-      zIndex: zIndex
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
-      tabIndex: -1,
-      onMouseDown: handleMouseDown
-    }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))) : null]
-  });
+    window.addEventListener('blur', closeMenuOnWindowBlur);
+    return () => {
+      window.removeEventListener('blur', closeMenuOnWindowBlur);
+    };
+  }, [setShowPopover]);
+  React.useEffect(() => {
+    if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
+  }, [showPopover, onMenuOpen, onMenuClose]);
+  return React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(StyledContainer, _objectSpread(_objectSpread({
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.CONTAINER,
+    ref: setReferenceElement
+  }, globalsAttrs), {}, {
+    children: inline ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_Controls || (_Controls = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))]
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+        customOffset: [0, 5],
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        closeContextMenu: handleCloseMenu,
+        startPlacementPreference: startPlacementPreference,
+        placementOrderPreference: placementOrderPreference,
+        withoutPortal: withoutPortal,
+        withoutArrow: true,
+        withoutAnimation: true,
+        zIndex: zIndex
+      }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
+        tabIndex: -1,
+        onMouseDown: handleMouseDown
+      }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})))))]
+    })
+  })), [inline, StyledContainer, setReferenceElement, globalsAttrs, referenceElement, showPopover, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
 };
 
 exports.Container = Container;

package/cjs/combobox/parts/container/styled.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const StyledGenericContainer = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'default';
+});
+const StyledContainerWithPopper = dsSystem.styled(StyledGenericContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  width: 100%;\n  height: 28px;\n"])));
+const StyledContainerInline = dsSystem.styled(StyledGenericContainer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  width: 100%;\n"])));
+const StyledPopperWrapper = dsSystem.styled(StyledGenericContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  overflow: auto;\n"])));
+
+exports.StyledContainerInline = StyledContainerInline;
+exports.StyledContainerWithPopper = StyledContainerWithPopper;
+exports.StyledPopperWrapper = StyledPopperWrapper;

package/cjs/combobox/parts/controls/Controls.js

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var DropdownIndicator = require('../DropdownIndicator.js');
+var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var styled = require('./styled.js');
+var MultiSelectedValuesContainer = require('../multi-selected-values-container/MultiSelectedValuesContainer.js');
+var ControlsInput = require('../controls-input/ControlsInput.js');
+var useOnPillsNavigation = require('./useOnPillsNavigation.js');
+var A11yFocusedOption = require('../A11yFocusedOption.js');
+var A11ySelectedValues = require('../A11ySelectedValues.js');
+var RemovableSelectedValuePill = require('../multi-selected-values-container/RemovableSelectedValuePill.js');
+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 _A11ySelectedValues, _A11yFocusedOption, _MultiSelectedValuesC, _ControlsInput, _DropdownIndicator;
+const Controls = () => {
+  const {
+    props: {
+      inline,
+      disabled,
+      inputMinWidth,
+      hasError,
+      selectedValues,
+      innerRef
+    },
+    selectedOptionsRef,
+    setShowPopover,
+    hasFocus,
+    showPopover,
+    controlsWrapperRef
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const handleOnClick = React.useCallback(() => {
+    var _innerRef$current2;
+
+    if (disabled) return;
+
+    if (hasFocus && showPopover && !inline) {
+      var _innerRef$current;
+
+      setShowPopover(false);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.blur();
+      return;
+    }
+
+    (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+    setShowPopover(true);
+  }, [disabled, hasFocus, setShowPopover, showPopover, innerRef, inline]); // this callback prevent to toggle the menu when clicking or removing pills
+
+  const handleOnPillsClick = React.useCallback(e => {
+    if (showPopover || disabled) {
+      e.stopPropagation();
+    } else {
+      var _innerRef$current3;
+
+      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
+      setShowPopover(true);
+    }
+  }, [showPopover, innerRef, disabled, setShowPopover]); // callback to prevent onBlur on the input when clicking in all the wrapper
+
+  const handleOnMouseDown = React.useCallback(e => {
+    if (document.activeElement === innerRef.current || inline) {
+      e.preventDefault();
+    }
+  }, [innerRef, inline]);
+  const {
+    onKeyDownPills
+  } = useOnPillsNavigation.useOnPillsNavigation();
+  const cols = React.useMemo(() => !inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)'], [inline]);
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledControlsWrapper, {
+    ref: controlsWrapperRef,
+    cols: cols,
+    disabled: disabled,
+    minWidth: inputMinWidth,
+    hasError: hasError,
+    inline: inline,
+    onClick: handleOnClick,
+    onMouseDown: handleOnMouseDown,
+    onKeyDown: onKeyDownPills,
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.CONTROLS_WRAPPER,
+    children: [!inline && /*#__PURE__*/jsxRuntime.jsxs(styled.StyledSelection, {
+      ref: selectedOptionsRef,
+      onClick: handleOnPillsClick,
+      children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx__default["default"](A11ySelectedValues.A11ySelectedValues, {})), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx__default["default"](A11yFocusedOption.A11yFocusedOption, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx__default["default"](MultiSelectedValuesContainer.MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx__default["default"]("div", {
+        "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
+      }, void 0, selectedValues && /*#__PURE__*/_jsx__default["default"](RemovableSelectedValuePill.RemovableSelectedValuePill, {
+        pill: selectedValues
+      }))]
+    }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx__default["default"](ControlsInput.ControlsInput, {})), !inline && /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderActionsWrapper, {
+      justifyContent: "center",
+      cols: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyleHeaderActionsSeparator, {
+      disabled: disabled
+    }), _DropdownIndicator || (_DropdownIndicator = /*#__PURE__*/_jsx__default["default"](DropdownIndicator.DropdownIndicator, {})))]
+  });
+};
+
+exports.Controls = Controls;

package/cjs/combobox/parts/controls/styled.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const normalBorder = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), _ref => {
+  let {
+    hasError,
+    theme
+  } = _ref;
+  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
+});
+const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  border: 2px solid ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+});
+const afterStyle = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  pointer-events: none;\n  z-index: 7;\n"])));
+const StyledControlsWrapper = dsSystem.styled(dsGrid.Grid)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  &::after {\n    ", "\n    ", "\n  }\n\n  &:focus-within {\n    &::after {\n      ", "\n      ", "\n    }\n  }\n"])), _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return disabled ? theme.colors.neutral['080'] : '#ffffff';
+}, _ref4 => {
+  let {
+    minWidth,
+    inline
+  } = _ref4;
+  return inline || !minWidth ? '' : "".concat(minWidth, "px");
+}, _ref5 => {
+  let {
+    inline
+  } = _ref5;
+  return inline ? '10px 16px' : 'none';
+}, afterStyle, normalBorder, afterStyle, focusBorder);
+const StyledSelection = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  font-size: 13px;\n  margin-right: 3px;\n  line-height: 13px;\n  display: flex;\n"])));
+const StyledHeaderActionsWrapper = dsSystem.styled(dsGrid.Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
+const StyleDropdownIndicator = dsSystem.styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"]([""])));
+const StyleHeaderActionsSeparator = dsSystem.styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref6 => {
+  let {
+    theme,
+    disabled
+  } = _ref6;
+  return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
+});
+
+exports.StyleDropdownIndicator = StyleDropdownIndicator;
+exports.StyleHeaderActionsSeparator = StyleHeaderActionsSeparator;
+exports.StyledControlsWrapper = StyledControlsWrapper;
+exports.StyledHeaderActionsWrapper = StyledHeaderActionsWrapper;
+exports.StyledSelection = StyledSelection;

package/cjs/{controlled-combobox → combobox}/parts/controls/useOnPillsNavigation.js

@@ -11,26 +11,29 @@ const useOnPillsNavigation = () => {
     props: {
       innerRef
     },
+    inputValue,
+    hasFocus,
     setShowPopover,
-    pillGroupRef
-  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+    selectedOptionsRef
+  } = React.useContext(ComboBoxCTX.ComboBoxContext); // todo: constant must be defined on pills component
+
   const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';
   const onKeyDownPills = React.useCallback(e => {
-    var _innerRef$current;
-
-    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) === '') {
+    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && inputValue === '') {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        innerRef.current.focus();
+        var _innerRef$current;
+
+        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
         setShowPopover(true);
         return;
       }
 
       if (e.key === 'ArrowLeft') {
-        var _pillGroupRef$current;
+        var _selectedOptionsRef$c;
 
-        const removablePills = (_pillGroupRef$current = pillGroupRef.current) === null || _pillGroupRef$current === void 0 ? void 0 : _pillGroupRef$current.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+        const removablePills = (_selectedOptionsRef$c = selectedOptionsRef.current) === null || _selectedOptionsRef$c === void 0 ? void 0 : _selectedOptionsRef$c.querySelectorAll(REMOVABLE_PILL_SELECTOR);
 
-        if (document.activeElement === innerRef.current && removablePills) {
+        if (hasFocus && removablePills) {
           var _removablePills;
 
           (_removablePills = removablePills[removablePills.length - 1]) === null || _removablePills === void 0 ? void 0 : _removablePills.focus();
@@ -38,11 +41,13 @@ const useOnPillsNavigation = () => {
       }
 
       if (e.key === 'ArrowRight') {
+        var _innerRef$current2;
+
         e.preventDefault();
-        innerRef.current.focus();
+        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
       }
     }
-  }, [innerRef, pillGroupRef, setShowPopover]);
+  }, [inputValue, hasFocus, innerRef, selectedOptionsRef, setShowPopover]);
   return {
     onKeyDownPills
   };