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

package/dist/components/list/list.stories.js

@@ -0,0 +1,411 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useReducer, useState } from 'react';
+import produce from 'immer';
+import { List } from './list';
+import { ListHeading } from './list-row/list-heading';
+import { ListSubheading } from './list-row/list-subheading';
+import { Flex } from '../layout/flex/flex';
+import * as storyData from './list.stories-data';
+export default {
+    title: 'Basic/List',
+    component: List,
+    args: {
+        list: storyData.list,
+        noHeader: true,
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+const Template = (args) => {
+    return _jsx(List, { ...args });
+};
+export const Default = Template.bind({});
+export const Actions = Template.bind({});
+Actions.args = { list: storyData.listActions };
+export const Menus = Template.bind({});
+Menus.args = { list: storyData.listSubmenus };
+export const Details = Template.bind({});
+Details.args = { list: storyData.listDetails };
+export const Expanding = Template.bind({});
+Expanding.args = { list: storyData.listExpanding, expanding: true };
+export const Header = Template.bind({});
+Header.args = { list: storyData.listHeader, noHeader: false };
+export const Badges = Template.bind({});
+Badges.args = { list: storyData.listBadges };
+export const Nested = Template.bind({});
+Nested.args = { list: storyData.listNested };
+export const InvalidItems = Template.bind({});
+InvalidItems.args = { list: storyData.listInvalid };
+export const JSXTitles = Template.bind({});
+JSXTitles.args = { list: storyData.listJsx, noHeader: false };
+export const Bordered = Template.bind({});
+Bordered.args = { bordered: true };
+export const IconWithTooltip = Template.bind({});
+IconWithTooltip.args = { list: storyData.listIconTooltip };
+export const Metacount = Template.bind({});
+Metacount.args = { list: storyData.listCounts };
+export const StickyHeader = Template.bind({});
+StickyHeader.args = {
+    list: storyData.listLong,
+    noHeader: false,
+    stickyHeader: true,
+};
+StickyHeader.parameters = {
+    docs: {
+        story: {
+            inline: false,
+            iframeHeight: 200,
+        },
+    },
+};
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+    list: storyData.listLong,
+    scrollDetails: {
+        scrollable: true,
+    },
+};
+Scrollable.parameters = {
+    docs: {
+        description: {
+            story: 'Adds an internal scrollbar to the `List`, which will fill its parent height unless a `height` is set. The scrollbar can be toggled using `hideScrollbar`.',
+        },
+    },
+};
+Scrollable.decorators = [
+    (story) => _jsx("div", { style: { height: 200, overflow: 'hidden' }, children: story() }),
+];
+// TODO: Fix this story in Docs (works in Canvas)
+export const InfiniteScroll = () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const list = {
+        name: 'Animals',
+        items: [...Array(50)].map((item, index) => ({
+            id: index,
+            name: `Aardvark #${index + 1}`,
+            active: index === activeIndex,
+            onClick: () => setActiveIndex(index),
+        })),
+    };
+    return (_jsx("div", { style: { height: 200, overflow: 'auto' }, children: _jsx(List, { list: list, scrollDetails: {
+                infiniteScroll: true,
+                scrollable: true,
+                limit: 10,
+            } }) }));
+};
+export const ScrollToActiveItem = () => {
+    const reducer = (state, action) => {
+        switch (action.type) {
+            case 'headingClicked': {
+                const { headingKey } = action.payload;
+                return produce(state, (draft) => {
+                    const heading = draft[headingKey];
+                    heading.expanded = !heading.expanded;
+                });
+            }
+            case 'itemClicked': {
+                const { headingKey, itemIndex } = action.payload;
+                return produce(state, (draft) => {
+                    Object.keys(draft).forEach((key) => {
+                        draft[key].items.forEach((item, i) => {
+                            item.active = key === headingKey && i === itemIndex;
+                        });
+                    });
+                });
+            }
+            case 'addClicked': {
+                const { headingKey } = action.payload;
+                return produce(state, (draft) => {
+                    const heading = draft[headingKey];
+                    heading.expanded = true;
+                    heading.items.push({
+                        name: `${heading.label} #${heading.items.length + 1}`,
+                    });
+                });
+            }
+            case 'deleteClicked': {
+                const { headingKey, itemIndex } = action.payload;
+                return produce(state, (draft) => {
+                    let { items } = draft[headingKey];
+                    delete items[itemIndex];
+                    draft[headingKey].items = items.filter((i) => i); //remove empty slots
+                });
+            }
+            default:
+                return state;
+        }
+    };
+    const initialState = () => ({
+        mammals: {
+            draggable: true,
+            name: 'Mammals',
+            key: 'mammals',
+            label: 'Mammals',
+            expanded: true,
+            items: [
+                { name: 'Click item to scroll', type: 'Heading' },
+                { name: 'Mammal #1', active: true },
+                { name: 'Mammal #2' },
+                { name: 'Mammal #3' },
+                { name: 'Mammal #4' },
+                { name: 'Mammal #5' },
+                { name: 'Mammal #6' },
+                { name: 'Mammal #7' },
+                { name: 'Mammal #8' },
+                { name: 'Mammal #9' },
+                { name: 'Mammal #10' },
+            ],
+        },
+        amphibians: {
+            name: 'Amphibians (sticky header)',
+            key: 'amphibians',
+            label: 'Amphibians',
+            expanded: true,
+            items: [
+                { name: 'Click item to scroll', type: 'Heading' },
+                { name: 'Amphibian #1', active: true },
+                { name: 'Amphibian #2' },
+                { name: 'Amphibian #3' },
+                { name: 'Amphibian #4' },
+                { name: 'Amphibian #5' },
+                { name: 'Amphibian #6' },
+                { name: 'Amphibian #7' },
+                { name: 'Amphibian #8' },
+                { name: 'Amphibian #9' },
+                { name: 'Amphibian #10' },
+            ],
+        },
+    });
+    const [state, dispatch] = useReducer(reducer, {}, () => initialState());
+    const [triggerScroll, setTriggerScroll] = useState(false);
+    const onClickItem = (headingKey, itemIndex) => {
+        setTriggerScroll(true);
+        dispatch({
+            type: 'itemClicked',
+            payload: { headingKey, itemIndex },
+        });
+        // will execute after stack is cleared
+        setTimeout(() => setTriggerScroll(false), 0);
+    };
+    const onAddItem = (headingKey) => {
+        dispatch({ type: 'addClicked', payload: { headingKey } });
+    };
+    const onDeleteItem = (headingKey, itemIndex) => dispatch({
+        type: 'deleteClicked',
+        payload: { headingKey, itemIndex },
+    });
+    const { mammals, amphibians } = state;
+    const hydrateList = (list) => ({
+        ...list,
+        actions: [
+            {
+                label: 'Add',
+                primary: true,
+                icon: 'add',
+                onClick: () => onAddItem(list.key),
+            },
+        ],
+        items: list.items.map((item, itemIndex) => {
+            if (item.type == 'Heading') {
+                return {
+                    ...item,
+                    id: itemIndex,
+                };
+            }
+            return {
+                ...item,
+                id: itemIndex,
+                onClick: () => onClickItem(list.key, itemIndex),
+                actions: [
+                    {
+                        label: 'Delete',
+                        icon: 'delete',
+                        onClick: () => onDeleteItem(list.key, itemIndex),
+                    },
+                ],
+            };
+        }),
+    });
+    const height = 300;
+    return (_jsxs(Flex, { gap: true, children: [_jsx(List, { list: hydrateList(mammals), bordered: true, height: height, scrollDetails: {
+                    scrollable: true,
+                    hideScrollbar: false,
+                    triggerScrollToActiveItem: triggerScroll,
+                } }), _jsx(List, { list: hydrateList(amphibians), bordered: true, stickyHeader: true, height: height, scrollDetails: {
+                    scrollable: true,
+                    hideScrollbar: false,
+                    triggerScrollToActiveItem: triggerScroll,
+                } })] }));
+};
+export const HeadingsManaged = () => {
+    const reducer = (state, action) => {
+        switch (action.type) {
+            case 'headingClicked': {
+                const { headingKey } = action.payload;
+                return produce(state, (draft) => {
+                    const heading = draft[headingKey];
+                    heading.expanded = !heading.expanded;
+                });
+            }
+            case 'itemClicked': {
+                const { headingKey, itemIndex } = action.payload;
+                return produce(state, (draft) => {
+                    Object.keys(draft).forEach((key) => {
+                        draft[key].items.forEach((item, i) => {
+                            item.active = key === headingKey && i === itemIndex;
+                        });
+                    });
+                });
+            }
+            case 'addClicked': {
+                const { headingKey } = action.payload;
+                return produce(state, (draft) => {
+                    const heading = draft[headingKey];
+                    heading.expanded = true;
+                    heading.items.push({
+                        name: `${heading.label} #${heading.items.length + 1}`,
+                    });
+                });
+            }
+            case 'deleteClicked': {
+                const { headingKey, itemIndex } = action.payload;
+                return produce(state, (draft) => {
+                    let { items } = draft[headingKey];
+                    delete items[itemIndex];
+                    draft[headingKey].items = items.filter((i) => i); //remove empty slots
+                });
+            }
+            default:
+                return state;
+        }
+    };
+    const initialState = () => ({
+        mammals: {
+            key: 'mammals',
+            label: 'Mammals',
+            expanded: true,
+            items: [{ name: 'Aardvark', active: true }, { name: 'Kangaroo' }],
+        },
+        amphibians: {
+            key: 'amphibians',
+            label: 'Amphibians',
+            expanded: true,
+            items: [{ name: 'Frog' }],
+        },
+    });
+    const [state, dispatch] = useReducer(reducer, initialState());
+    const onClickHeading = (headingKey) => dispatch({ type: 'headingClicked', payload: { headingKey } });
+    const onClickItem = (headingKey, itemIndex) => dispatch({
+        type: 'itemClicked',
+        payload: { headingKey, itemIndex },
+    });
+    const onAddItem = (headingKey) => dispatch({ type: 'addClicked', payload: { headingKey } });
+    const onDeleteItem = (headingKey, itemIndex) => dispatch({
+        type: 'deleteClicked',
+        payload: { headingKey, itemIndex },
+    });
+    const { mammals, amphibians } = state;
+    const hydrateHeading = (list) => ({
+        name: list.label,
+        metaCount: list.items.length,
+        expanded: list.expanded,
+        onClick: () => onClickHeading(list.key),
+        actions: [
+            {
+                label: 'Add',
+                primary: true,
+                icon: 'add',
+                onClick: () => onAddItem(list.key),
+            },
+        ],
+    });
+    const hydrateList = (list) => ({
+        ...list,
+        items: list.items.map((item, itemIndex) => ({
+            ...item,
+            id: itemIndex,
+            onClick: () => onClickItem(list.key, itemIndex),
+            actions: [
+                {
+                    label: 'Delete',
+                    icon: 'delete',
+                    onClick: () => onDeleteItem(list.key, itemIndex),
+                },
+            ],
+        })),
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(ListHeading, { name: "Animals" }), _jsx(ListSubheading, { item: hydrateHeading(mammals) }), mammals.expanded && _jsx(List, { noHeader: true, list: hydrateList(mammals) }), _jsx(ListSubheading, { item: hydrateHeading(amphibians) }), amphibians.expanded && _jsx(List, { noHeader: true, list: hydrateList(amphibians) })] }));
+};
+export const ManagedDragAndDrop = () => {
+    const arraymove = (arr, from, to) => {
+        if ((from && isNaN(from)) || (to && isNaN(to)) || from === to) {
+            return arr;
+        }
+        const copy = [...arr];
+        if (typeof to === 'number' && typeof from === 'number') {
+            copy.splice(to, 0, copy.splice(from, 1)[0]);
+        }
+        return copy;
+    };
+    const beautifulDnD = {
+        name: 'List Name',
+        draggable: true,
+        items: [
+            {
+                id: 1,
+                name: 'element 1',
+                actions: [
+                    {
+                        label: 'Delete',
+                        icon: 'delete',
+                        onClick: () => { },
+                    },
+                ],
+            },
+            {
+                id: 2,
+                name: 'element 2',
+                actions: [
+                    {
+                        label: 'Delete',
+                        icon: 'delete',
+                        onClick: () => { },
+                    },
+                ],
+            },
+            {
+                id: 3,
+                name: 'element 3',
+            },
+            {
+                id: 4,
+                name: 'element 4',
+                actions: [
+                    {
+                        label: 'Delete',
+                        icon: 'delete',
+                        onClick: () => { },
+                    },
+                ],
+            },
+            {
+                id: 5,
+                name: 'element 5',
+                actions: [
+                    {
+                        label: 'Delete',
+                        icon: 'delete',
+                        onClick: () => { },
+                    },
+                ],
+            },
+        ],
+    };
+    const [reorderedItems, setReorderedItems] = useState(beautifulDnD.items);
+    const onListReorder = (reorderData) => {
+        const { to, from } = reorderData;
+        setReorderedItems(arraymove(reorderedItems, from, to));
+    };
+    return (_jsx(List, { list: { ...beautifulDnD, items: reorderedItems }, draggable: true, onListReorder: onListReorder }));
+};

