@via-profit/ui-kit 0.2.1-alpha.3 → 0.2.3

package/Autocomplete/AutocompleteContainer.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { AutocompleteTextFieldProps } from './AutocompleteTextField';
+import { TextFieldProps } from '../TextField';
 import { PositionStrategy } from '../Popper';
 import { AnchorPos, GetOptionSelected, MenuItemProps, OnRequestClose, Value } from '../Menu';
-export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> extends Omit<AutocompleteTextFieldProps, 'value' | 'onChange' | 'children' | 'overrides'> {
+export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> extends Omit<TextFieldProps, 'value' | 'onChange' | 'children' | 'overrides'> {
     readonly items: readonly T[];
     readonly value: Value<T, Multiple>;
     /**
@@ -21,7 +21,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
     /**
      * Anchor position\
      * \
-     * Default: `bottom-fill`
+     * Default: `bottom`
      */
     readonly anchorPos?: AnchorPos;
     /**
@@ -43,6 +43,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * ```
      */
     readonly positionStrategy?: PositionStrategy;
+    readonly alternativePlacements?: readonly AnchorPos[];
     /**
      * Minimum distance (in pixels) that the popper must maintain from the viewport edges.
      * Used to prevent the popper from being positioned too close to the screen boundaries.
@@ -137,7 +138,7 @@ export interface AutocompleteOverrides {
     /**
      * Element wrapper
      */
-    readonly TextField?: React.ComponentType<AutocompleteTextFieldProps & React.RefAttributes<HTMLDivElement>>;
+    readonly TextField?: React.ComponentType<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type Children<T> = (data: {
     item: T;

package/Autocomplete/AutocompleteContainer.js

@@ -1,27 +1,4 @@
 "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)
@@ -38,26 +15,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
+const TextField_1 = __importDefault(require("../TextField"));
 const Button_1 = __importDefault(require("../Button"));
-const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
-const context_1 = __importStar(require("./context"));
+const LoadingIndicator_1 = require("../LoadingIndicator");
+const context_1 = require("./context");
 const IconClear_1 = __importDefault(require("./IconClear"));
 const ClickOutside_1 = require("../ClickOutside");
-const OverrideMenuList_1 = __importDefault(require("./OverrideMenuList"));
 const Menu_1 = __importDefault(require("../Menu"));
-//
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', openOnFocus = true, autoFlip, 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", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
-    const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
+    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);
     const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
     const itemsRef = react_1.default.useRef(items);
-    const { state, dispatch } = (0, context_1.default)();
-    const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = state;
+    const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = (0, context_1.useContextState)();
+    const dispatch = (0, context_1.useContextDispatch)();
     const overridesMap = react_1.default.useMemo(() => ({
-        TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || AutocompleteTextField_1.default,
+        TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || TextField_1.default,
     }), [overrides]);
     const clear = react_1.default.useCallback(() => {
         if (onChange) {
@@ -142,6 +116,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             ? itemList
             : filterItems(itemList, { query, inputValue });
     }, [filterItems]);
+    const renderChildren = react_1.default.useCallback(({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps), [children, inputValue]);
     /**
      * Only affected value change action
      */
@@ -168,20 +143,26 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         }
     }, [filteredItems]);
     react_1.default.useEffect(() => {
-        if (currentOpen !== isOpen || currentLoading !== isLoading) {
-            dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading }));
+        if (currentOpen !== isOpen) {
+            dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen }));
         }
