@via-profit/ui-kit 0.3.0 → 0.5.0

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,38 @@
+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';
+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: 0.02em;
+
+      :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);

package/esm/Autocomplete/context.js

@@ -0,0 +1,58 @@
+import React from 'react';
+export const actionSetPartial = (payload) => ({
+    type: 'setPartial',
+    payload,
+});
+export const defaultState = {
+    currentOpen: false,
+    currentLoading: false,
+    anchorElement: null,
+    filteredItems: [],
+    currentValue: null,
+    inputValue: '',
+};
+export const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setPartial':
+            return Object.assign(Object.assign({}, state), action.payload);
+        default:
+            return state;
+    }
+};
+export const createInitialState = (params) => {
+    const { filterItems, isOpen, items, selectedItemToString, value, multiple } = params;
+    // With multiple the field holds only the search text, the selected items are tags
+    const inputValue = multiple || value == null ? '' : selectedItemToString(value);
+    const data = {
+        inputValue: inputValue,
+        query: inputValue.trim().toLocaleLowerCase(),
+    };
+    // As while typing: an empty query shows all the items
+    const filteredItems = filterItems && data.query !== '' ? filterItems(items, data) : items;
+    return Object.assign(Object.assign({}, defaultState), { filteredItems,
+        inputValue, currentValue: value, currentOpen: Boolean(isOpen) });
+};
+const StateContext = React.createContext(defaultState);
+const DispatchContext = React.createContext(() => undefined);
+export const ContextProvider = props => {
+    const { children, initialState } = props;
+    const [state, dispatch] = React.useReducer(reducer, Object.assign(Object.assign({}, defaultState), initialState));
+    const stateValue = React.useMemo(() => state, [state]);
+    const dispatchValue = React.useMemo(() => dispatch, []);
+    return (React.createElement(DispatchContext.Provider, { value: dispatchValue },
+        React.createElement(StateContext.Provider, { value: stateValue }, children)));
+};
+export const useContextState = () => {
+    const context = React.useContext(StateContext);
+    if (context === undefined) {
+        throw new Error('useContextState must be used within a ContextProvider');
+    }
+    return context;
+};
+export const useContextDispatch = () => {
+    const context = React.useContext(DispatchContext);
+    if (context === undefined) {
+        throw new Error('useContextDispatch must be used within a ContextProvider');
+    }
+    return context;
+};

package/esm/Autocomplete/index.js

@@ -0,0 +1,32 @@
+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 AutocompleteContainer from './AutocompleteContainer';
+import { ContextProvider, createInitialState } from './context';
+export * from './AutocompleteContainer';
+export * from './AutocompleteItem';
+const Autocomplete = React.forwardRef((props, ref) => {
+    const { children, items, filterItems, isOpen, multiple, selectedItemToString, value } = props, restProps = __rest(props, ["children", "items", "filterItems", "isOpen", "multiple", "selectedItemToString", "value"]);
+    // The initial state is used only on mount, so do not recompute it (and run filterItems) on every render
+    const [initialState] = React.useState(() => createInitialState({
+        items,
+        selectedItemToString,
+        filterItems,
+        value,
+        isOpen,
+        multiple,
+    }));
+    return (React.createElement(ContextProvider, { initialState: initialState },
+        React.createElement(AutocompleteContainer, Object.assign({}, restProps, { items: items, filterItems: filterItems, isOpen: isOpen, multiple: multiple, selectedItemToString: selectedItemToString, value: value, ref: ref }), children)));
+});
+Autocomplete.displayName = 'Autocomplete';
+export default Autocomplete;

package/esm/Avatar/AvatarBase.js

@@ -0,0 +1,30 @@
+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 IconWrapper from './AvatarIconWrapper';
+import TextWrapper from './AvatarTextWrapper';
+import Container from './AvatarContainer';
+import Picture from './AvatarPicture';
+import AvatarOnlineBadge from './AvatarOnlineBadge';
+const AvatarBase = (props, ref) => {
+    const { children, src, color, alt, variant, overrides, isOnline } = props, nativeProps = __rest(props, ["children", "src", "color", "alt", "variant", "overrides", "isOnline"]);
+    const overridesMap = React.useMemo(() => (Object.assign({ TextWrapper,
+        IconWrapper,
+        Container,
+        Picture }, overrides)), [overrides]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
+        typeof src !== 'undefined' && src !== null && (src === null || src === void 0 ? void 0 : src.length) !== 0 && (React.createElement(overridesMap.IconWrapper, null,
+            React.createElement(overridesMap.Picture, { src: src, variant: variant, alt: alt }))),
+        (!src || src === null || (src === null || src === void 0 ? void 0 : src.length) === 0) && (React.createElement(overridesMap.TextWrapper, null, children)),
+        isOnline && React.createElement(AvatarOnlineBadge, null)));
+};
+export default React.forwardRef(AvatarBase);

package/esm/Avatar/AvatarContainer.js

@@ -0,0 +1,34 @@
+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';
+const StyledAvatar = styled.span `
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  position: relative;
+  width: ${({ $size }) => $size || '2.5em'};
+  height: ${({ $size }) => $size || '2.5em'};
+  display: inline-flex;
+  align-items: center;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+`;
+const AvatarContainer = (props, ref) => {
+    // The color is applied by <Avatar>, it must not reach the DOM as an attribute
+    const { children, size, color } = props, nativeProps = __rest(props, ["children", "size", "color"]);
+    return (React.createElement(StyledAvatar, Object.assign({}, nativeProps, { "$size": size, ref: ref }), children));
+};
+export default React.forwardRef(AvatarContainer);