@webiny/admin-ui 0.0.0-unstable.eb196ccd2f → 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\";\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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,WAAW,QAAQ,2BAA2B;AAGzE,SAASC,IAAI;AAEb,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEH,IAAI;EACfI,QAAQ,EAAE,CAAC,CAAC;EACZC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeL,IAAI;AAGnB,OAAO,MAAMM,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,OAAO;MACXC,QAAQ,EAAE,KAAK;MACfC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC;EAET;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BL,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfM,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,OAAO,MAAMC,uBAA8B,GAAG;EAC1CP,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfQ,kBAAkB,EAAE,CAAC,GAAG;EAC5B;AACJ,CAAC;AAED,OAAO,MAAMC,eAAsB,GAAG;EAClCT,IAAI,EAAE;IACFC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfM,MAAM,EAAE;IACZ,CAAC,EACD;MACIR,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,OAAO;MACXC,QAAQ,EAAE,KAAK;MACfC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC;EAET;AACJ,CAAC;AAED,OAAO,MAAMO,gBAAuB,GAAG;EACnCX,IAAI,EAAE;IACFC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfQ,OAAO,EAAE;IACb,CAAC,EACD;MACIV,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,OAAO;MACXC,QAAQ,EAAE,KAAK;MACfC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC;EAET;AACJ,CAAC;;AAED;;AAQA,OAAO,MAAMS,cAAmC,GAAG;EAC/Cb,IAAI,EAAE;IACFC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QAAEC,GAAG,EAAE,KAAK;QAAEC,GAAG,EAAE;MAAG;IAChC,CAAC,EACD;MACId,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QAAEC,GAAG,EAAE,KAAK;QAAEC,GAAG,EAAE;MAAG;IAChC,CAAC,CACJ;IACDC,MAAM,EAAE,MAAAA,CAAOC,OAAO,EAAEC,OAAO,KAAK;MAChC;MACAC,OAAO,CAACC,GAAG,CAAC,mBAAmB,EAAEH,OAAO,CAAC;MACzCE,OAAO,CAACC,GAAG,CAAC,2BAA2B,EAAEF,OAAO,CAAC;IACrD;EACJ;AACJ,CAAC;AAED,OAAO,MAAMG,kBAAyB,GAAG;EACrCtB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfiB,MAAM,EAAE,MAAAA,CAAOC,OAAO,EAAEC,OAAO,KAAK;MAChCC,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEH,OAAO,CAAC;MAC3CE,OAAO,CAACC,GAAG,CAAC,eAAe,EAAEF,OAAO,CAAC;IACzC;EACJ;AACJ,CAAC;AAED,OAAO,MAAMI,wBAA+B,GAAG;EAC3CvB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfwB,YAAY,EAAEC,YAAY,IAAI;MAC1BL,OAAO,CAACC,GAAG,CAAC,iBAAiB,EAAEI,YAAY,CAAC;IAChD;EACJ;AACJ,CAAC;AAED,OAAO,MAAMC,WAAkB,GAAG;EAC9B1B,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,OAAO;MACXC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,CACJ;IACDuB,OAAO,EAAEC,IAAI,IAAIA,IAAI,EAAE1B,EAAE,KAAK;EAClC;AACJ,CAAC;AAED,OAAO,MAAM2B,WAAkB,GAAG;EAC9B7B,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,KAAK;MACTC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,EACD;MACIF,EAAE,EAAE,OAAO;MACXC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE;IACX,CAAC,CACJ;IACD0B,OAAO,EAAEA,CAACC,CAAC,EAAEZ,OAAO,KAAK;MACrB,MAAM;QAAEa;MAAa,CAAC,GAAGb,OAAO;MAEhC,IAAIa,YAAY,KAAK,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,CAAC;MAClB;MAEA,OAAO,IAAI;IACf;EACJ;AACJ,CAAC;;AAED;;AAOA,OAAO,MAAMC,sBAAmD,GAAG;EAC/DjC,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QAAEoB,IAAI,eAAE9C,KAAA,CAAA+C,aAAA,CAAC7C,UAAU,MAAE;MAAE;IACjC,CAAC,EACD;MACIY,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QAAEoB,IAAI,eAAE9C,KAAA,CAAA+C,aAAA,CAAC7C,UAAU,MAAE;MAAE;IACjC,CAAC,EACD;MACIY,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QAAEoB,IAAI,eAAE9C,KAAA,CAAA+C,aAAA,CAAC7C,UAAU,MAAE;MAAE;IACjC,CAAC,EACD;MACIY,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QAAEoB,IAAI,eAAE9C,KAAA,CAAA+C,aAAA,CAAC5C,WAAW,MAAE;MAAE;IAClC,CAAC,CACJ;IACD6C,QAAQ,EAAER,IAAI,iBACVxC,KAAA,CAAA+C,aAAA,CAAC3C,IAAI,CAAC6C,IAAI,CAACC,OAAO,qBACdlD,KAAA,CAAA+C,aAAA,CAAC3C,IAAI,CAAC6C,IAAI,CAACE,IAAI;MAACnC,KAAK,EAAEwB,IAAI,CAACxB,KAAM;MAACoC,OAAO,EAAEZ,IAAI,CAACM;IAAK,CAAE,CAAC,EACxDN,IAAI,CAACxB,KACS;EAE3B;AACJ,CAAC;;AAED;;AAOA,OAAO,MAAMqC,sBAAsD,GAAG;EAClEzC,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,KAAK,EAAE,CACH;MACIC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QACF4B,KAAK,EAAE;MACX;IACJ,CAAC,EACD;MACIxC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QACF4B,KAAK,EAAE;MACX;IACJ,CAAC,EACD;MACIxC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QACF4B,KAAK,EAAE;MACX;IACJ,CAAC,EACD;MACIxC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QACF4B,KAAK,EAAE;MACX;IACJ,CAAC,EACD;MACIxC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QACF4B,KAAK,EAAE;MACX;IACJ,CAAC,EACD;MACIxC,EAAE,EAAE,GAAG;MACPC,QAAQ,EAAE,GAAG;MACbC,KAAK,EAAE,QAAQ;MACfU,IAAI,EAAE;QACF4B,KAAK,EAAE;MACX;IACJ,CAAC,CACJ;IACDC,IAAI,EAAEA,CAACC,CAAC,EAAEC,CAAC,KAAK,CAACD,CAAC,CAAC9B,IAAI,EAAE4B,KAAK,IAAI,CAAC,KAAKG,CAAC,CAAC/B,IAAI,EAAE4B,KAAK,IAAI,CAAC;EAC9D;AACJ,CAAC","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

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

package/Tree/components/Item.js

@@ -1,45 +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"
+import react from "react";
+import { cn, cva, makeDecoratable, withStaticProps } from "../../utils.js";
+import { ItemCollapseTrigger } from "./ItemCollapseTrigger.js";
+import { ItemContent } from "./ItemContent.js";
+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 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 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\";\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":[]}
+{"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

@@ -1,24 +1,25 @@
 import React from "react";
-import { type IconButtonProps } from "../../Button";
+import { type IconButtonProps } from "../../Button/index.js";
 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").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 { 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"
+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 { 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("wby-transition wby-transform wby-duration-100 wby-ease-linear", open ? "wby-rotate-90" : "wby-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\";\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":[]}
+{"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,23 +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;
+export type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+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").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 { ItemContent, type ItemContentProps };
+export {};

package/Tree/components/ItemContent.js

@@ -1,14 +1,9 @@
-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);
-};
+import react from "react";
+import { cn, makeDecoratable } from "../../utils.js";
+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 };
 

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\";\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":[]}
+{"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").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;