@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/MaskedField/index.js

@@ -1,4 +1,18 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,63 +31,58 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const useMasked_1 = require("./useMasked");
 const TextField_1 = __importDefault(require("../TextField"));
+__exportStar(require("./useMasked"), exports);
 const MaskedField = (props, ref) => {
     const { value: propValue, mask, parseInput, onChange, transform } = props, nativeProps = __rest(props, ["value", "mask", "parseInput", "onChange", "transform"]);
-    const propValueRef = react_1.default.useRef(propValue);
-    const textInputRef = react_1.default.useRef(null);
-    const decoratorsErrorDisplayed = react_1.default.useRef(false);
     const masked = (0, useMasked_1.useMasked)();
     const parseInputFn = parseInput || masked.parseInput;
-    const getMask = react_1.default.useCallback((input) => {
-        const currentMask = typeof mask === 'function' ? mask(input) : mask;
-        if (!decoratorsErrorDisplayed.current &&
-            currentMask.find(elem => typeof elem === 'string' &&
-                typeof parseInput === 'undefined' &&
-                elem.match(/[0-9a-zа-яё]/i))) {
-            decoratorsErrorDisplayed.current = true;
-            console.warn(`[MaskedField component] You use symbols as decorators, which should be replaced with RegExp or provide the «parseInput» function instead`);
-        }
-        return currentMask;
-    }, [mask, parseInput]);
+    const inputRef = react_1.default.useRef(null);
+    const lastPropValue = react_1.default.useRef(propValue);
+    const getMask = react_1.default.useCallback((input) => (typeof mask === 'function' ? mask(input) : mask), [mask]);
     const getInputValue = react_1.default.useCallback((v) => {
         var _a;
-        const mask = getMask(v || '');
-        const parsed = parseInputFn(v || '', mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
-        const { text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
-        return text;
-    }, [getMask, masked, parseInputFn]);
+        const m = getMask(v);
+        const parsed = parseInputFn(v, m, ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const formatted = masked.formatParsedInput(parsed.text, m, parsed.caret);
+        return formatted.text;
+    }, [getMask, parseInputFn, masked]);
     const [inputValue, setInputValue] = react_1.default.useState(getInputValue(propValue || ''));
+    // Обновление при изменении внешнего значения
     react_1.default.useEffect(() => {
-        if (propValueRef.current !== propValue) {
-            propValueRef.current = propValue;
+        if (lastPropValue.current !== propValue) {
+            lastPropValue.current = propValue;
             setInputValue(getInputValue(propValue || ''));
         }
-    }, [getInputValue, getMask, parseInputFn, masked, propValue]);
+    }, [propValue, getInputValue]);
     const handleOnChange = react_1.default.useCallback(event => {
         var _a;
-        const mask = getMask(event.currentTarget.value);
-        const parsed = parseInputFn(event.currentTarget.value, mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
-        const { caret, isValid, text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
-        const transformedText = transform ? transform(text) : text;
-        setInputValue(transformedText);
+        const raw = event.currentTarget.value;
+        const caret = ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0;
+        const m = getMask(raw);
+        const parsed = parseInputFn(raw, m, caret);
+        const formatted = masked.formatParsedInput(parsed.text, m, parsed.caret);
+        const finalText = transform ? transform(formatted.text) : formatted.text;
+        setInputValue(finalText);
         onChange({
-            caret,
-            isValid,
-            text: transformedText,
+            caret: formatted.caret,
+            isValid: formatted.isValid,
+            text: finalText,
         });
-        setTimeout(() => {
+        // Устанавливаем caret после рендера
+        requestAnimationFrame(() => {
             var _a;
-            (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(caret, caret);
-        }, 15);
-    }, [getMask, masked, transform, onChange, parseInputFn]);
-    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { type: "text", value: inputValue, onChange: handleOnChange, inputRef: elem => {
-            textInputRef.current = elem;
-            if (typeof nativeProps.inputRef === 'function') {
-                nativeProps.inputRef(elem);
-            }
-            if (nativeProps.inputRef !== null && typeof nativeProps.inputRef === 'object') {
-                nativeProps.inputRef.current = elem;
-            }
-        } })));
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(formatted.caret, formatted.caret);
+        });
+    }, [getMask, parseInputFn, masked, transform, onChange]);
+    const setInputRef = react_1.default.useCallback((elem) => {
+        inputRef.current = elem;
+        if (typeof nativeProps.inputRef === 'function') {
+            nativeProps.inputRef(elem);
+        }
+        else if (nativeProps.inputRef && typeof nativeProps.inputRef === 'object') {
+            nativeProps.inputRef.current = elem;
+        }
+    }, [nativeProps]);
+    return (react_1.default.createElement(TextField_1.default, Object.assign({ ref: ref }, nativeProps, { type: "text", value: inputValue, onChange: handleOnChange, inputRef: setInputRef })));
 };
 exports.default = react_1.default.forwardRef(MaskedField);