package/dist/components/list/toggle-narrow.d.ts

@@ -0,0 +1,2 @@
+import { IToggleNarrowProps } from './list.interface';
+export declare const ToggleNarrow: ({ toggleNarrow, onClickToggleNarrow, }: IToggleNarrowProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/list/toggle-narrow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../icon/icon';
+import styles from './list.module.less';
+import { IconType } from "../../common-enum";
+export const ToggleNarrow = ({ toggleNarrow, onClickToggleNarrow, }) => {
+    return toggleNarrow ? (_jsx("a", { className: styles.toggleNarrow, onClick: onClickToggleNarrow, children: _jsx(Icon, { icon: IconType.CHEVRON_LEFT }) })) : null;
+};

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { Theme } from "../../common-enum";
+export interface ILoaderProps {
+    fullViewPortSize?: boolean;
+    cover?: boolean;
+    width?: string | number;
+    height?: string | number;
+    text?: string;
+    details?: string | ReactNode;
+    children?: ReactNode;
+    testId?: string | null;
+    theme?: Theme;
+}
+export declare const Loader: ({ width, height, text, details, fullViewPortSize, cover, children, theme, testId, }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/loader/loader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import styles from "./loader.module.less";
+import { Theme } from "../../common-enum";
+export const Loader = ({ width, height, text = '', details = '', fullViewPortSize = false, cover = false, children = null, theme = Theme.DARK, testId = null, }) => {
+    const color = theme === Theme.DARK ? Theme.WHITE : Theme.INHERIT;
+    const background = theme === 'white'
+        ? 'var(--color-background-raised)'
+        : theme === 'light'
+            ? 'var(--color-background)'
+            : 'black';
+    return (_jsx("div", { className: cx(styles.loader, cover ? styles.cover : '', {
+            [styles.fullViewPortSize]: fullViewPortSize,
+        }), style: { width, height }, "data-testid": testId, children: _jsx("div", { className: styles.dimmer, style: { background, color }, children: _jsxs("div", { className: styles.content, "data-testid": testId && `${testId}-content`, children: [children, text && (_jsx("div", { className: styles.text, "data-testid": testId && `${testId}-text`, children: text })), details && (_jsx("div", { className: styles.details, "data-testid": testId && `${testId}-details`, children: details }))] }) }) }));
+};

package/dist/components/loader/loader.stories.d.ts

@@ -0,0 +1,32 @@
+import { ILoaderProps } from "./loader";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const WithProgressBar: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const TintedBackground: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const FullViewport: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const FullViewportWithProgressBar: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const WithExtraTextDetails: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const WithExtraJSXDetails: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILoaderProps>;
+export declare const CoversCardContent: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            story: {
+                inline: boolean;
+                iframeHeight: number;
+            };
+        };
+    };
+};
+export declare const ReplacesCardContent: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            story: {
+                inline: boolean;
+                iframeHeight: number;
+            };
+        };
+    };
+};

