@elliemae/ds-controlled-form 2.3.1-rc.0 → 2.3.2-next.0

package/esm/{controlled-checkbox → checkbox}/styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
 
 const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-349ih4-0"
+  componentId: "sc-flv7d2-0"
 })(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
   let {
     theme
@@ -10,7 +10,7 @@ const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   return theme.space.xs;
 });
 const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-349ih4-1"
+  componentId: "sc-flv7d2-1"
 })(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
   let {
     theme
@@ -48,7 +48,7 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
     hasError,
     disabled
   } = _ref7;
-  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
+  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[700], "; outline : 1px solid ").concat(theme.colors.brand[700], " ") : undefined;
 }, _ref8 => {
   let {
     theme,
@@ -75,10 +75,10 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
   return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
 });
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-349ih4-2"
+  componentId: "sc-flv7d2-2"
 })(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
 const StyledLabel = /*#__PURE__*/styled.label.withConfig({
-  componentId: "sc-349ih4-3"
+  componentId: "sc-flv7d2-3"
 })(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
   let {
     theme

package/esm/{controlled-combobox → combobox}/ComboBoxCTX.js

@@ -1,50 +1,45 @@
-import { createContext, createRef } from 'react';
-import { noop } from 'lodash';
+import { createRef, createContext } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+function noop() {}
 const defaultProps = {
-  placeholder: '',
-  options: [],
-  selectedValues: null,
   hasError: false,
   inline: false,
-  autoFocus: false,
-  startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'],
-  onClearAll: noop,
-  onSelectAll: noop,
-  onCreate: noop,
-  onBlur: noop,
   withoutPortal: true,
   zIndex: 10,
-  onChange: noop,
-  onKeyDown: noop,
-  onFilter: noop,
-  onMenuOpen: noop
+  disabled: false,
+  useMask: noop,
+  innerRef: /*#__PURE__*/createRef(),
+  startPlacementPreference: 'bottom-start',
+  placementOrderPreference: ['bottom-start', 'bottom-end'] // override in useCombobox to avoid ref duplications when more than one cb is used
+
 };
 const defaultContext = {
   props: defaultProps,
   showPopover: false,
-  setShowPopover: noop,
-  scrollOptionIntoView: noop,
-  referenceElement: null,
   hasFocus: false,
-  setHasFocus: noop,
+  referenceElement: null,
+  inputValue: '',
+  focusOptionIdx: '',
+  showSelectedOptions: false,
   pillGroupRef: /*#__PURE__*/createRef(),
-  setReferenceElement: noop,
   listRef: /*#__PURE__*/createRef(),
   wrapperListRef: /*#__PURE__*/createRef(),
   controlsWrapperRef: /*#__PURE__*/createRef(),
   selectedOptionsRef: /*#__PURE__*/createRef(),
   selectAllCheckboxRef: /*#__PURE__*/createRef(),
   toggleSelectionButtonRef: /*#__PURE__*/createRef(),
-  focusOptionIdx: '',
-  setCurrentOption: noop,
-  showSelectedOptions: false,
+  setShowPopover: noop,
+  scrollOptionIntoView: noop,
+  setHasFocus: noop,
+  setInputValue: noop,
+  setReferenceElement: noop,
+  setFocusOptionIdx: noop,
   setShowSelectedOptions: noop
 };
 /** Context for cross component communication */
 
 const ComboBoxContext = /*#__PURE__*/createContext(defaultContext);
 
-export { ComboBoxContext, ComboBoxContext as default, defaultProps };
+export { ComboBoxContext, ComboBoxContext as default, defaultProps, noop };

package/esm/{controlled-combobox → combobox}/ComboboxDataTestids.js

@@ -1,13 +1,15 @@
 const ComboboxDataTestid = {
+  MULTISELECT: {
+    SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
+    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle'
+  },
+  CONTROLS_WRAPPER: 'combobox-controls-wrapper',
+  CONTAINER: 'combobox-container',
   INPUT: 'combobox-input',
   LIST: 'combobox-menu-list',
   SELECTED_VALUES: 'combobox-selected-values',
-  SELECT_ALL_BUTTON: 'combobox-all-btn',
-  CLEAR_ALL_BUTTON: 'combobox-clear-btn',
   DROPDOWN: 'combobox-dropdown-btn',
   OPTION: 'combobox-option',
-  SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
-  SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',
   ALLY_SELECTED_VALUES: 'combobox-ally-selected-values'
 };
 

package/esm/{controlled-combobox → combobox}/config/useComboBox.js

@@ -25,8 +25,9 @@ const useComboBox = props => {
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [showSelectedOptions, setShowSelectedOptions] = useState(false);
+  const [inputValue, setInputValue] = useState('');
   const [hasFocus, setHasFocus] = useState(false);
-  const [focusOptionIdx, setCurrentOption] = useState('');
+  const [focusOptionIdx, setFocusOptionIdx] = useState('');
   const listRef = useRef(null);
   const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
@@ -37,7 +38,7 @@ const useComboBox = props => {
   // Menu Options with/out selected filter
   // ---------------------------------------------------------------------------
 
-  const correctOptions = useCorrectOptions(propsWithDefaults, showSelectedOptions); // ===========================================================================
+  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -51,9 +52,7 @@ const useComboBox = props => {
   // ===========================================================================
 
   const scrollOptionIntoView = useCallback(dsId => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), {
-      align: 'center'
-    });
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId));
   }, [correctOptions, virtualListHelpers]);
   const ctx = useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
@@ -67,18 +66,20 @@ const useComboBox = props => {
     selectedOptionsRef,
     controlsWrapperRef,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef,
+    inputValue,
+    setInputValue,
     hasFocus,
+    toggleSelectionButtonRef,
     pillGroupRef,
     showSelectedOptions,
     wrapperListRef,
     setShowSelectedOptions,
     setHasFocus,
-    setCurrentOption,
+    setFocusOptionIdx,
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
   return ctx;
 };
 

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

@@ -5,15 +5,14 @@ import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useCallback, useMemo } from 'react';
-import { v4 } from 'uuid';
-import { noop } from 'lodash';
+import { uid } from 'uid';
+import { MENU_OPTION_TYPES } from '../constants.js';
 
