@reltio/design 0.0.2 → 0.0.3

package/components/TreeList/TreeList.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Tree from "rc-tree";
 import { memo, useCallback, useMemo, useState } from "react";
+import { classNames } from "../../utils/classNames";
 import { TreeNode } from "./components/TreeNode/TreeNode";
 import { getLevelLinesData, transformTreeData } from "./helpers";
 import styles from "./TreeList.module.css";
@@ -12,18 +13,16 @@ export const TreeList = memo(({ data, LabelComponent, expandedKeys: expandedKeys
     const levelLinesMap = useMemo(() => getLevelLinesData(rcData), [rcData]);
     const expandedSet = useMemo(() => isControlled ? new Set(expandedKeysProp ?? []) : expandedKeys, [expandedKeysProp, expandedKeys, isControlled]);
     const expandedArray = useMemo(() => Array.from(expandedSet), [expandedSet]);
-    const updateExpandedKeys = useCallback((keys) => {
-        if (isControlled) {
-            onExpand?.(keys);
-            return;
+    const updateExpandedKeys = useCallback((keys, treeItem) => {
+        onExpand?.(keys, treeItem);
+        if (!isControlled) {
+            setExpandedKeys(new Set(keys));
         }
-        setExpandedKeys(new Set(keys));
-        onExpand?.(keys);
     }, [isControlled, onExpand]);
-    const handleToggle = useCallback((id, isExpanded) => {
+    const handleToggle = useCallback((id, isExpanded, treeItem) => {
         const next = new Set(expandedSet);
         isExpanded ? next.delete(id) : next.add(id);
-        updateExpandedKeys(Array.from(next));
+        updateExpandedKeys(Array.from(next), treeItem);
     }, [expandedSet, updateExpandedKeys]);
     const renderTitle = useCallback((node) => {
         const raw = node.data.raw;
@@ -32,6 +31,6 @@ export const TreeList = memo(({ data, LabelComponent, expandedKeys: expandedKeys
         const [levelLines, isLast] = levelLinesMap[node.key] ?? [[], false];
         return (_jsx(TreeNode, { id: node.key, node: raw, depth: node.data.depth, isLeaf: isLeafNode, isExpanded: isExpanded, levelLines: levelLines, isLast: isLast, onToggle: handleToggle, LabelComponent: LabelComponent }));
     }, [expandedSet, levelLinesMap, LabelComponent, handleToggle]);
-    return (_jsx("div", { className: styles.root, children: _jsx(Tree, { treeData: rcData, expandAction: false, virtual: false, selectable: false, expandedKeys: expandedArray, onExpand: (keys) => updateExpandedKeys(keys), showIcon: false, titleRender: renderTitle }) }));
+    return (_jsx("div", { className: classNames(styles.root), children: _jsx(Tree, { treeData: rcData, expandAction: false, virtual: false, selectable: false, expandedKeys: expandedArray, showIcon: false, titleRender: renderTitle }) }));
 });
 TreeList.displayName = "TreeList";

package/components/TreeList/TreeList.types.d.ts

@@ -13,6 +13,8 @@ export type TreeItem = {
     label: string;
     /** Optional nested children. */
     children?: TreeItem[];
+    /** Optional loading flag for async child fetching. */
+    isLoading?: boolean;
 };
 /**
  * Internal rc-tree node representation used for rendering.
@@ -54,7 +56,7 @@ export type TreeListProps = {
     expandedKeys?: TreeKey[];
     /**
      * Called when the expanded state changes (controlled mode).
-     * Provides the resulting expanded keys list.
+     * Provides the resulting expanded keys list and the toggled node.
      */
-    onExpand?: (keys: TreeKey[]) => void;
+    onExpand?: (keys: TreeKey[], node: TreeItem) => void;
 };

package/components/TreeList/components/TreeNode/TreeNode.js

@@ -7,8 +7,8 @@ import styles from "./TreeNode.module.css";
 export const TreeNode = memo(({ id, node, depth, isLeaf, isExpanded, levelLines, isLast, onToggle, LabelComponent, }) => {
     const handleToggleClick = useCallback((event) => {
         event.stopPropagation();
-        onToggle(id, isExpanded);
-    }, [onToggle, id, isExpanded]);
-    return (_jsxs("div", { className: classNames(styles.wrapper), "data-depth": depth, children: [_jsx(TreeLevelLines, { levelLines: levelLines, isLast: isLast }), _jsx("span", { className: styles.indent, style: { ["--depth"]: `${depth}` } }), isLeaf ? (_jsx("span", { className: styles.toggle, "aria-hidden": "true" })) : (_jsx("button", { type: "button", className: styles.toggle, "aria-label": isExpanded ? "Collapse" : "Expand", onClick: handleToggleClick, children: _jsx(ChevronIcon, { expanded: isExpanded }) })), LabelComponent ? _jsx(LabelComponent, { data: node }) : node.label] }));
+        onToggle(id, isExpanded, node);
+    }, [onToggle, id, isExpanded, node]);
+    return (_jsxs("div", { className: classNames(styles.wrapper), "data-depth": depth, children: [_jsx(TreeLevelLines, { levelLines: levelLines, isLast: isLast }), _jsx("span", { className: classNames(styles.indent), style: { ["--depth"]: `${depth}` } }), isLeaf ? (_jsx("span", { className: classNames(styles.toggle), "aria-hidden": "true" })) : node.isLoading ? (_jsx("span", { className: classNames(styles.toggle), "aria-hidden": "true", children: _jsx("span", { className: classNames(styles.spinner) }) })) : (_jsx("button", { type: "button", className: classNames(styles.toggle), "aria-label": isExpanded ? "Collapse" : "Expand", onClick: handleToggleClick, children: _jsx(ChevronIcon, { expanded: isExpanded }) })), LabelComponent ? _jsx(LabelComponent, { data: node }) : node.label] }));
 });
 TreeNode.displayName = "TreeNode";

package/components/TreeList/components/TreeNode/TreeNode.module.css.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 import json from './TreeNode.module.css.json';
 styleInject(`
-._wrapper_67wfw_1 {
+._wrapper_9wzlc_1 {
 	display: flex;
 	align-items: center;
 	line-height: var(--reltio-tree-list-line-height, 1.5);
@@ -11,13 +11,13 @@ styleInject(`
 	z-index: 1;
 }
 
-._indent_67wfw_11 {
+._indent_9wzlc_11 {
 	display: inline-block;
 	width: calc(var(--depth, 1) * var(--reltio-tree-list-indent-size, 16px));
 	flex: 0 0 auto;
 }
 
-._toggle_67wfw_17 {
+._toggle_9wzlc_17 {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -29,13 +29,33 @@ styleInject(`
 	cursor: pointer;
 }
 
-._actions_67wfw_29 {
+._spinner_9wzlc_29 {
+	display: inline-block;
+	width: var(--reltio-tree-list-spinner-size, 10px);
+	height: var(--reltio-tree-list-spinner-size, 10px);
+	border-radius: 50%;
+	border: var(--reltio-tree-list-spinner-width, 2px) solid
+		var(--reltio-tree-list-spinner-color, currentColor);
+	border-top-color: transparent;
+	animation: _spin_9wzlc_29 0.8s linear infinite;
+}
+
+@keyframes _spin_9wzlc_29 {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+._actions_9wzlc_49 {
 	margin-left: auto;
 	opacity: 0;
 	transition: opacity 0.12s ease;
 }
 
-._wrapper_67wfw_1:hover ._actions_67wfw_29 {
+._wrapper_9wzlc_1:hover ._actions_9wzlc_49 {
 	opacity: 1;
 }
 `);

package/components/TreeList/components/TreeNode/TreeNode.module.css.json

@@ -1 +1 @@
-{ "wrapper": "_wrapper_67wfw_1", "indent": "_indent_67wfw_11", "toggle": "_toggle_67wfw_17", "actions": "_actions_67wfw_29" }
+{ "wrapper": "_wrapper_9wzlc_1", "indent": "_indent_9wzlc_11", "toggle": "_toggle_9wzlc_17", "spinner": "_spinner_9wzlc_29", "spin": "_spin_9wzlc_29", "actions": "_actions_9wzlc_49" }

package/components/TreeList/components/TreeNode/TreeNode.types.d.ts

@@ -8,7 +8,7 @@ export type TreeNodeProps = {
     isExpanded: boolean;
     levelLines: boolean[];
     isLast: boolean;
-    onToggle: (id: TreeKey, expanded: boolean) => void;
+    onToggle: (id: TreeKey, expanded: boolean, node: TreeItem) => void;
     LabelComponent?: ComponentType<{
         data: TreeItem;
     }>;

package/components/TreeList/helpers.js

@@ -18,7 +18,7 @@ export const transformTreeData = (data, depth = 1, parentId) => {
     return data.map((item) => ({
         key: item.id,
         title: null,
-        isLeaf: !item.children?.length,
+        isLeaf: !item.children,
         data: { raw: item, depth, parentId },
         children: item.children
             ? transformTreeData(item.children, depth + 1, item.id)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reltio/design",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"main": "packages/design/index.js",
 	"description": "Reltio Design System",
 	"peerDependencies": {