@webiny/admin-ui 6.0.0-alpha.0

package/Tree/Tree.stories.js

@@ -0,0 +1,317 @@
+import React from "react";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
+import { ReactComponent as ArticleIcon } from "@webiny/icons/article.svg";
+import { Tree } from "./Tree";
+const meta = {
+  title: "Components/Tree",
+  component: Tree,
+  argTypes: {},
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1"
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2"
+    }, {
+      id: "3",
+      parentId: "0",
+      label: "Node 3"
+    }, {
+      id: "1-1",
+      parentId: "1",
+      label: "Child Node 1-1"
+    }, {
+      id: "1-1-1",
+      parentId: "1-1",
+      label: "Grandchild Node 1-1-1"
+    }, {
+      id: "2-1",
+      parentId: "2",
+      label: "Child Node 2-1"
+    }]
+  }
+};
+export const WithRootId = {
+  args: {
+    ...Default.args,
+    rootId: "1"
+  }
+};
+export const WithDefaultOpenNodesIds = {
+  args: {
+    ...Default.args,
+    defaultOpenNodeIds: ["1"]
+  }
+};
+export const WithActiveNodes = {
+  args: {
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1",
+      active: true
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2"
+    }, {
+      id: "3",
+      parentId: "0",
+      label: "Node 3"
+    }, {
+      id: "1-1",
+      parentId: "1",
+      label: "Child Node 1-1"
+    }, {
+      id: "1-1-1",
+      parentId: "1-1",
+      label: "Grandchild Node 1-1-1"
+    }, {
+      id: "2-1",
+      parentId: "2",
+      label: "Child Node 2-1"
+    }]
+  }
+};
+export const WithLoadingNodes = {
+  args: {
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1",
+      loading: true
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2"
+    }, {
+      id: "3",
+      parentId: "0",
+      label: "Node 3"
+    }, {
+      id: "1-1",
+      parentId: "1",
+      label: "Child Node 1-1"
+    }, {
+      id: "1-1-1",
+      parentId: "1-1",
+      label: "Grandchild Node 1-1-1"
+    }, {
+      id: "2-1",
+      parentId: "2",
+      label: "Child Node 2-1"
+    }]
+  }
+};
+
+// Example custom data type
+
+export const WithCustomData = {
+  args: {
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1",
+      data: {
+        foo: "bar",
+        bar: 42
+      }
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2",
+      data: {
+        foo: "baz",
+        bar: 99
+      }
+    }],
+    onDrop: async (newTree, options) => {
+      // newTree and options are fully typed with CustomData
+      console.log("Custom data tree:", newTree);
+      console.log("Custom data drop options:", options);
+    }
+  }
+};
+export const WithOnDropCallback = {
+  args: {
+    ...Default.args,
+    onDrop: async (newTree, options) => {
+      console.log("New tree structure:", newTree);
+      console.log("Drop options:", options);
+    }
+  }
+};
+export const WithOnChangeOpenCallback = {
+  args: {
+    ...Default.args,
+    onChangeOpen: newOpenNodes => {
+      console.log("New open nodes:", newOpenNodes);
+    }
+  }
+};
+export const WithCanDrag = {
+  args: {
+    ...Default.args,
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1 - You cannot drag this node"
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2"
+    }, {
+      id: "3",
+      parentId: "0",
+      label: "Node 3"
+    }, {
+      id: "2-1",
+      parentId: "1",
+      label: "Child Node 2-1"
+    }, {
+      id: "2-1-1",
+      parentId: "2",
+      label: "Grandchild Node 2-1-1"
+    }],
+    canDrag: node => node?.id !== "1"
+  }
+};
+export const WithCanDrop = {
+  args: {
+    ...Default.args,
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1 - You cannot drop on this node"
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2"
+    }, {
+      id: "3",
+      parentId: "0",
+      label: "Node 3"
+    }, {
+      id: "2-1",
+      parentId: "1",
+      label: "Child Node 2-1"
+    }, {
+      id: "2-1-1",
+      parentId: "2",
+      label: "Grandchild Node 2-1-1"
+    }],
+    canDrop: (_, options) => {
+      const {
+        dropTargetId
+      } = options;
+      if (dropTargetId === "1") {
+        return false; // Prevent dropping on Node 1
+      }
+      return true;
+    }
+  }
+};
+
+// Example custom data type
+
+export const WithCustomNodeRenderer = {
+  args: {
+    ...Default.args,
+    nodes: [{
+      id: "1",
+      parentId: "0",
+      label: "Node 1",
+      data: {
+        icon: /*#__PURE__*/React.createElement(FolderIcon, null)
+      }
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2",
+      data: {
+        icon: /*#__PURE__*/React.createElement(FolderIcon, null)
+      }
+    }, {
+      id: "3",
+      parentId: "0",
+      label: "Node 3",
+      data: {
+        icon: /*#__PURE__*/React.createElement(FolderIcon, null)
+      }
+    }, {
+      id: "4",
+      parentId: "0",
+      label: "Node 4",
+      data: {
+        icon: /*#__PURE__*/React.createElement(ArticleIcon, null)
+      }
+    }],
+    renderer: node => /*#__PURE__*/React.createElement(Tree.Item.Content, null, /*#__PURE__*/React.createElement(Tree.Item.Icon, {
+      label: node.label,
+      element: node.icon
+    }), node.label)
+  }
+};
+
+// Example custom sorting by `order` property
+
+export const WithCustomSortCallback = {
+  args: {
+    ...Default.args,
+    nodes: [{
+      id: "3",
+      parentId: "0",
+      label: "Node 3",
+      data: {
+        order: 3
+      }
+    }, {
+      id: "1",
+      parentId: "0",
+      label: "Node 1",
+      data: {
+        order: 1
+      }
+    }, {
+      id: "2",
+      parentId: "0",
+      label: "Node 2",
+      data: {
+        order: 2
+      }
+    }, {
+      id: "5",
+      parentId: "1",
+      label: "Node 5",
+      data: {
+        order: 5
+      }
+    }, {
+      id: "4",
+      parentId: "1",
+      label: "Node 4",
+      data: {
+        order: 4
+      }
+    }, {
+      id: "6",
+      parentId: "1",
+      label: "Node 6",
+      data: {
+        order: 6
+      }
+    }],
+    sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)
+  }
+};
+
+//# sourceMappingURL=Tree.stories.js.map