-    }, [isOpen, isLoading, dispatch, currentOpen, currentLoading]);
+    }, [isOpen, currentOpen, dispatch]);
     react_1.default.useEffect(() => {
-        if (JSON.stringify(items) !== JSON.stringify(itemsRef.current)) {
-            itemsRef.current = items;
-            const newFilteredItems = applyFilterForItems(inputValue, items);
-            dispatch((0, context_1.actionSetPartial)({ filteredItems: newFilteredItems }));
-            if (!newFilteredItems.length) {
-                onRequestClose();
-            }
+        if (currentLoading !== isLoading) {
+            dispatch((0, context_1.actionSetPartial)({ currentLoading: isLoading }));
+        }
+    }, [isLoading, currentLoading, dispatch]);
+    react_1.default.useEffect(() => {
+        if (itemsRef.current === items) {
+            return;
+        }
+        itemsRef.current = items;
+        const newFilteredItems = applyFilterForItems(inputValue, items);
+        dispatch((0, context_1.actionSetPartial)({ filteredItems: newFilteredItems }));
+        if (!newFilteredItems.length && currentOpen) {
+            onRequestClose();
         }
-    }, [items, inputValue, applyFilterForItems, dispatch, onRequestClose]);
+    }, [items, inputValue, applyFilterForItems, dispatch, onRequestClose, currentOpen]);
     react_1.default.useEffect(() => {
         const mouseDownEvent = (event) => {
             var _a;
@@ -233,119 +214,137 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         inputValue,
         multiple,
     ]);
+    const onSelectMenuItem = react_1.default.useCallback(item => {
+        if (!multiple) {
+            dispatch({
+                type: 'setPartial',
+                payload: {
+                    filteredItems: applyFilterForItems(selectedItemToString(item), items),
+                },
+            });
+        }
+        if (typeof onChange === 'function') {
+            onChange(item);
+        }
+    }, [applyFilterForItems, dispatch, items, multiple, onChange, selectedItemToString]);
+    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)));
+        }
+        if (!clearable) {
+            return undefined;
+        }
+        return (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", variant: "plain", onClick: clear, "aria-label": "Clear" },
+            react_1.default.createElement(IconClear_1.default, null)));
+    }, [clear, clearable, currentLoading]);
+    const textFieldOnKeyDown = react_1.default.useCallback(event => {
+        inputKeydownEvent(event);
+        if (typeof nativeInputProps.onKeyDown === 'function') {
+            nativeInputProps.onKeyDown(event);
+        }
+    }, [inputKeydownEvent, nativeInputProps]);
+    const textFieldOnChange = react_1.default.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((0, context_1.actionSetPartial)({
+            filteredItems: newFilteredItems,
+            inputValue: event.currentTarget.value,
+        }));
+    }, [
+        applyFilterForItems,
+        currentOpen,
+        dispatch,
+        filteredItems.length,
+        items,
+        onInputChange,
+        onRequestClose,
+        onRequestOpen,
+        openOnFocus,
+    ]);
+    const textFieldClick = react_1.default.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_1.default.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_1.default.useCallback(event => {
+        isFocusedRef.current = false;
+        if (typeof nativeInputProps.onBlur === 'function') {
+            nativeInputProps.onBlur(event);
+        }
+    }, [nativeInputProps]);
+    const setAnchorElementRef = react_1.default.useCallback((el) => {
+        if (anchorElement !== el) {
+            dispatch((0, context_1.actionSetPartial)({ anchorElement: el }));
+        }
+    }, [anchorElement, dispatch]);
+    const inputRefRef = react_1.default.useRef(inputRef);
+    react_1.default.useEffect(() => {
+        inputRefRef.current = inputRef;
+    }, [inputRef]);
+    const setInputElementRef = react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, anchorPos: actualPlacement, isOpen: currentOpen, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: clearable ? (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", variant: "plain", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null))) : undefined }, nativeInputProps, { onKeyDown: event => {
-                inputKeydownEvent(event);
-                if (typeof nativeInputProps.onKeyDown === 'function') {
-                    nativeInputProps.onKeyDown(event);
-                }
-            }, ref: el => {
-                if (anchorElement !== el) {
-                    dispatch((0, context_1.actionSetPartial)({ anchorElement: el }));
-                }
-            }, inputRef: el => {
-                fieldInputRef.current = el;
-                if (typeof inputRef === 'function') {
-                    inputRef(el);
-                }
-                if (inputRef && typeof inputRef === 'object') {
-                    inputRef.current = el;
-                }
-            }, value: inputValue, onBlur: event => {
-                isFocusedRef.current = false;
-                if (typeof nativeInputProps.onBlur === 'function') {
-                    nativeInputProps.onBlur(event);
-                }
-            }, onFocus: event => {
-                isFocusedRef.current = true;
-                if (openOnFocus && !currentOpen && filteredItems.length > 0) {
-                    onRequestOpen(event);
-                }
-                // if (!openOnFocus && !currentOpen && inputValue !== '' && filteredItems.length > 0) {
-                //   onRequestOpen(event);
-                // }
-                if (typeof nativeInputProps.onFocus === 'function') {
-                    nativeInputProps.onFocus(event);
-                }
-            }, onClick: event => {
-                if (typeof nativeInputProps.onClick === 'function') {
-                    nativeInputProps.onClick(event);
-                }
-                if (isFocusedRef.current &&
-                    !currentOpen &&
-                    filteredItems.length > 0
-                // && inputValue.trim() !== ''
-                ) {
-                    onRequestOpen(event);
-                }
-            }, onChange: 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);
-                }
-                // console.debug('set filteredItems');
-                const newFilteredItems = applyFilterForItems(event.currentTarget.value, items);
-                if (newFilteredItems.length === 0 && currentOpen) {
-                    onRequestClose();
-                }
-                if (newFilteredItems.length > 0 && !currentOpen) {
-                    onRequestOpen(event);
-                }
-                dispatch((0, context_1.actionSetPartial)({
-                    filteredItems: newFilteredItems,
-                    inputValue: event.currentTarget.value,
-                }));
-            } }))), [
+        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 }))), [
+            setAnchorElementRef,
+            setInputElementRef,
             overridesMap,
             placeholder,
-            actualPlacement,
-            currentOpen,
             label,
             error,
             requiredAsterisk,
             errorText,
             fullWidth,
             startIcon,
-            currentLoading,
-            clearable,
+            endIconMemo,
             nativeInputProps,
+            textFieldOnKeyDown,
             inputValue,
-            clear,
-            inputKeydownEvent,
-            anchorElement,
-            dispatch,
-            inputRef,
-            openOnFocus,
-            filteredItems.length,
-            onRequestOpen,
-            onInputChange,
-            applyFilterForItems,
-            items,
-            onRequestClose,
+            textFieldBlur,
+            textFieldFocus,
+            textFieldClick,
+            textFieldOnChange,
         ]),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, onAnchorPosChanged: setActualPlacement, anchorPos: actualPlacement, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen, autofocus: false, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: 0, overrides: {
-                List: OverrideMenuList_1.default,
-            }, positionStrategy: positionStrategy, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onRequestClose: onRequestClose, closeOnSelect: !multiple, onSelectItem: item => {
-                if (!multiple) {
-                    dispatch({
-                        type: 'setPartial',
-                        payload: {
-                            filteredItems: applyFilterForItems(selectedItemToString(item), items),
-                        },
-                    });
-                }
-                if (typeof onChange === 'function') {
-                    onChange(item);
-                }
-            } }, ({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps))), [
-            actualPlacement,
+        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)), [
+            anchorPos,
+            alternativePlacements,
             multiple,
             filteredItems,
             currentValue,
@@ -356,13 +355,8 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             anchorElement,
             getOptionSelected,
             onRequestClose,
-            onChange,
-            dispatch,
-            applyFilterForItems,
-            selectedItemToString,
-            items,
-            children,
-            inputValue,
+            onSelectMenuItem,
+            renderChildren,
         ])));
 });
 Autocomplete.displayName = 'Autocomplete';

