awing-library 2.1.2-dev.98 → 2.1.2-preview.1

package/dist/AWING/DirectoryTree/TreeItemWithAction/Container.test.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Container from "./Container.js";
+const initProps = {
+    itemId: '',
+    labelIcon: null,
+    labelText: ''
+};
+const Component = (props)=>render(/*#__PURE__*/ jsx(Container, {
+        ...initProps,
+        ...props
+    }));
+jest.mock('@mui/x-tree-view', ()=>({
+        TreeItem: (props)=>{
+            const { itemId, label, sx } = props;
+            const sxParam = sx({
+                palette: {
+                    background: {
+                        paper: 'red'
+                    }
+                },
+                spacing: ()=>'',
+                shadows: []
+            });
+            return /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: "TreeItem"
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        "data-testid": "TreeItem-itemId",
+                        children: itemId
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx("textarea", {
+                        "data-testid": "TreeItem-sx-background",
+                        children: sxParam['& .MuiTreeItem-content'].backgroundColor
+                    })
+                ]
+            });
+        }
+    }));
+jest.mock('@mui/material', ()=>({
+        ...jest.requireActual('@mui/material'),
+        Stack: (props)=>{
+            const { sx } = props;
+            const sxParam = sx();
+            return /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "Stack-onClick",
+                        onClick: props.onClick
+                    }),
+                    /*#__PURE__*/ jsx("textarea", {
+                        "data-testid": "Stack-sx-display",
+                        children: JSON.stringify(sxParam)
+                    }),
+                    props.children
+                ]
+            });
+        }
+    }));
+jest.mock('../components/Styled', ()=>({
+        LabelDiv: (props)=>/*#__PURE__*/ jsxs("div", {
+                "data-testid": "LabelDiv",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "LabelDiv-onMouseEnter",
+                        onClick: props.onMouseEnter
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "LabelDiv-onMouseLeave",
+                        onClick: props.onMouseLeave
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        "data-testid": "LabelDiv-onClickCapture",
+                        onClick: props.onClickCapture
+                    }),
+                    props.children
+                ]
+            })
+    }));
+describe('Render', ()=>{
+    it('should render itemId', ()=>{
+        Component({
+            ...initProps,
+            itemId: '1'
+        });
+        expect(screen.queryByTestId('TreeItem-itemId')).toHaveTextContent('1');
+    });
+    it('should render labelIcon', ()=>{
+        Component({
+            ...initProps,
+            labelIcon: /*#__PURE__*/ jsx("p", {
+                "data-testid": "TreeItem-labelIcon",
+                children: "labelIcon"
+            })
+        });
+        fireEvent.click(screen.getByTestId('LabelDiv-onMouseEnter'));
+        expect(screen.queryByTestId('TreeItem-labelIcon')).toHaveTextContent('labelIcon');
+    });
+    it('should render labelText', ()=>{
+        Component({
+            ...initProps,
+            labelText: 'TreeItem-labelText'
+        });
+        fireEvent.click(screen.getByTestId('LabelDiv-onMouseLeave'));
+        expect(screen.queryByText('TreeItem-labelText')).toBeInTheDocument();
+    });
+    it('should render sx stype props', ()=>{
+        Component({
+            ...initProps
+        });
+        expect(screen.queryByTestId('TreeItem-sx-background')).toHaveTextContent('red');
+    });
+    it('should call Stack-onClick', ()=>{
+        const mockStopPropagation = jest.fn();
+        Component();
+        fireEvent.click(screen.getByTestId('Stack-onClick'), {
+            stopPropagation: mockStopPropagation
+        });
+        waitFor(()=>{
+            expect(mockStopPropagation).toHaveBeenCalled();
+        });
+    });
+});

package/dist/AWING/DirectoryTree/TreeItemWithAction/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { default } from './Container';
+//# sourceMappingURL=index.d.ts.map

