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

package/dist/components/tree/tree-item.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cx from 'classnames';
-import listStyles from '../list/list.module.less';
-import styles from './tree.module.less';
-import { Actions } from '../actions/actions';
-import { MetaContent } from '../list/list-row/meta-content';
-import { Button } from '../button/button';
-import { Icon } from '../icon/icon';
-import { Color, IconType } from '../../common-enum';
-// TODO: Replace this with reused list-item component
-export const TreeItem = ({ node, depth, isOpen, onToggle, hasChild, draggable, }) => {
-    const { id, data } = node;
-    const { active, testId, onClick, actions = [] } = data;
-    const handleToggle = (e) => {
-        e.stopPropagation();
-        onToggle(id);
-    };
-    // TODO: Decide whether to implement open on drag over
-    // const dragOverProps = useDragOver(id, isOpen, onToggle);
-    return (_jsx("div", { className: cx(listStyles.item, listStyles.action, active ? listStyles.active : ''), "data-testid": testId, onClick: (evt) => {
-            if (onClick) {
-                onClick(evt);
-            }
-        }, children: _jsxs("div", { className: listStyles.itemHeader, style: {
-                marginInlineStart: depth * 24,
-            }, children: [draggable && (_jsx("div", { className: listStyles.drag, children: _jsx(Icon, { icon: IconType.DRAG }) })), hasChild && (_jsx("div", { className: styles.toggle, children: _jsx(Button, { basic: true, colored: Color.MUTED, small: true, round: true, icon: isOpen ? IconType.COLLAPSE : IconType.EXPAND, onClick: handleToggle }) })), _jsx(MetaContent, { item: data }), _jsx("div", { className: listStyles.right, children: _jsx("div", { className: listStyles.actions, children: _jsx(Actions, { actions: actions }) }) })] }) }));
-};

package/dist/components/tree/tree-placeholder.d.ts

@@ -1,4 +0,0 @@
-export interface ITreePlaceholderProps {
-    depth: number;
-}
-export declare const TreePlaceholder: ({ depth }: ITreePlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tree/tree-placeholder.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './tree.module.less';
-export const TreePlaceholder = ({ depth }) => (_jsx("div", { className: styles.placeholder, style: { left: depth * 24 } }));

package/dist/components/tree/tree.d.ts

@@ -1,42 +0,0 @@
-import React, { RefObject } from 'react';
-export interface ITreeListProps {
-    name?: string | React.ReactNode;
-    noHeader?: boolean;
-    items: {
-        id: string | number;
-        name: string | React.ReactNode;
-        parent: string | number;
-        droppable?: boolean;
-        details?: string | React.ReactNode;
-        active?: boolean;
-        testId?: string;
-        icon?: {
-            icon: React.ReactNode;
-            color: string;
-            tooltip?: {
-                text: string | number | React.ReactNode;
-                error?: boolean;
-                warning?: boolean;
-                placement?: string;
-                enabled?: boolean;
-                maxWidth?: string | number;
-                triggerOffset?: string | number;
-                possiblePlacements?: string[];
-                fontSize?: string | number;
-                padding?: string | number;
-            };
-        };
-    }[];
-    onClick?: () => void;
-    actions?: any[];
-}
-export interface ITreeProps {
-    list: ITreeListProps;
-    draggable?: boolean;
-    onListReorder?: (newList: any[]) => void;
-    onChangeOpen?: (id: string | number) => void;
-    testId?: string;
-    isInitialOpen?: boolean;
-    treeRef?: RefObject<any>;
-}
-export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, }: ITreeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tree/tree.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DndProvider } from 'react-dnd';
-import { Tree as TreeView, MultiBackend, getBackendOptions, } from '@minoru/react-dnd-treeview';
-import { TreeItem } from './tree-item';
-import listStyles from '../list/list.module.less';
-import styles from './tree.module.less';
-import { ListHeading } from '../list/list-row/list-heading';
-import { TreePlaceholder } from './tree-placeholder';
-export const Tree = ({ list, draggable = false, onListReorder, onChangeOpen, testId, isInitialOpen = false, treeRef, }) => {
-    const handleDrop = (newTree) => {
-        if (onListReorder) {
-            // Transform tree to list
-            const newList = newTree.map(({ id, parent, droppable, data }) => ({
-                id,
-                parent,
-                droppable,
-                ...data,
-            }));
-            onListReorder(newList);
-        }
-    };
-    const handleOpen = (id) => {
-        if (onChangeOpen) {
-            onChangeOpen(id);
-        }
-    };
-    // Transform list to tree
-    const tree = list?.items?.map(({ id, droppable, parent, name, ...rest }) => ({
-        id,
-        text: name,
-        droppable,
-        parent,
-        data: {
-            name,
-            ...rest,
-        },
-    }));
-    return (_jsxs("div", { "data-testid": testId, children: [list.name && !list.noHeader && (_jsx(ListHeading, { name: list.name, actions: list.actions })), _jsx("div", { className: listStyles.list, children: _jsx(DndProvider, { backend: MultiBackend, options: getBackendOptions(), context: window, children: _jsx(TreeView, { ref: treeRef, tree: tree, sort: false, insertDroppableFirst: false, canDrag: () => draggable, canDrop: (tree, { dragSource, dropTargetId }) => {
-                            if (dragSource?.parent === dropTargetId) {
-                                return true;
-                            }
-                        }, rootId: 0, render: (node, { depth, isOpen, onToggle, hasChild }) => {
-                            return (_jsx(TreeItem, { hasChild: hasChild, node: node, depth: depth, isOpen: isOpen, onToggle: onToggle, draggable: draggable }));
-                        }, onDrop: handleDrop, onChangeOpen: handleOpen, dropTargetOffset: 5, placeholderRender: (node, { depth }) => (_jsx(TreePlaceholder, { depth: depth })), placeholderComponent: "div", listComponent: "div", listItemComponent: "div", classes: {
-                            root: styles.tree,
-                            draggingSource: styles.draggingSource,
-                            dropTarget: styles.dropTarget,
-                            placeholder: styles.placeholderContainer,
-                        }, initialOpen: isInitialOpen }) }) })] }));
-};

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

