@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Accordion/AccordionHeader.js

@@ -0,0 +1,71 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import Chevron from './Chevron';
+import { themeFocusRing, themePadding } from '../ThemeProvider/tokens';
+const StyledHeader = styled.div `
+  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.button `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 1em;
+  width: 100%;
+  margin: 0;
+  /* The text of the header is aligned with the content */
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
+  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;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const HeaderCell = styled.span `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+`;
+const StyledChevron = styled(Chevron, { shouldForwardProp: p => p[0] !== '$' }) `
+  flex-shrink: 0;
+  color: ${({ theme }) => theme.color.accentSecondary.toString()};
+  transform: ${({ $isOpen }) => (!$isOpen ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.3s ease-out;
+`;
+const AccordionHeader = (props, ref) => {
+    const { children, isOpen, onOpen, headerID, contentID } = props, nativeProps = __rest(props, ["children", "isOpen", "onOpen", "headerID", "contentID"]);
+    return (React.createElement(StyledHeader, Object.assign({}, nativeProps, { ref: ref }),
+        React.createElement(HeaderButton, { type: "button", id: headerID, "aria-expanded": isOpen, "aria-controls": contentID, onClick: () => onOpen() },
+            React.createElement(HeaderCell, null, children),
+            React.createElement(StyledChevron, { "$isOpen": isOpen }))));
+};
+export default React.forwardRef(AccordionHeader);

package/esm/Accordion/Chevron.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const Path = styled.path `
+  fill: currentColor;
+`;
+const Chevron = (props, ref) => (React.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.createElement(Path, { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" })));
+export default React.forwardRef(Chevron);

package/esm/Accordion/index.js

@@ -0,0 +1,52 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import Container from './AccordionContainer';
+import Header from './AccordionHeader';
+import Content from './AccordionContent';
+import Actions from './AccordionActions';
+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 [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) || Container,
+        Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || Header,
+        Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || Content,
+        Actions: (overrides === null || overrides === void 0 ? void 0 : overrides.Actions) || Actions,
+    }), [overrides]);
+    // 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: 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))));
+};
+export default React.forwardRef(Accordion);

package/esm/Autocomplete/AutocompleteContainer.js

