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

package/dist/components/list/list.js

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import cx from 'classnames';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { Card } from '../card/card';
-import { ListHeading } from './list-row/list-heading';
-import { ListRow } from './list-row/list-row';
-import styles from './list.module.less';
-import { Loader } from '../loader/loader';
-export const List = ({ list, bordered = false, expanding = false, narrow = false, toggleNarrow = false, onToggleNarrow = () => { }, invokeEditOnRowClick = true, noHeader = false, stickyHeader, draggable = false, onListReorder = () => { }, marginBottom = 0, height, testId, scrollDetails = {
-    scrollable: false,
-    hideScrollbar: false,
-    triggerScrollToActiveItem: false,
-    infiniteScroll: false,
-    limit: 10,
-    infiniteScrollTarget: undefined,
-}, }) => {
-    const { scrollable, hideScrollbar, triggerScrollToActiveItem, infiniteScroll, infiniteScrollTarget, } = scrollDetails;
-    const listHeadingRef = useRef(null);
-    const listRowRefs = useRef([]);
-    const listContainerRef = useRef(null);
-    const MIN_ITEM_HEIGHT = 44;
-    const pageSize = infiniteScroll
-        ? Math.ceil(window.innerHeight / MIN_ITEM_HEIGHT)
-        : list.items.length;
-    const [numVisibleRows, setNumVisibleRows] = useState(pageSize);
-    const [hasMore, setHasMore] = useState(numVisibleRows < list?.items.length);
-    // update length of ref array if items are added or removed
-    useEffect(() => {
-        listRowRefs.current = listRowRefs.current.slice(0, list.items.length);
-    }, [list.items.length]);
-    const loadMoreItems = () => {
-        if (numVisibleRows >= list.items.length) {
-            setHasMore(false);
-            return;
-        }
-        const newVisibleRows = pageSize + numVisibleRows;
-        setNumVisibleRows(newVisibleRows);
-    };
-    const findFirstActiveItemIndex = (items) => items.findIndex((item) => item.active === true);
-    const setScrollToActiveItem = (activeItemIndex) => {
-        if (!listContainerRef.current || !listHeadingRef.current)
-            return;
-        // account for list row border length.
-        const itemBorderLength = 1;
-        if (triggerScrollToActiveItem && activeItemIndex >= 0) {
-            // add heights from div of items up until the active item
-            const itemOffsets = listRowRefs.current.reduce((acc, val, index) => {
-                if (index < activeItemIndex) {
-                    return acc + val.clientHeight + itemBorderLength;
-                }
-                return acc;
-            }, 0);
-            // center active item
-            const centerOffset = listContainerRef.current.clientHeight / 2 -
-                listRowRefs.current[activeItemIndex].clientHeight / 2;
-            const scrollOffset = itemOffsets - centerOffset;
-            // if sticky header, offset by half of heading div height
-            if (stickyHeader) {
-                const headingOffset = listHeadingRef.current.clientHeight / 2;
-                listContainerRef.current.scrollTop = scrollOffset + headingOffset;
-            }
-            // if not sticky header, offset by heading div height
-            const headingOffset = listHeadingRef.current.clientHeight;
-            listContainerRef.current.scrollTop = scrollOffset + headingOffset;
-        }
-    };
-    useEffect(() => {
-        if (triggerScrollToActiveItem) {
-            const activeItemIndex = findFirstActiveItemIndex(list?.items);
-            setScrollToActiveItem(activeItemIndex);
-        }
-    }, [
-        listContainerRef.current,
-        listHeadingRef.current,
-        triggerScrollToActiveItem,
-    ]);
-    return (_jsx(DragDropContext, { onDragEnd: (result) => {
-            const from = result?.source?.index;
-            const to = result?.destination?.index;
-            onListReorder({ from, to });
-        }, children: _jsx(Droppable, { droppableId: "droppable", children: (provided, snapshot) => {
-                return (_jsx("div", { className: cx(narrow ? styles.narrow : '', scrollable ? styles.scrollableList : '', hideScrollbar ? styles.hideScrollbar : ''), "data-testid": testId, id: "scrollableDiv", style: { height, marginBottom }, ref: listContainerRef, children: _jsx("div", { ref: provided.innerRef, ...provided.droppableProps, children: _jsxs(Card, { bordered: bordered, padding: false, children: [!noHeader && (_jsx(ListHeading, { name: list.name, actions: list.actions, toggleNarrow: toggleNarrow, onToggleNarrow: onToggleNarrow, stickyHeader: stickyHeader, ref: listHeadingRef })), _jsx("div", { className: cx(styles.list, bordered ? styles.bordered : ''), children: infiniteScroll ? (_jsx(InfiniteScroll, { dataLength: numVisibleRows, next: loadMoreItems, hasMore: hasMore, scrollableTarget: infiniteScrollTarget || 'scrollableDiv', loader: _jsx(Loader, {}), children: _jsx(ListRow, { draggable: draggable, items: list.items.slice(0, numVisibleRows), expanding: expanding, invokeEditOnRowClick: invokeEditOnRowClick, onListReorder: onListReorder, provided: provided, snapshot: snapshot, ref: listRowRefs }) })) : (_jsx(ListRow, { draggable: draggable, items: list.items, expanding: expanding, invokeEditOnRowClick: invokeEditOnRowClick, onListReorder: onListReorder, provided: provided, snapshot: snapshot, ref: listRowRefs })) })] }) }) }));
-            } }) }));
-};

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

