@webiny/admin-ui 6.0.0-alpha.0

package/Tooltip/components/TooltipContent.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn, cva } from "../../utils";
+const tooltipContentVariants = cva(["wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95", "data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2"], {
+  variants: {
+    variant: {
+      accent: "wby-bg-neutral-dark wby-text-neutral-light",
+      subtle: "wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md"
+    },
+    hiddenArrow: {
+      true: ["data-[side=top]:wby-mb-xs-plus", "data-[side=bottom]:wby-mt-xs-plus", "data-[side=left]:wby-mr-xs-plus", "data-[side=right]:wby-ml-xs-plus"]
+    }
+  },
+  defaultVariants: {
+    variant: "accent"
+  }
+});
+const TooltipContent = ({
+  className,
+  variant,
+  hiddenArrow,
+  ...props
+}) => /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({
+  collisionPadding: 8,
+  sideOffset: 4,
+  className: cn(tooltipContentVariants({
+    variant,
+    hiddenArrow
+  }), className)
+}, props)));
+export { TooltipContent };
+
+//# sourceMappingURL=TooltipContent.js.map

package/Tooltip/components/TooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipContentVariants","variants","variant","accent","subtle","hiddenArrow","true","defaultVariants","TooltipContent","className","props","createElement","Portal","Content","Object","assign","collisionPadding","sideOffset"],"sources":["TooltipContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tooltipContentVariants = cva(\n    [\n        \"wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95\",\n        \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95\",\n        \"data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"wby-bg-neutral-dark wby-text-neutral-light\",\n                subtle: \"wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md\"\n            },\n            hiddenArrow: {\n                true: [\n                    \"data-[side=top]:wby-mb-xs-plus\",\n                    \"data-[side=bottom]:wby-mt-xs-plus\",\n                    \"data-[side=left]:wby-mr-xs-plus\",\n                    \"data-[side=right]:wby-ml-xs-plus\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"accent\"\n        }\n    }\n);\n\ntype TooltipContentProps = TooltipPrimitive.TooltipContentProps &\n    VariantProps<typeof tooltipContentVariants>;\n\nconst TooltipContent = ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => (\n    <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n            collisionPadding={8}\n            sideOffset={4}\n            className={cn(tooltipContentVariants({ variant, hiddenArrow }), className)}\n            {...props}\n        />\n    </TooltipPrimitive.Portal>\n);\n\nexport { TooltipContent, type TooltipContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,sBAAsB,GAAGD,GAAG,CAC9B,CACI,+HAA+H,EAC/H,4GAA4G,EAC5G,6KAA6K,CAChL,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,4CAA4C;MACpDC,MAAM,EAAE;IACZ,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,CACF,gCAAgC,EAChC,mCAAmC,EACnC,iCAAiC,EACjC,kCAAkC;IAE1C;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAKD,MAAMM,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEG,WAAW;EAAE,GAAGK;AAA2B,CAAC,kBACtFf,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACe,MAAM,qBACpBjB,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACgB,OAAO,EAAAC,MAAA,CAAAC,MAAA;EACrBC,gBAAgB,EAAE,CAAE;EACpBC,UAAU,EAAE,CAAE;EACdR,SAAS,EAAEX,EAAE,CAACE,sBAAsB,CAAC;IAAEE,OAAO;IAAEG;EAAY,CAAC,CAAC,EAAEI,SAAS;AAAE,GACvEC,KAAK,CACZ,CACoB,CAC5B;AAED,SAASF,cAAc","ignoreList":[]}

package/Tooltip/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TooltipArrow";
+export * from "./TooltipContent";

package/Tooltip/components/index.js

@@ -0,0 +1,4 @@
+export * from "./TooltipArrow";
+export * from "./TooltipContent";
+
+//# sourceMappingURL=index.js.map

package/Tooltip/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./TooltipArrow\";\nexport * from \"./TooltipContent\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/Tooltip/index.js

@@ -0,0 +1,3 @@
+export * from "./Tooltip";
+
+//# sourceMappingURL=index.js.map

package/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tooltip\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Tree/Tree.d.ts

@@ -0,0 +1,184 @@
+import React from "react";
+import { type PlaceholderRender, type NodeModel, type RenderParams } from "@minoru/react-dnd-treeview";
+import { type DragSourceMonitor } from "react-dnd";
+import type { NodeDto, WithDefaultNodeData } from "./domains";
+export interface DropOptions<TData = Record<string, any>> {
+    dragSourceId?: NodeDto<TData>["id"];
+    dropTargetId: NodeDto<TData>["id"];
+    dragSource?: NodeDto<TData>;
+    dropTarget?: NodeDto<TData>;
+}
+export interface TreeProps<TData = Record<string, any>> {
+    autoExpandOnDragOver?: boolean;
+    canDrag?: (node: NodeDto<TData>) => boolean;
+    canDrop?: (tree: NodeDto<TData>[], options: DropOptions<TData>) => boolean;
+    defaultLockedOpenNodeIds?: string[];
+    defaultOpenNodeIds?: string[];
+    dropTargetOffset?: number;
+    insertDroppableFirst?: boolean;
+    loadingNodeIds?: string[];
+    nodes: NodeDto<TData>[];
+    onChangeOpen?: (newOpenNodes: NodeDto<TData>[]) => void;
+    onDragStart?: (node: NodeModel<NodeDto<TData>>, monitor: DragSourceMonitor) => void;
+    onDrop?: (newTree: NodeDto<TData>[], options: DropOptions<TData>) => Promise<void> | void;
+    onNodeClick?: (node: WithDefaultNodeData<TData>) => void;
+    placeholderRender?: PlaceholderRender<NodeDto<TData>>;
+    renderer?: (node: WithDefaultNodeData<TData>, params?: RenderParams) => React.ReactNode;
+    rootId?: string;
+    sort?: boolean | ((a: NodeDto<TData>, b: NodeDto<TData>) => number);
+}
+declare const Tree: (<TData>(props: TreeProps<TData>) => React.JSX.Element) & {
+    original: <TData>(props: TreeProps<TData>) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (<TData>(props: TreeProps<TData>) => React.JSX.Element) & {
+        original: <TData>(props: TreeProps<TData>) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(<TData>(props: TreeProps<TData>) => React.JSX.Element) & {
+        original: <TData>(props: TreeProps<TData>) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Item: (({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element) & {
+        original: ({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element) & {
+            original: ({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element) & {
+            original: ({ children, className, active, loading, ...props }: import("./components/Item").ItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        CollapseTrigger: (({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
+            original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
+                original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element) & {
+                original: ({ open, loading, ...props }: import("./components/ItemCollapseTrigger").ItemCollapseTriggerProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Content: (({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element) & {
+            original: ({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element) & {
+                original: ({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element) & {
+                original: ({ children, className, ...props }: import("./components/ItemContent").ItemContentProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        DragHandle: (({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
+            original: ({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
+                original: ({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element) & {
+                original: ({ handleRef }: import("./components/ItemDragHandle").ItemDragHandleProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Icon: (({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element) & {
+            original: ({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element) & {
+                original: ({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element) & {
+                original: ({ element, active, ...props }: import("./components/ItemIcon").ItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        SubIndentation: (({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
+            original: ({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
+                original: ({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element) & {
+                original: ({ level }: import("./components/ItemSubIndentation").ItemSubIndentationProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Placeholder: (({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
+            original: ({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
+                original: ({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element) & {
+                original: ({ depth }: import("./components/ItemPlaceholder").ItemPlaceholderProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+    };
+};
+export { Tree };

package/Tree/Tree.js

@@ -0,0 +1,113 @@
+import React from "react";
+import { getBackendOptions, MultiBackend, Tree as DndTree, useDragOver } from "@minoru/react-dnd-treeview";
+import { DndProvider } from "react-dnd";
+import { makeDecoratable, withStaticProps } from "../utils";
+import { Item } from "./components";
+import { useTree } from "./useTree";
+const ListComponent = /*#__PURE__*/React.forwardRef(({
+  children,
+  className = "",
+  ...props
+}, ref) => {
+  const classNames = [...className.split(" "), "wby-pt-1"].join(" ");
+  return /*#__PURE__*/React.createElement("ul", Object.assign({
+    ref: ref
+  }, props, {
+    className: classNames
+  }), children);
+});
+ListComponent.displayName = "ListComponent";
+function renderTreeNode({
+  node,
+  params,
+  renderer
+}) {
+  const rendered = renderer?.(node, params);
+  if (rendered && /*#__PURE__*/React.isValidElement(rendered)) {
+    return rendered;
+  }
+  return node.label;
+}
+const BaseTree = props => {
+  const {
+    vm,
+    handleDrop,
+    changeOpen,
+    canDrag,
+    canDrop,
+    sort
+  } = useTree(props);
+  return /*#__PURE__*/React.createElement(DndProvider, {
+    backend: MultiBackend,
+    options: getBackendOptions()
+  }, /*#__PURE__*/React.createElement(DndTree, {
+    tree: vm.nodes,
+    rootId: vm.rootId,
+    initialOpen: vm.openNodeIds,
+    listComponent: ListComponent,
+    insertDroppableFirst: props.insertDroppableFirst,
+    render: (node, params) => {
+      const nodeData = node.data;
+
+      // Indentation logic: increase padding by 20 px per level with a base of 10 px
+      const indent = 10 + params.depth * 20;
+
+      // Use the drag over hook to handle drag and drop interactions
+      const dragOverProps = useDragOver(node.id, params.isOpen, params.onToggle);
+      const itemProps = props.autoExpandOnDragOver === false ? {} : dragOverProps;
+      const onToggle = e => {
+        e.stopPropagation();
+        params.onToggle && params.onToggle();
+      };
+      const isLocked = vm.lockedOpenNodeIds.includes(nodeData.id);
+      const isCollapsable = !isLocked && node.droppable;
+      return /*#__PURE__*/React.createElement(Item, Object.assign({
+        active: nodeData.active,
+        loading: nodeData.loading,
+        style: {
+          paddingInlineStart: indent
+        }
+      }, itemProps), isCollapsable && /*#__PURE__*/React.createElement(Tree.Item.CollapseTrigger, {
+        open: params.isOpen,
+        loading: nodeData.loading,
+        onClick: onToggle
+      }), /*#__PURE__*/React.createElement(Item.Content, {
+        onClick: () => {
+          if (props.onNodeClick) {
+            props.onNodeClick(nodeData);
+          }
+        }
+      }, renderTreeNode({
+        node: nodeData,
+        params,
+        renderer: props.renderer
+      })), params.draggable && /*#__PURE__*/React.createElement(Tree.Item.DragHandle, {
+        handleRef: params.handleRef
+      }));
+    },
+    dragPreviewRender: monitorProps => /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Item.Content, null, renderTreeNode({
+      node: monitorProps.item.data,
+      renderer: props.renderer
+    }))),
+    dropTargetOffset: props.dropTargetOffset,
+    onDragStart: props.onDragStart,
+    onDrop: handleDrop,
+    onChangeOpen: changeOpen,
+    canDrag: canDrag,
+    canDrop: canDrop,
+    placeholderRender: props.placeholderRender,
+    classes: {
+      dropTarget: "wby-bg-neutral-dark/5",
+      draggingSource: "wby-opacity-50 wby-bg-neutral-dimmed",
+      placeholder: "wby-relative"
+    },
+    sort: typeof props.sort === "function" ? sort : props.sort
+  }));
+};
+const DecoratableTree = makeDecoratable("Tree", BaseTree);
+const Tree = withStaticProps(DecoratableTree, {
+  Item
+});
+export { Tree };
+
+//# sourceMappingURL=Tree.js.map

package/Tree/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","getBackendOptions","MultiBackend","Tree","DndTree","useDragOver","DndProvider","makeDecoratable","withStaticProps","Item","useTree","ListComponent","forwardRef","children","className","props","ref","classNames","split","join","createElement","Object","assign","displayName","renderTreeNode","node","params","renderer","rendered","isValidElement","label","BaseTree","vm","handleDrop","changeOpen","canDrag","canDrop","sort","backend","options","tree","nodes","rootId","initialOpen","openNodeIds","listComponent","insertDroppableFirst","render","nodeData","data","indent","depth","dragOverProps","id","isOpen","onToggle","itemProps","autoExpandOnDragOver","e","stopPropagation","isLocked","lockedOpenNodeIds","includes","isCollapsable","droppable","active","loading","style","paddingInlineStart","CollapseTrigger","open","onClick","Content","onNodeClick","draggable","DragHandle","handleRef","dragPreviewRender","monitorProps","item","dropTargetOffset","onDragStart","onDrop","onChangeOpen","placeholderRender","classes","dropTarget","draggingSource","placeholder","DecoratableTree"],"sources":["Tree.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    getBackendOptions,\n    MultiBackend,\n    Tree as DndTree,\n    useDragOver,\n    type PlaceholderRender,\n    type NodeModel,\n    type RenderParams\n} from \"@minoru/react-dnd-treeview\";\n\nimport { DndProvider, type DragSourceMonitor } from \"react-dnd\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { Item } from \"./components\";\nimport type { NodeDto, WithDefaultNodeData } from \"./domains\";\nimport { useTree } from \"./useTree\";\n\nexport interface DropOptions<TData = Record<string, any>> {\n    dragSourceId?: NodeDto<TData>[\"id\"];\n    dropTargetId: NodeDto<TData>[\"id\"];\n    dragSource?: NodeDto<TData>;\n    dropTarget?: NodeDto<TData>;\n}\n\nexport interface TreeProps<TData = Record<string, any>> {\n    autoExpandOnDragOver?: boolean;\n    canDrag?: (node: NodeDto<TData>) => boolean;\n    canDrop?: (tree: NodeDto<TData>[], options: DropOptions<TData>) => boolean;\n    defaultLockedOpenNodeIds?: string[];\n    defaultOpenNodeIds?: string[];\n    dropTargetOffset?: number;\n    insertDroppableFirst?: boolean;\n    loadingNodeIds?: string[];\n    nodes: NodeDto<TData>[];\n    onChangeOpen?: (newOpenNodes: NodeDto<TData>[]) => void;\n    onDragStart?: (node: NodeModel<NodeDto<TData>>, monitor: DragSourceMonitor) => void;\n    onDrop?: (newTree: NodeDto<TData>[], options: DropOptions<TData>) => Promise<void> | void;\n    onNodeClick?: (node: WithDefaultNodeData<TData>) => void;\n    placeholderRender?: PlaceholderRender<NodeDto<TData>>;\n    renderer?: (node: WithDefaultNodeData<TData>, params?: RenderParams) => React.ReactNode;\n    rootId?: string;\n    sort?: boolean | ((a: NodeDto<TData>, b: NodeDto<TData>) => number);\n}\n\ninterface RenderTreeNodeParams<TData> {\n    node: WithDefaultNodeData<TData>;\n    params?: RenderParams;\n    renderer?: TreeProps<TData>[\"renderer\"];\n}\n\nconst ListComponent = React.forwardRef(({ children, className = \"\", ...props }: any, ref) => {\n    const classNames = [...className.split(\" \"), \"wby-pt-1\"].join(\" \");\n\n    return (\n        <ul ref={ref} {...props} className={classNames}>\n            {children}\n        </ul>\n    );\n});\n\nListComponent.displayName = \"ListComponent\";\n\nfunction renderTreeNode<TData>({ node, params, renderer }: RenderTreeNodeParams<TData>) {\n    const rendered = renderer?.(node, params);\n\n    if (rendered && React.isValidElement(rendered)) {\n        return rendered;\n    }\n\n    return node.label;\n}\n\nconst BaseTree = <TData,>(props: TreeProps<TData>) => {\n    const { vm, handleDrop, changeOpen, canDrag, canDrop, sort } = useTree<TData>(props);\n\n    return (\n        <DndProvider backend={MultiBackend} options={getBackendOptions()}>\n            <DndTree\n                tree={vm.nodes}\n                rootId={vm.rootId}\n                initialOpen={vm.openNodeIds}\n                listComponent={ListComponent}\n                insertDroppableFirst={props.insertDroppableFirst}\n                render={(node, params) => {\n                    const nodeData = node.data as WithDefaultNodeData<TData>;\n\n                    // Indentation logic: increase padding by 20 px per level with a base of 10 px\n                    const indent = 10 + params.depth * 20;\n\n                    // Use the drag over hook to handle drag and drop interactions\n                    const dragOverProps = useDragOver(node.id, params.isOpen, params.onToggle);\n\n                    const itemProps = props.autoExpandOnDragOver === false ? {} : dragOverProps;\n\n                    const onToggle = (e: React.MouseEvent) => {\n                        e.stopPropagation();\n                        params.onToggle && params.onToggle();\n                    };\n\n                    const isLocked = vm.lockedOpenNodeIds.includes(nodeData.id);\n                    const isCollapsable = !isLocked && node.droppable;\n\n                    return (\n                        <Item\n                            active={nodeData.active}\n                            loading={nodeData.loading}\n                            style={{ paddingInlineStart: indent }}\n                            {...itemProps}\n                        >\n                            {isCollapsable && (\n                                <Tree.Item.CollapseTrigger\n                                    open={params.isOpen}\n                                    loading={nodeData.loading}\n                                    onClick={onToggle}\n                                />\n                            )}\n\n                            <Item.Content\n                                onClick={() => {\n                                    if (props.onNodeClick) {\n                                        props.onNodeClick(nodeData);\n                                    }\n                                }}\n                            >\n                                {renderTreeNode({\n                                    node: nodeData,\n                                    params,\n                                    renderer: props.renderer\n                                })}\n                            </Item.Content>\n\n                            {params.draggable && (\n                                <Tree.Item.DragHandle handleRef={params.handleRef} />\n                            )}\n                        </Item>\n                    );\n                }}\n                dragPreviewRender={monitorProps => (\n                    <Item>\n                        <Item.Content>\n                            {renderTreeNode({\n                                node: monitorProps.item.data as WithDefaultNodeData<TData>,\n                                renderer: props.renderer\n                            })}\n                        </Item.Content>\n                    </Item>\n                )}\n                dropTargetOffset={props.dropTargetOffset}\n                onDragStart={props.onDragStart}\n                onDrop={handleDrop}\n                onChangeOpen={changeOpen}\n                canDrag={canDrag}\n                canDrop={canDrop}\n                placeholderRender={props.placeholderRender}\n                classes={{\n                    dropTarget: \"wby-bg-neutral-dark/5\",\n                    draggingSource: \"wby-opacity-50 wby-bg-neutral-dimmed\",\n                    placeholder: \"wby-relative\"\n                }}\n                sort={typeof props.sort === \"function\" ? sort : props.sort}\n            />\n        </DndProvider>\n    );\n};\n\nconst DecoratableTree = makeDecoratable(\"Tree\", BaseTree);\n\nconst Tree = withStaticProps(DecoratableTree, {\n    Item\n});\n\nexport { Tree };\n"],"mappings":"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","ignoreList":[]}

package/Tree/Tree.stories.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+declare const meta: Meta<typeof Tree>;
+export default meta;
+type Story = StoryObj<typeof Tree>;
+export declare const Default: Story;
+export declare const WithRootId: Story;
+export declare const WithDefaultOpenNodesIds: Story;
+export declare const WithActiveNodes: Story;
+export declare const WithLoadingNodes: Story;
+interface CustomData {
+    foo: string;
+    bar: number;
+}
+type StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;
+export declare const WithCustomData: StoryWithCustomData;
+export declare const WithOnDropCallback: Story;
+export declare const WithOnChangeOpenCallback: Story;
+export declare const WithCanDrag: Story;
+export declare const WithCanDrop: Story;
+interface CustomRenderData {
+    icon: React.ReactElement;
+}
+type StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;
+export declare const WithCustomNodeRenderer: StoryWithCustomNodeRenderer;
+interface CustomSortCallbackData {
+    order: number;
+}
+type WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;
+export declare const WithCustomSortCallback: WithCustomSortCallbackRenderer;