package/Autocomplete/AutocompleteItem.js

@@ -20,7 +20,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
 const StyeldMenuItem = (0, styled_1.default)(MenuItem_1.default, {
-    shouldForwardProp: p => !['$vatiant'].includes(p),
+    shouldForwardProp: p => !['variant'].includes(p),
 }) `
   ${({ $variant, theme }) => $variant === 'virtual' &&
     (0, react_2.css) `

package/Autocomplete/context.d.ts

@@ -29,8 +29,6 @@ interface ContextProviderProps {
     readonly initialState?: Partial<State>;
 }
 export declare const ContextProvider: React.FC<ContextProviderProps>;
-export declare const useContext: () => {
-    state: State;
-    dispatch: React.Dispatch<ActionSetPartial>;
-};
-export default useContext;
+export declare const useContextState: () => State;
+export declare const useContextDispatch: () => React.Dispatch<Action>;
+export {};

package/Autocomplete/context.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContext = exports.ContextProvider = exports.createInitialState = exports.reducer = exports.defaultState = exports.actionSetPartial = void 0;
+exports.useContextDispatch = exports.useContextState = exports.ContextProvider = exports.createInitialState = exports.reducer = exports.defaultState = exports.actionSetPartial = void 0;
 const react_1 = __importDefault(require("react"));
 const actionSetPartial = (payload) => ({
     type: 'setPartial',
@@ -41,22 +41,30 @@ const createInitialState = (params) => {
         inputValue, currentValue: value, currentOpen: Boolean(isOpen) });
 };
 exports.createInitialState = createInitialState;
-const context = react_1.default.createContext({
-    state: exports.defaultState,
-    dispatch: () => undefined,
-});
+const StateContext = react_1.default.createContext(exports.defaultState);
+const DispatchContext = react_1.default.createContext(() => undefined);
 const ContextProvider = props => {
     const { children, initialState } = props;
     const [state, dispatch] = react_1.default.useReducer(exports.reducer, Object.assign(Object.assign({}, exports.defaultState), initialState));
-    return react_1.default.createElement(context.Provider, { value: { state, dispatch } }, children);
+    const stateValue = react_1.default.useMemo(() => state, [state]);
+    const dispatchValue = react_1.default.useMemo(() => dispatch, []);
+    return (react_1.default.createElement(DispatchContext.Provider, { value: dispatchValue },
+        react_1.default.createElement(StateContext.Provider, { value: stateValue }, children)));
 };
 exports.ContextProvider = ContextProvider;
-const useContext = () => {
-    const { state, dispatch } = react_1.default.useContext(context);
-    return {
-        state,
-        dispatch,
-    };
+const useContextState = () => {
+    const context = react_1.default.useContext(StateContext);
+    if (context === undefined) {
+        throw new Error('useContextState must be used within a ContextProvider');
+    }
+    return context;
+};
+exports.useContextState = useContextState;
+const useContextDispatch = () => {
+    const context = react_1.default.useContext(DispatchContext);
+    if (context === undefined) {
+        throw new Error('useContextDispatch must be used within a ContextProvider');
+    }
+    return context;
 };
-exports.useContext = useContext;
-exports.default = exports.useContext;
+exports.useContextDispatch = useContextDispatch;