@oliasoft-open-source/react-ui-library 3.12.0-beta-20 → 3.12.0-beta-21

package/dist/components/menu/layer/layer.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement, useState } from "react";
+import cx from "classnames";
+import styles from "../menu.module.less";
+import { Section } from "./section";
+import { childPath } from "./path";
+import { MenuType } from "../enum";
+export const Layer = ({ sections, isNested, width, closeOnOptionClick, close = () => { }, tree, path, maxHeight, showAllButton, testId, }) => {
+    if (isValidElement(sections)) {
+        return _jsx(_Fragment, { children: sections });
+    }
+    const [showAll, setShowAll] = useState(!showAllButton?.visible); //show all by default
+    const sectionsArray = sections;
+    const additionalSections = showAllButton?.additionalSections?.map((s) => ({
+        ...s,
+        closeOnOptionClick,
+        visible: true,
+    })) ?? [];
+    const showAllButtonOption = sectionsArray.length > 4
+        ? [
+            {
+                type: MenuType.OPTION,
+                label: showAll
+                    ? showAllButton?.showLessTitle || 'Show less'
+                    : showAllButton?.showAllTitle || 'Show all',
+                onClick: () => setShowAll(!showAll),
+                visible: true,
+                closeOnOptionClick: false,
+            },
+        ]
+        : [];
+    const localSections = showAllButton?.visible
+        ? sectionsArray
+            .map((s, i) => {
+            return showAll || i <= 3
+                ? {
+                    ...s,
+                    visible: true,
+                    closeOnOptionClick,
+                }
+                : s;
+        })
+            .concat(showAllButtonOption, additionalSections)
+            .filter((s) => s?.visible)
+        : sectionsArray.map((s) => ({ ...s, closeOnOptionClick }));
+    return (_jsx("div", { className: cx(styles.layer, isNested ? styles.nested : null), style: { maxWidth: width, maxHeight }, "data-testid": testId, children: _jsx("ul", { children: localSections.map((section, i) => (_jsx("li", { children: _jsx(Section, { section: section, closeOnOptionClick: section.closeOnOptionClick, close: close, tree: tree, path: childPath(path, i), maxHeight: maxHeight }) }, i))) }) }));
+};

package/dist/components/menu/layer/option.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface IOptionProps {
+    actions?: any[];
+    label: string | number;
+    url?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    description?: string;
+    icon?: any;
+    selected?: boolean;
+    closeOnOptionClick?: boolean;
+    close?: () => void;
+    disabled?: boolean;
+    inline?: boolean;
+    title?: string;
+    upload?: boolean;
+    onChange?: (files: FileList | null) => void;
+    testId?: string;
+}
+export declare const Option: ({ actions, label, url, onClick, description, icon, selected, closeOnOptionClick, close, disabled, inline, title, upload, onChange, testId, }: IOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/layer/option.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Icon } from '../../icon/icon';
+import styles from '../menu.module.less';
+import { Actions } from '../../actions/actions';
+export const Option = ({ actions, label, url, onClick, description, icon, selected, closeOnOptionClick, close, disabled, inline, title, upload, onChange, testId, }) => {
+    const handleClick = (evt) => {
+        evt.stopPropagation();
+        if (disabled || upload) {
+            evt.preventDefault();
+            return;
+        }
+        if (closeOnOptionClick) {
+            close?.();
+        }
+        onClick?.(evt);
+    };
+    return (_jsxs("a", { href: url, className: cx(styles.option, disabled ? styles.disabled : '', inline ? styles.inline : '', selected ? styles.selected : ''), onClick: handleClick, "data-testid": testId, children: [icon ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { icon: icon, size: 14 }) })) : null, _jsxs("div", { className: styles.optionContent, children: [upload && (_jsx("input", { type: "file", className: styles.fileInput, onChange: (evt) => {
+                            onChange?.(evt.target.files);
+                            close?.();
+                        } })), _jsx("span", { className: styles.label, title: `${title || label}`, children: label }), _jsxs("div", { className: styles.right, children: [_jsx("span", { className: styles.description, children: description }), !!actions?.length && (_jsx("div", { className: styles.actions, children: _jsx(Actions, { actions: actions }) }))] })] })] }));
+};

