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

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\
      * \
@@ -137,11 +169,11 @@ export interface MenuOverrides {
     /**
      * Element wrapper
      */
-    readonly List?: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
+    readonly List?: React.ComponentType<MenuListProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Popper wrapper
      */
-    readonly Popper?: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Popper?: React.ComponentType<PopperProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type MenuRef = {
     /**
@@ -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 = props.anchorPos === 'static', anchorPos = 'auto', 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',
@@ -356,8 +358,13 @@ 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({
+        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;

package/Menu/VirtualizedItem.js

@@ -0,0 +1,69 @@
+"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)
+        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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedItem = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const React = __importStar(require("react"));
+const StyledVirtualizedItem = styled_1.default.div `
+  position: absolute;
+  width: 100%;
+`;
+exports.VirtualizedItem = React.forwardRef((props, ref) => {
+    const { children, style, index, setItemHeight, isActiveOnScroll } = props, restProps = __rest(props, ["children", "style", "index", "setItemHeight", "isActiveOnScroll"]);
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const { height } = entry.contentRect;
+                if (height) {
+                    setItemHeight(index, height);
+                }
+            }
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [index, setItemHeight]);
+    return (React.createElement(StyledVirtualizedItem, Object.assign({ style: style }, restProps, { ref: ref }),
+        React.createElement("div", { ref: containerRef }, children({ index, isActiveOnScroll }))));
+});
+exports.VirtualizedItem.displayName = 'VirtualizedItem';
+exports.default = exports.VirtualizedItem;

package/Menu/VirtualizedList.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { VirtualizedListRef, VirtualizedRenderItem } from './VirtualizedListComponent';
+export type ScrollAlign = 'start' | 'center' | 'end' | 'auto';
+export * from './VirtualizedListComponent';
+export type VirtualizedListProps<T> = {
+    readonly items: readonly T[];
+    readonly renderItem: VirtualizedRenderItem<T>;
+    readonly estimatedItemHeight?: number;
+    readonly itemHeight?: number;
+    readonly overscan?: number;
+    readonly scrollToIndex?: number | null;
+    readonly scrollToAlign?: ScrollAlign;
+    readonly onEndReached?: () => void;
+};
+declare const _default: <T>(props: VirtualizedListProps<T> & {
+    ref?: React.Ref<VirtualizedListRef> | undefined;
+}) => React.ReactElement;
+export default _default;

package/Menu/VirtualizedList.js

@@ -0,0 +1,28 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AutoHeightWrapper_1 = __importDefault(require("./AutoHeightWrapper"));
+const VirtualizedListComponent_1 = __importDefault(require("./VirtualizedListComponent"));
+__exportStar(require("./VirtualizedListComponent"), exports);
+const VirtualizedList = react_1.default.forwardRef((props, ref) => {
+    return (react_1.default.createElement(AutoHeightWrapper_1.default, null, height => height > 0 && react_1.default.createElement(VirtualizedListComponent_1.default, Object.assign({}, props, { height: height, ref: ref }))));
+});
+VirtualizedList.displayName = 'VirtualizedList';
+exports.default = VirtualizedList;

package/Menu/VirtualizedListComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type VirtualizedRenderItem<T> = (item: T, index: number) => React.ReactNode;
+export type VirtualizedListComponentProp<T> = {
+    readonly items: readonly T[];
+    readonly height: number;
+    readonly renderItem: VirtualizedRenderItem<T>;
+    readonly estimatedItemHeight?: number;
+    readonly itemHeight?: number;
+    readonly overscan?: number;
+    readonly scrollToIndex?: number | null;
+    readonly scrollToAlign?: ScrollAlign;
+    readonly onEndReached?: () => void;
+};
+export type ScrollAlign = 'start' | 'center' | 'end' | 'auto';
+export type VirtualizedListRef = {
+    scrollToIndex: (index: number, align?: ScrollAlign) => void;
+    getTopVisibleIndex: () => number;
+};
+declare const VirtualizedListComponent: React.ForwardRefExoticComponent<VirtualizedListComponentProp<unknown> & React.RefAttributes<VirtualizedListRef>>;
+export default VirtualizedListComponent;