@via-profit/ui-kit 0.2.2 → 0.2.3

package/Menu/MenuContainer.js

@@ -32,116 +32,105 @@ const MenuList_1 = __importDefault(require("./MenuList"));
 const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
 const onRequestCloseDefault = () => undefined;
+const isEqual = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+        return false;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
+};
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, isOpen = false, anchorPos = 'bottom', positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, } = props;
-    const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
+    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = props;
+    // const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
+    const [currentAnchorElement, setAnchorElement] = react_1.default.useState(anchorElement);
     const overridesMap = react_1.default.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || MenuList_1.default,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper_1.default,
-    }), [overrides]);
-    const getSelectedIndexes = react_1.default.useCallback(() => {
-        const idx = new Set();
-        if (value !== null) {
-            if (typeof getOptionSelected === 'function') {
-                if (multiple) {
-                    value.forEach(v => {
-                        idx.add(items.findIndex(item => getOptionSelected({ item, value: v })));
-                    });
-                }
-                else {
-                    idx.add(items.findIndex(item => getOptionSelected({ item, value: value })));
-                }
-            }
-            else {
-                if (multiple) {
-                    value.forEach(v => {
-                        idx.add(items.findIndex(item => JSON.stringify(item) === JSON.stringify(v)));
-                    });
-                }
-                else {
-                    idx.add(items.findIndex(item => JSON.stringify(item) === JSON.stringify(value)));
-                }
-            }
-        }
-        return [...idx];
-    }, [getOptionSelected, items, multiple, value]);
-    const [currentAnchorElement, setAnchorElement] = react_1.default.useState(anchorElement);
-    const isOpenRef = react_1.default.useRef(isOpen);
+    }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper]);
     const menuListRef = react_1.default.useRef(null);
     const menuPopperRef = react_1.default.useRef(null);
+    const isOpenRef = react_1.default.useRef(isOpen);
+    const focusTimeoutRef = react_1.default.useRef();
     const { dispatch, state: { selectedIndexes, markedIndex, hoveredIndex }, } = (0, context_1.default)();
     const selectedIndexesRef = react_1.default.useRef(selectedIndexes);
