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

package/lib/components/CheckboxGroup/index.d.ts

@@ -4,7 +4,7 @@ import { Props as GroupProps, ItemProps as BaseItemProps } from '../../atoms/Boo
 export declare type Props = Omit<GroupProps, 'itemRenderer'>;
 export declare type ItemProps = BaseItemProps;
 declare const CheckboxGroup: {
-    (props: Pick<GroupProps, "size" | "onChange" | "vertical" | "disabled" | "readOnly" | "status" | "items" | "warningMessage">): JSX.Element;
+    (props: Pick<GroupProps, "size" | "onChange" | "vertical" | "disabled" | "readOnly" | "status" | "warningMessage" | "items">): JSX.Element;
     propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         items: PropTypes.Requireable<(PropTypes.InferProps<{}> | null | undefined)[]>;

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":"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"}
+{"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;AA4mBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -125,7 +125,8 @@ function Combobox(props, ref) {
       zIndex = props.zIndex,
       containerSelector = props.containerSelector,
       pointerEvents = props.pointerEvents,
-      externalIsPopoverVisible = props.isPopoverVisible;
+      externalIsPopoverVisible = props.isPopoverVisible,
+      externalListRef = props.listRef;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -136,7 +137,8 @@ function Combobox(props, ref) {
   var fallbackComboboxRef = (0, _react.useRef)(null);
   var finalComboboxRef = ref || fallbackComboboxRef;
   var inputId = (0, _useUniqueId.default)(id, 'combobox-');
-  var listRef = (0, _react.useRef)(null);
+  var fallbackListRef = (0, _react.useRef)(null);
+  var listRef = externalListRef || fallbackListRef;
 
   var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
       _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
@@ -241,13 +243,49 @@ function Combobox(props, ref) {
    */
 
 
-  var updateSelected = (0, _react.useCallback)(function (selectedId) {
+  var updateSelected = (0, _react.useCallback)(function (selectedIds) {
+    // When using a controlled multiple variation, we want to also have access to the
+    // removed id values.
+    if (multiple && onChangeValue && Array.isArray(selectedIds) && selectedValues) {
+      var isRemoving = selectedIds.length < selectedValues.length;
+
+      if (isRemoving && selectedValues.length > 0) {
+        var removedValue = selectedValues.find(function (_ref2) {
+          var optionId = _ref2.id;
+          return !selectedIds.includes(optionId);
+        });
+
+        if (removedValue && removedValue.id !== undefined) {
+          var filteredValues = selectedValues.filter(function (_ref3) {
+            var optionId = _ref3.id;
+            return optionId !== removedValue.id;
+          });
+          setSelectedValues(filteredValues);
+          onChangeValue(removedValue.id, {
+            removed: true
+          });
+          return;
+        }
+      }
+    }
+
+    var getSelectedId = function getSelectedId(ids) {
+      var isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (Array.isArray(ids)) {
+        return isMultiple ? (0, _last.default)(ids) : ids[0];
+      }
+
+      return ids;
+    };
+
+    var selectedId = getSelectedId(selectedIds, multiple);
     setSelectedValue(selectedId);
     var newSelected = (0, _utils.getOptionFromOptions)(options, selectedId) || null;
 
     if (multiple) {
-      var index = selectedValues && selectedValues.findIndex(function (_ref2) {
-        var itemId = _ref2.id;
+      var index = selectedValues && selectedValues.findIndex(function (_ref4) {
+        var itemId = _ref4.id;
         return itemId === selectedId;
       });
 
@@ -274,8 +312,8 @@ function Combobox(props, ref) {
     }
   }, [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;
+    var newSelectedValues = selectedValues && selectedValues.filter(function (_ref5) {
+      var optionId = _ref5.id;
       return selectedId !== optionId;
     });
     setSelectedValues(newSelectedValues);
@@ -314,16 +352,12 @@ function Combobox(props, ref) {
   /**
    * This handler is called by the dropdown's "onChange" event. That handler is called with
    * an array of values, but we only allow single select in the Combobox.
+   * This is being managed in the `updatedSelected` function.
    */
 
   var handleChangeDropdownListValue = (0, _react.useCallback)(function (selectedIds) {
-    if (multiple) {
-      updateSelected((0, _last.default)(selectedIds));
-      return;
-    }
-
-    updateSelected(selectedIds[0]);
-  }, [updateSelected, multiple]);
+    updateSelected(selectedIds);
+  }, [updateSelected]);
   /**
    * 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
@@ -392,8 +426,8 @@ function Combobox(props, ref) {
       if (!isPopoverVisible) {
         updateIsPopoverVisible(true);
       } else {
-        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref4) {
-          var optionId = _ref4.id;
+        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref6) {
+          var optionId = _ref6.id;
           return optionId === activeId;
         });
 
@@ -505,18 +539,18 @@ function Combobox(props, ref) {
     onClick: handleContainerClick,
     onKeyDown: handleContainerKeyDown,
     ref: finalComboboxRef
-  }), 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;
+  }), function (_ref7) {
+    var ariaLabelledBy = _ref7['aria-labelledby'],
+        disabled = _ref7.disabled,
+        targetId = _ref7.id,
+        onBlurTarget = _ref7.onBlur,
+        onChangeTargetValue = _ref7.onChange,
+        onFocusTarget = _ref7.onFocus,
+        readOnly = _ref7.readOnly,
+        targetRef = _ref7.ref,
+        value = _ref7.value,
+        autoComplete = _ref7.autoComplete,
+        type = _ref7.type;
     var dropdownListId = "".concat(targetId, "-dropdown-list");
     return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Target.default, {
       "aria-haspopup": "listbox",

package/lib/components/Combobox/index.test.js

@@ -1031,12 +1031,12 @@ describe('Combobox', function () {
     })));
     describe('when in multiple select mode', function () {
       describe('when a value is selected', function () {
-        describe('when the "X" button is clicked to deselect a value', function () {
-          it('calls the onChangeValue prop with removed: true', function () {
+        describe('clicking the same value again', function () {
+          it('calls the onChangeValue prop with the expected values', function () {
             var onChangeValue = jest.fn();
 
             var _render33 = render(_react.default.createElement(_.default, {
-              label: "test",
+              label: "test label",
               options: defaultOptions,
               inputValue: "",
               value: [defaultOptions[1]],
@@ -1048,6 +1048,32 @@ describe('Combobox', function () {
 
             expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 
+            _react2.fireEvent.click(queryByText('test label'));
+
+            _react2.fireEvent.click(queryByLabelText(defaultOptions[1].label));
+
+            expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
+              removed: true
+            }));
+          });
+        });
+        describe('when the "X" button is clicked to deselect a value', function () {
+          it('calls the onChangeValue prop with removed: true', function () {
+            var onChangeValue = jest.fn();
+
+            var _render34 = render(_react.default.createElement(_.default, {
+              label: "test",
+              options: defaultOptions,
+              inputValue: "",
+              value: [defaultOptions[1]],
+              onChangeValue: onChangeValue,
+              multiple: true
+            })),
+                queryByText = _render34.queryByText,
+                queryByLabelText = _render34.queryByLabelText;
+
+            expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
+
             _react2.fireEvent.click(queryByLabelText('Delete'));
 
             expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
@@ -1060,18 +1086,18 @@ describe('Combobox', function () {
   });
   describe('when the isPopoverVisible is true', function () {
     it('opens the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _render34, baseElement;
+      var _render35, baseElement;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _render34 = render(_react.default.createElement(_.default, {
+              _render35 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 hideLabel: true,
                 isPopoverVisible: true
-              })), baseElement = _render34.baseElement;
+              })), baseElement = _render35.baseElement;
               defaultOptions.forEach(function (_ref6) {
                 var label = _ref6.label;
                 expect((0, _react2.queryByText)(baseElement, label)).toBeInTheDocument();
@@ -1085,18 +1111,18 @@ describe('Combobox', function () {
       }, _callee2);
     })));
     it('does not automatically close the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _render35, baseElement, queryByLabelText;
+      var _render36, baseElement, queryByLabelText;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _render35 = render(_react.default.createElement(_.default, {
+              _render36 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 hideLabel: true,
                 isPopoverVisible: true
-              })), baseElement = _render35.baseElement, queryByLabelText = _render35.queryByLabelText;
+              })), baseElement = _render36.baseElement, queryByLabelText = _render36.queryByLabelText;
 
               _react2.fireEvent.click(queryByLabelText(defaultOptions[0].label));
 

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAkGrD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAsGrD,eAAe,MAAM,CAAC"}

package/lib/components/Combobox/schema.js

@@ -49,6 +49,9 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
     label: _reactDesc.PropTypes.string,
     value: _reactDesc.PropTypes.string
   }))]).description('The ID of the option that is selected. If provided, controlling the Select must be handled externally. Overrides `defaultValue`.'),
+  listRef: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.func, _reactDesc.PropTypes.shape({
+    current: _reactDesc.PropTypes.any
+  })]).description('A ref for the list container.'),
   multiple: _reactDesc.PropTypes.bool.description('Used when multiple selections can be made in the Combobox').defaultValue(false),
   variant: _reactDesc.PropTypes.oneOf(['async', 'sync']).description('Enables different logic for rendering the dropdown list.').defaultValue('sync'),
   renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value'),

package/lib/components/Combobox/types.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, Ref } from 'react';
+import { InputHTMLAttributes, Ref, RefObject } from 'react';
 import { BaseInputFieldProps } from '../../atoms/InputField';
 import { ActionHandler } from '../Tag/types';
 import { PopoverProps } from '../Popover/types';
@@ -16,6 +16,7 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxIn
     isPopoverVisible?: boolean;
     multiple?: boolean;
     maxWidth?: string;
+    listRef?: RefObject<HTMLUListElement>;
     loading?: boolean;
     onBlur?: React.FocusEventHandler;
     onChangeInputValue?: (event?: React.ChangeEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}

package/lib/components/TagInput/index.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { BaseInputFieldProps } from '../../atoms/InputField';
+import { DropdownListItem } from '../DropdownList/types';
 export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
     hiddenLabel?: boolean;
     defaultTags?: string[];
     tags?: string[];
+    options: DropdownListItem[];
     onChange?: (value: string[]) => void;
+    onSelect?: (item: string[]) => void;
+    zIndex?: number;
 }
-export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, ...props }: TagInputProps): JSX.Element;
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, zIndex, ...props }: TagInputProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAeA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMzE,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,eAqMf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAoBA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKzD,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,eA2Sf"}

package/lib/components/TagInput/index.js

@@ -9,18 +9,26 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _breakpointObserver = require("@decisiv/breakpoint-observer");
+
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
 var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
 
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
+var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutside"));
+
 var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
 
 var _Tag = _interopRequireDefault(require("../Tag"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _DropdownList = _interopRequireDefault(require("../DropdownList"));
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,9 +66,13 @@ function TagInput(_ref) {
       readOnly = _ref.readOnly,
       label = _ref.label,
       hiddenLabel = _ref.hiddenLabel,
-      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel"]);
+      options = _ref.options,
+      onSelect = _ref.onSelect,
+      zIndex = _ref.zIndex,
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "zIndex"]);
 
   var clearButtonRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
@@ -73,6 +85,16 @@ function TagInput(_ref) {
       innerTags = _useState4[0],
       setInnerTags = _useState4[1];
 
+  var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
+      _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
+      inputContainerRef = _useBreakpointObserve2[0],
+      dimensions = _useBreakpointObserve2[1].dimensions;
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isPopoverVisible = _useState6[0],
+      setIsPopoverVisible = _useState6[1];
+
   var translate = (0, _useTranslations.default)();
   var isControlled = (0, _react.useMemo)(function () {
     return !!tags;
@@ -85,6 +107,9 @@ function TagInput(_ref) {
     if (!onChange) return;
     onChange(value);
   }, [onChange]);
+  var hasOptions = (0, _react.useMemo)(function () {
+    return !(0, _isEmpty.default)(options);
+  }, [options]);
   var handleAddTag = (0, _react.useCallback)(function (rawString) {
     var text = rawString.replace(/\s+/g, ' ').trim();
     if (!text || tagsToRender.includes(text)) return;
@@ -114,21 +139,26 @@ function TagInput(_ref) {
     });
   }, [isControlled, handleNotifyChange, tags]);
   var handleRemoveTag = (0, _react.useCallback)(function (text) {
-    if (isControlled) {
-      handleNotifyChange(tags.filter(function (tag) {
-        return tag !== text;
-      }));
-      return;
-    }
-
-    setInnerTags(function (oldState) {
-      var newState = oldState.filter(function (tag) {
-        return tag !== text;
+    return function (e) {
+      if (hasOptions) e.stopPropagation();
+
+      if (isControlled) {
+        handleNotifyChange(_toConsumableArray(tags).filter(function (tag) {
+          return tag !== text;
+        }));
+        return;
+      }
+
+      setInnerTags(function (oldState) {
+        var newState = _toConsumableArray(oldState).filter(function (tag) {
+          return tag !== text;
+        });
+
+        handleNotifyChange(newState);
+        return newState;
       });
-      handleNotifyChange(newState);
-      return newState;
-    });
-  }, [isControlled, handleNotifyChange, tags]);
+    };
+  }, [isControlled, handleNotifyChange, tags, hasOptions]);
   var handleOnKeyUp = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     var text = e.target.value;
@@ -157,19 +187,94 @@ function TagInput(_ref) {
     e.target.value = '';
     setInputVisible(false);
   }, [handleAddTag]);
-  var handleOnClearButtonClick = (0, _react.useCallback)(function () {
+  var handleOnClearButtonClick = (0, _react.useCallback)(function (e) {
+    if (hasOptions) e.stopPropagation();
+
     if (inputRef.current) {
       inputRef.current.value = '';
     }
-  }, []);
-  return _react.default.createElement(_styles.Wrapper, null, _react.default.createElement(_InputField.default, _extends({
+  }, [hasOptions]);
+  var handleOnSelect = (0, _react.useCallback)(function (selection) {
+    var allSelection = Array.isArray(selection) ? selection : [selection];
+
+    if (onSelect) {
+      onSelect(allSelection);
+    }
+
+    if (isControlled) {
+      handleNotifyChange([].concat(_toConsumableArray(tags), _toConsumableArray(allSelection)));
+      setIsPopoverVisible(false);
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = [].concat(_toConsumableArray(oldState), _toConsumableArray(allSelection));
+      handleNotifyChange(newState);
+      return newState;
+    });
+    setIsPopoverVisible(false);
+  }, [handleNotifyChange, tags, isControlled, options]);
+  /**
+   * Toggle the dropdown list.
+   */
+
+  var toggleIsPopoverVisible = (0, _react.useCallback)(function () {
+    setIsPopoverVisible(!isPopoverVisible);
+  }, [isPopoverVisible]);
+  /**
+   * Clicking anywhere within the InputField component (except the clear button) should toggle
+   * the dropdown list.
+   */
+
+  var handleContainerClick = (0, _react.useCallback)(function () {
+    toggleIsPopoverVisible();
+  }, [toggleIsPopoverVisible]); // When the dropdown is visible, clicking anywhere outside of the dropdown should close it.
+
+  var handleClickOutsideList = (0, _react.useCallback)(function () {
+    if (isPopoverVisible) {
+      setIsPopoverVisible(false);
+    }
+  }, [isPopoverVisible]);
+  (0, _react.useEffect)(function () {
+    if (isPopoverVisible) {
+      // Delay to ensure DOM updates are complete
+      var timer = setTimeout(function () {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+      return function () {
+        return clearTimeout(timer);
+      }; // Cleanup the timer on unmount or state change
+    }
+
+    return function () {};
+  }, [isPopoverVisible, inputRef]);
+  (0, _useClickOutside.default)([listRef], handleClickOutsideList, {
+    capture: true
+  });
+  return _react.default.createElement(_styles.Wrapper, null, hasOptions && _react.default.createElement(_DropdownList.default, {
+    name: "".concat(label, "-dropdown-list"),
+    items: options,
+    borderRadius: "0",
+    minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+    maxWidth: "unset",
+    showArrow: false,
+    target: inputContainerRef,
+    onChange: handleOnSelect,
+    listRef: listRef,
+    visible: isPopoverVisible,
+    zIndex: zIndex
+  }), _react.default.createElement(_InputField.default, _extends({
     ref: inputRef,
     onFocus: handleFocus,
     onBlur: handleBlur,
     disabled: disabled,
     readOnly: readOnly,
     label: label,
-    hideLabel: hiddenLabel
+    hideLabel: hiddenLabel,
+    inputContainerRef: inputContainerRef,
+    onClick: handleContainerClick
   }, props), function (innerProps) {
     return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
       return _react.default.createElement(_Tag.default, {
@@ -178,9 +283,7 @@ function TagInput(_ref) {
         text: tag,
         palette: "pastel",
         color: isDisabled ? 'licoriceMousse' : 'information',
-        action: isDisabled ? undefined : function () {
-          return handleRemoveTag(tag);
-        },
+        action: isDisabled ? undefined : handleRemoveTag(tag),
         actionIntent: "danger",
         actionAttributes: {
           'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {

package/lib/components/TagInput/index.test.js

@@ -4,15 +4,53 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-var onChange = jest.fn();
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+var onChange = jest.fn(); // Prevent warnings about missing document methods (createRange, etc.)
+
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: wrapper
+  }));
+};
+
 afterEach(function () {
   onChange.mockClear();
 });
@@ -24,7 +62,7 @@ describe('TagInput', function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _render = (0, _react2.render)(_react.default.createElement(_.default, {
+            _render = render(_react.default.createElement(_.default, {
               tags: [],
               hideLabel: false,
               label: "My Tag Input",
@@ -46,7 +84,7 @@ describe('TagInput', function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+            _render2 = render(_react.default.createElement(_.default, {
               tags: [],
               hideLabel: false,
               label: "My Tag Input",
@@ -69,7 +107,7 @@ describe('TagInput', function () {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+            _render3 = render(_react.default.createElement(_.default, {
               tags: [],
               hideLabel: false,
               label: "My Tag Input",
@@ -93,7 +131,7 @@ describe('TagInput', function () {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render4 = render(_react.default.createElement(_.default, {
                 defaultTags: ['Foo tag'],
                 label: "My Tag Input"
               })), getByText = _render4.getByText;
@@ -113,7 +151,7 @@ describe('TagInput', function () {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
-              _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render5 = render(_react.default.createElement(_.default, {
                 defaultTags: ['My tag'],
                 label: "My Tag Input"
               })), getByLabelText = _render5.getByLabelText;
@@ -137,7 +175,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context6.prev = _context6.next) {
                     case 0:
-                      _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render6 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input"
@@ -169,7 +207,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context7.prev = _context7.next) {
                     case 0:
-                      _render7 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render7 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -204,7 +242,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context8.prev = _context8.next) {
                     case 0:
-                      _render8 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render8 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -237,7 +275,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context9.prev = _context9.next) {
                     case 0:
-                      _render9 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render9 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -273,7 +311,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context10.prev = _context10.next) {
                   case 0:
-                    _render10 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render10 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input"
@@ -305,7 +343,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context11.prev = _context11.next) {
                   case 0:
-                    _render11 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render11 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -343,7 +381,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context12.prev = _context12.next) {
                     case 0:
-                      _render12 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render12 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -374,7 +412,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context13.prev = _context13.next) {
                     case 0:
-                      _render13 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render13 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -407,7 +445,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context14.prev = _context14.next) {
                     case 0:
-                      _render14 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render14 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -438,7 +476,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context15.prev = _context15.next) {
                     case 0:
-                      _render15 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render15 = render(_react.default.createElement(_.default, {
                         defaultTags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -472,7 +510,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context16.prev = _context16.next) {
                   case 0:
-                    _render16 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render16 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input"
@@ -502,7 +540,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context17.prev = _context17.next) {
                   case 0:
-                    _render17 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render17 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -537,7 +575,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context18.prev = _context18.next) {
                   case 0:
-                    _render18 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render18 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -572,7 +610,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context19.prev = _context19.next) {
                   case 0:
-                    _render19 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render19 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -599,7 +637,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context20.prev = _context20.next) {
                   case 0:
-                    _render20 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render20 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -630,7 +668,7 @@ describe('TagInput', function () {
           while (1) {
             switch (_context21.prev = _context21.next) {
               case 0:
-                _render21 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render21 = render(_react.default.createElement(_.default, {
                   defaultTags: ['Foo tag'],
                   label: "My Tag Input",
                   "aria-label": "My Tag Input",
@@ -649,18 +687,18 @@ describe('TagInput', function () {
         }, _callee21);
       })));
       it('call onChange callback', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
-        var _render22, getByLabelText, queryByLabelText;
+        var _render22, getByLabelText;
 
         return regeneratorRuntime.wrap(function _callee22$(_context22) {
           while (1) {
             switch (_context22.prev = _context22.next) {
               case 0:
-                _render22 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render22 = render(_react.default.createElement(_.default, {
                   defaultTags: ['Foo tag'],
                   label: "My Tag Input",
                   "aria-label": "My Tag Input",
                   onChange: onChange
-                })), getByLabelText = _render22.getByLabelText, queryByLabelText = _render22.queryByLabelText;
+                })), getByLabelText = _render22.getByLabelText;
 
                 _react2.fireEvent.click(getByLabelText('Remove Foo tag'));
 
@@ -687,7 +725,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context23.prev = _context23.next) {
                     case 0:
-                      _render23 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render23 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -722,7 +760,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context24.prev = _context24.next) {
                     case 0:
-                      _render24 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render24 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -758,7 +796,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context25.prev = _context25.next) {
                   case 0:
-                    _render25 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render25 = render(_react.default.createElement(_.default, {
                       tags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -796,7 +834,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context26.prev = _context26.next) {
                     case 0:
-                      _render26 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render26 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -829,7 +867,7 @@ describe('TagInput', function () {
                 while (1) {
                   switch (_context27.prev = _context27.next) {
                     case 0:
-                      _render27 = (0, _react2.render)(_react.default.createElement(_.default, {
+                      _render27 = render(_react.default.createElement(_.default, {
                         tags: ['Foo tag'],
                         label: "My Tag Input",
                         "aria-label": "My Tag Input",
@@ -863,7 +901,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context28.prev = _context28.next) {
                   case 0:
-                    _render28 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render28 = render(_react.default.createElement(_.default, {
                       tags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -898,7 +936,7 @@ describe('TagInput', function () {
               while (1) {
                 switch (_context29.prev = _context29.next) {
                   case 0:
-                    _render29 = (0, _react2.render)(_react.default.createElement(_.default, {
+                    _render29 = render(_react.default.createElement(_.default, {
                       defaultTags: ['Foo tag'],
                       label: "My Tag Input",
                       "aria-label": "My Tag Input",
@@ -948,7 +986,7 @@ describe('TagInput', function () {
           while (1) {
             switch (_context31.prev = _context31.next) {
               case 0:
-                _render30 = (0, _react2.render)(_react.default.createElement(_.default, {
+                _render30 = render(_react.default.createElement(_.default, {
                   tags: ['Foo tag'],
                   label: "My Tag Input",
                   "aria-label": "My Tag Input",
@@ -978,7 +1016,7 @@ describe('TagInput', function () {
         while (1) {
           switch (_context32.prev = _context32.next) {
             case 0:
-              _render31 = (0, _react2.render)(_react.default.createElement(_.default, {
+              _render31 = render(_react.default.createElement(_.default, {
                 tags: ['Foo tag'],
                 label: "My Tag Input",
                 "aria-label": "My Tag Input",
@@ -998,4 +1036,42 @@ describe('TagInput', function () {
       }, _callee32);
     })));
   });
+  describe('dropdown', function () {
+    var defaultProps = {
+      label: 'My Tag Input',
+      options: [{
+        label: 'Option1',
+        value: 'Option1',
+        id: 'Option1'
+      }],
+      onChange: jest.fn(),
+      onSelect: jest.fn()
+    };
+    it('toggles the dropdown visibility when the container is clicked', function () {
+      var _render32 = render(_react.default.createElement(_.default, defaultProps)),
+          getByLabelText = _render32.getByLabelText,
+          getByText = _render32.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Tag Input'));
+
+      expect(getByText('Option1')).toBeInTheDocument();
+    });
+    it('calls onSelect when an option is selected from the dropdown', function () {
+      var onSelectMock = jest.fn();
+
+      var _render33 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onSelect: onSelectMock
+      }))),
+          getByLabelText = _render33.getByLabelText,
+          getByText = _render33.getByText;
+
+      _react2.fireEvent.click(getByLabelText('My Tag Input'));
+
+      expect(getByText('Option1')).toBeInTheDocument();
+
+      _react2.fireEvent.click(getByText('Option1'));
+
+      expect(onSelectMock).toHaveBeenCalledWith(['Option1']);
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.211+22cfa85",
+  "version": "2.0.1-alpha.213+efaad97",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "22cfa85a7348f88285a256628a844a654e36c7e9"
+  "gitHead": "efaad97908f3df65c4b151668dd96147235f946f"
 }