@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.211

package/lib/components/Combobox/Target.js

@@ -31,6 +31,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Flex = _interopRequireDefault(require("../Flex"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,21 +46,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TargetContainer = _styledComponents.default.div.withConfig({
   displayName: "Target__TargetContainer",
   componentId: "sc-1obpsql-0"
-})(["align-items:center;display:flex;justify-content:space-between;position:relative;width:100%;"]);
+})(["align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding-right:15px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["padding-right:45px;"])));
 
 var Input = _styledComponents.default.input.withConfig({
   displayName: "Target__Input",
   componentId: "sc-1obpsql-1"
-})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:1px 10px 6px 1px;width:100%;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
+})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:0 10px 5px 1px;flex-grow:100;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
 
+var ClearButtonContainer = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "Target__ClearButtonContainer",
+  componentId: "sc-1obpsql-2"
+})(["position:absolute;bottom:0;right:0;padding-bottom:2px;padding-left:10px;padding-right:10px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["right:20px;"])));
 var ExpandedIndicatorContainer = (0, _styledComponents.default)(_Flex.default).attrs({
-  alignItems: 'center',
-  paddingBottom: 0.2,
-  paddingRight: 1
+  alignItems: 'center'
 }).withConfig({
   displayName: "Target__ExpandedIndicatorContainer",
-  componentId: "sc-1obpsql-2"
-})(["color:", ";&:hover{color:", ";}", ";"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["color:", ";&:hover{color:", ";}"], (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40))));
+  componentId: "sc-1obpsql-3"
+})(["position:absolute;bottom:2px;right:10px;color:", ";&:hover{color:", ";}", ";"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["color:", ";&:hover{color:", ";}"], (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40))));
 
 function Target(_ref, ref) {
   var clearButtonLabel = _ref.clearButtonLabel,
@@ -67,20 +71,50 @@ function Target(_ref, ref) {
       inputFieldLabel = _ref.inputFieldLabel,
       isPopoverVisible = _ref.isPopoverVisible,
       onClear = _ref.onClear,
+      multiple = _ref.multiple,
+      selectedValues = _ref.selectedValues,
+      removeSelected = _ref.removeSelected,
       readOnly = _ref.readOnly,
       variant = _ref.variant,
       toggleIsPopoverVisible = _ref.toggleIsPopoverVisible,
-      rest = _objectWithoutProperties(_ref, ["clearButtonLabel", "disabled", "hasClearButton", "inputFieldLabel", "isPopoverVisible", "onClear", "readOnly", "variant", "toggleIsPopoverVisible"]);
+      autoComplete = _ref.autoComplete,
+      rest = _objectWithoutProperties(_ref, ["clearButtonLabel", "disabled", "hasClearButton", "inputFieldLabel", "isPopoverVisible", "onClear", "multiple", "selectedValues", "removeSelected", "readOnly", "variant", "toggleIsPopoverVisible", "autoComplete"]);
 
   var translate = (0, _useTranslations.default)();
-  return _react.default.createElement(TargetContainer, null, _react.default.createElement(Input, _extends({}, rest, {
-    autoComplete: "false",
+  var hasExpandIndicator = !readOnly && variant === 'sync';
+  return _react.default.createElement(TargetContainer, {
+    hasExpandIndicator: hasExpandIndicator
+  }, multiple && selectedValues && selectedValues.map(function (_ref2) {
+    var id = _ref2.id,
+        label = _ref2.label;
+    return _react.default.createElement(_Tag.default, {
+      key: id,
+      text: label,
+      style: {
+        margin: '2px'
+      },
+      action: function action(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        removeSelected(id);
+      },
+      color: 'licoriceMousse',
+      actionIntent: "danger",
+      actionIcon: _Times.default,
+      actionAttributes: {
+        'aria-label': 'Delete'
+      }
+    });
+  }), _react.default.createElement(Input, _extends({
+    autoComplete: autoComplete || 'off',
     disabled: disabled,
     ref: ref
-  })), hasClearButton && !readOnly && _react.default.createElement(_Flex.default, {
-    paddingBottom: 0.2,
-    paddingX: 1
+  }, rest)), hasClearButton && !readOnly && _react.default.createElement(ClearButtonContainer, {
+    hasExpandIndicator: hasExpandIndicator
   }, _react.default.createElement(_Button.default, {
+    style: {
+      padding: 0
+    },
     "aria-label": translate(clearButtonLabel, 'combobox.clearButtonLabel', {
       label: inputFieldLabel
     }),
@@ -97,9 +131,13 @@ function Target(_ref, ref) {
     },
     size: "small",
     variant: "ghost"
-  })), !readOnly && variant === 'sync' && _react.default.createElement(ExpandedIndicatorContainer, {
+  })), hasExpandIndicator && _react.default.createElement(ExpandedIndicatorContainer, {
     disabled: disabled
   }, _react.default.createElement(_Button.default, {
+    disabled: disabled,
+    style: {
+      padding: 0
+    },
     variant: "ghost",
     size: "small",
     tabIndex: -1,

package/lib/components/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AAMA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA0Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA0ahE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAIzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAskBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -11,10 +11,18 @@ var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
+var _union = _interopRequireDefault(require("lodash/union"));
+
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
+var _last = _interopRequireDefault(require("lodash/last"));
+
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
@@ -25,6 +33,8 @@ var _Question = _interopRequireDefault(require("@decisiv/iconix/lib/components/Q
 
 var _composeReactRefs = _interopRequireDefault(require("@seznam/compose-react-refs"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
 
 var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
@@ -49,12 +59,22 @@ var _schema = _interopRequireDefault(require("./schema"));
 
 var _utils = require("./utils");
 
+var _usePrevious = _interopRequireDefault(require("../../utils/usePrevious"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
@@ -71,6 +91,14 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var StyledInputDiv = _styledComponents.default.div.withConfig({
+  displayName: "Combobox__StyledInputDiv",
+  componentId: "zvfxxj-0"
+})(["position:relative;width:100%;max-width:", ";"], function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return maxWidth;
+});
+
 function Combobox(props, ref) {
   var clearButtonLabel = props.clearButtonLabel,
       defaultValue = props.defaultValue,
@@ -78,18 +106,26 @@ function Combobox(props, ref) {
       inputContainerRef = props.inputContainerRef,
       label = props.label,
       loading = props.loading,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? '100%' : _props$maxWidth,
+      multiple = props.multiple,
       name = props.name,
       onChangeValue = props.onChangeValue,
       onClick = props.onClick,
       onFocus = props.onFocus,
+      onHide = props.onHide,
       onKeyDown = props.onKeyDown,
+      onShow = props.onShow,
       _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
+      renderOptionLabel = props.renderOptionLabel,
       propValue = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'sync' : _props$variant,
-      renderOptionLabel = props.renderOptionLabel,
-      zIndex = props.zIndex;
+      zIndex = props.zIndex,
+      containerSelector = props.containerSelector,
+      pointerEvents = props.pointerEvents,
+      externalIsPopoverVisible = props.isPopoverVisible;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -123,24 +159,82 @@ function Combobox(props, ref) {
   var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
       isPopoverVisible = _useState6[0],
-      setIsPopoverVisible = _useState6[1];
+      setIsPopoverVisibleState = _useState6[1];
+
+  var previousIsPopoverVisible = (0, _usePrevious.default)(isPopoverVisible);
+  var isControlled = externalIsPopoverVisible !== undefined;
+  var popoverVisibleStateToUse = isControlled ? externalIsPopoverVisible : isPopoverVisible;
+  /**
+   * Combobox controls the Popover instead of relying on the Popover's internal state.
+   * The Popover's onShow/ onHide handlers only function when the Popover is _not_
+   * controlled. This effect watches for a toggled visibility state, and calls the appropriate
+   * event handler.
+   */
 
   (0, _react.useEffect)(function () {
-    // Set the "default" active ID to the first, if it exists.
-    if (!(0, _isEmpty.default)(options) && !activeId) {
-      setActiveId((0, _get.default)(options, '0.id'));
+    if (isControlled) return;
+
+    if (previousIsPopoverVisible && !isPopoverVisible && onHide) {
+      onHide();
+    }
+
+    if (!previousIsPopoverVisible && isPopoverVisible && onShow) {
+      onShow();
+    }
+  }, [isControlled, isPopoverVisible, previousIsPopoverVisible, onShow, onHide]);
+  /**
+   * Update the dropdown list visibility.
+   */
+
+  var updateIsPopoverVisible = (0, _react.useCallback)(function (arg) {
+    if (isControlled) return;
+    if (arg === true || arg === false) setIsPopoverVisibleState(arg);
+    if (arg === 'toggle') setIsPopoverVisibleState(function (old) {
+      return !old;
+    });
+  }, [isControlled, setIsPopoverVisibleState]);
+  /**
+   * This generates a flat list of the options (including those in categories)
+   * in the order they are presented in the dropdown list. Filtering disabled elements.
+   */
+
+  var flatOptions = (0, _react.useMemo)(function () {
+    return options.reduce(function (acc, curr) {
+      if ((0, _utils.isCategory)(curr)) {
+        var items = (0, _isArray.default)(curr.items) ? curr.items.filter(function (option) {
+          return !option.disabled;
+        }) : [];
+        return acc.concat(items);
+      }
+
+      if (!curr.disabled) {
+        return acc.concat(curr);
+      }
+
+      return acc;
+    }, []);
+  }, [options]);
+  (0, _react.useEffect)(function () {
+    // Set the "default" active ID to the first in flatOptions, if it exists.
+    if (!(0, _isEmpty.default)(flatOptions) && !activeId) {
+      setActiveId((0, _get.default)(flatOptions, '0.id'));
     } // For async comboboxes, if the input is focused, the dropdown should be open.
 
 
-    if (isFocused && variant === 'async') {
-      setIsPopoverVisible(true);
+    if (isFocused && variant === 'async' || multiple && internalInputValue !== '') {
+      updateIsPopoverVisible(true);
     }
-  }, [activeId, isFocused, options, variant]); // The selectedValue is the id of the selectedOption, or an empty string if none selected.
+  }, [activeId, isFocused, flatOptions, variant, multiple, internalInputValue, updateIsPopoverVisible]); // The selectedValue is the id of the selectedOption, or an empty string if none selected.
 
-  var _useState7 = (0, _react.useState)(propValue || defaultValue || undefined),
+  var _useState7 = (0, _react.useState)(!Array.isArray(propValue) && propValue || !Array.isArray(defaultValue) && defaultValue || undefined),
       _useState8 = _slicedToArray(_useState7, 2),
       selectedValue = _useState8[0],
       setSelectedValue = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(Array.isArray(propValue) && propValue || undefined),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedValues = _useState10[0],
+      setSelectedValues = _useState10[1];
   /**
    * The current selected value and current input value are saved independently,
    * but must be kept in sync. Using a single callback for this keeps it simple(r).
@@ -149,13 +243,51 @@ function Combobox(props, ref) {
 
   var updateSelected = (0, _react.useCallback)(function (selectedId) {
     setSelectedValue(selectedId);
-    var newSelected = (0, _utils.getOptionFromOptions)(options, selectedId) || {};
-    setInternalInputValue((0, _get.default)(newSelected, 'label', ''));
+    var newSelected = (0, _utils.getOptionFromOptions)(options, selectedId) || null;
+
+    if (multiple) {
+      var index = selectedValues && selectedValues.findIndex(function (_ref2) {
+        var itemId = _ref2.id;
+        return itemId === selectedId;
+      });
+
+      if (newSelected && (index === undefined || index === -1)) {
+        setSelectedValues((0, _union.default)(selectedValues, [newSelected]));
+      }
+
+      setInternalInputValue('');
+      setActiveId(undefined);
+    } else {
+      setInternalInputValue((0, _get.default)(newSelected, 'label', ''));
+    }
 
     if (onChangeValue) {
-      onChangeValue(selectedId);
+      if (selectedId) {
+        onChangeValue(selectedId, {
+          removed: false
+        });
+      } else {
+        onChangeValue(null, {
+          removed: true
+        });
+      }
     }
-  }, [onChangeValue, options, setInternalInputValue, setSelectedValue]);
+  }, [multiple, onChangeValue, options, selectedValues, setInternalInputValue, setSelectedValue, setSelectedValues, setActiveId]);
+  var removeSelected = (0, _react.useCallback)(function (selectedId) {
+    var newSelectedValues = selectedValues && selectedValues.filter(function (_ref3) {
+      var optionId = _ref3.id;
+      return selectedId !== optionId;
+    });
+    setSelectedValues(newSelectedValues);
+
+    if (onChangeValue) {
+      onChangeValue(selectedId, {
+        removed: true
+      });
+    }
+
+    return undefined;
+  }, [onChangeValue, selectedValues, setSelectedValues]);
   /**
    * If the value prop changes, it should always override any locally maintained current values.
    * This allows the component to be controlled.
@@ -166,15 +298,10 @@ function Combobox(props, ref) {
       setSelectedValue(propValue);
       var newSelected = (0, _utils.getOptionFromOptions)(options, propValue) || {};
       setInternalInputValue((0, _get.default)(newSelected, 'label', ''));
+    } else if (_typeof(propValue) === 'object' && propValue !== selectedValues) {
+      setSelectedValues(propValue);
     }
-  }, [options, propValue, selectedValue, setInternalInputValue, updateSelected]);
-  /**
-   * Toggle the dropdown list.
-   */
-
-  var toggleIsPopoverVisible = (0, _react.useCallback)(function () {
-    setIsPopoverVisible(!isPopoverVisible);
-  }, [isPopoverVisible]);
+  }, [options, propValue, selectedValue, selectedValues, setInternalInputValue, updateSelected]);
   /**
    * This handler is called when the "active" item is changed in the DropdownList. That could be
    * when the user hovers over a new item with the mouse, or when the user navigates through
@@ -190,8 +317,13 @@ function Combobox(props, ref) {
    */
 
   var handleChangeDropdownListValue = (0, _react.useCallback)(function (selectedIds) {
+    if (multiple) {
+      updateSelected((0, _last.default)(selectedIds));
+      return;
+    }
+
     updateSelected(selectedIds[0]);
-  }, [updateSelected]);
+  }, [updateSelected, multiple]);
   /**
    * Clicking anywhere within the Combobox component (except the clear button) should open
    * the dropdown list. There is some complex logic here because of the <input> rendered inside
@@ -211,60 +343,42 @@ function Combobox(props, ref) {
        * tree. Clicking an item in the list will call this click handler on the container.
        * Usually that's fine. In this case, we don't want that behavior.
        */
-      setIsPopoverVisible(false);
-    } else if (isFocused) {
-      if (variant === 'sync' && finalComboboxRef && // @ts-ignore
-      finalComboboxRef.current === event.target) {
+      updateIsPopoverVisible(false);
+    } else if (variant === 'sync' && finalComboboxRef && // @ts-ignore
+    finalComboboxRef.current === event.target) {
+      /**
+       * This prevents a double toggle when the user clicks
+       * the actual input field inside the combobox.
+       */
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!isPopoverVisible) {
         /**
-         * This prevents a double toggle when the user clicks
-         * the actual input field inside the combobox.
+         * This re-opens the popover if you first open it,
+         * then make a selection, then click the <input> again.
          */
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!isPopoverVisible) {
-          /**
-           * This re-opens the popover if you first open it,
-           * then make a selection, then click the <input> again.
-           */
-          setIsPopoverVisible(true);
-        }
-      } else {
-        toggleIsPopoverVisible();
+        updateIsPopoverVisible(true);
       }
+    } else {
+      updateIsPopoverVisible('toggle');
     }
 
     onClick && onClick(event);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isFocused, isPopoverVisible, variant, onClick, toggleIsPopoverVisible]);
+  }, [finalInputContainerRef, onClick, updateIsPopoverVisible, variant, finalComboboxRef, isPopoverVisible]);
   /**
    * This focus handler is responsible for opening the dropdown list and tracking focus state.
    * It's important to do this in the focus handler because the dropdown should open when the
    * Combobox is clicked or tabbed to.
+   *
+   * [KDS-3742] Patch: Updated this handler to align the behavior with the Select component.
+   * The popover will no longer automatically show when the Combobox gains focus.
    */
 
   var handleContainerFocus = (0, _react.useCallback)(function (event) {
-    if (variant === 'sync') {
-      setIsPopoverVisible(true);
-    }
-
     setIsFocused(true);
     onFocus && onFocus(event);
-  }, [onFocus, setIsPopoverVisible, variant]);
-  /**
-   * This generates a flat list of the options (including those in categories)
-   * in the order they are presented in the dropdown list.
-   */
-
-  var flatOptions = (0, _react.useMemo)(function () {
-    return options.reduce(function (acc, curr) {
-      if ((0, _utils.isCategory)(curr)) {
-        return acc.concat(curr.items);
-      }
-
-      return acc.concat(curr);
-    }, []);
-  }, [options]);
+  }, [onFocus]);
   /**
    * Pressing certain keys when focused on the Combobox component should trigger some actions.
    */
@@ -276,10 +390,10 @@ function Combobox(props, ref) {
       event.preventDefault();
 
       if (!isPopoverVisible) {
-        setIsPopoverVisible(true);
+        updateIsPopoverVisible(true);
       } else {
-        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref) {
-          var optionId = _ref.id;
+        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref4) {
+          var optionId = _ref4.id;
           return optionId === activeId;
         });
 
@@ -299,30 +413,38 @@ function Combobox(props, ref) {
       }
     }
 
+    if (event.key === 'Enter' && !isPopoverVisible) {
+      event.preventDefault();
+      updateIsPopoverVisible(true);
+    }
+
     if (event.key === 'Enter' && isPopoverVisible) {
-      setIsPopoverVisible(false);
+      event.preventDefault();
       updateSelected(activeId || '');
+      updateIsPopoverVisible(false);
     }
 
     if (event.key === 'Escape') {
-      setIsPopoverVisible(false);
+      updateIsPopoverVisible(false);
     }
 
     if (event.key === 'Tab' && isPopoverVisible) {
-      setIsPopoverVisible(false);
+      updateIsPopoverVisible(false);
     }
 
     if (onKeyDown) {
       onKeyDown(event);
     }
-  }, [activeId, flatOptions, isPopoverVisible, onKeyDown, setActiveId, updateSelected]); // When the dropdown is visible, clicking anywhere outside of the dropdown should close it.
+  }, [activeId, flatOptions, isPopoverVisible, onKeyDown, updateIsPopoverVisible, updateSelected]); // When the dropdown is visible, clicking anywhere outside of the dropdown should close it.
 
   var handleClickOutsideList = (0, _react.useCallback)(function (event) {
     if (isPopoverVisible) {
-      setIsPopoverVisible(false);
+      updateIsPopoverVisible(false);
     }
-  }, [isPopoverVisible]);
-  (0, _useClickOutside.default)([finalComboboxRef, listRef], handleClickOutsideList);
+  }, [isPopoverVisible, updateIsPopoverVisible]);
+  (0, _useClickOutside.default)([finalComboboxRef, listRef], handleClickOutsideList, {
+    capture: true
+  });
   /**
    * The DropdownList accepts a prop called `PanelComponent` that can be used
    * to render useful messages like "Loading" and "No Matches". This builds those
@@ -368,7 +490,12 @@ function Combobox(props, ref) {
 
     return undefined;
   }, [internalInputValue, loading, options, translate]);
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_InputField.default, _extends({}, getInputFieldProps(), {
+  var selectedValuesIds = selectedValues ? selectedValues.map(function (elem) {
+    return elem && elem.id || '';
+  }) : undefined;
+  return _react.default.createElement(StyledInputDiv, {
+    maxWidth: maxWidth
+  }, _react.default.createElement(_InputField.default, _extends({}, getInputFieldProps(), {
     id: inputId,
     inputContainerRef: finalInputContainerRef,
     onBlur: function onBlur() {
@@ -378,16 +505,18 @@ function Combobox(props, ref) {
     onClick: handleContainerClick,
     onKeyDown: handleContainerKeyDown,
     ref: finalComboboxRef
-  }), function (_ref2) {
-    var ariaLabelledBy = _ref2['aria-labelledby'],
-        disabled = _ref2.disabled,
-        targetId = _ref2.id,
-        onBlurTarget = _ref2.onBlur,
-        onChangeTargetValue = _ref2.onChange,
-        onFocusTarget = _ref2.onFocus,
-        readOnly = _ref2.readOnly,
-        targetRef = _ref2.ref,
-        value = _ref2.value;
+  }), function (_ref5) {
+    var ariaLabelledBy = _ref5['aria-labelledby'],
+        disabled = _ref5.disabled,
+        targetId = _ref5.id,
+        onBlurTarget = _ref5.onBlur,
+        onChangeTargetValue = _ref5.onChange,
+        onFocusTarget = _ref5.onFocus,
+        readOnly = _ref5.readOnly,
+        targetRef = _ref5.ref,
+        value = _ref5.value,
+        autoComplete = _ref5.autoComplete,
+        type = _ref5.type;
     var dropdownListId = "".concat(targetId, "-dropdown-list");
     return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Target.default, {
       "aria-haspopup": "listbox",
@@ -398,8 +527,11 @@ function Combobox(props, ref) {
       hasClearButton: Boolean(value),
       id: targetId,
       inputFieldLabel: label,
-      isPopoverVisible: isPopoverVisible,
+      isPopoverVisible: popoverVisibleStateToUse,
       name: name,
+      multiple: multiple,
+      selectedValues: selectedValues,
+      removeSelected: removeSelected,
       onBlur: onBlurTarget,
       onClear: function onClear() {
         onChangeTargetValue();
@@ -411,8 +543,13 @@ function Combobox(props, ref) {
       ref: targetRef,
       value: value,
       variant: variant,
-      toggleIsPopoverVisible: toggleIsPopoverVisible
+      toggleIsPopoverVisible: function toggleIsPopoverVisible() {
+        return updateIsPopoverVisible('toggle');
+      },
+      autoComplete: autoComplete,
+      type: type
     }), _react.default.createElement(_DropdownList.default, {
+      containerSelector: containerSelector,
       PanelComponent: getPanelComponent(),
       activeId: activeId,
       "aria-labelledby": ariaLabelledBy,
@@ -424,19 +561,24 @@ function Combobox(props, ref) {
       listRef: listRef,
       minWidth: "".concat((dimensions.width || 0) + 1, "px"),
       name: "".concat(name, "_dropdown-list"),
+      multiple: multiple,
       onChange: handleChangeDropdownListValue,
       onChangeActiveItem: handleChangeDropdownListActiveItem,
-      selectedIds: selectedValue || '',
+      selectedIds: !multiple ? selectedValue || '' : selectedValuesIds,
       showArrow: false,
+      showCheckbox: !multiple,
       target: popoverTargetRef,
-      visible: Boolean(isPopoverVisible || loading),
+      visible: Boolean(popoverVisibleStateToUse || loading),
       renderOptionLabel: renderOptionLabel,
-      zIndex: zIndex
+      zIndex: zIndex,
+      pointerEvents: pointerEvents
     }));
   }));
 }
 
 var ComboboxWithRef = (0, _react.forwardRef)(Combobox);
-ComboboxWithRef.propTypes = _schema.default.propTypes;
+ComboboxWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  icon: _propTypes.default.elementType
+});
 var _default = ComboboxWithRef;
 exports.default = _default;