-    const timeoutRef = react_1.default.useRef(null);
+    // Оптимизированная функция получения выбранных индексов
+    const getSelectedIndexes = react_1.default.useCallback(() => {
+        if (value === null || (multiple && value.length === 0)) {
+            return [];
+        }
+        const indexes = [];
+        const compareFunc = getOptionSelected
+            ? (item, val) => getOptionSelected({ item, value: val })
+            : (item, val) => isEqual(item, val);
+        if (multiple) {
+            const valueArray = value;
+            items.forEach((item, index) => {
+                if (valueArray.some(val => compareFunc(item, val))) {
+                    indexes.push(index);
+                }
+            });
+        }
+        else {
+            const singleValue = value;
+            const index = items.findIndex(item => compareFunc(item, singleValue));
+            if (index !== -1) {
+                indexes.push(index);
+            }
+        }
+        return indexes;
+    }, [items, value, multiple, getOptionSelected]);
     const scrollToIndex = react_1.default.useCallback((index) => {
-        var _a;
-        const option = (_a = menuListRef === null || menuListRef === void 0 ? void 0 : menuListRef.current) === null || _a === void 0 ? void 0 : _a.children[index];
-        if (option) {
-            option.scrollIntoView({
-                behavior: 'auto',
-                block: 'nearest',
+        if (index === -1) {
+            return;
+        }
+        const container = menuListRef.current;
+        const option = container === null || container === void 0 ? void 0 : container.children[index];
+        if (container && option) {
+            const containerRect = container.getBoundingClientRect();
+            const optionRect = option.getBoundingClientRect();
+            const scrollOffset = optionRect.top - containerRect.top + container.scrollTop;
+            container.scrollTo({
+                top: scrollOffset,
+                behavior: 'instant'
             });
         }
     }, []);
-    react_1.default.useEffect(() => {
-        let timeout;
-        const recalc = () => {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-            timeout = setTimeout(() => {
-                if (anchorElement) {
-                    // calculateElementPos();
-                }
-            }, 300);
-        };
-        window.addEventListener('resize', recalc);
-        window.addEventListener('scroll', recalc);
-        recalc();
-        return () => {
-            window.removeEventListener('resize', recalc);
-            window.removeEventListener('scroll', recalc);
-        };
-    }, [anchorElement, isOpen]);
-    /**
-     * Scroll to first of selected item
-     */
     const scrollToFirstSelected = react_1.default.useCallback(() => {
-        const indexes = [...selectedIndexes];
-        // Sort array of indexes by DESC and get the index
-        const index = indexes.length ? [...indexes.sort()][0] : -1;
-        dispatch({
-            type: 'setMenuState',
-            payload: {
-                markedIndex: index,
-            },
-        });
-        scrollToIndex(index);
+        if (selectedIndexes.length === 0)
+            return;
+        const firstSelectedIndex = Math.min(...selectedIndexes);
+        dispatch((0, context_1.actionSetmenuState)({ markedIndex: firstSelectedIndex }));
+        scrollToIndex(firstSelectedIndex);
     }, [dispatch, selectedIndexes, scrollToIndex]);
-    /**
-     * Select specified item by index
-     */
     const selectItem = react_1.default.useCallback((index) => {
+        if (index < 0 || index >= items.length)
+            return;
         const item = items[index];
-        if (!item) {
+        if (!item)
             return;
-        }
         if (typeof onSelectItem === 'function') {
-            // For multiple
             if (multiple) {
-                const selectedMap = new Map();
+                // Для multiple режима
+                const selectedSet = new Set();
                 if (value !== null) {
-                    value.forEach(v => selectedMap.set(JSON.stringify(v), v));
+                    value.forEach(v => selectedSet.add(v));
                 }
                 if (selectedIndexes.includes(index)) {
-                    selectedMap.delete(JSON.stringify(item));
+                    selectedSet.delete(item);
                 }
-                if (!selectedIndexes.includes(index)) {
-                    selectedMap.set(JSON.stringify(item), item);
+                else {
+                    selectedSet.add(item);
                 }
-                onSelectItem(Array.from(selectedMap, ([_key, v]) => v));
+                onSelectItem(Array.from(selectedSet));
             }
             else {
-                // For single
+                // Для single режима
                 onSelectItem(item);
             }
             if (closeOnSelect) {
@@ -149,232 +138,194 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             }
         }
     }, [onSelectItem, onRequestClose, selectedIndexes, closeOnSelect, items, value, multiple]);
-    /**
-     * Highlight specified item by index
-     */
     const highlightIndex = react_1.default.useCallback((index) => {
-        dispatch((0, context_1.actionSetmenuState)({ markedIndex: items[index] ? index : -1 }));
-        scrollToIndex(index);
-    }, [dispatch, items, scrollToIndex]);
-    const hightlightPrevItem = react_1.default.useCallback(() => {
-        const index = Math.max(markedIndex - 1, 0);
-        highlightIndex(index);
-        scrollToIndex(index);
-    }, [markedIndex, highlightIndex, scrollToIndex]);
-    const hightlightNextItem = react_1.default.useCallback(() => {
-        const index = Math.min(markedIndex + 1, items.length);
-        highlightIndex(index);
-        scrollToIndex(index);
-    }, [markedIndex, items.length, highlightIndex, scrollToIndex]);
-    const hightlightFirstItem = react_1.default.useCallback(() => {
-        const index = 0;
-        highlightIndex(index);
-        scrollToIndex(index);
-    }, [highlightIndex, scrollToIndex]);
-    const hightlightLastItem = react_1.default.useCallback(() => {
-        const index = items.length - 1;
-        highlightIndex(index);
-        scrollToIndex(index);
-    }, [highlightIndex, scrollToIndex, items.length]);
-    const selectHightlightedItem = react_1.default.useCallback(() => {
-        if (markedIndex > -1) {
+        const validIndex = Math.max(-1, Math.min(index, items.length - 1));
+        if (validIndex !== markedIndex) {
+            dispatch((0, context_1.actionSetmenuState)({ markedIndex: validIndex }));
+            scrollToIndex(validIndex);
+        }
+    }, [dispatch, items.length, markedIndex, scrollToIndex]);
+    const highlightPrevItem = react_1.default.useCallback(() => {
+        const newIndex = markedIndex - 1;
+        highlightIndex(newIndex >= 0 ? newIndex : 0);
+    }, [markedIndex, highlightIndex]);
+    const highlightNextItem = react_1.default.useCallback(() => {
+        const newIndex = markedIndex + 1;
+        highlightIndex(newIndex < items.length ? newIndex : items.length - 1);
+    }, [markedIndex, items.length, highlightIndex]);
+    const highlightFirstItem = react_1.default.useCallback(() => {
+        highlightIndex(0);
+    }, [highlightIndex]);
+    const highlightLastItem = react_1.default.useCallback(() => {
+        highlightIndex(items.length - 1);
+    }, [highlightIndex, items.length]);
+    const selectHighlightedItem = react_1.default.useCallback(() => {
+        if (markedIndex > -1 && markedIndex < items.length) {
             selectItem(markedIndex);
         }
-    }, [markedIndex, selectItem]);
-    /**
-     * API
-     */
+    }, [markedIndex, selectItem, items.length]);
+    // API ref
     react_1.default.useImperativeHandle(ref, () => ({
         focus: () => { var _a; return (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         scrollToIndex: (idx) => scrollToIndex(idx),
         highlightIndex: (idx) => highlightIndex(idx),
-        highlightPrevItem: () => hightlightPrevItem(),
-        highlightNextItem: () => hightlightNextItem(),
-        highlightFirstItem: () => hightlightFirstItem(),
-        highlightLastItem: () => hightlightLastItem(),
+        highlightPrevItem: () => highlightPrevItem(),
+        highlightNextItem: () => highlightNextItem(),
+        highlightFirstItem: () => highlightFirstItem(),
+        highlightLastItem: () => highlightLastItem(),
         scrollToFirstSelected: () => scrollToFirstSelected(),
-        selectHighlightedItem: () => selectHightlightedItem(),
+        selectHighlightedItem: () => selectHighlightedItem(),
         selectItem: (idx) => selectItem(idx),
         getListElement: () => menuListRef.current,
-        setActualPlacement: placement => setActualPlacement(placement),
+        // setActualPlacement: placement => setActualPlacement(placement),
     }), [
         scrollToIndex,
         highlightIndex,
-        hightlightPrevItem,
-        hightlightNextItem,
-        hightlightFirstItem,
-        hightlightLastItem,
-        selectHightlightedItem,
+        highlightPrevItem,
+        highlightNextItem,
+        highlightFirstItem,
+        highlightLastItem,
+        selectHighlightedItem,
         scrollToFirstSelected,
         selectItem,
     ]);
-    /**
-     * Update achnor
-     */
+    // Обновление anchor элемента
     react_1.default.useEffect(() => {
         if (anchorElement !== currentAnchorElement) {
             setAnchorElement(anchorElement);
         }
     }, [anchorElement, currentAnchorElement]);
-    /**
-     * Keyboard events of menu list container.
-     * Note: Moved selection up and down while keys pressed
-     */
+    // Обработчик клавиатуры
     const listKeydownEvent = react_1.default.useCallback((event) => {
         switch (event.code) {
             case 'Enter':
             case 'NumpadEnter':
-            case 'Tab':
                 event.preventDefault();
-                if (markedIndex > -1) {
+                if (markedIndex > -1 && markedIndex < items.length) {
                     selectItem(markedIndex);
                 }
                 break;
             case 'ArrowUp':
-                {
-                    event.preventDefault();
-                    hightlightPrevItem();
-                }
+                event.preventDefault();
+                highlightPrevItem();
                 break;
             case 'ArrowDown':
-                {
-                    event.preventDefault();
-                    hightlightNextItem();
-                }
+                event.preventDefault();
+                highlightNextItem();
                 break;
             case 'Home':
-                {
-                    event.preventDefault();
-                    hightlightFirstItem();
-                }
+                event.preventDefault();
+                highlightFirstItem();
                 break;
             case 'End':
-                {
-                    event.preventDefault();
-                    hightlightLastItem();
-                }
-                break;
-            case 'PageUp':
-            case 'PageDown':
-            case 'Space':
                 event.preventDefault();
+                highlightLastItem();
                 break;
             case 'Escape':
                 event.preventDefault();
                 onRequestClose(event);
                 break;
             default:
-                // do nothing
                 break;
         }
     }, [
         markedIndex,
-        onRequestClose,
+        items.length,
         selectItem,
-        hightlightPrevItem,
-        hightlightNextItem,
-        hightlightFirstItem,
-        hightlightLastItem,
+        highlightPrevItem,
+        highlightNextItem,
+        highlightFirstItem,
+        highlightLastItem,
+        onRequestClose,
     ]);
+    // Управление открытием/закрытием меню
     react_1.default.useEffect(() => {
-        const timeoutID = timeoutRef.current;
-        return () => {
-            if (timeoutID) {
-                clearTimeout(timeoutID);
-            }
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        const windowResizeEvent = (_event) => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-        window.document.addEventListener('resize', windowResizeEvent);
-        return () => {
-            window.document.removeEventListener('resize', windowResizeEvent);
-        };
-    }, [isOpen, onRequestClose, anchorElement, closeOutsideClick]);
-    /**
-     * Toggle menu open
-     */
-    react_1.default.useEffect(() => {
-        if (isOpenRef.current !== isOpen) {
-            isOpenRef.current = Boolean(isOpen);
-            // setMenuOpen(Boolean(isOpen));
-            if (!isOpen) {
-                onRequestClose();
-            }
-            if (isOpen) {
-                scrollToFirstSelected();
-                if (autofocus) {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    }, 15);
-                }
-            }
-            // Reset indexes
-            if (!isOpen) {
-                // listVirtRef.current?.scrollToIndex(0);
-                dispatch((0, context_1.actionSetmenuState)({ markedIndex: -1, hoveredIndex: -1 }));
+        if (isOpenRef.current === isOpen)
+            return;
+        isOpenRef.current = isOpen;
+        if (!isOpen) {
+            onRequestClose();
+            dispatch((0, context_1.actionSetmenuState)({ markedIndex: -1, hoveredIndex: -1 }));
+            return;
+        }
+        // При открытии
+        scrollToFirstSelected();
+        if (autofocus) {
+            // Очищаем предыдущий таймаут
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
             }
+            focusTimeoutRef.current = setTimeout(() => {
+                var _a;
+                (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 15);
         }
-    }, [getSelectedIndexes, scrollToFirstSelected, isOpen, autofocus, dispatch, onRequestClose]);
-    /**
-     * Mark selected items by values
-     */
+    }, [isOpen, autofocus, dispatch, onRequestClose, scrollToFirstSelected]);
+    // Обновление выбранных индексов
     react_1.default.useEffect(() => {
         const indexes = getSelectedIndexes();
-        // If elements in selectedIndexesRef and indexes are not equal
-        if (!(selectedIndexesRef.current.length === indexes.length &&
-            selectedIndexesRef.current.every(value => indexes.includes(value)))) {
+        // Сравниваем массивы эффективно
+        const hasChanged = selectedIndexesRef.current.length !== indexes.length ||
+            selectedIndexesRef.current.some((value, idx) => value !== indexes[idx]);
+        if (hasChanged) {
             selectedIndexesRef.current = indexes;
             dispatch({
                 type: 'setMenuState',
-                payload: {
-                    selectedIndexes: indexes,
-                },
+                payload: { selectedIndexes: indexes },
             });
         }
-    }, [value, getSelectedIndexes, dispatch]);
-    const itemClickHandler = react_1.default.useCallback((index) => () => {
-        selectItem(index);
-    }, [selectItem]);
-    const itemMouseLeaveHandler = react_1.default.useCallback((index, hoveredIndex) => () => {
-        if (index === hoveredIndex) {
+    }, [getSelectedIndexes, dispatch]);
+    const itemClickHandler = react_1.default.useCallback((index) => () => selectItem(index), [selectItem]);
+    const itemMouseEnterHandler = react_1.default.useCallback((index) => () => {
+        if (index !== hoveredIndex) {
             dispatch((0, context_1.actionSetmenuState)({
-                hoveredIndex: -1,
+                hoveredIndex: index,
                 markedIndex: -1,
             }));
         }
-    }, [dispatch]);
-    const itemMouseEnterHandler = react_1.default.useCallback((index, hoveredIndex) => () => {
-        if (index !== hoveredIndex) {
+    }, [dispatch, hoveredIndex]);
+    const itemMouseLeaveHandler = react_1.default.useCallback((index) => () => {
+        if (index === hoveredIndex) {
             dispatch((0, context_1.actionSetmenuState)({
-                hoveredIndex: index,
+                hoveredIndex: -1,
                 markedIndex: -1,
             }));
         }
-    }, [dispatch]);
+    }, [dispatch, hoveredIndex]);
+    const onAnchorPosChangedMemo = react_1.default.useCallback((newPlacement) => {
+        if (typeof onAnchorPosChanged === 'function') {
+            onAnchorPosChanged(newPlacement);
+        }
+    }, [onAnchorPosChanged]);
+    const renderedChildren = react_1.default.useMemo(() => items.map((item, index) => children({ item, index }, {
+        key: index,
+        onMouseEnter: itemMouseEnterHandler(index),
+        onMouseLeave: itemMouseLeaveHandler(index),
+        onClick: itemClickHandler(index),
+        selected: selectedIndexes.includes(index),
+        hovered: hoveredIndex === index || markedIndex === index,
+    })), [
+        items,
+        children,
+        selectedIndexes,
+        hoveredIndex,
+        markedIndex,
+        itemMouseEnterHandler,
+        itemMouseLeaveHandler,
+        itemClickHandler,
+    ]);
+    // Cleanup on unmount
+    react_1.default.useEffect(() => () => {
+        if (focusTimeoutRef.current) {
+            clearTimeout(focusTimeoutRef.current);
+        }
+    }, []);
+    // Мемоизация компонентов
+    const PopperComponent = overridesMap.Popper;
+    const ListComponent = overridesMap.List;
     return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false },
-        react_1.default.createElement(overridesMap.Popper, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: actualPlacement, anchorElement: anchorElement, onAnchorPosChanged: newPlacement => {
-                setActualPlacement(newPlacement);
-                if (typeof onAnchorPosChanged === 'function') {
-                    onAnchorPosChanged(newPlacement);
-                }
-            }, positionStrategy: positionStrategy, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: offset },
-            react_1.default.createElement(overridesMap.List, { anchorPos: actualPlacement, isOpen: Boolean(isOpen), ref: menuListRef, onKeyDown: listKeydownEvent }, items.map((item, index) => children({
-                item,
-                index,
-            }, {
-                key: index,
-                onMouseEnter: itemMouseEnterHandler(index, hoveredIndex),
-                onMouseLeave: itemMouseLeaveHandler(index, hoveredIndex),
-                onClick: itemClickHandler(index),
-                selected: selectedIndexes.includes(index),
-                hovered: hoveredIndex === index || markedIndex === index,
-            }))))));
+        react_1.default.createElement(PopperComponent, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, alternativePlacements: alternativePlacements, anchorElement: anchorElement, onAnchorPosChanged: onAnchorPosChangedMemo, positionStrategy: positionStrategy, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: offset },
+            react_1.default.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, onKeyDown: listKeydownEvent }, renderedChildren))));
 });
 MenuContainer.displayName = 'MenuContainer';
 exports.default = MenuContainer;