@@ -0,0 +1,403 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import TextField from '../TextField';
+import Button from '../Button';
+import Spinner from '../LoadingIndicator/Spinner';
+import { actionSetPartial, useContextDispatch, useContextState } from './context';
+import IconClear from './IconClear';
+import AutocompleteTagsInput, { AutocompleteTagsContext, } from './AutocompleteTagsInput';
+import { mouseEventMap } from '../ClickOutside';
+import Menu, { MenuList, } from '../Menu';
+// Module level, so the input keeps its identity between renders and does not lose the focus
+const MULTIPLE_TEXT_FIELD_OVERRIDES = { Input: AutocompleteTagsInput };
+// The list must not take the focus on a click: the user keeps typing in the field
+const AutocompleteMenuList = React.forwardRef((props, ref) => (React.createElement(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.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.useRef(null);
+    const fieldInputRef = React.useRef(null);
+    const isFocusedRef = React.useRef(false);
+    const itemsRef = React.useRef(items);
+    const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = useContextState();
+    const dispatch = useContextDispatch();
+    const overridesMap = React.useMemo(() => ({
+        TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || TextField,
+    }), [overrides]);
+    const clear = React.useCallback(() => {
+        if (onChange) {
+            onChange((multiple ? [] : null));
+        }
+        dispatch(actionSetPartial({
+            filteredItems: items,
+            inputValue: '',
+        }));
+        setTimeout(() => {
+            var _a;
+            (_a = fieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 15);
+    }, [dispatch, onChange, items, multiple]);
+    /**
+     * API
+     */
+    React.useImperativeHandle(ref, () => ({
+        clear: () => clear(),
+    }), [clear]);
+    const applyFilterForItems = React.useCallback((inputValue, itemList) => {
+        const query = inputValue.toLowerCase().trim();
+        // Apply filter
+        return typeof filterItems !== 'function' || query.length === 0
+            ? itemList
+            : filterItems(itemList, { query, inputValue });
+    }, [filterItems]);
+    /**
+     * Restore the input text from the current value (used by clearOnBlur)
+     */
+    const restoreInputValue = React.useCallback(() => {
+        // 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(actionSetPartial({
+            filteredItems: newFilteredItems,
+            inputValue: newInputValue,
+        }));
+    }, [currentValue, selectedItemToString, multiple, applyFilterForItems, items, dispatch]);
+    const inputKeydownEvent = React.useCallback((event) => {
+        var _a, _b, _c, _d, _e;
+        if (!isFocusedRef.current) {
+            return;
+        }
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                if (currentOpen) {
+                    event.preventDefault();
+                    (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHighlightedItem();
+                }
+                break;
+            case 'ArrowUp':
+                {
+                    event.preventDefault();
+                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.highlightPrevItem();
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    event.preventDefault();
+                    if (!currentOpen && filteredItems.length > 0) {
+                        onRequestOpen(event);
+                    }
+                    if (currentOpen) {
+                        (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.highlightNextItem();
+                    }
+                }
+                break;
+            case 'Home':
+                {
+                    event.preventDefault();
+                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.highlightFirstItem();
+                }
+                break;
+            case 'End':
+                {
+                    event.preventDefault();
+                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.highlightLastItem();
+                }
+                break;
+            // case 'PageUp':
+            // 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) {
+                    restoreInputValue();
+                }
+                if (currentOpen) {
+                    onRequestClose(event);
+                }
+                break;
+            case 'Escape':
+                if (currentOpen) {
+                    onRequestClose(event);
+                }
+                break;
+            default:
+                // do nothing
+                break;
+        }
+    }, [
+        currentOpen,
+        onRequestClose,
+        onRequestOpen,
+        filteredItems.length,
+        clearOnBlur,
+        restoreInputValue,
+        multiple,
+        currentValue,
+        onChange,
+    ]);
+    const renderChildren = React.useCallback(({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps), [children, inputValue]);
+    /**
+     * Only affected value change action
+     */
+    React.useEffect(() => {
+        if (value === currentValue) {
+            return;
+        }
+        // With multiple the selected items are shown as tags and the search text is kept
+        dispatch(actionSetPartial(multiple
+            ? { currentValue: value }
+            : {
+                currentValue: value,
+                inputValue: value === null ? '' : selectedItemToString(value),
+            }));
+    }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
+    React.useEffect(() => {
+        if (currentOpen && menuRef.current) {
+            menuRef.current.scrollToFirstSelected();
+        }
+    }, [currentOpen]);
+    React.useEffect(() => {
+        var _a;
+        if (filteredItems.length === 1) {
+            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(0);
+        }
+    }, [filteredItems]);
+    React.useEffect(() => {
+        if (currentOpen !== isOpen) {
+            dispatch(actionSetPartial({ currentOpen: isOpen }));
+        }
+    }, [isOpen, currentOpen, dispatch]);
+    React.useEffect(() => {
+        if (currentLoading !== isLoading) {
+            dispatch(actionSetPartial({ currentLoading: isLoading }));
+        }
+    }, [isLoading, currentLoading, dispatch]);
+    React.useEffect(() => {
+        if (itemsRef.current === items) {
+            return;
+        }
+        itemsRef.current = items;
+        const newFilteredItems = applyFilterForItems(inputValue, items);
+        dispatch(actionSetPartial({ filteredItems: newFilteredItems }));
+        if (!newFilteredItems.length && currentOpen) {
+            onRequestClose();
+        }
+    }, [items, inputValue, applyFilterForItems, dispatch, onRequestClose, currentOpen]);
+    React.useEffect(() => {
+        const mouseDownEvent = (event) => {
+            var _a;
+            let parentElem = event.target;
+            let needToClose = true;
+            while (parentElem && 'parentNode' in parentElem) {
+                if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
+                    needToClose = false;
+                    break;
+                }
+                parentElem = parentElem.parentNode;
+            }
+            // 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();
+                }
+                if (isOpen) {
+                    onRequestClose(event);
+                }
+            }
+        };
+        window.document.addEventListener(mouseEventMap.onMouseDown, mouseDownEvent);
+        return () => {
+            window.document.removeEventListener(mouseEventMap.onMouseDown, mouseDownEvent);
+        };
+    }, [onRequestClose, anchorElement, isOpen, clearOnBlur, currentOpen, restoreInputValue]);
+    const onSelectMenuItem = React.useCallback(item => {
+        dispatch(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);
+        }
+    }, [applyFilterForItems, dispatch, items, multiple, onChange, selectedItemToString]);
+    const endIconMemo = React.useMemo(() => {
+        if (currentLoading) {
+            return (React.createElement(Button, { iconOnly: true, type: "button", variant: "plain", disabled: true },
+                React.createElement(Spinner, { size: "1.2em" })));
+        }
+        if (!clearable) {
+            return undefined;
+        }
+        return (React.createElement(Button, { iconOnly: true, type: "button", variant: "plain", onClick: clear, "aria-label": "Clear" },
+            React.createElement(IconClear, null)));
+    }, [clear, clearable, currentLoading]);
+    const textFieldOnKeyDown = React.useCallback(event => {
+        inputKeydownEvent(event);
+        if (typeof nativeInputProps.onKeyDown === 'function') {
+            nativeInputProps.onKeyDown(event);
+        }
+    }, [inputKeydownEvent, nativeInputProps]);
+    const textFieldOnChange = React.useCallback(event => {
+        if (typeof onInputChange === 'function') {
+            onInputChange(event);
+        }
+        // If openOnFocus is false, but value is not empty
+        // we should open menu list if is not opened
+        if (!openOnFocus && isFocusedRef.current && !currentOpen && filteredItems.length > 0) {
+            onRequestOpen(event);
+        }
+        const newFilteredItems = applyFilterForItems(event.currentTarget.value, items);
+        if (newFilteredItems.length === 0 && currentOpen) {
+            onRequestClose();
+        }
+        if (newFilteredItems.length > 0 && !currentOpen) {
+            onRequestOpen(event);
+        }
+        dispatch(actionSetPartial({
+            filteredItems: newFilteredItems,
+            inputValue: event.currentTarget.value,
+        }));
+    }, [
+        applyFilterForItems,
+        currentOpen,
+        dispatch,
+        filteredItems.length,
+        items,
+        onInputChange,
+        onRequestClose,
+        onRequestOpen,
+        openOnFocus,
+    ]);
+    const textFieldClick = React.useCallback(event => {
+        if (typeof nativeInputProps.onClick === 'function') {
+            nativeInputProps.onClick(event);
+        }
+        if (isFocusedRef.current &&
+            !currentOpen &&
+            filteredItems.length > 0
+        // && inputValue.trim() !== ''
+        ) {
+            onRequestOpen(event);
+        }
+    }, [currentOpen, filteredItems.length, nativeInputProps, onRequestOpen]);
+    const textFieldFocus = React.useCallback(event => {
+        isFocusedRef.current = true;
+        if (openOnFocus && !currentOpen && filteredItems.length > 0) {
+            onRequestOpen(event);
+        }
+        if (typeof nativeInputProps.onFocus === 'function') {
+            nativeInputProps.onFocus(event);
+        }
+    }, [currentOpen, filteredItems.length, nativeInputProps, onRequestOpen, openOnFocus]);
+    const textFieldBlur = React.useCallback(event => {
+        isFocusedRef.current = false;
+        if (typeof nativeInputProps.onBlur === 'function') {
+            nativeInputProps.onBlur(event);
+        }
+    }, [nativeInputProps]);
+    const setAnchorElementRef = React.useCallback((el) => {
+        if (anchorElement !== el) {
+            dispatch(actionSetPartial({ anchorElement: el }));
+        }
+    }, [anchorElement, dispatch]);
+    const tags = React.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.useRef(inputRef);
+    React.useEffect(() => {
+        inputRefRef.current = inputRef;
+    }, [inputRef]);
+    const setInputElementRef = React.useCallback((el) => {
+        fieldInputRef.current = el;
+        const currentInputRef = inputRefRef.current;
+        if (typeof currentInputRef === 'function') {
+            currentInputRef(el);
+        }
+        else if (currentInputRef && typeof currentInputRef === 'object') {
+            currentInputRef.current = el;
+        }
+    }, []);
+    return (React.createElement(AutocompleteTagsContext.Provider, { value: tags },
+        React.useMemo(() => (React.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,
+            requiredAsterisk,
+            errorText,
+            fullWidth,
+            startIcon,
+            endIconMemo,
+            nativeInputProps,
+            textFieldOnKeyDown,
+            inputValue,
+            textFieldBlur,
+            textFieldFocus,
+            textFieldClick,
+            textFieldOnChange,
+        ]),
+        React.useMemo(() => (React.createElement(Menu, { 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,
+            filteredItems,
+            currentValue,
+            currentOpen,
+            autoFlip,
+            viewportMargin,
+            positionStrategy,
+            anchorElement,
+            getOptionSelected,
+            onRequestClose,
+            onSelectMenuItem,
+            renderChildren,
+        ])));
+});
+Autocomplete.displayName = 'Autocomplete';
+export default Autocomplete;