@@ -1,126 +0,0 @@
-export declare const list: {
-    name: string;
-    items: ({
-        id: number;
-        parent: number;
-        droppable: boolean;
-        name: string;
-        onClick: () => void;
-        active?: undefined;
-    } | {
-        id: number;
-        parent: number;
-        droppable: boolean;
-        name: string;
-        onClick?: undefined;
-        active?: undefined;
-    } | {
-        id: number;
-        parent: number;
-        droppable: boolean;
-        name: string;
-        active: boolean;
-        onClick?: undefined;
-    })[];
-};
-export declare const listActions: {
-    header: {
-        actions: {
-            label: string;
-            primary: boolean;
-            icon: string;
-            onClick: () => void;
-        }[];
-    };
-    items: ({
-        actions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        id: number;
-        parent: number;
-        droppable: boolean;
-        name: string;
-        onClick: () => void;
-        active?: undefined;
-    } | {
-        actions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        id: number;
-        parent: number;
-        droppable: boolean;
-        name: string;
-        onClick?: undefined;
-        active?: undefined;
-    } | {
-        actions: {
-            label: string;
-            icon: string;
-            onClick: () => void;
-        }[];
-        id: number;
-        parent: number;
-        droppable: boolean;
-        name: string;
-        active: boolean;
-        onClick?: undefined;
-    })[];
-    name: string;
-};
-export declare const listControlParents: {
-    items: ({
-        droppable: boolean;
-        details: string;
-        id: number;
-        parent: number;
-        name: string;
-        onClick: () => void;
-        active?: undefined;
-    } | {
-        droppable: boolean;
-        details: string;
-        id: number;
-        parent: number;
-        name: string;
-        onClick?: undefined;
-        active?: undefined;
-    } | {
-        droppable: boolean;
-        details: string;
-        id: number;
-        parent: number;
-        name: string;
-        active: boolean;
-        onClick?: undefined;
-    })[];
-    name: string;
-};
-export declare const listFlat: {
-    items: ({
-        parent: number;
-        droppable: boolean;
-        id: number;
-        name: string;
-        onClick: () => void;
-        active?: undefined;
-    } | {
-        parent: number;
-        droppable: boolean;
-        id: number;
-        name: string;
-        onClick?: undefined;
-        active?: undefined;
-    } | {
-        parent: number;
-        droppable: boolean;
-        id: number;
-        name: string;
-        active: boolean;
-        onClick?: undefined;
-    })[];
-    name: string;
-};

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