package/Menu/MenuList.d.ts

@@ -3,6 +3,7 @@ import { AnchorPos } from '../Popper';
 export interface MenuListProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly isOpen: boolean;
     readonly anchorPos: AnchorPos;
+    readonly maxWidth?: number | string;
 }
 export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
 export default MenuList;

package/Menu/MenuList.js

@@ -27,6 +27,19 @@ const StyledMenuList = styled_1.default.div `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   box-shadow: 0 0.5em 1.5em ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
 
+  ${({ $maxWidth }) => {
+    if (typeof $maxWidth === 'number') {
+        return (0, react_2.css) `
+        max-width: ${$maxWidth}px;
+      `;
+    }
+    if (typeof $maxWidth === 'string') {
+        return (0, react_2.css) `
+        max-width: ${$maxWidth};
+      `;
+    }
+    return undefined;
+}};
   &:focus {
     outline-style: solid;
     outline-width: 0.14em;
@@ -64,24 +77,10 @@ const StyledMenuList = styled_1.default.div `
   overflow-y: auto;
   padding: 0.4em;
   max-height: 18em;
-  min-width: 10em;
-
-  max-width: 100%;
-
-  ${({ $fixedWidth }) => $fixedWidth &&
-    (0, react_2.css) `
-      min-width: 10em;
-      max-width: 16em;
-    `}
-
-  ${({ $anchorPos, theme }) => $anchorPos === 'top-fill' &&
-    (0, react_2.css) `
-      box-shadow: 0 -0.5em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()};
-    `};
 `;
 exports.MenuList = react_1.default.forwardRef((props, ref) => {
-    const { isOpen, anchorPos, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "children"]);
-    return (react_1.default.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$anchorPos": anchorPos, "$fixedWidth": !['bottom-fill', 'top-fill'].includes(anchorPos) }, nativeProps, { ref: ref }), children));
+    const { isOpen, anchorPos, maxWidth, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "maxWidth", "children"]);
+    return (react_1.default.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$maxWidth": maxWidth, "$anchorPos": anchorPos }, nativeProps, { ref: ref }), children));
 });
 exports.MenuList.displayName = 'MenuList';
 exports.default = exports.MenuList;

package/Popper/Popper.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PopperContainerProps, PositionStrategy } from './PopperContainer';
-import { AnchorPos } from './usePopprer';
-export * from './usePopprer';
+import { AnchorPos } from './usePopper';
+export * from './usePopper';
 export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Controls the visibility of the popper.
@@ -38,6 +38,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * ```
      */
     readonly anchorPos?: AnchorPos;
+    readonly alternativePlacements?: readonly AnchorPos[];
     readonly onAnchorPosChanged?: (anchorPos: AnchorPos) => void;
     /**
      * The z-index value for the popper container.