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

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

@@ -1,47 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

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

package/dist/components/menu/menu.js

@@ -1,92 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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: () => { },
-    }),
-};