package/dist/AWING/DirectoryTree/TreeItemWithAction/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DirectoryTree/TreeItemWithAction/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/AWING/DirectoryTree/TreeItemWithAction/index.js

@@ -0,0 +1,3 @@
+import Container from "./Container.js";
+export * from "./types.js";
+export { Container as default };

package/dist/AWING/DirectoryTree/TreeItemWithAction/types.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
+export type TreeItemWithActionProps = TreeItemProps & {
+    itemId: string;
+    labelIcon: ReactNode;
+    labelText: string;
+    actions?: ReactNode;
+    onTreeItemClick?: () => void;
+    isLoading?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/AWING/DirectoryTree/TreeItemWithAction/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DirectoryTree/TreeItemWithAction/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}

package/dist/AWING/DirectoryTree/components/Styled.d.ts

@@ -0,0 +1,4 @@
+export declare const LabelDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const useFilterTreeViewStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "root" | "CircularRoot" | "treeviewStyle" | "circularProgress">;
+export declare const useDirectoryTreeStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "color" | "header" | "option" | "text" | "root" | "paper" | "close" | "campaignAdvanceSearchformControl" | "btnResetFormSearch" | "resetFormAdvanceSeach" | "boxAvanceSerch" | "componentAdvanceSearch" | "boxHeaderSearch" | "boxContentSearch" | "chipContent" | "tag" | "popper" | "inputBase" | "popperDisablePortal" | "iconSelected" | "fontIconSizeInfo" | "contentDateRange" | "contentDirectoryTree" | "buttonReset">;
+//# sourceMappingURL=Styled.d.ts.map

package/dist/AWING/DirectoryTree/components/Styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styled.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DirectoryTree/components/Styled.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,oOAQnB,CAAC;AAEH,eAAO,MAAM,uBAAuB,8HAyBlC,CAAC;AAEH,eAAO,MAAM,sBAAsB,+dA+LhC,CAAC"}

package/dist/AWING/DirectoryTree/components/Styled.js