package/dist/components/menu/layer/path.d.ts

@@ -0,0 +1,5 @@
+export declare const parentPath: (path: string) => string;
+export declare const childPath: (path: string, sectionIndex: number) => string;
+export declare const closePath: (path: string) => string;
+export declare const siblings: (tree: any, path: string) => any[];
+export declare const registerClose: (tree: any, path: string, close: any) => void;

package/dist/components/menu/layer/path.js

@@ -0,0 +1,30 @@
+import { get, set } from 'lodash';
+/*
+  Path helpers for menus with subsections
+  Mainly to help keep track of the close() handlers for nested layers
+  See menu.test.js for examples
+ */
+/*
+  parentPath gets the parent path
+  foo.bar[45] -> foo.bar
+ */
+export const parentPath = (path) => path.includes('[') ? path.substr(0, path.lastIndexOf('[')) : path;
+/*
+  childPath gets the child path given the parent path and section index
+  foo -> foo.sections[2]
+ */
+export const childPath = (path, sectionIndex) => `${path}.sections[${sectionIndex}]`.replace(/^\./, '');
+/*
+  closePath gets the close handler's path given the path to the section
+  foo -> foo.close
+ */
+export const closePath = (path) => `${path}.close`.replace(/^\./, '');
+/*
+  siblings gets the siblings given any tree and path to a child
+ */
+export const siblings = (tree, path) => get(tree, parentPath(path), []);
+/*
+  registerClose sets the close handler given any tree and path to a child
+  (mutates intentionally, unavoidable in how we use the tree in Menu)
+ */
+export const registerClose = (tree, path, close) => set(tree, closePath(path), close);

package/dist/components/menu/layer/placementOptions.d.ts

@@ -0,0 +1,3 @@
+type PlacementType = 'right-start' | 'bottom-start' | string;
+export declare const placementOptions: (placement?: PlacementType, isNested?: boolean) => object;
+export {};

package/dist/components/menu/layer/placementOptions.js

@@ -0,0 +1,6 @@
+export const placementOptions = (placement, isNested = false) => ({
+    auto: true,
+    preferX: 'right',
+    preferY: 'bottom',
+    placement: placement || (isNested ? 'right-start' : 'bottom-start'),
+});

package/dist/components/menu/layer/section.d.ts