package/esm/Autocomplete/AutocompleteItem.js

@@ -0,0 +1,39 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import MenuItem from '../Menu/MenuItem';
+import { BORDER_WIDTH } from '../ThemeProvider/tokens';
+const StyeldMenuItem = styled(MenuItem, {
+    shouldForwardProp: p => !['variant'].includes(p),
+}) `
+  ${({ $variant, theme }) => $variant === 'virtual' &&
+    css `
+      background-color: ${theme.color.accentPrimary.alpha(0.1).toString()};
+      border-color: ${theme.color.accentPrimary.toString()};
+      color: ${theme.color.textPrimary.toString()};
+      border-style: dashed;
+      border-width: ${BORDER_WIDTH};
+
+      :hover {
+        background-color: ${theme.color.accentPrimary.toString()};
+        color: ${theme.color.accentPrimaryContrast.toString()};
+      }
+    `}
+`;
+const AutocompleteItemWithRef = (props, ref) => {
+    const { variant = 'standard', children } = props, restMenuItemProps = __rest(props, ["variant", "children"]);
+    return (React.createElement(StyeldMenuItem, Object.assign({}, restMenuItemProps, { "$variant": variant, ref: ref }), children));
+};
+export const AutocompleteItem = React.forwardRef(AutocompleteItemWithRef);
+export default AutocompleteItem;