@@ -0,0 +1,224 @@
+import { makeStyles } from "@mui/styles";
+import { styled } from "@mui/material/styles";
+const LabelDiv = styled('div')(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing(0.5, 0),
+        height: 40,
+        minWidth: 100
+    }));
+const useFilterTreeViewStyles = makeStyles({
+    root: {
+        flexGrow: 1,
+        margin: '-4px'
+    },
+    CircularRoot: {
+        display: 'flex',
+        '& > * + *': {
+            marginLeft: '16px'
+        }
+    },
+    icon: {
+        color: '#bdbdbd'
+    },
+    treeviewStyle: {
+        '& .MuiTreeItem-root:focus > .MuiTreeItem-content': {
+            background: 'rgba(0, 0, 0, 0.08)'
+        }
+    },
+    circularProgress: {
+        width: '50px !important',
+        height: '50px !important',
+        margin: '0px auto'
+    }
+});
+const useDirectoryTreeStyles = makeStyles(()=>({
+        root: {
+            marginTop: '10px !important',
+            padding: '0px 16px'
+        },
+        campaignAdvanceSearchformControl: {
+            '& .MuiOutlinedInput-input': {
+                padding: '12px',
+                border: 'none'
+            },
+            '& .MuiFormControl-marginNormal': {
+                margin: '0px'
+            },
+            '& .MuiOutlinedInput-adornedEnd': {
+                paddingRight: '4px'
+            },
+            '& .MuiIconButton-root': {
+                padding: '8px'
+            },
+            '& .MuiAutocomplete-inputRoot': {
+                padding: '2px'
+            },
+            '& .MuiAutocomplete-endAdornment': {
+                top: 'calc(50% - 19px)'
+            }
+        },
+        btnResetFormSearch: {
+            textAlign: 'right',
+            float: 'right',
+            fontSize: '14px',
+            marginRight: '-8px'
+        },
+        resetFormAdvanceSeach: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
+            textTransform: 'none',
+            fontWeight: 'normal'
+        },
+        boxAvanceSerch: {
+            background: '#fafafa',
+            paddingTop: '16px',
+            paddingBottom: '32px'
+        },
+        componentAdvanceSearch: {
+            background: '#ffffff',
+            boxShadow: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)',
+            borderRadius: '4px',
+            borderCollapse: 'collapse'
+        },
+        boxHeaderSearch: {
+            borderBottom: '1px solid #dcdcdc',
+            padding: '16px'
+        },
+        boxContentSearch: {
+            padding: '0px 24px',
+            '& .MuiGrid-item': {
+                padding: '8px 8px 4px 16px'
+            }
+        },
+        chipContent: {
+            minHeight: '50px',
+            padding: '16px 8px',
+            textAlign: 'right',
+            '& .MuiChip-root': {
+                margin: '4px 8px'
+            }
+        },
+        button: {
+            width: '100%',
+            textAlign: 'right',
+            paddingBottom: 8,
+            minWidth: '110',
+            fontSize: 16,
+            '&:hover,&:focus': {
+                color: '#586069'
+            },
+            '& span': {
+                width: '100%'
+            },
+            '& svg': {
+                width: 16,
+                height: 16
+            }
+        },
+        tag: {
+            marginTop: 3,
+            height: 20,
+            padding: '.15em 4px',
+            fontWeight: 600,
+            lineHeight: '15px',
+            borderRadius: 2
+        },
+        popper: {
+            border: '1px solid rgba(27,31,35,.15)',
+            boxShadow: '0 3px 12px rgba(27,31,35,.15)',
+            borderRadius: 3,
+            width: 300,
+            zIndex: 1,
+            color: '#586069',
+            background: '#fafafa'
+        },
+        header: {
+            borderBottom: '1px solid #e1e4e8',
+            padding: '8px 10px',
+            background: '#fafafa'
+        },
+        inputBase: {
+            padding: 10,
+            width: '100%',
+            borderBottom: '1px solid #dfe2e5',
+            background: '#fafafa',
+            '& input': {
+                borderRadius: 4,
+                padding: 8,
+                border: '1px solid #ced4da',
+                '&:focus': {}
+            }
+        },
+        paper: {
+            boxShadow: 'none',
+            margin: 0,
+            color: '#586069'
+        },
+        option: {
+            minHeight: 'auto',
+            alignItems: 'flex-start',
+            padding: 8,
+            '&[aria-selected="true"]': {
+                backgroundColor: 'transparent'
+            }
+        },
+        popperDisablePortal: {
+            position: 'relative'
+        },
+        iconSelected: {
+            width: 17,
+            height: 17,
+            marginRight: 5,
+            marginLeft: -2
+        },
+        color: {
+            width: 14,
+            height: 14,
+            flexShrink: 0,
+            borderRadius: 3,
+            marginRight: 8,
+            marginTop: 2
+        },
+        text: {
+            flexGrow: 1
+        },
+        close: {
+            opacity: 0.6,
+            width: 18,
+            height: 18
+        },
+        fontIconSizeInfo: {
+            paddingLeft: '4px',
+            fontSize: '16px'
+        },
+        contentDateRange: {
+            padding: '24px 24px 40px 24px',
+            background: '#fff'
+        },
+        contentDirectoryTree: {
+            padding: '0px 8px 24px 8px',
+            maxHeight: 300,
+            overflowY: 'scroll',
+            overflowX: 'hidden',
+            '&::-webkit-scrollbar': {
+                width: 3
+            },
+            '&::-webkit-scrollbar-track': {
+                background: '#f1f1f1'
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: '#888'
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: '#555'
+            }
+        },
+        buttonReset: {
+            float: 'right',
+            minWidth: '10px',
+            padding: '1px 5px'
+        }
+    }));
+export { LabelDiv, useDirectoryTreeStyles, useFilterTreeViewStyles };

package/dist/AWING/DirectoryTree/helper.d.ts