-const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
+const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
     options,
     selectedValues,
-    onCreate,
-    innerRef
+    onCreate
   } = propsWithDefaults;
   const selectedValuesWithSections = useCallback(() => {
     var _items2;
@@ -27,10 +26,10 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
         items.push(option);
       }
 
-      if (option.type === 'section') {
+      if (option.type === 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) === MENU_OPTION_TYPES.SECTION) {
           items[items.length - 1] = option;
         } else {
           items.push(option);
@@ -38,7 +37,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) === MENU_OPTION_TYPES.SECTION) {
       items.pop();
     }
 
@@ -49,24 +48,18 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
       return selectedValuesWithSections();
     }
 
-    if (onCreate !== 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 = v4();
+    if (onCreate && inputValue && options.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+      const creatableUuid = uid(6);
       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/esm/combobox/constants.js

@@ -0,0 +1,10 @@
+const MENU_OPTION_TYPES = {
+  OPTION: 'option',
+  SECTION: 'section',
+  SEPARATOR: 'separator'
+};
+const INTERNAL_MENU_OPTION_TYPES = {
+  CREATABLE: 'creatable'
+};
+
+export { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES };

package/esm/combobox/parts/A11yFocusedOption.js

@@ -0,0 +1,32 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useMemo } from 'react';
+import { ComboBoxContext } from '../ComboBoxCTX.js';
+import { StyledA11ySelectedValues } from './styled.js';
+import { getSelectableOptions } from '../utils/listHelper.js';
+import { isSeparator } from '../sharedTypes.js';
+
+const A11yFocusedOption = () => {
+  const {
+    props: {
+      options
+    },
+    focusOptionIdx,
+    showPopover
+  } = useContext(ComboBoxContext);
+  const selectabledOptions = getSelectableOptions(options);
+  const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+  const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+  return useMemo(() => {
+    if (!isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx(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]);
+};
+
+export { A11yFocusedOption };

package/esm/combobox/parts/A11ySelectedValues.js

@@ -0,0 +1,38 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext, useMemo } from 'react';
+import { ComboBoxContext } from '../ComboBoxCTX.js';
+import { StyledA11ySelectedValues } from './styled.js';
+import { ComboboxDataTestid } from '../ComboboxDataTestids.js';
+
+const A11ySelectedValues = () => {
+  const {
+    props: {
+      selectedValues
+    }
+  } = useContext(ComboBoxContext);
+  return 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(StyledA11ySelectedValues, {
+      id: "combobox-selected-items",
+      "data-testid": ComboboxDataTestid.ALLY_SELECTED_VALUES,
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, void 0, msg);
+  }, [selectedValues]);
+};
+
+export { A11ySelectedValues };

package/esm/combobox/parts/DropdownIndicator.js

@@ -0,0 +1,45 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { useContext, useMemo, useCallback } from 'react';
+import { styled } from '@elliemae/ds-system';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import { ComboBoxContext } from '../ComboBoxCTX.js';
+import { ComboboxDataTestid } from '../ComboboxDataTestids.js';
+
+var _templateObject;
+const StyledDropDownButton = styled(DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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
+  } = useContext(ComboBoxContext);
+  const colorButton = useMemo(() => disabled ? ['neutral', 400] : ['brand-primary', 700], [disabled]);
+  const handleOnClick = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  return /*#__PURE__*/_jsx(StyledDropDownButton, {
+    onClick: handleOnClick,
+    "data-testid": 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(ChevronSmallDown, {
+    color: colorButton
+  }));
+};
+
+export { DropdownIndicator };

package/esm/combobox/parts/container/Container.js

@@ -0,0 +1,103 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useContext, useCallback, useEffect, useMemo } from 'react';
+import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
+import { Controls } from '../controls/Controls.js';
+import { MenuList } from '../menu-list/MenuList.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+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(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
+  } = useContext(ComboBoxContext);
+  const {
+    inline,
+    onMenuOpen,
+    onMenuClose,
+    innerRef,
+    startPlacementPreference,
+    placementOrderPreference,
+    withoutPortal,
+    zIndex
+  } = props;
+  const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
+  const globalAttributes = useGetGlobalAttributes(props); // Removing possible collisionable props
+
+  const rest = _objectWithoutProperties(globalAttributes, _excluded);
+
+  const handleMouseDown = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleCloseMenu = useCallback(() => {
+    setShowPopover(false);
+    if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
+  }, [innerRef, setShowPopover]);
+  useEffect(() => {
+    const closeMenuOnWindowBlur = () => setShowPopover(false);
+
+    window.addEventListener('blur', closeMenuOnWindowBlur);
+    return () => {
+      window.removeEventListener('blur', closeMenuOnWindowBlur);
+    };
+  }, [setShowPopover]);
+  useEffect(() => {
+    if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
+  }, [showPopover, onMenuOpen, onMenuClose]);
+  return useMemo(() => {
+    if (inline) {
+      return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+        ref: setReferenceElement
+      }, rest), {}, {
+        children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {}))]
+      }));
+    }
+
+    return /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+        "data-testid": ComboboxDataTestid.CONTAINER,
+        ref: setReferenceElement
+      }, rest), {}, {
+        children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx(Controls, {})), /*#__PURE__*/_jsx(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(StyledPopperWrapper, {
+          tabIndex: -1,
+          onMouseDown: handleMouseDown
+        }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))))]
+      }))
+    });
+  }, [inline, showPopover, StyledContainer, placementOrderPreference, referenceElement, rest, startPlacementPreference, withoutPortal, zIndex, handleCloseMenu, handleMouseDown, setReferenceElement]);
+};
+
+export { Container };

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

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const StyledGenericContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'default';
+});
+const StyledContainerWithPopper = styled(StyledGenericContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 28px;\n"])));
+const StyledContainerInline = styled(StyledGenericContainer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+const StyledPopperWrapper = styled(StyledGenericContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  overflow: auto;\n"])));
+
+export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };

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

@@ -0,0 +1,109 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useCallback, useMemo } from 'react';
+import { DSPillV2 } from '@elliemae/ds-pills';
+import { DropdownIndicator } from '../DropdownIndicator.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledControlsWrapper, StyledSelection, StyledHeaderActionsWrapper, StyleHeaderActionsSeparator } from './styled.js';
+import { MultiSelectedValuesContainer } from '../multi-selected-values-container/MultiSelectedValuesContainer.js';
+import { ControlsInput } from '../controls-input/ControlsInput.js';
+import { useOnPillsNavigation } from './useOnPillsNavigation.js';
+import { A11yFocusedOption } from '../A11yFocusedOption.js';
+import { A11ySelectedValues } from '../A11ySelectedValues.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _A11ySelectedValues, _A11yFocusedOption, _MultiSelectedValuesC, _ControlsInput, _DropdownIndicator;
+const Controls = () => {
+  const {
+    props: {
+      inline,
+      onChange,
+      disabled,
+      inputMinWidth,
+      hasError,
+      selectedValues,
+      innerRef
+    },
+    selectedOptionsRef,
+    setShowPopover,
+    hasFocus,
+    showPopover,
+    controlsWrapperRef
+  } = useContext(ComboBoxContext);
+  const handleOnClick = 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 = 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 = useCallback(e => {
+    if (document.activeElement === innerRef.current || inline) {
+      e.preventDefault();
+    }
+  }, [innerRef, inline]);
+  const {
+    onKeyDownPills
+  } = useOnPillsNavigation();
+  const cols = useMemo(() => !inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)'], [inline]);
+  return /*#__PURE__*/jsxs(StyledControlsWrapper, {
+    ref: controlsWrapperRef,
+    cols: cols,
+    disabled: disabled,
+    minWidth: inputMinWidth,
+    hasError: hasError,
+    inline: inline,
+    onClick: handleOnClick,
+    onMouseDown: handleOnMouseDown,
+    onKeyDown: onKeyDownPills,
+    "data-testid": ComboboxDataTestid.CONTROLS_WRAPPER,
+    children: [!inline && /*#__PURE__*/jsxs(StyledSelection, {
+      ref: selectedOptionsRef,
+      onClick: handleOnPillsClick,
+      children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx(A11ySelectedValues, {})), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx(A11yFocusedOption, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx(MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx("div", {
+        "data-testid": ComboboxDataTestid.SELECTED_VALUES
+      }, void 0, selectedValues && /*#__PURE__*/_jsx(DSPillV2, {
+        size: "s",
+        labelTruncated: true,
+        tabIndex: -1,
+        disabled: disabled,
+        label: selectedValues.label,
+        type: disabled ? 'value' : 'removable',
+        onRemove: () => {
+          var _innerRef$current4;
+
+          onChange(null);
+          (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.focus();
+        }
+      }, selectedValues.value))]
+    }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {
+      justifyContent: "center",
+      cols: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx(StyleHeaderActionsSeparator, {
+      disabled: disabled
+    }), _DropdownIndicator || (_DropdownIndicator = /*#__PURE__*/_jsx(DropdownIndicator, {})))]
+  });
+};
+
+export { Controls };