@@ -1,83 +0,0 @@
-export const list = {
-    name: 'Animals',
-    items: [
-        {
-            id: 1,
-            parent: 0,
-            droppable: true,
-            name: 'Mammals',
-            onClick: () => console.log('Test'),
-        },
-        {
-            id: 2,
-            parent: 1,
-            droppable: true,
-            name: 'Cats',
-        },
-        {
-            id: 3,
-            parent: 1,
-            droppable: true,
-            name: 'Dogs',
-        },
-        {
-            id: 4,
-            parent: 0,
-            droppable: true,
-            name: 'Amphibians',
-        },
-        {
-            id: 5,
-            parent: 4,
-            droppable: true,
-            name: 'Frogs',
-        },
-        {
-            id: 6,
-            parent: 0,
-            droppable: true,
-            name: 'Reptiles',
-            active: true,
-        },
-    ],
-};
-export const listActions = {
-    ...list,
-    header: {
-        // ...list.header, // TODO - @Jack - should be removed?
-        actions: [
-            {
-                label: 'Add',
-                primary: true,
-                icon: 'add',
-                onClick: () => { },
-            },
-        ],
-    },
-    items: list.items.map((item) => ({
-        ...item,
-        actions: [
-            {
-                label: 'Delete',
-                icon: 'delete',
-                onClick: () => { },
-            },
-        ],
-    })),
-};
-export const listControlParents = {
-    ...list,
-    items: list.items.map((item) => ({
-        ...item,
-        droppable: item.parent === 0,
-        details: item.parent === 0 ? 'Droppable' : 'Not droppable',
-    })),
-};
-export const listFlat = {
-    ...list,
-    items: list.items.map((item) => ({
-        ...item,
-        parent: 0,
-        droppable: false,
-    })),
-};

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

@@ -1,11 +0,0 @@
-import { ITreeProps } from './tree';
-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, ITreeProps>;
-export declare const Actions: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
-export declare const Draggable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
-export declare const Droppable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
-export declare const Flat: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
-export declare const ExpandedByDefault: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
-export declare const OnOpenChangeCallback: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
-export declare const Managed: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/tree/tree.stories.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Tree } from './tree';
-import * as storyData from './tree.stories-data';
-export default {
-    title: 'Basic/Tree',
-    component: Tree,
-    args: {
-        list: storyData.list,
-    },
-};
-const Template = (args) => (_jsx(Tree
-// eslint-disable-next-line react/jsx-props-no-spreading
-, { ...args }));
-export const Default = Template.bind({});
-export const Actions = Template.bind({});
-Actions.args = { list: storyData.listActions };
-export const Draggable = Template.bind({});
-Draggable.args = { draggable: true };
-export const Droppable = Template.bind({});
-Droppable.args = { draggable: true, list: storyData.listControlParents };
-Droppable.parameters = {
-    docs: {
-        description: {
-            story: 'Use the `droppable` prop to specify which items can have other items dropped into them.',
-        },
-    },
-};
-export const Flat = Template.bind({});
-Flat.args = { draggable: true, list: storyData.listFlat };
-export const ExpandedByDefault = Template.bind({});
-ExpandedByDefault.args = { isInitialOpen: true };
-export const OnOpenChangeCallback = Template.bind({});
-OnOpenChangeCallback.args = {
-    onChangeOpen: (id) => console.log('onChangeOpen here', id),
-};
-export const Managed = () => {
-    const [items, setItems] = useState([
-        {
-            id: 1,
-            parent: 0,
-            droppable: true,
-            name: 'Mammals',
-        },
-        {
-            id: 2,
-            parent: 1,
-            droppable: true,
-            name: 'Cats',
-        },
-        {
-            id: 3,
-            parent: 1,
-            droppable: true,
-            name: 'Dogs',
-        },
-        {
-            id: 4,
-            parent: 0,
-            droppable: true,
-            name: 'Amphibians',
-        },
-        {
-            id: 5,
-            parent: 4,
-            droppable: true,
-            name: 'Frogs',
-        },
-        {
-            id: 6,
-            parent: 0,
-            droppable: true,
-            name: 'Reptiles',
-        },
-    ]);
-    const addItem = () => {
-        const newItem = {
-            id: Math.max(...items.map((item) => item.id)) + 1,
-            parent: 0,
-            droppable: true,
-            name: 'New Item',
-        };
-        setItems([newItem].concat(items));
-    };
-    const list = {
-        name: 'Animals',
-        actions: [
-            {
-                label: 'Add',
-                primary: true,
-                icon: 'add',
-                onClick: () => addItem(),
-            },
-        ],
-        items,
-    };
-    return _jsx(Tree, { list: list, draggable: true, onListReorder: setItems });
-};

package/dist/helpers/disabled-context.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DisabledContext: React.Context<boolean>;