package/esm/Autocomplete/AutocompleteTagsInput.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import TextFieldInput from '../TextField/TextFieldInput';
+import Badge from '../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
+ */
+export const AutocompleteTagsContext = React.createContext([]);
+const Wrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  cursor: text;
+`;
+const Tag = styled(Badge) `
+  margin: 0.4em 0 0.4em 0.6em;
+  max-width: 100%;
+`;
+const Input = styled(TextFieldInput) `
+  flex: 1 1 6em;
+  min-width: 6em;
+  width: auto;
+`;
+const AutocompleteTagsInput = React.forwardRef((props, ref) => {
+    const tags = React.useContext(AutocompleteTagsContext);
+    const inputRef = React.useRef(null);
+    const setRefs = React.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.useCallback((event) => {
+        var _a;
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    return (React.createElement(Wrapper, { onMouseDown: handleMouseDown },
+        tags.map(tag => (React.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.createElement(Input, Object.assign({}, props, { ref: setRefs }))));
+});
+AutocompleteTagsInput.displayName = 'AutocompleteTagsInput';
+export default AutocompleteTagsInput;

package/esm/Autocomplete/IconClear.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const IconClear = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
+    React.createElement("path", { d: "m139.86 128.54a16 16 0 0 0-7.1738 4.1406 16 16 0 0 0 0 22.629l100.69 100.69-100.69 100.69a16 16 0 0 0 0 22.629 16 16 0 0 0 22.629 0l100.69-100.69 100.69 100.69a16 16 0 0 0 22.629 0 16 16 0 0 0 0-22.629l-100.69-100.69 100.69-100.69a16 16 0 0 0 0-22.629 16 16 0 0 0-22.629 0l-100.69 100.69-100.69-100.69a16 16 0 0 0-15.455-4.1406z", fill: "currentColor" })));
+export default React.forwardRef(IconClear);