@@ -1,310 +0,0 @@
-import React from "react";
-import { IListItem } from "./list-row/list-row.interface";
-export declare const items: IListItem[];
-export declare const list: {
-    items: IListItem[];
-};
-export declare const listHeader: {
-    name: string;
-    actions: ({
-        label: string;
-        subActions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        primary?: undefined;
-        icon?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        primary: boolean;
-        icon: string;
-        onClick: () => void;
-        subActions?: undefined;
-    })[];
-    items: IListItem[];
-};
-export declare const listSubheadings: {
-    items: IListItem[];
-    name: string;
-    actions: ({
-        label: string;
-        subActions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        primary?: undefined;
-        icon?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        primary: boolean;
-        icon: string;
-        onClick: () => void;
-        subActions?: undefined;
-    })[];
-};
-export declare const listJsx: {
-    name: import("react/jsx-runtime").JSX.Element;
-    items: {
-        name: import("react/jsx-runtime").JSX.Element;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-    actions: ({
-        label: string;
-        subActions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        primary?: undefined;
-        icon?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        primary: boolean;
-        icon: string;
-        onClick: () => void;
-        subActions?: undefined;
-    })[];
-};
-export declare const listSubcomponents: {
-    items: {
-        actions: {
-            childComponent: import("react/jsx-runtime").JSX.Element;
-        }[];
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listSubmenus: {
-    items: {
-        actions: {
-            label: string;
-            subActions: {
-                label: string;
-                icon: string;
-                onClick: () => void;
-            }[];
-        }[];
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listBadges: {
-    items: {
-        label: {
-            value: string;
-            color: string;
-        };
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listSubheadingsBadges: {
-    items: {
-        label: {
-            value: string;
-            color: string;
-        };
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-    name: string;
-    actions: ({
-        label: string;
-        subActions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        primary?: undefined;
-        icon?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        primary: boolean;
-        icon: string;
-        onClick: () => void;
-        subActions?: undefined;
-    })[];
-};
-export declare const listActions: {
-    items: {
-        actions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listDetails: {
-    items: {
-        details: string;
-        metadata: string;
-        testId: string;
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listExpanding: {
-    items: {
-        content: import("react/jsx-runtime").JSX.Element;
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listNested: {
-    items: IListItem[];
-};
-export declare const listInvalid: {
-    items: (IListItem | {
-        id: number;
-        name: string;
-        invalid: boolean;
-    })[];
-};
-export declare const listIconTooltip: {
-    items: {
-        icon: {
-            icon: string;
-            color: string;
-            tooltip: {
-                text: import("react/jsx-runtime").JSX.Element;
-            };
-        };
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-        metaCount?: number | undefined;
-    }[];
-};
-export declare const listCounts: {
-    items: {
-        metaCount: number;
-        name?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-        cursor?: string | undefined;
-        url?: string | undefined;
-        active?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onClick?: ((evt: any) => void) | undefined;
-        title?: string | undefined;
-        testId?: string | undefined;
-        level?: number | undefined;
-        label?: import("./list-row/list-row.interface").ILabel | undefined;
-        actions?: import("../actions/actions.interface").IAction[] | undefined;
-        id: string | number;
-        type?: string | undefined;
-    }[];
-};
-export declare const listLong: {
-    name: string;
-    items: {
-        id: number;
-        name: string;
-    }[];
-};

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

@@ -1,270 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Flex } from "../layout/flex/flex";
-import { Menu } from "../menu/menu";
-import { Icon } from "../icon/icon";
-import { IconType, TriggerType } from "../../common-enum";
-import { MenuType } from "../menu/enum";
-export const items = [
-    {
-        id: 1,
-        name: 'Aardvark',
-    },
-    {
-        id: 2,
-        name: 'Kangaroo',
-        active: true,
-    },
-    {
-        id: 3,
-        name: 'Jaguar',
-        disabled: true,
-    },
-];
-const itemsSubheadings = [
-    {
-        id: 1,
-        name: 'Marsupials',
-        type: 'Heading',
-        metaCount: 1,
-    },
-    {
-        id: 2,
-        name: 'Aardvark',
-    },
-    {
-        id: 3,
-        name: 'Kangaroo',
-        active: true,
-    },
-    {
-        id: 4,
-        name: 'Mammals',
-        type: 'Heading',
-        metaCount: 1,
-    },
-    {
-        id: 5,
-        name: 'Jaguar',
-    },
-];
-const itemsNested = [
-    {
-        id: 1,
-        name: 'Aardvark',
-    },
-    {
-        id: 2,
-        name: 'Kangaroo',
-        active: true,
-    },
-    {
-        id: 3,
-        name: 'Grey',
-        level: 1,
-    },
-    {
-        id: 4,
-        name: 'Eastern',
-        level: 2,
-    },
-    {
-        id: 5,
-        name: 'Macropus giganteus giganteus',
-        title: 'Macropus giganteus giganteus',
-        level: 3,
-    },
-    {
-        id: 6,
-        name: 'Macropus giganteus tasmaniensis',
-        title: 'Macropus giganteus tasmaniensis',
-        level: 3,
-    },
-    {
-        id: 7,
-        name: 'Western',
-        level: 2,
-    },
-    {
-        id: 8,
-        name: 'Red',
-        level: 1,
-    },
-    {
-        id: 9,
-        name: 'Jaguar',
-    },
-];
-export const list = {
-    items,
-};
-export const listHeader = {
-    name: 'Animals',
-    actions: [
-        {
-            label: 'More',
-            subActions: [
-                {
-                    label: 'Item',
-                    icon: 'up',
-                    onClick: () => { },
-                },
-                {
-                    label: 'Item',
-                    icon: 'down',
-                    onClick: () => { },
-                },
-            ],
-        },
-        {
-            label: 'Add',
-            primary: true,
-            icon: 'add',
-            onClick: () => { },
-        },
-    ],
-    items,
-};
-export const listSubheadings = {
-    ...listHeader,
-    items: itemsSubheadings,
-};
-export const listJsx = {
-    ...listHeader,
-    name: (_jsxs(Flex, { gap: "8px", children: ["Animals", _jsx(Icon, { icon: IconType.STAR })] })),
-    items: items.map((item) => ({
-        ...item,
-        name: (_jsxs(Flex, { gap: "8px", alignItems: "center", children: [item.name, _jsx(Icon, { icon: IconType.STAR })] })),
-    })),
-};
-export const listSubcomponents = {
-    //  TODO - revisit after MENU component
-    items: items.map((item) => ({
-        ...item,
-        actions: [
-            {
-                childComponent: (_jsx(Menu, { menu: {
-                        trigger: TriggerType.COMPONENT,
-                        component: _jsx(Icon, { icon: IconType.MENU }),
-                        placement: 'bottom-end',
-                        sections: [
-                            {
-                                type: MenuType.OPTION,
-                                label: 'Item',
-                                onClick: () => { },
-                            },
-                            {
-                                type: MenuType.OPTION,
-                                label: 'Item',
-                                onClick: () => { },
-                            },
-                        ],
-                    } })),
-            },
-        ],
-    })),
-};
-export const listSubmenus = {
-    items: items.map((item) => ({
-        ...item,
-        actions: [
-            {
-                label: 'More',
-                subActions: [
-                    {
-                        label: 'Move Up',
-                        icon: 'up',
-                        onClick: () => { },
-                    },
-                    {
-                        label: 'Move Down',
-                        icon: 'down',
-                        onClick: () => { },
-                    },
-                ],
-            },
-        ],
-    })),
-};
-export const listBadges = {
-    items: items.map((item, index) => ({
-        ...item,
-        label: {
-            value: String(index + 1),
-            color: 'var(--color-text-info)',
-        },
-    })),
-};
-export const listSubheadingsBadges = {
-    ...listSubheadings,
-    items: listSubheadings.items.map((item, index) => ({
-        ...item,
-        label: {
-            value: String(index + 1),
-            color: 'var(--color-text-info)',
-        },
-    })),
-};
-export const listActions = {
-    items: items.map((item) => ({
-        ...item,
-        actions: [
-            {
-                label: 'Delete',
-                icon: 'delete',
-                onClick: () => { },
-            },
-        ],
-    })),
-};
-export const listDetails = {
-    items: items.map((item, itemIx) => ({
-        ...item,
-        details: 'Description goes here',
-        metadata: '2019-05-03 09:03:51',
-        testId: `story-list-item-${itemIx}`,
-    })),
-};
-export const listExpanding = {
-    items: items.map((item) => ({
-        ...item,
-        content: _jsx("div", { children: "Example content element (for show/hide)." }),
-    })),
-};
-export const listNested = {
-    items: itemsNested,
-};
-export const listInvalid = {
-    items: [
-        ...items,
-        {
-            id: 4,
-            name: 'Dodo',
-            invalid: true,
-        },
-    ],
-};
-export const listIconTooltip = {
-    items: items.map((item) => ({
-        ...item,
-        icon: {
-            icon: 'success',
-            color: 'var(--color-text-success)',
-            tooltip: {
-                text: _jsx(_Fragment, { children: "Tooltip goes here" }),
-            },
-        },
-    })),
-};
-export const listCounts = {
-    items: items.map((item) => ({
-        ...item,
-        metaCount: 3,
-    })),
-};
-export const listLong = {
-    name: 'Animals',
-    items: [...Array(50)].map((item, index) => ({
-        id: index,
-        name: `Aardvark #${index + 1}`,
-    })),
-};

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

@@ -1,22 +0,0 @@
-import { IListProps } from './list.interface';
-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, IListProps>;
-export declare const Actions: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Menus: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Details: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Expanding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Header: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Badges: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Nested: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const InvalidItems: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const JSXTitles: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Bordered: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const IconWithTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Metacount: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const StickyHeader: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const Scrollable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IListProps>;
-export declare const InfiniteScroll: () => import("react/jsx-runtime").JSX.Element;
-export declare const ScrollToActiveItem: () => import("react/jsx-runtime").JSX.Element;
-export declare const HeadingsManaged: () => import("react/jsx-runtime").JSX.Element;
-export declare const ManagedDragAndDrop: () => import("react/jsx-runtime").JSX.Element;