@via-profit/ui-kit 0.3.0 → 0.4.0

package/Accordion/AccordionContainer.js

@@ -39,23 +39,23 @@ const StyledAccordionContainer = styled_1.default.div `
     ? theme.color.backgroundSecondary.lighten(80).alpha(0.12).toString()
     : theme.color.backgroundSecondary.lighten(50).alpha(0.12).toString()}
       0px 1px 3px 0px;
-  margin-top: 1px;
 
-  &:has(+ div[class*='StyledAccordionContainer']) {
-    border-radius: ${({ theme }) => theme.shape.radiusFactor}em
-      ${({ theme }) => theme.shape.radiusFactor}em 0 0;
+  /*
+   * Adjacent accordions form a group: the inner corners are square.
+   * Data attributes, not class names: emotion labels are absent in the published package
+   */
+  &:has(+ [data-accordion]) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  & + div[class*='StyledAccordionContainer'] {
-    border-radius: 0 0 0 0;
-  }
-  &:not(:has(+ div[class*='StyledAccordionContainer'])) {
-    border-radius: 0 0 ${({ theme }) => theme.shape.radiusFactor}em
-      ${({ theme }) => theme.shape.radiusFactor}em;
+  [data-accordion] + & {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 `;
 const AccordionContainer = (props, ref) => {
     const { inline, children } = props, nativeProps = __rest(props, ["inline", "children"]);
-    return (react_1.default.createElement(StyledAccordionContainer, Object.assign({ "$inline": inline }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledAccordionContainer, Object.assign({ "data-accordion": "", "$inline": inline }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(AccordionContainer);

package/Accordion/AccordionContent.js

@@ -16,12 +16,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * Animates the height with grid rows 0fr -> 1fr: no fixed max-height, so the tall content is not cut.
+ * `visibility: hidden` of the collapsed content removes it from the tab order and the accessibility tree
+ */
 const StyledAccordionContent = styled_1.default.div `
-  flex: 1;
-  overflow: auto;
-  transition: all 0.3s ease-out;
-  max-height: ${({ $isOpen }) => (!$isOpen ? '0px' : '90vh')};
-  box-sizing: content-box;
+  display: grid;
+  grid-template-rows: ${({ $isOpen }) => ($isOpen ? '1fr' : '0fr')};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+  transition:
+    grid-template-rows 0.3s ease-out,
+    visibility 0s linear ${({ $isOpen }) => ($isOpen ? '0s' : '0.3s')};
+`;
+const Clip = styled_1.default.div `
+  min-height: 0;
   overflow: hidden;
 `;
 const Wrapper = styled_1.default.div `
@@ -29,7 +37,8 @@ const Wrapper = styled_1.default.div `
 `;
 const AccordionContent = (props, ref) => {
     const { children, noPadding, isOpen } = props, nativeProps = __rest(props, ["children", "noPadding", "isOpen"]);
-    return (react_1.default.createElement(StyledAccordionContent, Object.assign({ "$isOpen": isOpen }, nativeProps, { ref: ref }),
-        react_1.default.createElement(Wrapper, { "$noPadding": Boolean(noPadding) }, children)));
+    return (react_1.default.createElement(StyledAccordionContent, Object.assign({ role: "region" }, nativeProps, { "$isOpen": isOpen, ref: ref }),
+        react_1.default.createElement(Clip, null,
+            react_1.default.createElement(Wrapper, { "$noPadding": Boolean(noPadding) }, children))));
 };
 exports.default = react_1.default.forwardRef(AccordionContent);

package/Accordion/AccordionHeader.d.ts

@@ -1,10 +1,32 @@
 import React from 'react';
 export type AccordionHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly isOpen: boolean;
+    /**
+     * Toggles the accordion
+     */
     readonly onOpen: () => void;
+    /**
+     * The id of the header button (the content is labelled by it)
+     */
+    readonly headerID?: string;
+    /**
+     * The id of the content (the header button controls it)
+     */
+    readonly contentID?: string;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly isOpen: boolean;
+    /**
+     * Toggles the accordion
+     */
     readonly onOpen: () => void;
+    /**
+     * The id of the header button (the content is labelled by it)
+     */
+    readonly headerID?: string | undefined;
+    /**
+     * The id of the content (the header button controls it)
+     */
+    readonly contentID?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Accordion/AccordionHeader.js

@@ -16,38 +16,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Button_1 = __importDefault(require("../Button"));
 const Chevron_1 = __importDefault(require("./Chevron"));
 const StyledHeader = styled_1.default.div `
-  padding: 1rem 1rem 1rem 1rem;
   font-size: 1.3rem;
   font-weight: 600;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
+`;
+/**
+ * The whole header is the button: it is clickable, focusable and announced as expanded/collapsed
+ */
+const HeaderButton = styled_1.default.button `
   display: flex;
-  cursor: pointer;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
+  gap: 1rem;
+  width: 100%;
+  margin: 0;
+  padding: 1rem;
+  border: 0;
+  border-radius: inherit;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 0.1em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: -0.1em;
+  }
+`;
+const HeaderCell = styled_1.default.span `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
 `;
 const StyledChevron = (0, styled_1.default)(Chevron_1.default, { shouldForwardProp: p => p[0] !== '$' }) `
+  flex-shrink: 0;
+  color: ${({ theme }) => theme.color.accentSecondary.toString()};
   transform: ${({ $isOpen }) => (!$isOpen ? 'rotate(180deg)' : 'rotate(0)')};
-  transition: all 0.3s ease-out;
-`;
-const StyledButton = (0, styled_1.default)(Button_1.default) `
-  width: 1rem;
-  height: 1rem;
-`;
-const HeaderCell = styled_1.default.div `
-  flex: 1;
+  transition: transform 0.3s ease-out;
 `;
-const Actions = styled_1.default.div ``;
 const AccordionHeader = (props, ref) => {
-    const { children, isOpen, onOpen } = props, nativeProps = __rest(props, ["children", "isOpen", "onOpen"]);
-    return (react_1.default.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref, onClick: () => onOpen() }),
-        react_1.default.createElement(HeaderCell, null, children),
-        react_1.default.createElement(Actions, null,
-            react_1.default.createElement(StyledButton, { iconOnly: true, onClick: () => onOpen() },
-                react_1.default.createElement(StyledChevron, { "$isOpen": isOpen })))));
+    const { children, isOpen, onOpen, headerID, contentID } = props, nativeProps = __rest(props, ["children", "isOpen", "onOpen", "headerID", "contentID"]);
+    return (react_1.default.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref }),
+        react_1.default.createElement(HeaderButton, { type: "button", id: headerID, "aria-expanded": isOpen, "aria-controls": contentID, onClick: () => onOpen() },
+            react_1.default.createElement(HeaderCell, null, children),
+            react_1.default.createElement(StyledChevron, { "$isOpen": isOpen }))));
 };
 exports.default = react_1.default.forwardRef(AccordionHeader);

package/Accordion/Chevron.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Path = styled_1.default.path `
-  fill: ${({ theme }) => theme.color.accentSecondary.toString()};
+  fill: currentColor;
 `;
-const Spinner = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props, { ref: ref }),
+const Chevron = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true }, props, { ref: ref }),
     react_1.default.createElement(Path, { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" })));
-exports.default = react_1.default.forwardRef(Spinner);
+exports.default = react_1.default.forwardRef(Chevron);

package/Accordion/index.d.ts

@@ -18,17 +18,19 @@ export type AccordionProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     readonly overrides?: AccordionOverrides;
     /**
-     * This props ovveride default component open state
+     * The state of the controlled accordion. Pass it together with `onOpen`
      */
     readonly isOpen?: boolean;
     /**
-     * If `true` accordion will be opened by default
+     * The initial state of the uncontrolled accordion
+     * Default: false
      */
     readonly defaultOpened?: boolean;
     /**
-     * Callback function witch should open the accordion. You can forward your own function to make accordion controlled
+     * Called when the user clicks the header, both to open and to close the accordion.\
+     * Receives the next state: `true` - should be opened, `false` - should be closed
      */
-    readonly onOpen?: () => void;
+    readonly onOpen?: (isOpen: boolean) => void;
     /**
      * If `true` initial padding of accorion content would be disabled
      */
@@ -67,17 +69,19 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      */
     readonly overrides?: AccordionOverrides | undefined;
     /**
-     * This props ovveride default component open state
+     * The state of the controlled accordion. Pass it together with `onOpen`
      */
     readonly isOpen?: boolean | undefined;
     /**
-     * If `true` accordion will be opened by default
+     * The initial state of the uncontrolled accordion
+     * Default: false
      */
     readonly defaultOpened?: boolean | undefined;
     /**
-     * Callback function witch should open the accordion. You can forward your own function to make accordion controlled
+     * Called when the user clicks the header, both to open and to close the accordion.\
+     * Receives the next state: `true` - should be opened, `false` - should be closed
      */
-    readonly onOpen?: (() => void) | undefined;
+    readonly onOpen?: ((isOpen: boolean) => void) | undefined;
     /**
      * If `true` initial padding of accorion content would be disabled
      */

package/Accordion/index.js

@@ -46,19 +46,34 @@ const Accordion = (props, ref) => {
     const { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = props, nativeProps = __rest(props, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
     const hasActions = typeof actions !== 'undefined' && actions !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
-    const [opened, setOpened] = React.useState(typeof defaultOpened !== 'undefined' ? defaultOpened : false);
+    const [internalOpened, setInternalOpened] = React.useState(Boolean(defaultOpened));
+    const isControlled = typeof isOpen !== 'undefined';
+    const opened = isControlled ? Boolean(isOpen) : internalOpened;
+    const id = React.useId().replace(/:/g, '');
+    const headerID = `accordion-${id}-header`;
+    const contentID = `accordion-${id}-content`;
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || AccordionContainer_1.default,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || AccordionHeader_1.default,
         Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || AccordionContent_1.default,
         Actions: (overrides === null || overrides === void 0 ? void 0 : overrides.Actions) || AccordionActions_1.default,
     }), [overrides]);
-    if (!hasHeader) {
-        console.warn(`[@via-profit/ui-kit] Accordion component. If you use a subheader, then you should add a header`);
-    }
+    // Warn once, not on every render
+    React.useEffect(() => {
+        if (!hasHeader) {
+            console.warn('[@via-profit/ui-kit] Accordion component. The accordion without the «header» can not be opened by the user');
+        }
+    }, [hasHeader]);
+    // In the uncontrolled mode the own state is updated even when onOpen is passed
+    const handleToggle = () => {
+        if (!isControlled) {
+            setInternalOpened(!opened);
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(!opened);
+    };
     return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { ref: ref }),
-        hasHeader && (React.createElement(overridesMap.Header, { isOpen: typeof isOpen !== 'undefined' ? isOpen : opened, onOpen: onOpen ? onOpen : () => setOpened(typeof isOpen !== 'undefined' ? !isOpen : !opened) }, header)),
-        React.createElement(overridesMap.Content, { noPadding: noPadding, isOpen: typeof isOpen !== 'undefined' ? isOpen : opened },
+        hasHeader && (React.createElement(overridesMap.Header, { isOpen: opened, onOpen: handleToggle, headerID: headerID, contentID: contentID }, header)),
+        React.createElement(overridesMap.Content, { id: contentID, "aria-labelledby": hasHeader ? headerID : undefined, noPadding: noPadding, isOpen: opened },
             children,
             hasActions && React.createElement(overridesMap.Actions, { noPadding: noPadding }, actions))));
 };

package/Autocomplete/AutocompleteContainer.d.ts

@@ -15,14 +15,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * If `true` then menu is open, otherwise - closed
      */
     readonly isOpen?: boolean;
-    /**
-     * Loading indicator visibility\
-     * If `true` then visible, otherwise - hidden
-     */
     /**
      * Anchor position\
      * \
-     * Default: `bottom`
+     * Default: `bottom-fill`
      */
     readonly anchorPos?: AnchorPos;
     /**
@@ -50,8 +46,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * Used to prevent the popper from being positioned too close to the screen boundaries.
      * The popper will try to flip to another placement if it cannot maintain this margin.
      *
-     * **Default**: `8`
-     * ```
+     * **Default**: `30`
      */
     readonly viewportMargin?: number;
     /**
@@ -97,7 +92,8 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      */
     readonly onChange?: OnChange<T, Multiple>;
     /**
-     * A function that transforms the selected item into a string
+     * A function that transforms the selected item into a string.\
+     * With `multiple` it is called for every selected item to get the label of its tag
      * Example:
      * ```tsx
      * <Autocomplete
@@ -146,7 +142,7 @@ export type Children<T> = (data: {
     index: number;
     inputValue: string;
 }, itemProps: MenuItemProps) => React.ReactNode;
-export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
+export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: T) => string;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 export type FilterItems<T> = (items: readonly T[], data: {
     readonly query: string;

package/Autocomplete/AutocompleteContainer.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,11 +40,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const TextField_1 = __importDefault(require("../TextField"));
 const Button_1 = __importDefault(require("../Button"));
-const LoadingIndicator_1 = require("../LoadingIndicator");
+const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
 const context_1 = require("./context");
 const IconClear_1 = __importDefault(require("./IconClear"));
+const AutocompleteTagsInput_1 = __importStar(require("./AutocompleteTagsInput"));
 const ClickOutside_1 = require("../ClickOutside");
-const Menu_1 = __importDefault(require("../Menu"));
+const Menu_1 = __importStar(require("../Menu"));
+// Module level, so the input keeps its identity between renders and does not lose the focus
+const MULTIPLE_TEXT_FIELD_OVERRIDES = { Input: AutocompleteTagsInput_1.default };
+// The list must not take the focus on a click: the user keeps typing in the field
+const AutocompleteMenuList = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(Menu_1.MenuList, Object.assign({}, props, { onMouseDown: event => {
+        var _a;
+        event.preventDefault();
+        (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }, ref: ref }))));
+AutocompleteMenuList.displayName = 'AutocompleteMenuList';
+const MENU_OVERRIDES = { List: AutocompleteMenuList };
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', alternativePlacements = ['bottom-fill', 'top-fill'], openOnFocus = true, autoFlip = true, viewportMargin, positionStrategy, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "alternativePlacements", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = react_1.default.useRef(null);
@@ -63,23 +97,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
      * Restore the input text from the current value (used by clearOnBlur)
      */
     const restoreInputValue = react_1.default.useCallback(() => {
-        const newInputValue = currentValue === null
-            ? ''
-            : selectedItemToString(currentValue);
-        const newFilteredItems = multiple ? filteredItems : applyFilterForItems(newInputValue, items);
+        // With multiple the field holds only the search text, the selected items are tags
+        const newInputValue = multiple || currentValue === null ? '' : selectedItemToString(currentValue);
+        const newFilteredItems = applyFilterForItems(newInputValue, items);
         dispatch((0, context_1.actionSetPartial)({
             filteredItems: newFilteredItems,
             inputValue: newInputValue,
         }));
-    }, [
-        currentValue,
-        selectedItemToString,
-        multiple,
-        filteredItems,
-        applyFilterForItems,
-        items,
-        dispatch,
-    ]);
+    }, [currentValue, selectedItemToString, multiple, applyFilterForItems, items, dispatch]);
     const inputKeydownEvent = react_1.default.useCallback((event) => {
         var _a, _b, _c, _d, _e;
         if (!isFocusedRef.current) {
@@ -126,6 +151,15 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             // case 'PageDown':
             //   event.preventDefault();
             //   break;
+            case 'Backspace':
+                // An empty field with tags: Backspace removes the last tag
+                if (multiple && event.currentTarget.value === '' && Array.isArray(currentValue)) {
+                    if (currentValue.length > 0 && typeof onChange === 'function') {
+                        event.preventDefault();
+                        onChange(currentValue.slice(0, -1));
+                    }
+                }
+                break;
             case 'Tab':
                 // Focus leaves the field, so clearOnBlur applies as for the outside click
                 if (clearOnBlur) {
@@ -151,6 +185,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         filteredItems.length,
         clearOnBlur,
         restoreInputValue,
+        multiple,
+        currentValue,
+        onChange,
     ]);
     const renderChildren = react_1.default.useCallback(({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps), [children, inputValue]);
     /**
@@ -160,12 +197,13 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         if (value === currentValue) {
             return;
         }
-        dispatch((0, context_1.actionSetPartial)({
-            currentValue: value,
-            inputValue: value === null
-                ? ''
-                : selectedItemToString(value),
-        }));
+        // With multiple the selected items are shown as tags and the search text is kept
+        dispatch((0, context_1.actionSetPartial)(multiple
+            ? { currentValue: value }
+            : {
+                currentValue: value,
+                inputValue: value === null ? '' : selectedItemToString(value),
+            }));
     }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
     react_1.default.useEffect(() => {
         if (currentOpen && menuRef.current) {
@@ -211,8 +249,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }
                 parentElem = parentElem.parentNode;
             }
-            // Click outside
-            if (needToClose && currentOpen) {
+            // Click outside. The menu can be already closed (no matches, Escape),
+            // but the user still leaves the field with an unfinished text
+            if (needToClose && (currentOpen || isFocusedRef.current)) {
                 if (clearOnBlur) {
                     restoreInputValue();
                 }
@@ -227,14 +266,10 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         };
     }, [onRequestClose, anchorElement, isOpen, clearOnBlur, currentOpen, restoreInputValue]);
     const onSelectMenuItem = react_1.default.useCallback(item => {
-        if (!multiple) {
-            dispatch({
-                type: 'setPartial',
-                payload: {
-                    filteredItems: applyFilterForItems(selectedItemToString(item), items),
-                },
-            });
-        }
+        dispatch((0, context_1.actionSetPartial)(multiple
+            ? // The search text is done, the whole list is shown again for the next choice
+                { inputValue: '', filteredItems: applyFilterForItems('', items) }
+            : { filteredItems: applyFilterForItems(selectedItemToString(item), items) }));
         if (typeof onChange === 'function') {
             onChange(item);
         }
@@ -242,7 +277,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const endIconMemo = react_1.default.useMemo(() => {
         if (currentLoading) {
             return (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", variant: "plain", disabled: true },
-                react_1.default.createElement(LoadingIndicator_1.StaticLoadingIndicator, null)));
+                react_1.default.createElement(Spinner_1.default, { size: "1.2em" })));
         }
         if (!clearable) {
             return undefined;
@@ -319,6 +354,24 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             dispatch((0, context_1.actionSetPartial)({ anchorElement: el }));
         }
     }, [anchorElement, dispatch]);
+    const tags = react_1.default.useMemo(() => {
+        if (!multiple || !Array.isArray(currentValue)) {
+            return [];
+        }
+        const selected = currentValue;
+        return selected.map((item, index) => {
+            const tagLabel = selectedItemToString(item);
+            return {
+                key: `${index}:${tagLabel}`,
+                label: tagLabel,
+                onDelete: () => {
+                    if (typeof onChange === 'function') {
+                        onChange(selected.filter((_, i) => i !== index));
+                    }
+                },
+            };
+        });
+    }, [multiple, currentValue, selectedItemToString, onChange]);
     const inputRefRef = react_1.default.useRef(inputRef);
     react_1.default.useEffect(() => {
         inputRefRef.current = inputRef;
@@ -333,11 +386,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             currentInputRef.current = el;
         }
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, endIcon: endIconMemo }, nativeInputProps, { onKeyDown: textFieldOnKeyDown, ref: setAnchorElementRef, inputRef: setInputElementRef, value: inputValue, onBlur: textFieldBlur, onFocus: textFieldFocus, onClick: textFieldClick, onChange: textFieldOnChange }))), [
+    return (react_1.default.createElement(AutocompleteTagsInput_1.AutocompleteTagsContext.Provider, { value: tags },
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ overrides: multiple ? MULTIPLE_TEXT_FIELD_OVERRIDES : undefined, placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, endIcon: endIconMemo, 
+            // The browser suggestions would be shown over the menu; can be overridden by the props
+            autoComplete: "off" }, nativeInputProps, { onKeyDown: textFieldOnKeyDown, ref: setAnchorElementRef, inputRef: setInputElementRef, value: inputValue, onBlur: textFieldBlur, onFocus: textFieldFocus, onClick: textFieldClick, onChange: textFieldOnChange }))), [
             setAnchorElementRef,
             setInputElementRef,
             overridesMap,
+            multiple,
             placeholder,
             label,
             error,
@@ -354,7 +410,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             textFieldClick,
             textFieldOnChange,
         ]),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, alternativePlacements: alternativePlacements, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen, autofocus: false, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: 0, positionStrategy: positionStrategy, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onRequestClose: onRequestClose, closeOnSelect: !multiple, onSelectItem: onSelectMenuItem }, renderChildren)), [
+        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, overrides: MENU_OVERRIDES, anchorPos: anchorPos, alternativePlacements: alternativePlacements, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen, autofocus: false, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: 0, positionStrategy: positionStrategy, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onRequestClose: onRequestClose, closeOnSelect: !multiple, onSelectItem: onSelectMenuItem }, renderChildren)), [
             anchorPos,
             alternativePlacements,
             multiple,

package/Autocomplete/AutocompleteTagsInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextFieldInputProps } from '../TextField/TextFieldInput';
+export type AutocompleteTag = {
+    readonly key: React.Key;
+    readonly label: string;
+    readonly onDelete: () => void;
+};
+/**
+ * Selected items of the multiple <Autocomplete>.
+ * The input override must keep its identity between renders (otherwise the input is remounted
+ * and loses the focus), so the tags are passed through the context instead of the props
+ */
+export declare const AutocompleteTagsContext: React.Context<readonly AutocompleteTag[]>;
+declare const AutocompleteTagsInput: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export default AutocompleteTagsInput;

package/Autocomplete/AutocompleteTagsInput.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteTagsContext = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextFieldInput_1 = __importDefault(require("../TextField/TextFieldInput"));
+const Badge_1 = __importDefault(require("../Badge"));
+/**
+ * Selected items of the multiple <Autocomplete>.
+ * The input override must keep its identity between renders (otherwise the input is remounted
+ * and loses the focus), so the tags are passed through the context instead of the props
+ */
+exports.AutocompleteTagsContext = react_1.default.createContext([]);
+const Wrapper = styled_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  cursor: text;
+`;
+const Tag = (0, styled_1.default)(Badge_1.default) `
+  margin: 0.4em 0 0.4em 0.6em;
+  max-width: 100%;
+`;
+const Input = (0, styled_1.default)(TextFieldInput_1.default) `
+  flex: 1 1 6em;
+  min-width: 6em;
+  width: auto;
+`;
+const AutocompleteTagsInput = react_1.default.forwardRef((props, ref) => {
+    const tags = react_1.default.useContext(exports.AutocompleteTagsContext);
+    const inputRef = react_1.default.useRef(null);
+    const setRefs = react_1.default.useCallback((el) => {
+        inputRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    }, [ref]);
+    // A click on the tags area puts the caret into the input, as a click on a plain field does
+    const handleMouseDown = react_1.default.useCallback((event) => {
+        var _a;
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    return (react_1.default.createElement(Wrapper, { onMouseDown: handleMouseDown },
+        tags.map(tag => (react_1.default.createElement(Tag, { key: tag.key, variant: "outlined", color: "primary", onDelete: event => {
+                var _a;
+                // The input keeps the focus, so the menu is not closed by the blur
+                event.preventDefault();
+                tag.onDelete();
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            } }, tag.label))),
+        react_1.default.createElement(Input, Object.assign({}, props, { ref: setRefs }))));
+});
+AutocompleteTagsInput.displayName = 'AutocompleteTagsInput';
+exports.default = AutocompleteTagsInput;

package/Autocomplete/context.d.ts

@@ -22,6 +22,7 @@ export declare const createInitialState: <T, Multiple extends boolean | undefine
     readonly value: Value<T, Multiple> | null;
     readonly selectedItemToString: ItemToString<T, Multiple>;
     readonly isOpen?: boolean | undefined;
+    readonly multiple?: Multiple | undefined;
     readonly filterItems: FilterItems<T> | undefined;
 }) => State;
 interface ContextProviderProps {