package/MaskedField/useMasked.js

@@ -12,13 +12,12 @@ const useMasked = () => {
             caret: 0,
         };
         value
-            .replace(/\s/, '')
+            .replace(/\s+/g, '')
             .split('')
             .forEach((character, charIndex) => {
             const isMatch = mask.some(pattern => {
                 if (typeof pattern === 'string') {
-                    return false;
-                    // return character === pattern && character;
+                    return character === pattern && character;
                 }
                 if (pattern instanceof RegExp) {
                     return new RegExp(pattern).test(character);
@@ -45,7 +44,9 @@ const useMasked = () => {
         if (parsedValue === '') {
             return data;
         }
-        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+        let patternIndex = 0;
+        for (patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            data.isValid = false;
             if (data.charIndex >= parsedValue.length) {
                 break;
             }
@@ -57,6 +58,7 @@ const useMasked = () => {
             if (pattern instanceof RegExp && new RegExp(pattern).test(char)) {
                 data.text = `${data.text}${char}`;
                 data.charIndex += 1;
+                data.isValid = true;
             }
             // If char is correct (equal with pattern string)
             // then accept char into text
@@ -79,7 +81,7 @@ const useMasked = () => {
         const result = {
             text: data.text,
             caret: data.caret,
-            isValid: data.text.length >= mask.length,
+            isValid: data.isValid,
         };
         return result;
     }, []);

package/Menu/AutoHeightWrapper.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export type AutoHeightWrapperProps = {
+    readonly children: (height: number) => React.ReactNode;
+};
+declare const AutoHeightWrapper: (props: AutoHeightWrapperProps) => React.JSX.Element;
+export default AutoHeightWrapper;

package/Menu/AutoHeightWrapper.js

@@ -0,0 +1,43 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const AutoHeightWrapper = (props) => {
+    const { children } = props;
+    const ref = React.useRef(null);
+    const [height, setHeight] = React.useState(0);
+    React.useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(() => {
+            setHeight(el.clientHeight);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    return (React.createElement("div", { "data-virt-elem": "AutoHeightWrapper", ref: ref, style: { height: '100%', overflow: 'hidden' } }, height > 0 && children(height)));
+};
+exports.default = AutoHeightWrapper;

package/Menu/MeasuredItem.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type MeasuredItemProps = {
+    readonly index: number;
+    readonly top: number;
+    readonly isFixed: boolean;
+    readonly updateHeight: (index: number, height: number) => void;
+    readonly children: React.ReactNode;
+};
+declare const MeasuredItem: React.FC<MeasuredItemProps>;
+export default MeasuredItem;

package/Menu/MeasuredItem.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const MeasuredItem = props => {
+    const { index, top, isFixed, updateHeight, children } = props;
+    const ref = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (isFixed)
+            return; // в фиксированном режиме измерять не нужно
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const h = el.offsetHeight;
+            updateHeight(index, h);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [index, updateHeight, isFixed]);
+    return (React.createElement("div", { ref: ref, style: {
+            position: 'absolute',
+            top,
+            width: '100%',
+        } }, children));
+};
+exports.default = MeasuredItem;

package/Menu/MenuContainer.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { MenuListProps } from './MenuList';
-import { AnchorPos, PopperProps } from '../Popper';
-import type { MenuItemCommonProps } from './MenuItem';
+import { AnchorPos, PopperProps, PositionStrategy } from '../Popper';
+import type { MenuItemProps } from './MenuItem';
 export type AnchorElement<E extends HTMLElement = HTMLElement> = E;
 export type Children<T> = (data: {
     item: T;
     index: number;
-}, itemProps: MenuItemCommonProps) => React.ReactNode;
+}, itemProps: MenuItemProps) => React.ReactNode;
 export interface MenuProps<T, Multiple extends boolean | undefined = undefined> {
     /**
      * List of items
@@ -46,9 +46,9 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
     /**
      * An HTML element. It's used to set the position of the menu.
      * \
-     * **Default**: `false`
+     * **Default**: `null`
      */
-    readonly anchorElement?: AnchorElement | null;
+    readonly anchorElement: AnchorElement | null;
     /**
      * A function that extract key for each item\
      * (for details: [React List and keys](https://react.dev/learn/rendering-lists))\
@@ -66,7 +66,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * ```
      */
     /**
-     * Close list if click outside of the list and anchor element\
+     * Close list if click outside the list and anchor element\
      * \
      * **Default**: `true`
      */
@@ -87,20 +87,52 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
     /**
      * Anchor position\
      * \
-     * Default: `auto`
+     * Default: `bottom`
      */
     readonly anchorPos?: AnchorPos;
+    readonly onAnchorPosChanged?: (anchorPos: AnchorPos) => void;
+    /**
+     * When enabled, the popper will automatically try to find the best placement
+     * if the preferred placement doesn't fit in the viewport.
+     * The component will iterate through possible placements until it finds one that fits.
+     *
+     * **Default**: `true`
+     * ```
+     */
+    readonly autoFlip?: boolean;
+    /**
+     * Additional offset (in pixels) from the anchor element.
+     * Positive values move the popper away from the anchor, negative values move it closer.
+     *
+     * @default `0`
+     * ```
+     */
+    readonly offset?: number;
+    /**
+     * The positioning strategy to use.
+     * - `'fixed'`: Positions relative to the viewport. Works reliably in all cases.
+     * - `'absolute'`: Positions relative to the nearest positioned ancestor.
+     *                 When using 'absolute', make sure a parent element has `position: relative`.
+     *
+     * **Default**: `'`absolute`'`
+     * ```
+     */
+    readonly positionStrategy?: PositionStrategy;
+    /**
+     * 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.
+     * The popper will try to flip to another placement if it cannot maintain this margin.
+     *
+     * **Default**: `8`
+     * ```
+     */
+    readonly viewportMargin?: number;
     /**
      * Should menu will be closed when item selected\
      * \
      * **Default**: if **multiple** is true then `false` otherwise - `true`
      */
     readonly closeOnSelect?: boolean;
-    /**
-     * Do not use react portal\
-     * \
-     * **Default**: `false`
-     */
     /**
      * Popper z-index\
      * \
@@ -161,33 +193,34 @@ export type MenuRef = {
      */
     selectItem: (index: number) => void;
     /**
-     * Hightlight specified item by index
+     * Highlight specified item by index
      */
     highlightIndex: (index: number) => void;
     /**
      * Highlight the previous item relative to the currently highlighted one
      */
-    hightlightPrevItem: () => void;
+    highlightPrevItem: () => void;
     /**
      * Highlight the next item relative to the currently highlighted one
      */
-    hightlightNextItem: () => void;
+    highlightNextItem: () => void;
     /**
      * Highlight the first item in list
      */
-    hightlightFirstItem: () => void;
+    highlightFirstItem: () => void;
     /**
      * Highlight the last item in list
      */
-    hightlightLastItem: () => void;
+    highlightLastItem: () => void;
     /**
      * Select highlighted item in list
      */
-    selectHightlightedItem: () => void;
+    selectHighlightedItem: () => void;
     /**
      * Returns the list HTML container
      */
     getListElement: () => HTMLDivElement | null;
+    setActualPlacement: (placement: AnchorPos) => void;
 };
 export type Value<T, Multiple> = Multiple extends undefined | undefined ? T | null : readonly T[];
 export type GetOptionSelected<T> = (payload: {

package/Menu/MenuContainer.js

@@ -33,7 +33,8 @@ const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
 const onRequestCloseDefault = () => undefined;
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement, overrides, children, closeOutsideClick = true, isOpen = false, anchorPos = 'bottom', multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, zIndex, onSelectItem, getOptionSelected, } = props;
+    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 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,
@@ -187,14 +188,15 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         focus: () => { var _a; return (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         scrollToIndex: (idx) => scrollToIndex(idx),
         highlightIndex: (idx) => highlightIndex(idx),
-        hightlightPrevItem: () => hightlightPrevItem(),
-        hightlightNextItem: () => hightlightNextItem(),
-        hightlightFirstItem: () => hightlightFirstItem(),
-        hightlightLastItem: () => hightlightLastItem(),
+        highlightPrevItem: () => hightlightPrevItem(),
+        highlightNextItem: () => hightlightNextItem(),
+        highlightFirstItem: () => hightlightFirstItem(),
+        highlightLastItem: () => hightlightLastItem(),
         scrollToFirstSelected: () => scrollToFirstSelected(),
-        selectHightlightedItem: () => selectHightlightedItem(),
+        selectHighlightedItem: () => selectHightlightedItem(),
         selectItem: (idx) => selectItem(idx),
         getListElement: () => menuListRef.current,
+        setActualPlacement: placement => setActualPlacement(placement),
     }), [
         scrollToIndex,
         highlightIndex,
@@ -324,9 +326,9 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
      */
     react_1.default.useEffect(() => {
         const indexes = getSelectedIndexes();
-        // If elements in selectedIndexesRef and indexes are not equale
-        if ((selectedIndexesRef.current.length === indexes.length &&
-            selectedIndexesRef.current.every(value => indexes.includes(value))) === false) {
+        // If elements in selectedIndexesRef and indexes are not equal
+        if (!(selectedIndexesRef.current.length === indexes.length &&
+            selectedIndexesRef.current.every(value => indexes.includes(value)))) {
             selectedIndexesRef.current = indexes;
             dispatch({
                 type: 'setMenuState',
@@ -355,9 +357,14 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             }));
         }
     }, [dispatch]);
-    return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: closeOutsideClick ? 'onMouseDown' : false },
-        react_1.default.createElement(overridesMap.Popper, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, anchorElement: anchorElement },
-            react_1.default.createElement(overridesMap.List, { isOpen: Boolean(isOpen), ref: menuListRef, onKeyDown: listKeydownEvent }, items.map((item, index) => children({
+    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,
             }, {

package/Menu/MenuItem.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & MenuItemCommonProps;
-export type MenuItemCommonProps = {
+export type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Selected flag
      */
@@ -13,13 +12,31 @@ export type MenuItemCommonProps = {
      * React key
      */
     readonly key: React.Key;
-    readonly onMouseEnter: React.MouseEventHandler<HTMLDivElement>;
-    readonly onMouseLeave: React.MouseEventHandler<HTMLDivElement>;
-    readonly onClick: React.MouseEventHandler<HTMLDivElement>;
     /**
      * Icon or another JSX element placed before button label
      */
-    readonly startIcon?: JSX.Element;
+    readonly startIcon?: React.ReactNode;
 };
-declare const MenuItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & MenuItemCommonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `MenuItemProps` instead
+ */
+export type MenuItemCommonProps = MenuItemProps;
+export declare const MenuItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Selected flag
+     */
+    readonly selected: boolean;
+    /**
+     * Hovered flag
+     */
+    readonly hovered: boolean;
+    /**
+     * React key
+     */
+    readonly key: React.Key;
+    /**
+     * Icon or another JSX element placed before button label
+     */
+    readonly startIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default MenuItem;

package/Menu/MenuItem.js

@@ -14,10 +14,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
-const InnerContainer = styled_1.default.div `
+const StyledMenuItem = styled_1.default.div `
   cursor: pointer;
   user-select: none;
   display: flex;
@@ -53,11 +54,17 @@ const InnerContainer = styled_1.default.div `
 const ItemIconWrapper = styled_1.default.span `
   margin-right: 0.5em;
 `;
-const MenuItem = react_1.default.forwardRef((props, ref) => {
+exports.MenuItem = react_1.default.forwardRef((props, ref) => {
     const { children, selected, hovered, onMouseEnter, onMouseLeave, onClick, startIcon } = props, nativeProps = __rest(props, ["children", "selected", "hovered", "onMouseEnter", "onMouseLeave", "onClick", "startIcon"]);
-    return (react_1.default.createElement(InnerContainer, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, selected: selected, hovered: hovered }),
-        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(ItemIconWrapper, null, startIcon)),
+    const renderStartIcon = react_1.default.useCallback(() => {
+        if (!startIcon) {
+            return null;
+        }
+        return react_1.default.createElement(ItemIconWrapper, null, startIcon);
+    }, [startIcon]);
+    return (react_1.default.createElement(StyledMenuItem, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, selected: selected, hovered: hovered }),
+        renderStartIcon(),
         children));
 });
-MenuItem.displayName = 'MenuItem';
-exports.default = MenuItem;
+exports.MenuItem.displayName = 'MenuItem';
+exports.default = exports.MenuItem;

package/Menu/MenuList.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { AnchorPos } from '../Popper';
 export interface MenuListProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly isOpen: boolean;
+    readonly anchorPos: AnchorPos;
 }
-declare const _default: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuList;

package/Menu/MenuList.js

@@ -14,8 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
 const StyledMenuList = styled_1.default.div `
   display: flex;
   flex-direction: column;
@@ -23,12 +25,14 @@ const StyledMenuList = styled_1.default.div `
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: 0 0.5em 1.5em ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+
   &:focus {
     outline-style: solid;
     outline-width: 0.14em;
     outline-color: ${({ theme }) => theme.color.accentPrimary.toString()};
   }
+
   & ::-webkit-scrollbar {
     width: 0.6rem;
     height: 0.6rem;
@@ -55,13 +59,29 @@ const StyledMenuList = styled_1.default.div `
   & ::-webkit-scrollbar-thumb:vertical:hover {
     background: ${({ theme }) => theme.color.accentPrimary.toString()};
   }
+
   box-sizing: border-box;
   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()};
+    `};
 `;
-const MenuList = (props, ref) => {
-    const { isOpen, children } = props, nativeProps = __rest(props, ["isOpen", "children"]);
-    return (react_1.default.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen }, nativeProps, { ref: ref }), children));
-};
-exports.default = react_1.default.forwardRef(MenuList);
+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));
+});
+exports.MenuList.displayName = 'MenuList';
+exports.default = exports.MenuList;

package/Menu/VirtualizedItem.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type VirtualizedItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    readonly key: string;
+    readonly index: number;
+    readonly style: React.CSSProperties;
+    readonly setItemHeight: (index: number, height: number) => void;
+    readonly isActiveOnScroll: boolean;
+    readonly children: VirtualizedItemChildren;
+};
+export type VirtualizedItemChildren = (params: {
+    readonly index: number;
+    readonly isActiveOnScroll: boolean;
+}) => React.ReactNode;
+export declare const VirtualizedItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    readonly key: string;
+    readonly index: number;
+    readonly style: React.CSSProperties;
+    readonly setItemHeight: (index: number, height: number) => void;
+    readonly isActiveOnScroll: boolean;
+    readonly children: VirtualizedItemChildren;
+} & React.RefAttributes<HTMLDivElement>>;
+export default VirtualizedItem;