@@ -0,0 +1,10 @@
+import { IMenuSection } from "../menu.interface";
+export interface ISectionProps {
+    section: IMenuSection;
+    closeOnOptionClick?: boolean;
+    close: () => void;
+    tree: any;
+    path: string;
+    maxHeight?: string | number;
+}
+export declare const Section: ({ section, closeOnOptionClick, close, tree, path, maxHeight, }: ISectionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/menu/layer/section.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Heading } from "./heading";
+import { Divider } from "./divider";
+import { Option } from "./option";
+import { DropDownMenu } from "../menu";
+import { DisabledContext } from "../../../helpers/disabled-context";
+import { MenuType } from "../enum";
+export const Section = ({ section, closeOnOptionClick, close, tree, path, maxHeight, }) => {
+    const disabledContext = useContext(DisabledContext);
+    switch (section.type) {
+        case MenuType.HEADING:
+            return (_jsx(Heading, { label: section?.label ?? '', onClick: section.onClick, icon: section.icon, testId: section.testId }));
+        case MenuType.DIVIDER:
+            return _jsx(Divider, {});
+        case MenuType.OPTION:
+            return (_jsx(Option, { actions: section.actions, label: section?.label ?? '', url: section.url, onClick: section.onClick, description: section.description, icon: section.icon, selected: section.selected, closeOnOptionClick: closeOnOptionClick, close: close, disabled: section.disabled || disabledContext, inline: section.inline, title: section.title, upload: section.upload, onChange: section.onChange, testId: section.testId }));
+        case MenuType.MENU:
+            return (_jsx(DropDownMenu, { menu: section.menu, title: section.title, closeOnOptionClick: closeOnOptionClick, isNested: true, closeParent: close, tree: tree, path: path, maxHeight: maxHeight, testId: section.testId }));
+        default:
+            return null;
+    }
+};

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,3 @@
+import { IMenuProps } from "./menu.interface";
+export declare const DropDownMenu: ({ menu, width, disabled, badgeTitle, badgeDot, loading, isNested, closeOnOptionClick, closeParent, tree, path, groupOrder, overflowContainer, maxHeight, testId, open: openProp, setOpen: setOpenProp, tooltip, error, warning, }: IMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: (props: IMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/menu.interface.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from "react";
+import { Placement } from "react-laag";
+import { MenuType } from "./enum";
+import { GroupOrder, TriggerType } from "../../common-enum";
+export interface IMenuSection {
+    type: MenuType;
+    label?: string | number;
+    icon?: string | ReactNode;
+    onClick?: () => void;
+    testId?: string;
+    description?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    inline?: boolean;
+    title?: string;
+    download?: boolean;
+    onChange?: () => void;
+    menu?: any;
+    visible?: boolean;
+    closeOnOptionClick?: boolean;
+    actions?: any[];
+    url?: string;
+    upload?: boolean;
+}
+export interface IMenuShowAllButton {
+    visible: boolean;
+    showAllTitle: string;
+    showLessTitle: string;
+    additionalSections: IMenuSection[];
+}
+export interface IUseContextMenuProps {
+    sections: ReactNode | IMenuSection[];
+    width?: string | number;
+    placement?: string;
+    possiblePlacements: Placement[];
+    closeOnOptionClick: boolean;
+    closeParent?: () => void;
+    tree: any;
+    path: string;
+    groupOrder: any;
+    overflowContainer: boolean;
+    maxHeight: string | number;
+    testId?: string;
+}
+export interface IMenuProps {
+    menu: {
+        trigger: TriggerType;
+        title?: string;
+        colored?: boolean | string;
+        small?: boolean;
+        label?: string;
+        component?: ReactNode;
+        sections?: ReactNode | IMenuSection[];
+        placement?: string;
+        possiblePlacements?: Placement[];
+        showAllButton?: IMenuShowAllButton;
+        testId?: string;
+        fullHeightTrigger?: boolean;
+    };
+    contextMenu?: boolean;
+    width?: string | number;
+    disabled?: boolean;
+    badgeTitle?: string;
+    badgeDot?: boolean;
+    loading?: boolean;
+    fullHeightTrigger?: boolean;
+    closeOnOptionClick?: boolean;
+    groupOrder?: GroupOrder;
+    overflowContainer?: boolean;
+    maxHeight?: string | number;
+    testId?: string;
+    open?: boolean;
+    setOpen?: (state: boolean) => void;
+    closeParent?: () => void;
+    tree?: any;
+    path?: any;
+    isNested?: boolean;
+    tooltip?: any;
+    error?: any;
+    warning?: any;
+    title?: string;
+}

package/dist/components/menu/menu.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menu.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isValidElement, useContext, useState } from "react";
+import { isBoolean, isEmpty, isFunction } from "lodash";
+import { useLayer, useMousePositionAsTrigger } from "react-laag";
+import ResizeObserver from "resize-observer-polyfill";
+import styles from "./menu.module.less";
+import { DisabledContext } from "../../helpers/disabled-context";
+import { Layer, placementOptions, registerClose, siblings, Trigger } from ".";
+const isMenuEmpty = (menu) => {
+    const { sections } = menu;
+    return (!isValidElement(sections) &&
+        (!Array.isArray(sections) || sections.every((section) => isEmpty(section))));
+};
+const useContextMenu = ({ sections, width, placement, possiblePlacements, closeOnOptionClick, closeParent, tree, path, groupOrder, overflowContainer, maxHeight, testId, }) => {
+    const { hasMousePosition, resetMousePosition, handleMouseEvent, trigger } = useMousePositionAsTrigger();
+    const close = resetMousePosition;
+    const isOpen = hasMousePosition;
+    const { layerProps, renderLayer } = useLayer({
+        isOpen,
+        trigger,
+        ...placementOptions(placement),
+        possiblePlacements,
+        ResizeObserver,
+        onOutsideClick: close,
+        overflowContainer,
+    });
+    const layer = isOpen &&
+        renderLayer(_jsx("div", { ...layerProps, children: _jsx(Layer, { isNested: false, width: width, sections: sections, closeOnOptionClick: closeOnOptionClick, close: closeParent || close, tree: tree, path: path, maxHeight: maxHeight, testId: testId && `${testId}-layer` }) }));
+    return [layer, handleMouseEvent];
+};
+const ContextMenu = ({ menu, width, disabled = false, closeOnOptionClick = true, closeParent, tree, path, groupOrder, testId, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const { label, trigger, fullHeightTrigger, colored, small, component, placement, possiblePlacements = ['bottom-start', 'top-start'], } = menu;
+    const [element, onContextMenu] = useContextMenu({
+        sections: menu.sections,
+        width,
+        placement,
+        possiblePlacements,
+        closeOnOptionClick,
+        closeParent,
+        tree,
+        path,
+        groupOrder,
+        overflowContainer: true,
+        maxHeight: '40vh',
+        testId,
+    });
+    const isDisabled = disabled || isMenuEmpty(menu) || disabledContext;
+    return (_jsxs("div", { onContextMenu: onContextMenu, "data-testid": testId, children: [_jsx(Trigger, { width: width, fullHeight: fullHeightTrigger, isDisabled: isDisabled, trigger: trigger, label: label, onClickTrigger: () => { }, colored: colored, small: small, isNested: true, component: component, contextMenu: true, groupOrder: groupOrder }), element] }));
+};
+export const DropDownMenu = ({ menu, width, disabled = false, badgeTitle, badgeDot = false, loading = false, isNested = false, closeOnOptionClick = true, closeParent, tree, path, groupOrder, overflowContainer = true, maxHeight, testId, open: openProp, setOpen: setOpenProp, tooltip, error, warning, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const { label, title, trigger, fullHeightTrigger, colored, small, sections, component, placement, showAllButton, possiblePlacements = ['bottom-start', 'top-start'], } = menu;
+    const [isOpen, setOpen] = isBoolean(openProp) && isFunction(setOpenProp)
+        ? [openProp, setOpenProp]
+        : useState(false);
+    const close = () => setOpen(false);
+    const open = () => setOpen(true);
+    const { triggerProps, layerProps, renderLayer } = useLayer({
+        isOpen,
+        ...placementOptions(placement, isNested),
+        possiblePlacements,
+        ResizeObserver,
+        onOutsideClick: close,
+        overflowContainer,
+        onParentClose: close,
+    });
+    const isDisabled = disabled || isMenuEmpty(menu) || disabledContext;
+    //keep a record of close handlers so we can close sibling layers
+    registerClose(tree, path, close);
+    const onClickTrigger = () => {
+        if (isDisabled) {
+            return;
+        }
+        if (isOpen) {
+            close();
+            return;
+        }
+        //first close any sibling menus
+        siblings(tree, path).forEach((section) => {
+            if (section.close) {
+                section.close();
+            }
+        });
+        open();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Trigger, { ref: triggerProps.ref, isDisabled: isDisabled, badgeTitle: badgeTitle, badgeDot: badgeDot, loading: loading, width: width, fullHeight: fullHeightTrigger, trigger: trigger, label: label, title: title, onClickTrigger: onClickTrigger, colored: colored, small: small, isNested: isNested, component: component, groupOrder: groupOrder, isOpen: isOpen, tooltip: tooltip, error: error, warning: warning, testId: testId }), isOpen &&
+                renderLayer(_jsx("div", { ...layerProps, className: styles.layerContainer, "data-testid": menu.testId, onClick: (evt) => evt.stopPropagation(), children: _jsx(Layer, { sections: sections, isNested: isNested, width: width, closeOnOptionClick: closeOnOptionClick, close: closeParent || close, tree: tree, path: path, maxHeight: maxHeight, showAllButton: showAllButton, testId: testId && `${testId}-layer` }) }))] }));
+};
+export const Menu = (props) => {
+    return props.contextMenu ? (_jsx(ContextMenu, { ...props, tree: {}, path: "", testId: props.testId })) : (_jsx(DropDownMenu, { ...props, tree: {}, path: "", testId: props.testId }));
+};