@@ -0,0 +1,12 @@
+import { Directory } from '../../Features/SYSTEM/Directory';
+import { TreeItemOption } from './interface';
+/** Get root item for TreeView */
+export declare const getRootItem: (items: TreeItemOption[]) => TreeItemOption | undefined;
+/**
+ * Phân tách path, path truyền vào phải đúng định dạng '.path.path.path.'
+ * VD: '.12.22.1321.' => ['12', '22', '1321']
+ */
+export declare const getSplitPath: (path: string, space?: string) => string[];
+export declare const getChildrenByParentPath: (items: TreeItemOption[], parentPath: string, sharingIdParent?: number) => TreeItemOption[];
+export declare const sortByDirectoryPath: (data: Directory[]) => Directory[];
+//# sourceMappingURL=helper.d.ts.map

package/dist/AWING/DirectoryTree/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/AWING/DirectoryTree/helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,iCAAiC;AACjC,eAAO,MAAM,WAAW,UAAW,cAAc,EAAE,+BAUlD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,SAAU,MAAM,6BAOxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAAW,cAAc,EAAE,cAAc,MAAM,oBAAoB,MAAM,qBAU5G,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,SAAS,EAAE,gBAwDpD,CAAC"}

package/dist/AWING/DirectoryTree/helper.js

@@ -0,0 +1,49 @@
+const getRootItem = (items)=>{
+    if (!items.length) return;
+    return items.reduce((res, obj)=>{
+        if (void 0 === res.level || obj.level && obj.level < res.level) return obj;
+        return res;
+    }, items[0]);
+};
+const getSplitPath = (path, space = '.')=>{
+    const result = path.split(space);
+    if (result.length < 3 || path.charAt(0) !== space || path.charAt(path.length - 1) !== space) return [];
+    result.shift();
+    result.pop();
+    return result;
+};
+const getChildrenByParentPath = (items, parentPath, sharingIdParent)=>{
+    const parent = getSplitPath(parentPath);
+    return items.filter((item)=>item.directoryPath && parent.length + 1 === getSplitPath(item.directoryPath).length && item.directoryPath.startsWith(parentPath) && Number(item.parentObjectId) === Number(parent[parent.length - 1]) && (!sharingIdParent || item.sharingId === sharingIdParent));
+};
+const sortByDirectoryPath = (data)=>{
+    const pathMap = new Map();
+    data.forEach((item)=>{
+        if (item.directoryPath) pathMap.set(item.directoryPath, item);
+    });
+    const sortedArray = [];
+    const visited = new Set();
+    const addItem = (path)=>{
+        if (visited.has(path)) return;
+        visited.add(path);
+        const item = pathMap.get(path);
+        if (!item) return;
+        const parentPath = path.split('.').slice(0, -2).join('.') + '.';
+        if ('.' !== parentPath) addItem(parentPath);
+        sortedArray.push(item);
+    };
+    data.forEach((item)=>{
+        if (item.directoryPath) addItem(item.directoryPath);
+    });
+    return sortedArray.sort((a, b)=>{
+        const aParts = (a.directoryPath || '').split('.').filter(Boolean);
+        const bParts = (b.directoryPath || '').split('.').filter(Boolean);
+        for(let i = 0; i < Math.min(aParts.length, bParts.length); i++){
+            const aNum = parseInt(aParts[i]);
+            const bNum = parseInt(bParts[i]);
+            if (aNum !== bNum) return aNum - bNum;
+        }
+        return aParts.length - bParts.length;
+    });
+};
+export { getChildrenByParentPath, getRootItem, getSplitPath, sortByDirectoryPath };

package/dist/AWING/DirectoryTree/index.d.ts

@@ -0,0 +1,6 @@
+export * from './interface';
+export { default as FilterTreeView } from './FilterTreeView';
+export { default as ShowTreeItem } from './ShowTreeItem';
+export { default as TreeItemWithAction } from './TreeItemWithAction';
+export { default } from './DirectoryTree';
+//# sourceMappingURL=index.d.ts.map