package/dist/helpers/disabled-context.js

@@ -1,2 +0,0 @@
-import React from 'react';
-export const DisabledContext = React.createContext(false);

package/dist/helpers/text.d.ts

@@ -1 +0,0 @@
-export declare const getTextWidth: (text: string, font: string) => number;

package/dist/helpers/text.js

@@ -1,9 +0,0 @@
-export const getTextWidth = (text, font) => {
-    const element = document.createElement('canvas');
-    const context = element.getContext('2d');
-    if (!context) {
-        return 0; // Fallback to 0 width if context isn't available
-    }
-    context.font = font;
-    return context.measureText(text).width;
-};

package/dist/helpers/types.d.ts

@@ -1,3 +0,0 @@
-import { ReactNode } from 'react';
-export declare const isStringNumberOrNode: (value: string | number | ReactNode) => boolean;
-export declare const getType: (item: any) => string;

package/dist/helpers/types.js

@@ -1,8 +0,0 @@
-import { isNumber, isString } from 'lodash';
-import { isValidElement } from 'react';
-export const isStringNumberOrNode = (value) => {
-    return isString(value) || isNumber(value) || isValidElement(value);
-};
-export const getType = (item) => {
-    return Array.isArray(item) ? 'array' : typeof item;
-};

package/dist/hooks/index.d.ts

@@ -1,4 +0,0 @@
-export { useKeyboardEvent } from './use-keyboard-event';
-export { useFocus } from './use-focus';
-export { useFontsReady } from './use-fonts-ready';
-export { useWindowWidth } from './use-window-width';

package/dist/hooks/index.js

@@ -1,4 +0,0 @@
-export { useKeyboardEvent } from './use-keyboard-event';
-export { useFocus } from './use-focus';
-export { useFontsReady } from './use-fonts-ready';
-export { useWindowWidth } from './use-window-width';

package/dist/hooks/use-focus.d.ts

@@ -1,4 +0,0 @@
-import { MutableRefObject } from 'react';
-type UseFocusReturnType = [MutableRefObject<HTMLInputElement | null>, () => void];
-export declare const useFocus: () => UseFocusReturnType;
-export {};

package/dist/hooks/use-focus.js

@@ -1,10 +0,0 @@
-import { useRef } from 'react';
-export const useFocus = () => {
-    const ref = useRef(null);
-    const setFocus = () => {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    };
-    return [ref, setFocus];
-};

package/dist/hooks/use-fonts-ready.d.ts

@@ -1 +0,0 @@
-export declare const useFontsReady: () => boolean;

package/dist/hooks/use-fonts-ready.js

@@ -1,13 +0,0 @@
-import { useState, useEffect } from 'react';
-export const useFontsReady = () => {
-    const [isFontLoaded, setFontLoaded] = useState(false);
-    useEffect(() => {
-        const fontIsReady = async () => {
-            if (!document.fonts)
-                return;
-            await document.fonts.ready.then(() => setFontLoaded(true));
-        };
-        fontIsReady();
-    }, []);
-    return isFontLoaded;
-};

package/dist/hooks/use-keyboard-event.d.ts

@@ -1,2 +0,0 @@
-import { DependencyList } from 'react';
-export declare const useKeyboardEvent: (key: string, fn: () => void, dependencyList?: DependencyList) => void;

package/dist/hooks/use-keyboard-event.js

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-export const useKeyboardEvent = (key, fn, dependencyList = []) => {
-    useEffect(() => {
-        const handler = (event) => {
-            if (event.key === key) {
-                fn();
-            }
-        };
-        window.addEventListener('keydown', handler);
-        return () => {
-            window.removeEventListener('keydown', handler);
-        };
-    }, dependencyList);
-};

package/dist/hooks/use-window-width.d.ts

@@ -1 +0,0 @@
-export declare const useWindowWidth: () => number;

package/dist/hooks/use-window-width.js

@@ -1,16 +0,0 @@
-import { debounce } from 'lodash';
-import { useState, useEffect } from 'react';
-const getWidth = () => window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth;
-export const useWindowWidth = () => {
-    const [width, setWidth] = useState(getWidth());
-    const resizeListener = debounce(() => setWidth(getWidth()), 150);
-    useEffect(() => {
-        window.addEventListener('resize', resizeListener);
-        return () => {
-            window.removeEventListener('resize', resizeListener);
-        };
-    }, []);
-    return width;
-};

package/dist/my-dummy.js

@@ -1 +0,0 @@
-// this is dummy file