package/dist/components/menu/menu.stories-data.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import { IMenuSection } from "./menu.interface";
+import { MenuType } from "./enum";
+import { TriggerType } from "../../common-enum";
+export declare const menu: {
+    label?: string;
+    trigger: TriggerType;
+    sections: IMenuSection[];
+};
+export declare const menuFileUpload: {
+    sections: (IMenuSection | {
+        onClick: undefined;
+        onChange: (selectedFiles: FileList | null) => Promise<void>;
+        upload: boolean;
+        type: MenuType;
+        label?: string | number | undefined;
+        icon?: React.ReactNode;
+        testId?: string | undefined;
+        description?: string | undefined;
+        selected?: boolean | undefined;
+        disabled?: boolean | undefined;
+        inline?: boolean | undefined;
+        title?: string | undefined;
+        download?: boolean | undefined;
+        menu?: any;
+        visible?: boolean | undefined;
+        closeOnOptionClick?: boolean | undefined;
+        actions?: any[] | undefined;
+        url?: string | undefined;
+    })[];
+    label?: string | undefined;
+    trigger: TriggerType;
+};
+export declare const menuJsxItems: {
+    label: import("react/jsx-runtime").JSX.Element;
+    sections: any[];
+    trigger: TriggerType;
+};
+export declare const menuDescriptionOnRight: {
+    label: string;
+    trigger: string;
+    sections: ({
+        type: string;
+        label: string;
+        description: string;
+        inline: boolean;
+        onClick: () => void;
+        selected?: undefined;
+    } | {
+        type: string;
+        label: string;
+        description: string;
+        inline: boolean;
+        onClick: () => void;
+        selected: boolean;
+    })[];
+};
+export declare const menuActions: {
+    sections: IMenuSection[];
+    label?: string | undefined;
+    trigger: TriggerType;
+};
+export declare const menuIcons: {
+    sections: IMenuSection[];
+    label?: string | undefined;
+    trigger: TriggerType;
+};
+export declare const menuSubmenus: {
+    sections: any[];
+    label?: string | undefined;
+    trigger: TriggerType;
+};
+export declare const menuLong: {
+    sections: any[];
+    label?: string | undefined;
+    trigger: TriggerType;
+};
+export declare const menuEmpty: {
+    label: string;
+    trigger: string;
+    sections: never[];
+};
+export declare const menuShowAll: {
+    label: string;
+    trigger: string;
+    showAllButton: {
+        visible: boolean;
+        showAllTitle: string;
+        showLessTitle: string;
+        additionalSections: ({
+            type: string;
+            label?: undefined;
+            onClick?: undefined;
+        } | {
+            type: string;
+            label: string;
+            onClick: () => void;
+        })[];
+    };
+    sections: any[];
+};