package/dist/AWING/DirectoryTree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AWING/DirectoryTree/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/AWING/DirectoryTree/index.js

@@ -0,0 +1,6 @@
+import FilterTreeView from "./FilterTreeView/index.js";
+import ShowTreeItem from "./ShowTreeItem/index.js";
+import TreeItemWithAction from "./TreeItemWithAction/index.js";
+import DirectoryTree from "./DirectoryTree.js";
+export * from "./interface.js";
+export { FilterTreeView, ShowTreeItem, TreeItemWithAction, DirectoryTree as default };

package/dist/AWING/DirectoryTree/interface.d.ts

@@ -0,0 +1,22 @@
+import { MenuOption } from '../interface';
+export type Value = string | number;
+export type TreeItemOption = MenuOption<Value> & {
+    description?: string;
+    isFile?: boolean;
+    isSystem?: boolean;
+    objectTypeCode?: string;
+    childCount?: number;
+    isLoading?: boolean;
+};
+export type DirectoryTreeProps = {
+    labelSearch: string;
+    options: TreeItemOption[];
+    defaultValue: string;
+    rootDirectoryId: Value;
+    titleSearch?: string;
+    onChange(value: Value): void;
+    onDirectoryOpen?: (id: Value) => void;
+    isLoading?: boolean;
+    loadingFocusedId?: Value;
+};
+//# sourceMappingURL=interface.d.ts.map

package/dist/AWING/DirectoryTree/interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/AWING/DirectoryTree/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC;CAC5B,CAAC"}

package/dist/AWING/DragAndDrop/Sortable/SortableItem.d.ts

@@ -0,0 +1,8 @@
+export type SortableItemProps = {
+    id: number | string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare const SortableItem: (props: SortableItemProps) => import("react/jsx-runtime").JSX.Element;
+export default SortableItem;
+//# sourceMappingURL=SortableItem.d.ts.map

package/dist/AWING/DragAndDrop/Sortable/SortableItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableItem.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DragAndDrop/Sortable/SortableItem.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,YAAY,UAAW,iBAAiB,4CAmB7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/AWING/DragAndDrop/Sortable/SortableItem.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { IconButton } from "@mui/material";
+import { DragIndicator } from "@mui/icons-material";
+const SortableItem_SortableItem = (props)=>{
+    const { id } = props;
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        listStyle: 'none',
+        ...props.style
+    };
+    return /*#__PURE__*/ jsxs("li", {
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                ref: setNodeRef,
+                ...attributes,
+                ...listeners,
+                style: {
+                    cursor: 'move'
+                },
+                children: /*#__PURE__*/ jsx(DragIndicator, {})
+            }),
+            props?.children
+        ]
+    });
+};
+const SortableItem = SortableItem_SortableItem;
+export { SortableItem as default };

package/dist/AWING/DragAndDrop/Sortable/index.d.ts

@@ -0,0 +1,11 @@
+import { DragEndEvent } from '@dnd-kit/core';
+export type SortableProps = {
+    items: number[];
+    direction?: 'horizontal' | 'vertical';
+    itemStyle?: React.CSSProperties;
+    onDragEnd?: (event: DragEndEvent) => void;
+    onSort?: (items: number[]) => void;
+};
+declare const Sortable: (props: SortableProps) => import("react/jsx-runtime").JSX.Element;
+export default Sortable;
+//# sourceMappingURL=index.d.ts.map

