@dust-tt/sparkle 0.2.195 → 0.2.196
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Tree.d.ts +3 -1
- package/dist/cjs/index.js +9 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/stories/Tree.stories.d.ts +1 -0
- package/dist/esm/components/Tree.d.ts +3 -1
- package/dist/esm/index.js +9 -7
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/stories/Tree.stories.d.ts +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/Tree.tsx +29 -5
- package/src/stories/Tree.stories.tsx +228 -10
|
@@ -6,5 +6,6 @@ declare const meta: {
|
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
8
|
export declare const TreeExample: () => React.JSX.Element;
|
|
9
|
+
export declare const SelectDataSourceExample: () => React.JSX.Element;
|
|
9
10
|
export declare const DeeplyNestedTreeWithActions: () => React.JSX.Element;
|
|
10
11
|
export declare const SmallTreeWithActions: () => React.JSX.Element;
|
|
@@ -7,12 +7,13 @@ export interface TreeProps {
|
|
|
7
7
|
}
|
|
8
8
|
export declare function Tree({ children, isLoading, isBoxed }: TreeProps): React.JSX.Element;
|
|
9
9
|
export declare namespace Tree {
|
|
10
|
-
var Item: ({ label, type, className, variant, visual, checkbox, onChevronClick, collapsed, defaultCollapsed, actions, renderTreeItems, children, }: TreeItemPropsWithChildren | TreeItemPropsWithRender) => React.JSX.Element;
|
|
10
|
+
var Item: ({ label, type, className, variant, size, visual, checkbox, onChevronClick, collapsed, defaultCollapsed, actions, areActionsFading, renderTreeItems, children, }: TreeItemPropsWithChildren | TreeItemPropsWithRender) => React.JSX.Element;
|
|
11
11
|
}
|
|
12
12
|
interface TreeItemProps {
|
|
13
13
|
label?: string;
|
|
14
14
|
type?: "node" | "item" | "leaf";
|
|
15
15
|
variant?: "file" | "folder" | "database" | "channel";
|
|
16
|
+
size?: "sm" | "md";
|
|
16
17
|
visual?: React.ReactNode;
|
|
17
18
|
checkbox?: CheckboxProps;
|
|
18
19
|
onChevronClick?: () => void;
|
|
@@ -20,6 +21,7 @@ interface TreeItemProps {
|
|
|
20
21
|
defaultCollapsed?: boolean;
|
|
21
22
|
className?: string;
|
|
22
23
|
actions?: React.ReactNode;
|
|
24
|
+
areActionsFading?: boolean;
|
|
23
25
|
}
|
|
24
26
|
export interface TreeItemPropsWithChildren extends TreeItemProps {
|
|
25
27
|
renderTreeItems?: never;
|
package/dist/esm/index.js
CHANGED
|
@@ -76229,8 +76229,8 @@ var visualTable = {
|
|
|
76229
76229
|
channel: SvgChatBubbleBottomCenterText,
|
|
76230
76230
|
};
|
|
76231
76231
|
Tree.Item = function (_a) {
|
|
76232
|
-
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;
|
|
76233
|
-
var
|
|
76232
|
+
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, _e = _a.size, size = _e === void 0 ? "sm" : _e, visual = _a.visual, checkbox = _a.checkbox, onChevronClick = _a.onChevronClick, collapsed = _a.collapsed, defaultCollapsed = _a.defaultCollapsed, actions = _a.actions, _f = _a.areActionsFading, areActionsFading = _f === void 0 ? true : _f, renderTreeItems = _a.renderTreeItems, children = _a.children;
|
|
76233
|
+
var _g = __read(useState(defaultCollapsed !== null && defaultCollapsed !== void 0 ? defaultCollapsed : true), 2), collapsedState = _g[0], setCollapsedState = _g[1];
|
|
76234
76234
|
var isControlledCollapse = collapsed !== undefined;
|
|
76235
76235
|
var effectiveCollapsed = isControlledCollapse ? collapsed : collapsedState;
|
|
76236
76236
|
var effectiveOnChevronClick = isControlledCollapse
|
|
@@ -76244,17 +76244,19 @@ Tree.Item = function (_a) {
|
|
|
76244
76244
|
};
|
|
76245
76245
|
var childrenToRender = getChildren();
|
|
76246
76246
|
return (React__default.createElement(React__default.Fragment, null,
|
|
76247
|
-
React__default.createElement("div", { className: classNames(className ? className : "", "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4 s-py-1") },
|
|
76247
|
+
React__default.createElement("div", { className: classNames(className ? className : "", "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4", size === "sm" ? "s-py-1" : "s-py-2") },
|
|
76248
76248
|
type === "node" && (React__default.createElement(IconButton, { icon: childrenToRender && !effectiveCollapsed
|
|
76249
76249
|
? SvgChevronDown$1
|
|
76250
76250
|
: SvgChevronRight$1, size: "sm", variant: "secondary", onClick: effectiveOnChevronClick })),
|
|
76251
76251
|
type === "leaf" && React__default.createElement("div", { className: "s-w-5" }),
|
|
76252
76252
|
checkbox && React__default.createElement(Checkbox, __assign({}, checkbox)),
|
|
76253
|
-
React__default.createElement("div", { className: "s-flex s-w-full s-items-center
|
|
76254
|
-
React__default.createElement("div", { className: "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center s-gap-1.5
|
|
76253
|
+
React__default.createElement("div", { className: "s-flex s-w-full s-items-center" },
|
|
76254
|
+
React__default.createElement("div", { className: classNames("s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center", size === "sm" ? "s-gap-1.5" : "s-gap-2") },
|
|
76255
76255
|
visual ? (visual) : (React__default.createElement(Icon, { visual: visualTable[variant], size: "sm", className: "s-flex-shrink-0 s-text-element-700" })),
|
|
76256
|
-
React__default.createElement("div", { className: "s-truncate" }, label),
|
|
76257
|
-
actions && (React__default.createElement("div", { className: "s-inline-block s-
|
|
76256
|
+
React__default.createElement("div", { className: classNames("s-truncate s-font-medium s-text-element-900", size === "sm" ? "s-text-sm" : "s-text-base") }, label),
|
|
76257
|
+
actions && (React__default.createElement("div", { className: classNames("s-inline-block s-pl-5", areActionsFading
|
|
76258
|
+
? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
|
|
76259
|
+
: "") }, actions))))),
|
|
76258
76260
|
React__default.Children.count(childrenToRender) > 0 && (React__default.createElement("div", { className: "s-pl-5" }, childrenToRender))));
|
|
76259
76261
|
};
|
|
76260
76262
|
|