package/Tree/Tree.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","FolderIcon","ArticleIcon","Tree","meta","title","component","argTypes","parameters","layout","Default","args","nodes","id","parentId","label","WithRootId","rootId","WithDefaultOpenNodesIds","defaultOpenNodeIds","WithActiveNodes","active","WithLoadingNodes","loading","WithCustomData","data","foo","bar","onDrop","newTree","options","console","log","WithOnDropCallback","WithOnChangeOpenCallback","onChangeOpen","newOpenNodes","WithCanDrag","canDrag","node","WithCanDrop","canDrop","_","dropTargetId","WithCustomNodeRenderer","icon","createElement","renderer","Item","Content","Icon","element","WithCustomSortCallback","order","sort","a","b"],"sources":["Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Tree } from \"./Tree\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tree/components/Item.d.ts

@@ -0,0 +1,142 @@
+import React from "react";
+import { type VariantProps } from "../../utils";
+declare const itemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    loading?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type ItemProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof itemVariants>;
+declare const Item: (({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element) & {
+    original: ({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element) & {
+        original: ({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element) & {
+        original: ({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    CollapseTrigger: (({ open, loading, ...props }: import("./ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
+        original: ({ open, loading, ...props }: import("./ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ open, loading, ...props }: import("./ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
+            original: ({ open, loading, ...props }: import("./ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ open, loading, ...props }: import("./ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
+            original: ({ open, loading, ...props }: import("./ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Content: (({ children, className, ...props }: import("./ItemContent").ItemContentProps) => React.JSX.Element) & {
+        original: ({ children, className, ...props }: import("./ItemContent").ItemContentProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ children, className, ...props }: import("./ItemContent").ItemContentProps) => React.JSX.Element) & {
+            original: ({ children, className, ...props }: import("./ItemContent").ItemContentProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, ...props }: import("./ItemContent").ItemContentProps) => React.JSX.Element) & {
+            original: ({ children, className, ...props }: import("./ItemContent").ItemContentProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    DragHandle: (({ handleRef }: import("./ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
+        original: ({ handleRef }: import("./ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ handleRef }: import("./ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
+            original: ({ handleRef }: import("./ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ handleRef }: import("./ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
+            original: ({ handleRef }: import("./ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Icon: (({ element, active, ...props }: import("./ItemIcon").ItemIconProps) => React.JSX.Element) & {
+        original: ({ element, active, ...props }: import("./ItemIcon").ItemIconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ element, active, ...props }: import("./ItemIcon").ItemIconProps) => React.JSX.Element) & {
+            original: ({ element, active, ...props }: import("./ItemIcon").ItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, active, ...props }: import("./ItemIcon").ItemIconProps) => React.JSX.Element) & {
+            original: ({ element, active, ...props }: import("./ItemIcon").ItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    SubIndentation: (({ level }: import("./ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
+        original: ({ level }: import("./ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ level }: import("./ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
+            original: ({ level }: import("./ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ level }: import("./ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
+            original: ({ level }: import("./ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Placeholder: (({ depth }: import("./ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
+        original: ({ depth }: import("./ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ depth }: import("./ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
+            original: ({ depth }: import("./ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ depth }: import("./ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
+            original: ({ depth }: import("./ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+};
+export { Item, type ItemProps };

package/Tree/components/Item.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { cn, cva, makeDecoratable, withStaticProps } from "../../utils";
+import { ItemCollapseTrigger } from "./ItemCollapseTrigger";
+import { ItemContent } from "./ItemContent";
+import { ItemDragHandle } from "./ItemDragHandle";
+import { ItemIcon } from "./ItemIcon";
+import { ItemSubIndentation } from "./ItemSubIndentation";
+import { ItemPlaceholder } from "./ItemPlaceholder";
+const itemVariants = cva(["wby-group", "wby-relative", "wby-flex wby-items-center wby-justify-start wby-gap-xs", "wby-px-sm-plus wby-py-xs-plus wby-rounded-md", "wby-text-neutral-primary", "wby-cursor-pointer", "hover:wby-bg-neutral-dark/5"], {
+  variants: {
+    active: {
+      true: "wby-bg-neutral-dark/5 wby-font-semibold"
+    },
+    loading: {
+      true: "!wby-text-neutral-disabled !wby-fill-neutral-disabled !wby-pointer-events-none"
+    }
+  }
+});
+const BaseItem = ({
+  children,
+  className,
+  active,
+  loading,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-mb-xs wby-px-sm"
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(itemVariants({
+      active,
+      loading
+    }), className)
+  }), children));
+};
+const DecoratableItem = makeDecoratable("TreeItem", BaseItem);
+const Item = withStaticProps(DecoratableItem, {
+  CollapseTrigger: ItemCollapseTrigger,
+  Content: ItemContent,
+  DragHandle: ItemDragHandle,
+  Icon: ItemIcon,
+  SubIndentation: ItemSubIndentation,
+  Placeholder: ItemPlaceholder
+});
+export { Item };
+
+//# sourceMappingURL=Item.js.map

package/Tree/components/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","ItemCollapseTrigger","ItemContent","ItemDragHandle","ItemIcon","ItemSubIndentation","ItemPlaceholder","itemVariants","variants","active","true","loading","BaseItem","children","className","props","createElement","Object","assign","DecoratableItem","Item","CollapseTrigger","Content","DragHandle","Icon","SubIndentation","Placeholder"],"sources":["Item.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils\";\nimport { ItemCollapseTrigger } from \"./ItemCollapseTrigger\";\nimport { ItemContent } from \"./ItemContent\";\nimport { ItemDragHandle } from \"./ItemDragHandle\";\nimport { ItemIcon } from \"./ItemIcon\";\nimport { ItemSubIndentation } from \"./ItemSubIndentation\";\nimport { ItemPlaceholder } from \"./ItemPlaceholder\";\n\nconst itemVariants = cva(\n    [\n        \"wby-group\",\n        \"wby-relative\",\n        \"wby-flex wby-items-center wby-justify-start wby-gap-xs\",\n        \"wby-px-sm-plus wby-py-xs-plus wby-rounded-md\",\n        \"wby-text-neutral-primary\",\n        \"wby-cursor-pointer\",\n        \"hover:wby-bg-neutral-dark/5\"\n    ],\n    {\n        variants: {\n            active: {\n                true: \"wby-bg-neutral-dark/5 wby-font-semibold\"\n            },\n            loading: {\n                true: \"!wby-text-neutral-disabled !wby-fill-neutral-disabled !wby-pointer-events-none\"\n            }\n        }\n    }\n);\n\ntype ItemProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof itemVariants>;\n\nconst BaseItem = ({ children, className, active, loading, ...props }: ItemProps) => {\n    return (\n        <div className={\"wby-mb-xs wby-px-sm\"}>\n            <div {...props} className={cn(itemVariants({ active, loading }), className)}>\n                {children}\n            </div>\n        </div>\n    );\n};\n\nconst DecoratableItem = makeDecoratable(\"TreeItem\", BaseItem);\n\nconst Item = withStaticProps(DecoratableItem, {\n    CollapseTrigger: ItemCollapseTrigger,\n    Content: ItemContent,\n    DragHandle: ItemDragHandle,\n    Icon: ItemIcon,\n    SubIndentation: ItemSubIndentation,\n    Placeholder: ItemPlaceholder\n});\n\nexport { Item, type ItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe,EAAEC,eAAe;AACrE,SAASC,mBAAmB;AAC5B,SAASC,WAAW;AACpB,SAASC,cAAc;AACvB,SAASC,QAAQ;AACjB,SAASC,kBAAkB;AAC3B,SAASC,eAAe;AAExB,MAAMC,YAAY,GAAGT,GAAG,CACpB,CACI,WAAW,EACX,cAAc,EACd,wDAAwD,EACxD,8CAA8C,EAC9C,0BAA0B,EAC1B,oBAAoB,EACpB,6BAA6B,CAChC,EACD;EACIU,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAID,MAAME,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEL,MAAM;EAAEE,OAAO;EAAE,GAAGI;AAAiB,CAAC,KAAK;EAChF,oBACInB,KAAA,CAAAoB,aAAA;IAAKF,SAAS,EAAE;EAAsB,gBAClClB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEjB,EAAE,CAACU,YAAY,CAAC;MAAEE,MAAM;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,IACvED,QACA,CACJ,CAAC;AAEd,CAAC;AAED,MAAMM,eAAe,GAAGpB,eAAe,CAAC,UAAU,EAAEa,QAAQ,CAAC;AAE7D,MAAMQ,IAAI,GAAGpB,eAAe,CAACmB,eAAe,EAAE;EAC1CE,eAAe,EAAEpB,mBAAmB;EACpCqB,OAAO,EAAEpB,WAAW;EACpBqB,UAAU,EAAEpB,cAAc;EAC1BqB,IAAI,EAAEpB,QAAQ;EACdqB,cAAc,EAAEpB,kBAAkB;EAClCqB,WAAW,EAAEpB;AACjB,CAAC,CAAC;AAEF,SAASc,IAAI","ignoreList":[]}

package/Tree/components/ItemCollapseTrigger.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type IconButtonProps } from "../../Button";
+interface ItemCollapseTriggerProps extends IconButtonProps {
+    open?: boolean;
+    loading?: boolean;
+}
+declare const ItemCollapseTrigger: (({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element) & {
+    original: ({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element) & {
+        original: ({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element) & {
+        original: ({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { ItemCollapseTrigger, type ItemCollapseTriggerProps };

package/Tree/components/ItemCollapseTrigger.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { ReactComponent as ChevronRight } from "@webiny/icons/chevron_right.svg";
+import { IconButton } from "../../Button";
+import { Loader } from "../../Loader";
+import { Icon } from "../../Icon";
+import { makeDecoratable, cn } from "../../utils";
+const BaseItemCollapseTrigger = ({
+  open,
+  loading,
+  ...props
+}) => {
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Loader, {
+      size: "xs",
+      variant: "subtle"
+    });
+  }
+  return /*#__PURE__*/React.createElement(IconButton, Object.assign({}, props, {
+    size: "xs",
+    variant: "ghost",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(ChevronRight, null),
+      size: "sm",
+      label: "Open / Close tree item",
+      color: "neutral-strong",
+      className: cn("wby-transition wby-transform wby-duration-100 wby-ease-linear", open ? "wby-rotate-90" : "wby-rotate-0")
+    })
+  }));
+};
+const ItemCollapseTrigger = makeDecoratable("TreeItemCollapseTrigger", BaseItemCollapseTrigger);
+export { ItemCollapseTrigger };
+
+//# sourceMappingURL=ItemCollapseTrigger.js.map

package/Tree/components/ItemCollapseTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","ChevronRight","IconButton","Loader","Icon","makeDecoratable","cn","BaseItemCollapseTrigger","open","loading","props","createElement","size","variant","Object","assign","icon","label","color","className","ItemCollapseTrigger"],"sources":["ItemCollapseTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { IconButton, type IconButtonProps } from \"~/Button\";\nimport { Loader } from \"~/Loader\";\nimport { Icon } from \"~/Icon\";\nimport { makeDecoratable, cn } from \"~/utils\";\n\ninterface ItemCollapseTriggerProps extends IconButtonProps {\n    open?: boolean;\n    loading?: boolean;\n}\n\nconst BaseItemCollapseTrigger = ({ open, loading, ...props }: ItemCollapseTriggerProps) => {\n    if (loading) {\n        return <Loader size={\"xs\"} variant={\"subtle\"} />;\n    }\n\n    return (\n        <IconButton\n            {...props}\n            size={\"xs\"}\n            variant={\"ghost\"}\n            icon={\n                <Icon\n                    icon={<ChevronRight />}\n                    size=\"sm\"\n                    label={\"Open / Close tree item\"}\n                    color={\"neutral-strong\"}\n                    className={cn(\n                        \"wby-transition wby-transform wby-duration-100 wby-ease-linear\",\n                        open ? \"wby-rotate-90\" : \"wby-rotate-0\"\n                    )}\n                />\n            }\n        />\n    );\n};\n\nconst ItemCollapseTrigger = makeDecoratable(\"TreeItemCollapseTrigger\", BaseItemCollapseTrigger);\n\nexport { ItemCollapseTrigger, type ItemCollapseTriggerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,YAAY,QAAQ,iCAAiC;AAChF,SAASC,UAAU;AACnB,SAASC,MAAM;AACf,SAASC,IAAI;AACb,SAASC,eAAe,EAAEC,EAAE;AAO5B,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,OAAO;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACvF,IAAID,OAAO,EAAE;IACT,oBAAOV,KAAA,CAAAY,aAAA,CAACR,MAAM;MAACS,IAAI,EAAE,IAAK;MAACC,OAAO,EAAE;IAAS,CAAE,CAAC;EACpD;EAEA,oBACId,KAAA,CAAAY,aAAA,CAACT,UAAU,EAAAY,MAAA,CAAAC,MAAA,KACHL,KAAK;IACTE,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,OAAQ;IACjBG,IAAI,eACAjB,KAAA,CAAAY,aAAA,CAACP,IAAI;MACDY,IAAI,eAAEjB,KAAA,CAAAY,aAAA,CAACV,YAAY,MAAE,CAAE;MACvBW,IAAI,EAAC,IAAI;MACTK,KAAK,EAAE,wBAAyB;MAChCC,KAAK,EAAE,gBAAiB;MACxBC,SAAS,EAAEb,EAAE,CACT,+DAA+D,EAC/DE,IAAI,GAAG,eAAe,GAAG,cAC7B;IAAE,CACL;EACJ,EACJ,CAAC;AAEV,CAAC;AAED,MAAMY,mBAAmB,GAAGf,eAAe,CAAC,yBAAyB,EAAEE,uBAAuB,CAAC;AAE/F,SAASa,mBAAmB","ignoreList":[]}

package/Tree/components/ItemContent.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface ItemContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ItemContent: (({ children, className, ...props }: ItemContentProps) => React.JSX.Element) & {
+    original: ({ children, className, ...props }: ItemContentProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, className, ...props }: ItemContentProps) => React.JSX.Element) & {
+        original: ({ children, className, ...props }: ItemContentProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, ...props }: ItemContentProps) => React.JSX.Element) & {
+        original: ({ children, className, ...props }: ItemContentProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { ItemContent, type ItemContentProps };

package/Tree/components/ItemContent.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { cn, makeDecoratable } from "../../utils";
+const BaseItemContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: cn("wby-flex wby-items-center wby-w-full wby-gap-x-sm wby-truncate", className)
+  }, props), children);
+};
+const ItemContent = makeDecoratable("TreeItemContent", BaseItemContent);
+export { ItemContent };
+
+//# sourceMappingURL=ItemContent.js.map

package/Tree/components/ItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","makeDecoratable","BaseItemContent","children","className","props","createElement","Object","assign","ItemContent"],"sources":["ItemContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ninterface ItemContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst BaseItemContent = ({ children, className, ...props }: ItemContentProps) => {\n    return (\n        <div\n            className={cn(\n                \"wby-flex wby-items-center wby-w-full wby-gap-x-sm wby-truncate\",\n                className\n            )}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst ItemContent = makeDecoratable(\"TreeItemContent\", BaseItemContent);\n\nexport { ItemContent, type ItemContentProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC7E,oBACIN,KAAA,CAAAO,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACIJ,SAAS,EAAEJ,EAAE,CACT,gEAAgE,EAChEI,SACJ;EAAE,GACEC,KAAK,GAERF,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,WAAW,GAAGR,eAAe,CAAC,iBAAiB,EAAEC,eAAe,CAAC;AAEvE,SAASO,WAAW","ignoreList":[]}