package/dist/components/loader/loader.stories.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Loader } from "./loader";
+import { ProgressBar } from "../progress-bar/progress-bar";
+import { Spinner } from "../spinner/spinner";
+import { Spacer } from "../layout/spacer/spacer";
+import { Button } from "../button/button";
+import { Card } from "../card/card";
+import { Theme } from "../../common-enum";
+export default {
+    title: 'Progress/Loader',
+    component: Loader,
+    argTypes: {
+        theme: {
+            control: {
+                type: 'inline-radio',
+            },
+            options: ['white', 'light', 'dark'],
+        },
+    },
+    args: {
+        theme: 'white',
+        text: 'Loading...',
+        width: '100%',
+        height: '100%',
+        fullViewPortSize: false,
+    },
+    decorators: [
+        (story) => (_jsx("div", { style: { height: '200px', position: 'relative' }, children: story() })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+const SpinnerTemplate = (args) => {
+    const { theme } = args;
+    return (_jsx(Loader, { ...args, children: _jsx(Spinner, { dark: theme !== 'dark' }) }));
+};
+const ProgressBarTemplate = (args) => {
+    const { theme } = args;
+    return (_jsx(Loader, { ...args, children: _jsx(ProgressBar, { width: "300px", inverted: theme === 'dark', percentage: 40 }) }));
+};
+export const Default = SpinnerTemplate.bind({});
+Default.args = { testId: 'story-default-spinner' };
+export const WithProgressBar = ProgressBarTemplate.bind({});
+export const TintedBackground = SpinnerTemplate.bind({});
+TintedBackground.args = { theme: Theme.LIGHT };
+export const FullViewport = SpinnerTemplate.bind({});
+FullViewport.args = {
+    theme: Theme.DARK,
+    fullViewPortSize: true,
+};
+export const FullViewportWithProgressBar = ProgressBarTemplate.bind({});
+FullViewportWithProgressBar.args = {
+    theme: Theme.DARK,
+    fullViewPortSize: true,
+};
+export const WithExtraTextDetails = ProgressBarTemplate.bind({});
+WithExtraTextDetails.args = { details: 'Some extra info' };
+export const WithExtraJSXDetails = ProgressBarTemplate.bind({});
+WithExtraJSXDetails.args = {
+    text: '',
+    details: (_jsxs(_Fragment, { children: [_jsx("div", { style: { opacity: 0.5 }, children: "Step 1: Lorem ipsum...DONE" }), _jsx(Spacer, { height: "8px" }), _jsx("div", { children: "Step 2: Dolor est" }), _jsx(Spacer, { height: "8px" }), _jsx("div", { style: { opacity: 0.5 }, children: "Step 3: Compendum" }), _jsx(Spacer, { height: "16px" }), _jsx(Button, { label: "Cancel", onClick: () => { } })] })),
+};
+export const CoversCardContent = () => {
+    const [loading, setLoading] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Toggle loading", onClick: () => setLoading(!loading) }), _jsx(Spacer, {}), _jsx(Card, { children: _jsxs("div", { style: { position: 'relative' }, children: [loading && (_jsx(Loader, { cover: true, theme: Theme.WHITE, children: _jsx(Spinner, { dark: true }) })), 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20)] }) })] }));
+};
+CoversCardContent.parameters = {
+    docs: {
+        story: {
+            inline: false,
+            iframeHeight: 400,
+        },
+    },
+};
+export const ReplacesCardContent = () => {
+    const [loading, setLoading] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Toggle loading", onClick: () => setLoading(!loading) }), _jsx(Spacer, {}), _jsx(Card, { children: _jsx("div", { style: { position: 'relative' }, children: loading ? (_jsx(Loader, { theme: Theme.WHITE, height: "200px", children: _jsx(Spinner, { dark: true }) })) : (_jsx("div", { children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20) })) }) })] }));
+};
+ReplacesCardContent.parameters = {
+    docs: {
+        story: {
+            inline: false,
+            iframeHeight: 400,
+        },
+    },
+};

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

@@ -0,0 +1,11 @@
+export declare enum MenuType {
+    HEADING = "Heading",
+    DIVIDER = "Divider",
+    OPTION = "Option",
+    MENU = "Menu"
+}
+export declare enum MenuCarat {
+    FALSE = "false",
+    RIGHT = "right",
+    DOWN = "down"
+}

package/dist/components/menu/enum.js

@@ -0,0 +1,13 @@
+export var MenuType;
+(function (MenuType) {
+    MenuType["HEADING"] = "Heading";
+    MenuType["DIVIDER"] = "Divider";
+    MenuType["OPTION"] = "Option";
+    MenuType["MENU"] = "Menu";
+})(MenuType || (MenuType = {}));
+export var MenuCarat;
+(function (MenuCarat) {
+    MenuCarat["FALSE"] = "false";
+    MenuCarat["RIGHT"] = "right";
+    MenuCarat["DOWN"] = "down";
+})(MenuCarat || (MenuCarat = {}));

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

@@ -0,0 +1,4 @@
+export { Layer } from './layer/layer';
+export { placementOptions } from './layer/placementOptions';
+export { siblings, registerClose } from './layer/path';
+export { Trigger } from './trigger/trigger';

package/dist/components/menu/index.js

@@ -0,0 +1,8 @@
+/* intentional circular dependency (recursion for sub-menus) */
+/* eslint-disable import/no-cycle*/
+export { Layer } from './layer/layer';
+/* eslint-enable import/no-cycle*/
+export { placementOptions } from './layer/placementOptions';
+export { siblings, registerClose } from './layer/path';
+export { Trigger } from './trigger/trigger';
+// TODO - consider to fix circular dependency

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

@@ -0,0 +1 @@
+export declare const Divider: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from '../menu.module.less';
+export const Divider = () => _jsx("hr", { className: styles.divider });

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IHeadingProps {
+    label: string | number;
+    onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    icon?: React.ReactNode;
+    testId?: string;
+}
+export declare const Heading: ({ label, onClick, icon, testId, }: IHeadingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from '../menu.module.less';
+export const Heading = ({ label, onClick, icon, testId, }) => (_jsxs("div", { onClick: (evt) => evt.stopPropagation(), className: styles.heading, "data-testid": testId, children: [label, _jsx("span", { className: styles.headingIcon, onClick: onClick, children: icon })] }));

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

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { IMenuSection, IMenuShowAllButton } from "../menu.interface";
+export interface IMenuLayerProps {
+    sections: IMenuSection[] | ReactNode;
+    isNested?: boolean;
+    width?: string | number;
+    closeOnOptionClick?: boolean;
+    close?: () => void;
+    tree?: any;
+    path?: any;
+    maxHeight?: string | number;
+    showAllButton?: IMenuShowAllButton;
+    testId?: string;
+}
+export declare const Layer: ({ sections, isNested, width, closeOnOptionClick, close, tree, path, maxHeight, showAllButton, testId, }: IMenuLayerProps) => import("react/jsx-runtime").JSX.Element;