package/dist/components/menu/menu.stories-data.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "../layout/flex/flex";
+import { Badge } from "../badge/badge";
+import { MenuType } from "./enum";
+import { TriggerType } from "../../common-enum";
+const onFileChange = async (selectedFiles) => {
+    await console.log('onFileChange', selectedFiles);
+};
+export const menu = {
+    label: 'Select',
+    trigger: TriggerType.DROP_DOWN_BUTTON,
+    sections: [
+        { type: MenuType.HEADING, label: 'Heading' },
+        {
+            type: MenuType.OPTION,
+            label: 'King',
+            onClick: () => { },
+        },
+        {
+            type: MenuType.OPTION,
+            label: 'Queen',
+            selected: true,
+            onClick: () => { },
+        },
+        { type: MenuType.DIVIDER },
+        {
+            type: MenuType.OPTION,
+            label: 'Knight',
+            disabled: true,
+            onClick: () => { },
+        },
+        {
+            type: MenuType.OPTION,
+            label: 'Bishop',
+            onClick: () => { },
+        },
+    ],
+};
+export const menuFileUpload = {
+    ...menu,
+    sections: menu.sections.map((section) => section.type === MenuType.OPTION
+        ? {
+            ...section,
+            onClick: undefined,
+            onChange: onFileChange,
+            upload: true,
+        }
+        : section),
+};
+export const menuJsxItems = {
+    ...menu,
+    label: (_jsxs(Flex, { alignItems: "center", gap: "4px", children: ["Select", _jsx(Badge, { small: true, title: "BETA" })] })),
+    sections: Array(3).fill({
+        type: 'Menu',
+        trigger: 'Text',
+        menu: {
+            trigger: 'Text',
+            placement: 'right-start',
+            label: (_jsxs(Flex, { alignItems: "center", gap: "4px", children: ["Parent", _jsx(Badge, { small: true, title: "BETA" })] })),
+            title: 'Parent',
+            sections: Array(3).fill({
+                type: 'Option',
+                label: (_jsxs(Flex, { alignItems: "center", gap: "4px", children: ["Child", _jsx(Badge, { small: true, title: "BETA" })] })),
+                title: 'Child',
+            }),
+        },
+    }),
+};
+export const menuDescriptionOnRight = {
+    label: '123 m',
+    trigger: 'DropDownButton',
+    sections: [
+        {
+            type: 'Option',
+            label: '403.5433',
+            description: 'ft',
+            inline: true,
+            onClick: () => { },
+        },
+        {
+            type: 'Option',
+            label: '123',
+            description: 'm',
+            inline: true,
+            onClick: () => { },
+            selected: true,
+        },
+        {
+            type: 'Option',
+            label: '0.123',
+            description: 'km',
+            inline: true,
+            onClick: () => { },
+        },
+    ],
+};
+const actions = [
+    {
+        label: 'Delete',
+        icon: 'delete',
+        onClick: () => { },
+    },
+    {
+        label: 'Rename',
+        icon: 'rename',
+        onClick: () => { },
+    },
+];
+export const menuActions = {
+    ...menu,
+    sections: menu.sections.map((section) => section.type === 'Option'
+        ? {
+            ...section,
+            inline: true,
+            actions,
+        }
+        : section),
+};
+export const menuIcons = {
+    ...menu,
+    sections: menu.sections.map((section) => section.type === 'Option' || section.type === 'Heading'
+        ? {
+            ...section,
+            icon: 'star',
+            onClick: () => { },
+        }
+        : section),
+};
+export const menuSubmenus = {
+    ...menu,
+    sections: Array(3).fill({
+        type: 'Menu',
+        trigger: 'Text',
+        menu: {
+            trigger: 'Text',
+            placement: 'right-start',
+            label: 'Parent',
+            sections: Array(3).fill({
+                type: 'Option',
+                label: 'Child',
+                onClick: () => { },
+            }),
+        },
+    }),
+};
+export const menuLong = {
+    ...menu,
+    sections: Array(100).fill({
+        type: 'Option',
+        label: 'Item',
+        onClick: () => { },
+    }),
+};
+export const menuEmpty = {
+    label: 'No sections',
+    trigger: 'DropDownButton',
+    sections: [],
+};
+export const menuShowAll = {
+    label: 'Select',
+    trigger: 'DropDownButton',
+    showAllButton: {
+        visible: true,
+        showAllTitle: 'Show all...',
+        showLessTitle: 'Show less...',
+        additionalSections: [
+            {
+                type: 'Divider',
+            },
+            {
+                type: 'Option',
+                label: 'This item is always shown',
+                onClick: () => { },
+            },
+        ],
+    },
+    sections: Array(8).fill({
+        type: 'Option',
+        label: 'Item',
+        onClick: () => { },
+    }),
+};