package/dist/AWING/DragAndDrop/Sortable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DragAndDrop/Sortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,YAAY,EAAE,MAAM,eAAe,CAAC;AAKzD,MAAM,MAAM,aAAa,GAAG;IACxB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,QAAQ,UAAW,aAAa,4CA0CrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/AWING/DragAndDrop/Sortable/index.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext } from "@dnd-kit/sortable";
+import SortableItem from "./SortableItem.js";
+const Sortable_Sortable = (props)=>{
+    const { direction = 'vertical', onDragEnd, onSort } = props;
+    const [items, setItems] = useState(props.items);
+    const handleDragEnd = (event)=>{
+        if (event.active && event.over && event.active.id !== event.over.id) {
+            const activeIndex = items.findIndex((id)=>id === event.active.id);
+            const overIndex = items.findIndex((id)=>id === event.over?.id);
+            const result = [
+                ...items
+            ];
+            const [movedItem] = result.splice(activeIndex, 1);
+            result.splice(overIndex, 0, movedItem);
+            setItems(result);
+            onDragEnd && onDragEnd(event);
+            onSort && onSort(result);
+        }
+    };
+    return /*#__PURE__*/ jsx(DndContext, {
+        onDragEnd: handleDragEnd,
+        children: /*#__PURE__*/ jsx(SortableContext, {
+            items: items,
+            children: /*#__PURE__*/ jsx("ul", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'horizontal' === direction ? 'row' : 'column',
+                    listStyleType: 'none',
+                    padding: '8px',
+                    margin: 0
+                },
+                children: items.map((id)=>/*#__PURE__*/ jsx(SortableItem, {
+                        id: id,
+                        style: props.itemStyle,
+                        children: id
+                    }, id))
+            })
+        })
+    });
+};
+const Sortable = Sortable_Sortable;
+export { Sortable as default };

package/dist/AWING/DragAndDrop/TreeSortable/SortableTree.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DndContext, DropAnimation, PointerSensorOptions } from '@dnd-kit/core';
+import { UseSortableArguments } from '@dnd-kit/sortable';
+import type { FlattenedItem, ItemChangedReason, TreeItemComponentType, TreeItems } from './types';
+export type SortableTreeProps<TData extends Record<string, any>, TElement extends HTMLElement> = {
+    items: TreeItems<TData>;
+    onItemsChanged(items: TreeItems<TData>, reason: ItemChangedReason<TData>): void;
+    TreeItemComponent: TreeItemComponentType<TData, TElement>;
+    indentationWidth?: number;
+    indicator?: boolean;
+    pointerSensorOptions?: PointerSensorOptions;
+    disableSorting?: boolean;
+    dropAnimation?: DropAnimation | null;
+    dndContextProps?: React.ComponentProps<typeof DndContext>;
+    sortableProps?: Omit<UseSortableArguments, 'id'>;
+    keepGhostInPlace?: boolean;
+    canRootHaveChildren?: boolean | ((dragItem: FlattenedItem<TData>) => boolean);
+    disableCollapseOnItemClick?: boolean;
+};
+export declare const dropAnimationDefaultConfig: DropAnimation;
+export declare function SortableTree<TreeItemData extends Record<string, any>, TElement extends HTMLElement = HTMLDivElement>({ items, indicator, indentationWidth, onItemsChanged, TreeItemComponent, pointerSensorOptions, disableSorting, dropAnimation, dndContextProps, sortableProps, keepGhostInPlace, canRootHaveChildren, ...rest }: SortableTreeProps<TreeItemData, TElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SortableTree.d.ts.map

package/dist/AWING/DragAndDrop/TreeSortable/SortableTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTree.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DragAndDrop/TreeSortable/SortableTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAIH,UAAU,EAMV,aAAa,EAKb,oBAAoB,EAIvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAA8B,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAYrF,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAiB,qBAAqB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKjH,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI;IAC7F,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACxB,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAChF,iBAAiB,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;IAC1D,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,OAAO,CAAC,CAAC;IAC9E,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAOF,eAAO,MAAM,0BAA0B,EAAE,aAqBxC,CAAC;AAEF,wBAAgB,YAAY,CAAC,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,SAAS,WAAW,GAAG,cAAc,EAAE,EAClH,KAAK,EACL,SAAS,EACT,gBAAqB,EACrB,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,GAAG,IAAI,EACV,EAAE,iBAAiB,CAAC,YAAY,EAAE,QAAQ,CAAC,2CAmU3C"}