@dust-tt/sparkle 0.2.162 → 0.2.163

package/dist/cjs/components/Tree.d.ts

@@ -6,9 +6,9 @@ export interface TreeProps {
 }
 export declare function Tree({ children, isLoading }: TreeProps): React.JSX.Element;
 export declare namespace Tree {
-    var Item: ({ label, type, className, variant, visual, checkbox, onChevronClick, collapsed, children, actions, }: TreeItemProps) => React.JSX.Element;
+    var Item: ({ label, type, className, variant, visual, checkbox, onChevronClick, collapsed, defaultCollapsed, actions, renderTreeItems, children, }: TreeItemPropsWithChildren | TreeItemPropsWithRender) => React.JSX.Element;
 }
-export interface TreeItemProps {
+interface TreeItemProps {
     label?: string;
     type?: "node" | "item" | "leaf";
     variant?: "file" | "folder" | "database" | "channel";
@@ -16,7 +16,16 @@ export interface TreeItemProps {
     checkbox?: CheckboxProps;
     onChevronClick?: () => void;
     collapsed?: boolean;
+    defaultCollapsed?: boolean;
     className?: string;
     actions?: React.ReactNode;
+}
+export interface TreeItemPropsWithChildren extends TreeItemProps {
+    renderTreeItems?: never;
     children?: React.ReactNode;
 }
+export interface TreeItemPropsWithRender extends TreeItemProps {
+    renderTreeItems: () => React.ReactNode;
+    children?: never;
+}
+export {};

package/dist/cjs/index.js

@@ -76007,10 +76007,25 @@ var visualTable = {
     channel: SvgChatBubbleBottomCenterText,
 };
 Tree.Item = function (_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.variant, variant = _d === void 0 ? "file" : _d, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, children = _a.children, actions = _a.actions;
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "node" : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.variant, variant = _d === void 0 ? "file" : _d, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, defaultCollapsed = _a.defaultCollapsed, actions = _a.actions, renderTreeItems = _a.renderTreeItems, children = _a.children;
+    var _e = __read(React.useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : true), 2), collapsedState = _e[0], setCollapsedState = _e[1];
+    var isControlledCollapse = collapsed !== undefined;
+    var effectiveCollapsed = isControlledCollapse ? collapsed : collapsedState;
+    var effectiveOnChevronClick = isControlledCollapse
+        ? onChevronClick
+        : function () { return setCollapsedState(!collapsedState); };
+    var getChildren = function () {
+        if (effectiveCollapsed) {
+            return [];
+        }
+        return typeof renderTreeItems === "function" ? renderTreeItems() : children;
+    };
+    var childrenToRender = getChildren();
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classNames(className ? className : "", "s-flex s-flex-row s-items-center s-gap-4 s-py-1") },
-            type === "node" && (React.createElement(IconButton, { icon: children && !collapsed ? SvgChevronDown : SvgChevronRight, size: "sm", variant: "secondary", onClick: onChevronClick })),
+            type === "node" && (React.createElement(IconButton, { icon: childrenToRender && !effectiveCollapsed
+                    ? SvgChevronDown
+                    : SvgChevronRight, size: "sm", variant: "secondary", onClick: effectiveOnChevronClick })),
             type === "leaf" && React.createElement("div", { className: "s-w-5" }),
             checkbox && React.createElement(Checkbox, __assign({}, checkbox)),
             React.createElement("div", { className: "s-flex s-w-full s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900" },
@@ -76018,7 +76033,7 @@ Tree.Item = function (_a) {
                     visual ? (visual) : (React.createElement(Icon, { visual: visualTable[variant], size: "sm", className: "s-flex-shrink-0 s-text-element-700" })),
                     React.createElement("div", { className: "s-truncate" }, label),
                     actions && React.createElement("div", { className: "s-inline-block s-pl-5" }, actions)))),
-        React.Children.count(children) > 0 && (React.createElement("div", { className: "s-pl-5" }, !collapsed && children))));
+        React.Children.count(childrenToRender) > 0 && (React.createElement("div", { className: "s-pl-5" }, childrenToRender))));
 };
 
 var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";