@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/Tree/Tree.stories.js.map

@@ -1 +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-webpack5\";\n\nimport { Tree } from \"./Tree.js\";\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":[]}
+{"version":3,"file":"Tree/Tree.stories.js","sources":["../../src/Tree/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.js\";\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"],"names":["meta","Tree","Default","WithRootId","WithDefaultOpenNodesIds","WithActiveNodes","WithLoadingNodes","WithCustomData","newTree","options","console","WithOnDropCallback","WithOnChangeOpenCallback","newOpenNodes","WithCanDrag","node","WithCanDrop","_","dropTargetId","WithCustomNodeRenderer","FolderIcon","ArticleIcon","WithCustomSortCallback","a","b"],"mappings":"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"}

package/Tree/components/Item.d.ts

@@ -5,21 +5,22 @@ declare const itemVariants: (props?: ({
     loading?: boolean | null | undefined;
 } & import("class-variance-authority/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;
+declare const BaseItem: ({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element;
+declare const Item: typeof BaseItem & {
+    original: typeof BaseItem;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element) & {
-        original: ({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element;
+    original: typeof BaseItem & {
+        original: typeof BaseItem;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element) & {
-        original: ({ children, className, active, loading, ...props }: ItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof BaseItem & {
+        original: typeof BaseItem;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/Item.js

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

package/Tree/components/Item.js.map

@@ -1 +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.js\";\nimport { ItemCollapseTrigger } from \"./ItemCollapseTrigger.js\";\nimport { ItemContent } from \"./ItemContent.js\";\nimport { ItemDragHandle } from \"./ItemDragHandle.js\";\nimport { ItemIcon } from \"./ItemIcon.js\";\nimport { ItemSubIndentation } from \"./ItemSubIndentation.js\";\nimport { ItemPlaceholder } from \"./ItemPlaceholder.js\";\n\nconst itemVariants = cva(\n    [\n        \"group\",\n        \"relative\",\n        \"flex items-center justify-start gap-xs\",\n        \"px-sm-plus py-xs-plus rounded-md\",\n        \"text-neutral-primary\",\n        \"cursor-pointer\",\n        \"hover:bg-neutral-dark/5\"\n    ],\n    {\n        variants: {\n            active: {\n                true: \"bg-neutral-dark/5 font-semibold\"\n            },\n            loading: {\n                true: \"text-neutral-disabled! fill-neutral-disabled! 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={\"mb-xs 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,OAAO,EACP,UAAU,EACV,wCAAwC,EACxC,kCAAkC,EAClC,sBAAsB,EACtB,gBAAgB,EAChB,yBAAyB,CAC5B,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;EAAc,gBAC1BlB,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":[]}
+{"version":3,"file":"Tree/components/Item.js","sources":["../../../src/Tree/components/Item.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { ItemCollapseTrigger } from \"./ItemCollapseTrigger.js\";\nimport { ItemContent } from \"./ItemContent.js\";\nimport { ItemDragHandle } from \"./ItemDragHandle.js\";\nimport { ItemIcon } from \"./ItemIcon.js\";\nimport { ItemSubIndentation } from \"./ItemSubIndentation.js\";\nimport { ItemPlaceholder } from \"./ItemPlaceholder.js\";\n\nconst itemVariants = cva(\n    [\n        \"group\",\n        \"relative\",\n        \"flex items-center justify-start gap-xs\",\n        \"px-sm-plus py-xs-plus rounded-md\",\n        \"text-neutral-primary\",\n        \"cursor-pointer\",\n        \"hover:bg-neutral-dark/5\"\n    ],\n    {\n        variants: {\n            active: {\n                true: \"bg-neutral-dark/5 font-semibold\"\n            },\n            loading: {\n                true: \"text-neutral-disabled! fill-neutral-disabled! 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={\"mb-xs 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"],"names":["itemVariants","cva","BaseItem","children","className","active","loading","props","cn","DecoratableItem","makeDecoratable","Item","withStaticProps","ItemCollapseTrigger","ItemContent","ItemDragHandle","ItemIcon","ItemSubIndentation","ItemPlaceholder"],"mappings":";;;;;;;;AASA,MAAMA,eAAeC,IACjB;IACI;IACA;IACA;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,QAAQ;YACJ,MAAM;QACV;QACA,SAAS;YACL,MAAM;QACV;IACJ;AACJ;AAKJ,MAAMC,WAAW,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGC,OAAkB,GACpE,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGR,aAAa;YAAEK;YAAQC;QAAQ,IAAIF;OAC5DD;AAMjB,MAAMM,kBAAkBC,gBAAgB,YAAYR;AAEpD,MAAMS,OAAOC,gBAAgBH,iBAAiB;IAC1C,iBAAiBI;IACjB,SAASC;IACT,YAAYC;IACZ,MAAMC;IACN,gBAAgBC;IAChB,aAAaC;AACjB"}

package/Tree/components/ItemCollapseTrigger.d.ts

@@ -4,21 +4,22 @@ 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;
+declare const BaseItemCollapseTrigger: ({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element;
+declare const ItemCollapseTrigger: typeof BaseItemCollapseTrigger & {
+    original: typeof BaseItemCollapseTrigger;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element) & {
-        original: ({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element;
+    original: typeof BaseItemCollapseTrigger & {
+        original: typeof BaseItemCollapseTrigger;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element) & {
-        original: ({ open, loading, ...props }: ItemCollapseTriggerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemCollapseTrigger & {
+        original: typeof BaseItemCollapseTrigger;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/ItemCollapseTrigger.js

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

package/Tree/components/ItemCollapseTrigger.js.map

@@ -1 +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/index.js\";\nimport { Loader } from \"~/Loader/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { makeDecoratable, cn } from \"~/utils.js\";\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                        \"transition transform duration-100 ease-linear\",\n                        open ? \"rotate-90\" : \"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,+CAA+C,EAC/CE,IAAI,GAAG,WAAW,GAAG,UACzB;IAAE,CACL;EACJ,EACJ,CAAC;AAEV,CAAC;AAED,MAAMY,mBAAmB,GAAGf,eAAe,CAAC,yBAAyB,EAAEE,uBAAuB,CAAC;AAE/F,SAASa,mBAAmB","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemCollapseTrigger.js","sources":["../../../src/Tree/components/ItemCollapseTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChevronRight } from \"@webiny/icons/chevron_right.svg\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { Loader } from \"~/Loader/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { makeDecoratable, cn } from \"~/utils.js\";\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                        \"transition transform duration-100 ease-linear\",\n                        open ? \"rotate-90\" : \"rotate-0\"\n                    )}\n                />\n            }\n        />\n    );\n};\n\nconst ItemCollapseTrigger = makeDecoratable(\"TreeItemCollapseTrigger\", BaseItemCollapseTrigger);\n\nexport { ItemCollapseTrigger, type ItemCollapseTriggerProps };\n"],"names":["BaseItemCollapseTrigger","open","loading","props","Loader","IconButton","Icon","ChevronRight","cn","ItemCollapseTrigger","makeDecoratable"],"mappings":";;;;;;AAYA,MAAMA,0BAA0B,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,OAAiC;IAClF,IAAID,SACA,OAAO,WAAP,GAAO,oBAACE,QAAMA;QAAC,MAAM;QAAM,SAAS;;IAGxC,OAAO,WAAP,GACI,oBAACC,YAAUA;QACN,GAAGF,KAAK;QACT,MAAM;QACN,SAAS;QACT,oBACI,oBAACG,MAAIA;YACD,oBAAM,oBAACC,gBAAYA;YACnB,MAAK;YACL,OAAO;YACP,OAAO;YACP,WAAWC,GACP,iDACAP,OAAO,cAAc;;;AAM7C;AAEA,MAAMQ,sBAAsBC,gBAAgB,2BAA2BV"}

package/Tree/components/ItemContent.d.ts

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

package/Tree/components/ItemContent.js

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

package/Tree/components/ItemContent.js.map

@@ -1 +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.js\";\n\nexport type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseItemContent = ({ children, className, ...props }: ItemContentProps) => {\n    return (\n        <div className={cn(\"flex items-center w-full gap-x-sm truncate\", className)} {...props}>\n            {children}\n        </div>\n    );\n};\n\nexport const ItemContent = makeDecoratable(\"TreeItemContent\", BaseItemContent);\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;IAAKJ,SAAS,EAAEJ,EAAE,CAAC,4CAA4C,EAAEI,SAAS;EAAE,GAAKC,KAAK,GACjFF,QACA,CAAC;AAEd,CAAC;AAED,OAAO,MAAMM,WAAW,GAAGR,eAAe,CAAC,iBAAiB,EAAEC,eAAe,CAAC","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemContent.js","sources":["../../../src/Tree/components/ItemContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nexport type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseItemContent = ({ children, className, ...props }: ItemContentProps) => {\n    return (\n        <div className={cn(\"flex items-center w-full gap-x-sm truncate\", className)} {...props}>\n            {children}\n        </div>\n    );\n};\n\nexport const ItemContent = makeDecoratable(\"TreeItemContent\", BaseItemContent);\n"],"names":["BaseItemContent","children","className","props","cn","ItemContent","makeDecoratable"],"mappings":";;AAKA,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAAyB,GACjE,WAAP,GACI,oBAAC;QAAI,WAAWC,GAAG,8CAA8CF;QAAa,GAAGC,KAAK;OACjFF;AAKN,MAAMI,cAAcC,gBAAgB,mBAAmBN"}

package/Tree/components/ItemDragHandle.d.ts

@@ -3,21 +3,22 @@ import React from "react";
 type ItemDragHandleProps = {
     handleRef?: RefObject<HTMLDivElement | null>;
 };
-declare const ItemDragHandle: (({ handleRef }: ItemDragHandleProps) => React.JSX.Element) & {
-    original: ({ handleRef }: ItemDragHandleProps) => React.JSX.Element;
+declare const BaseItemDragHandle: ({ handleRef }: ItemDragHandleProps) => React.JSX.Element;
+declare const ItemDragHandle: typeof BaseItemDragHandle & {
+    original: typeof BaseItemDragHandle;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ handleRef }: ItemDragHandleProps) => React.JSX.Element) & {
-        original: ({ handleRef }: ItemDragHandleProps) => React.JSX.Element;
+    original: typeof BaseItemDragHandle & {
+        original: typeof BaseItemDragHandle;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ handleRef }: ItemDragHandleProps) => React.JSX.Element) & {
-        original: ({ handleRef }: ItemDragHandleProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemDragHandle & {
+        original: typeof BaseItemDragHandle;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/ItemDragHandle.js

@@ -1,27 +1,30 @@
-import React from "react";
-import { ReactComponent as DragIndicator } from "@webiny/icons/drag_indicator.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/drag_indicator.svg";
 import { IconButton } from "../../Button/index.js";
 import { Icon } from "../../Icon/index.js";
 import { cn, makeDecoratable } from "../../utils.js";
-const BaseItemDragHandle = ({
-  handleRef
-}) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: handleRef
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "xs",
-    variant: "secondary",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(DragIndicator, null),
-      size: "sm",
-      label: "Drag to reorder"
-    }),
-    onMouseDown: () => setIsDragging(true),
-    onMouseUp: () => setIsDragging(false),
-    onMouseLeave: () => setIsDragging(false),
-    className: cn(["absolute top-sm -left-sm", "invisible group-hover:visible", "size-md", isDragging ? "cursor-grabbing" : "cursor-grab"])
-  }));
+const BaseItemDragHandle = ({ handleRef })=>{
+    const [isDragging, setIsDragging] = react.useState(false);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: handleRef
+    }, /*#__PURE__*/ react.createElement(IconButton, {
+        size: "xs",
+        variant: "secondary",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            label: "Drag to reorder"
+        }),
+        onMouseDown: ()=>setIsDragging(true),
+        onMouseUp: ()=>setIsDragging(false),
+        onMouseLeave: ()=>setIsDragging(false),
+        className: cn([
+            "absolute top-sm -left-sm",
+            "invisible group-hover:visible",
+            "size-md",
+            isDragging ? "cursor-grabbing" : "cursor-grab"
+        ])
+    }));
 };
 const ItemDragHandle = makeDecoratable("TreeItemDragHandle", BaseItemDragHandle);
 export { ItemDragHandle };

package/Tree/components/ItemDragHandle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","DragIndicator","IconButton","Icon","cn","makeDecoratable","BaseItemDragHandle","handleRef","isDragging","setIsDragging","useState","createElement","ref","size","variant","icon","label","onMouseDown","onMouseUp","onMouseLeave","className","ItemDragHandle"],"sources":["ItemDragHandle.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\nimport { ReactComponent as DragIndicator } from \"@webiny/icons/drag_indicator.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype ItemDragHandleProps = {\n    handleRef?: RefObject<HTMLDivElement | null>;\n};\n\nconst BaseItemDragHandle = ({ handleRef }: ItemDragHandleProps) => {\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    return (\n        <div ref={handleRef as React.LegacyRef<HTMLDivElement>}>\n            <IconButton\n                size={\"xs\"}\n                variant={\"secondary\"}\n                icon={<Icon icon={<DragIndicator />} size=\"sm\" label={\"Drag to reorder\"} />}\n                onMouseDown={() => setIsDragging(true)}\n                onMouseUp={() => setIsDragging(false)}\n                onMouseLeave={() => setIsDragging(false)}\n                className={cn([\n                    \"absolute top-sm -left-sm\",\n                    \"invisible group-hover:visible\",\n                    \"size-md\",\n                    isDragging ? \"cursor-grabbing\" : \"cursor-grab\"\n                ])}\n            />\n        </div>\n    );\n};\n\nconst ItemDragHandle = makeDecoratable(\"TreeItemDragHandle\", BaseItemDragHandle);\n\nexport { ItemDragHandle, type ItemDragHandleProps };\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,aAAa,QAAQ,kCAAkC;AAClF,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,eAAe;AAM5B,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EAC/D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGV,KAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;EAEzD,oBACIX,KAAA,CAAAY,aAAA;IAAKC,GAAG,EAAEL;EAA6C,gBACnDR,KAAA,CAAAY,aAAA,CAACT,UAAU;IACPW,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE,WAAY;IACrBC,IAAI,eAAEhB,KAAA,CAAAY,aAAA,CAACR,IAAI;MAACY,IAAI,eAAEhB,KAAA,CAAAY,aAAA,CAACV,aAAa,MAAE,CAAE;MAACY,IAAI,EAAC,IAAI;MAACG,KAAK,EAAE;IAAkB,CAAE,CAAE;IAC5EC,WAAW,EAAEA,CAAA,KAAMR,aAAa,CAAC,IAAI,CAAE;IACvCS,SAAS,EAAEA,CAAA,KAAMT,aAAa,CAAC,KAAK,CAAE;IACtCU,YAAY,EAAEA,CAAA,KAAMV,aAAa,CAAC,KAAK,CAAE;IACzCW,SAAS,EAAEhB,EAAE,CAAC,CACV,0BAA0B,EAC1B,+BAA+B,EAC/B,SAAS,EACTI,UAAU,GAAG,iBAAiB,GAAG,aAAa,CACjD;EAAE,CACN,CACA,CAAC;AAEd,CAAC;AAED,MAAMa,cAAc,GAAGhB,eAAe,CAAC,oBAAoB,EAAEC,kBAAkB,CAAC;AAEhF,SAASe,cAAc","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemDragHandle.js","sources":["../../../src/Tree/components/ItemDragHandle.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\nimport { ReactComponent as DragIndicator } from \"@webiny/icons/drag_indicator.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ntype ItemDragHandleProps = {\n    handleRef?: RefObject<HTMLDivElement | null>;\n};\n\nconst BaseItemDragHandle = ({ handleRef }: ItemDragHandleProps) => {\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    return (\n        <div ref={handleRef as React.LegacyRef<HTMLDivElement>}>\n            <IconButton\n                size={\"xs\"}\n                variant={\"secondary\"}\n                icon={<Icon icon={<DragIndicator />} size=\"sm\" label={\"Drag to reorder\"} />}\n                onMouseDown={() => setIsDragging(true)}\n                onMouseUp={() => setIsDragging(false)}\n                onMouseLeave={() => setIsDragging(false)}\n                className={cn([\n                    \"absolute top-sm -left-sm\",\n                    \"invisible group-hover:visible\",\n                    \"size-md\",\n                    isDragging ? \"cursor-grabbing\" : \"cursor-grab\"\n                ])}\n            />\n        </div>\n    );\n};\n\nconst ItemDragHandle = makeDecoratable(\"TreeItemDragHandle\", BaseItemDragHandle);\n\nexport { ItemDragHandle, type ItemDragHandleProps };\n"],"names":["BaseItemDragHandle","handleRef","isDragging","setIsDragging","React","IconButton","Icon","DragIndicator","cn","ItemDragHandle","makeDecoratable"],"mappings":";;;;;AAWA,MAAMA,qBAAqB,CAAC,EAAEC,SAAS,EAAuB;IAC1D,MAAM,CAACC,YAAYC,cAAc,GAAGC,MAAAA,QAAc,CAAC;IAEnD,OAAO,WAAP,GACI,oBAAC;QAAI,KAAKH;qBACN,oBAACI,YAAUA;QACP,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAaA;YAAK,MAAK;YAAK,OAAO;;QACtD,aAAa,IAAMJ,cAAc;QACjC,WAAW,IAAMA,cAAc;QAC/B,cAAc,IAAMA,cAAc;QAClC,WAAWK,GAAG;YACV;YACA;YACA;YACAN,aAAa,oBAAoB;SACpC;;AAIjB;AAEA,MAAMO,iBAAiBC,gBAAgB,sBAAsBV"}

package/Tree/components/ItemIcon.d.ts

@@ -4,21 +4,22 @@ interface ItemIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
     active?: boolean;
 }
-declare const ItemIcon: (({ element, active, ...props }: ItemIconProps) => React.JSX.Element) & {
-    original: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+declare const BaseItemIcon: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+declare const ItemIcon: typeof BaseItemIcon & {
+    original: typeof BaseItemIcon;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, active, ...props }: ItemIconProps) => React.JSX.Element) & {
-        original: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+    original: typeof BaseItemIcon & {
+        original: typeof BaseItemIcon;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ element, active, ...props }: ItemIconProps) => React.JSX.Element) & {
-        original: ({ element, active, ...props }: ItemIconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemIcon & {
+        original: typeof BaseItemIcon;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/ItemIcon.js

@@ -1,17 +1,12 @@
-import React from "react";
+import react from "react";
 import { Icon } from "../../Icon/index.js";
 import { makeDecoratable } from "../../utils.js";
-const BaseItemIcon = ({
-  element,
-  active,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(Icon, Object.assign({
-    icon: element,
-    size: "sm",
-    color: active ? "neutral-strong" : "neutral-light"
-  }, props));
-};
+const BaseItemIcon = ({ element, active, ...props })=>/*#__PURE__*/ react.createElement(Icon, {
+        icon: element,
+        size: "sm",
+        color: active ? "neutral-strong" : "neutral-light",
+        ...props
+    });
 const ItemIcon = makeDecoratable("TreeItemIcon", BaseItemIcon);
 export { ItemIcon };
 

package/Tree/components/ItemIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","makeDecoratable","BaseItemIcon","element","active","props","createElement","Object","assign","icon","size","color","ItemIcon"],"sources":["ItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n    active?: boolean;\n}\n\nconst BaseItemIcon = ({ element, active, ...props }: ItemIconProps) => {\n    return (\n        <Icon\n            icon={element}\n            size={\"sm\"}\n            color={active ? \"neutral-strong\" : \"neutral-light\"}\n            {...props}\n        />\n    );\n};\n\nconst ItemIcon = makeDecoratable(\"TreeItemIcon\", BaseItemIcon);\n\nexport { ItemIcon, type ItemIconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,eAAe;AAOxB,MAAMC,YAAY,GAAGA,CAAC;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAqB,CAAC,KAAK;EACnE,oBACIN,KAAA,CAAAO,aAAA,CAACN,IAAI,EAAAO,MAAA,CAAAC,MAAA;IACDC,IAAI,EAAEN,OAAQ;IACdO,IAAI,EAAE,IAAK;IACXC,KAAK,EAAEP,MAAM,GAAG,gBAAgB,GAAG;EAAgB,GAC/CC,KAAK,CACZ,CAAC;AAEV,CAAC;AAED,MAAMO,QAAQ,GAAGX,eAAe,CAAC,cAAc,EAAEC,YAAY,CAAC;AAE9D,SAASU,QAAQ","ignoreList":[]}
+{"version":3,"file":"Tree/components/ItemIcon.js","sources":["../../../src/Tree/components/ItemIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconProps } from \"~/Icon/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface ItemIconProps extends Omit<IconProps, \"icon\"> {\n    element?: React.ReactNode;\n    active?: boolean;\n}\n\nconst BaseItemIcon = ({ element, active, ...props }: ItemIconProps) => {\n    return (\n        <Icon\n            icon={element}\n            size={\"sm\"}\n            color={active ? \"neutral-strong\" : \"neutral-light\"}\n            {...props}\n        />\n    );\n};\n\nconst ItemIcon = makeDecoratable(\"TreeItemIcon\", BaseItemIcon);\n\nexport { ItemIcon, type ItemIconProps };\n"],"names":["BaseItemIcon","element","active","props","Icon","ItemIcon","makeDecoratable"],"mappings":";;;AASA,MAAMA,eAAe,CAAC,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGC,OAAsB,GACvD,WAAP,GACI,oBAACC,MAAIA;QACD,MAAMH;QACN,MAAM;QACN,OAAOC,SAAS,mBAAmB;QAClC,GAAGC,KAAK;;AAKrB,MAAME,WAAWC,gBAAgB,gBAAgBN"}

package/Tree/components/ItemPlaceholder.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 interface ItemPlaceholderProps {
     depth: number;
 }
-declare const ItemPlaceholder: (({ depth }: ItemPlaceholderProps) => React.JSX.Element) & {
-    original: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+declare const BaseItemPlaceholder: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+declare const ItemPlaceholder: typeof BaseItemPlaceholder & {
+    original: typeof BaseItemPlaceholder;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ depth }: ItemPlaceholderProps) => React.JSX.Element) & {
-        original: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+    original: typeof BaseItemPlaceholder & {
+        original: typeof BaseItemPlaceholder;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ depth }: ItemPlaceholderProps) => React.JSX.Element) & {
-        original: ({ depth }: ItemPlaceholderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseItemPlaceholder & {
+        original: typeof BaseItemPlaceholder;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tree/components/ItemPlaceholder.js

@@ -1,15 +1,13 @@
-import React from "react";
+import react from "react";
 import { makeDecoratable } from "../../utils.js";
-const BaseItemPlaceholder = ({
-  depth
-}) => {
-  const left = depth * 20 + 20;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full h-xxs bg-primary-muted absolute top-0 right-0",
-    style: {
-      left
-    }
-  });
+const BaseItemPlaceholder = ({ depth })=>{
+    const left = 20 * depth + 20;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-xxs bg-primary-muted absolute top-0 right-0",
+        style: {
+            left
+        }
+    });
 };
 const ItemPlaceholder = makeDecoratable("TreeItemPlaceholder", BaseItemPlaceholder);
 export { ItemPlaceholder };