@reltio/design 0.0.2 → 0.1.0

package/components/Markdown/Markdown.types.js

@@ -0,0 +1 @@
+export {};

package/components/Markdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Markdown";
+export type * from "./Markdown.types";

package/components/Markdown/index.js

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

package/components/Markdown/markdownOverrides.d.ts

@@ -0,0 +1,19 @@
+import type { MarkdownToJSX } from "markdown-to-jsx";
+import type React from "react";
+type OverrideProps<T extends keyof React.JSX.IntrinsicElements> = React.ComponentPropsWithoutRef<T> & {
+    node?: unknown;
+};
+/**
+ * Markdown tag overrides — only elements that require React component
+ * replacement or extra attributes/logic. Standard HTML elements are
+ * styled via `.root` descendant selectors in Markdown.module.css.
+ */
+export declare const baseOverrides: {
+    a: ({ node: _node, href, ...props }: OverrideProps<"a">) => import("react/jsx-runtime").JSX.Element;
+    table: ({ node: _node, ...props }: OverrideProps<"table">) => import("react/jsx-runtime").JSX.Element;
+    button: ({ node: _node, ...props }: OverrideProps<"button">) => import("react/jsx-runtime").JSX.Element;
+    details: ({ node: _node, ...props }: OverrideProps<"details">) => import("react/jsx-runtime").JSX.Element;
+    li: ({ node: _node, children, ...props }: OverrideProps<"li">) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const allowedOverrides: MarkdownToJSX.Overrides;
+export {};

package/components/Markdown/markdownOverrides.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { Button } from "../../components/Button";
+import { Details } from "../../components/Details";
+import { classNames } from "../../utils/classNames";
+import styles from "./Markdown.module.css";
+/**
+ * Markdown tag overrides — only elements that require React component
+ * replacement or extra attributes/logic. Standard HTML elements are
+ * styled via `.root` descendant selectors in Markdown.module.css.
+ */
+export const baseOverrides = {
+    // Links — external detection, target/rel attributes
+    a: ({ node: _node, href, ...props }) => {
+        const isExternal = href && (href.startsWith("http") || href.startsWith("//"));
+        return (_jsx("a", { ...props, href: href, target: isExternal ? "_blank" : undefined, rel: isExternal ? "noopener noreferrer" : undefined }));
+    },
+    // Tables — wrapped in a div for overflow scrolling
+    table: ({ node: _node, ...props }) => (_jsx("div", { className: classNames(styles.tableWrapper), children: _jsx("table", { ...props }) })),
+    // Button — replaced with design system Button component
+    button: ({ node: _node, ...props }) => (_jsx(Button, { ...props, className: classNames(props.className) })),
+    // Details/Summary — replaced with Details component
+    details: ({ node: _node, ...props }) => (_jsx(Details, { ...props, children: props.children })),
+    // Task list items — wrap checkbox + text in <label> for accessibility
+    li: ({ node: _node, children, ...props }) => {
+        const childArray = Children.toArray(children);
+        const firstChild = childArray[0];
+        const isTaskItem = isValidElement(firstChild) &&
+            firstChild.props?.type === "checkbox";
+        if (isTaskItem) {
+            return (_jsx("li", { ...props, children: _jsx("label", { children: children }) }));
+        }
+        return _jsx("li", { ...props, children: children });
+    },
+};
+export const allowedOverrides = { Button };

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { SkeletonProps } from "./Skeleton.types";
+/**
+ * Displays a configurable number of rectangular placeholder bars with a shimmer
+ * (moving gradient) animation. Used as a loading placeholder to reserve space
+ * and indicate that content is loading. Full width by default.
+ */
+export declare const Skeleton: ({ rows, className, ...rest }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utils/classNames";
+import styles from "./Skeleton.module.css";
+const DEFAULT_LABEL = "Loading content";
+const DEFAULT_ROWS = 3;
+/**
+ * Displays a configurable number of rectangular placeholder bars with a shimmer
+ * (moving gradient) animation. Used as a loading placeholder to reserve space
+ * and indicate that content is loading. Full width by default.
+ */
+export const Skeleton = ({ rows = DEFAULT_ROWS, className, ...rest }) => {
+    const rowCount = Math.max(1, Math.floor(Number(rows)) || DEFAULT_ROWS);
+    return (
+    // biome-ignore lint/a11y/useSemanticElements: status role is correct for loading placeholder; output is for calculation results
+    _jsx("div", { className: classNames(styles.skeletonRoot, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", ...rest, children: Array.from({ length: rowCount }, (_, i) => (_jsx("div", { className: styles.row, "aria-hidden": "true" }, i))) }));
+};

package/components/Skeleton/Skeleton.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Skeleton.module.css.json';
+export default json;

package/components/Skeleton/Skeleton.module.css.js

@@ -0,0 +1,73 @@
+import styleInject from 'style-inject';
+import json from './Skeleton.module.css.json';
+styleInject(`
+._skeletonRoot_1e8wa_1 {
+	--reltio-skeleton-row-height: 16px;
+	--reltio-skeleton-row-gap: 12px;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: var(--reltio-skeleton-row-gap, 12px);
+}
+
+._row_1e8wa_10 {
+	width: 100%;
+	height: var(--reltio-skeleton-row-height, 16px);
+	background-color: #f5f5fa;
+	overflow: hidden;
+	position: relative;
+}
+
+._row_1e8wa_10::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background-color: #9898b34d;
+	animation: _indeterminate1_1e8wa_1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+		infinite;
+}
+
+._row_1e8wa_10::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background-color: #9898b34d;
+	animation: _indeterminate2_1e8wa_1 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+	animation-delay: 1.15s;
+}
+
+@keyframes _indeterminate1_1e8wa_1 {
+	0% {
+		left: -35%;
+		right: 100%;
+	}
+	60% {
+		left: 100%;
+		right: -90%;
+	}
+	100% {
+		left: 100%;
+		right: -90%;
+	}
+}
+
+@keyframes _indeterminate2_1e8wa_1 {
+	0% {
+		left: -200%;
+		right: 100%;
+	}
+	60% {
+		left: 107%;
+		right: -8%;
+	}
+	100% {
+		left: 107%;
+		right: -8%;
+	}
+}
+`);
+export default json;

package/components/Skeleton/Skeleton.module.css.json

@@ -0,0 +1 @@
+{ "skeletonRoot": "_skeletonRoot_1e8wa_1", "row": "_row_1e8wa_10", "indeterminate1": "_indeterminate1_1e8wa_1", "indeterminate2": "_indeterminate2_1e8wa_1" }

package/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,31 @@
+import type React from "react";
+/**
+ * Props for the Skeleton component
+ */
+export type SkeletonProps = {
+    /**
+     * Number of rectangular placeholder bars to display
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Size (number) passed to styles; affects line height and line gap of placeholder bars (e.g. pixels).
+     * @default 16
+     */
+    size?: number;
+    /**
+     * Accessible label for screen readers. When not provided, a default label is used.
+     */
+    label?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Inline styles (e.g. for CSS variable overrides)
+     */
+    style?: React.CSSProperties & {
+        "--reltio-skeleton-row-height"?: string;
+        "--reltio-skeleton-row-gap"?: string;
+    };
+} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;

package/components/Skeleton/Skeleton.types.js

@@ -0,0 +1 @@
+export {};

package/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Skeleton";
+export type * from "./Skeleton.types";

package/components/Skeleton/index.js

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

package/components/TextArea/TextArea.d.ts

@@ -0,0 +1,22 @@
+export declare const TextArea: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    error?: boolean;
+    supportingText?: string;
+    toolbar?: import("react").ReactNode;
+    style?: import("react").CSSProperties & {
+        "--reltio-textarea-font-family"?: string;
+        "--reltio-textarea-font-size"?: string;
+        "--reltio-textarea-line-height"?: string;
+        "--reltio-textarea-color-text"?: string;
+        "--reltio-textarea-color-border"?: string;
+        "--reltio-textarea-color-border-focus"?: string;
+        "--reltio-textarea-color-background"?: string;
+        "--reltio-textarea-color-error"?: string;
+        "--reltio-textarea-color-label"?: string;
+        "--reltio-textarea-color-supporting-text"?: string;
+        "--reltio-textarea-border-radius"?: string;
+        "--reltio-textarea-padding"?: string;
+        "--reltio-textarea-min-height"?: string;
+        "--reltio-textarea-max-height"?: string;
+    };
+} & Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/components/TextArea/TextArea.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./TextArea.module.css";
+export const TextArea = forwardRef(({ label, error, supportingText, toolbar, className, id: providedId, ...rest }, ref) => {
+    const generatedId = useId();
+    const textareaId = providedId || generatedId;
+    const supportingTextId = `${textareaId}-supporting`;
+    const hasValue = String(rest.value ?? rest.defaultValue ?? "").length > 0;
+    return (_jsxs("div", { "data-error": error || undefined, "data-disabled": rest.disabled || undefined, "data-has-value": hasValue || undefined, className: classNames(styles.root, className), children: [_jsxs("label", { htmlFor: textareaId, className: classNames(styles.inputContainer), children: [_jsx("textarea", { ref: ref, id: textareaId, className: classNames(styles.textarea), placeholder: label || rest.placeholder, "aria-invalid": error || undefined, "aria-describedby": supportingText ? supportingTextId : undefined, ...rest }), label && _jsx("span", { className: classNames(styles.label), children: label }), toolbar && (_jsx("div", { className: classNames(styles.toolbar), children: toolbar }))] }), supportingText && (_jsx("div", { id: supportingTextId, className: classNames(styles.supportingText), children: supportingText }))] }));
+});
+TextArea.displayName = "TextArea";

package/components/TextArea/TextArea.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './TextArea.module.css.json';
+export default json;

package/components/TextArea/TextArea.module.css.js

@@ -0,0 +1,159 @@
+import styleInject from 'style-inject';
+import json from './TextArea.module.css.json';
+styleInject(`
+._root_1k56p_1 {
+	--reltio-textarea-font-family: var(
+		--reltio-font-family-body,
+		"Roboto",
+		sans-serif
+	);
+	--reltio-textarea-font-size: var(--reltio-font-size-body, 16px);
+	--reltio-textarea-line-height: var(--reltio-line-height-body, 1.5);
+	--reltio-textarea-color-text: var(--reltio-color-text, #1d1b20);
+	--reltio-textarea-color-border: var(--reltio-color-border, #79747e);
+	--reltio-textarea-color-border-focus: var(--reltio-color-primary, #6750a4);
+	--reltio-textarea-color-background: var(--reltio-color-background, #fff);
+	--reltio-textarea-color-error: var(--reltio-color-error, #b3261e);
+	--reltio-textarea-color-label: var(--reltio-color-text-secondary, #49454f);
+	--reltio-textarea-color-supporting-text: var(
+		--reltio-color-text-secondary,
+		#49454f
+	);
+	--reltio-textarea-border-radius: var(--reltio-spacing-xs, 4px);
+	--reltio-textarea-padding: var(--reltio-spacing-md, 16px);
+	--reltio-textarea-min-height: var(--reltio-spacing-3xl, 56px);
+	--reltio-textarea-max-height: min(500px, 50cqh);
+	--reltio-textarea-border-width: 1px;
+	--reltio-textarea-border-width-focus: 2px;
+
+	--_border-color: var(--reltio-textarea-color-border);
+	--_border-width: var(--reltio-textarea-border-width);
+	--_label-color: var(--reltio-textarea-color-label);
+	--_supporting-text-color: var(--reltio-textarea-color-supporting-text);
+
+	font-family: var(--reltio-textarea-font-family);
+	container-type: inline-size;
+}
+
+._root_1k56p_1:focus-within {
+	--_border-color: var(--reltio-textarea-color-border-focus);
+	--_border-width: var(--reltio-textarea-border-width-focus);
+	--_label-color: var(--reltio-textarea-color-border-focus);
+}
+
+._root_1k56p_1[data-error="true"] {
+	--_border-color: var(--reltio-textarea-color-error);
+	--_label-color: var(--reltio-textarea-color-error);
+	--_supporting-text-color: var(--reltio-textarea-color-error);
+}
+
+._root_1k56p_1[data-error="true"]:focus-within {
+	--_border-color: var(--reltio-textarea-color-error);
+	--_label-color: var(--reltio-textarea-color-error);
+}
+
+._root_1k56p_1[data-disabled="true"] {
+	opacity: 0.38;
+	cursor: not-allowed;
+}
+
+._inputContainer_1k56p_57 {
+	position: relative;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr auto;
+	grid-template-areas:
+		"textarea"
+		"toolbar";
+	margin: 0;
+	box-sizing: border-box;
+	border-radius: var(--reltio-textarea-border-radius);
+	outline: var(--_border-width) solid var(--_border-color);
+	cursor: text;
+	transition:
+		outline-color 0.1s ease,
+		outline-width 0.1s ease;
+	background: var(--reltio-textarea-color-background);
+}
+
+._root_1k56p_1[data-disabled="true"] ._inputContainer_1k56p_57 {
+	cursor: not-allowed;
+}
+
+._textarea_1k56p_80 {
+	grid-area: textarea;
+	position: relative;
+	display: block;
+	z-index: 1;
+	border: none;
+	outline: none;
+	background: none;
+	width: 100%;
+	min-height: var(--reltio-textarea-min-height);
+	max-height: var(--reltio-textarea-max-height);
+	border-radius: var(--reltio-textarea-border-radius);
+	box-sizing: border-box;
+	font-size: var(--reltio-textarea-font-size);
+	font-family: var(--reltio-textarea-font-family);
+	line-height: var(--reltio-textarea-line-height);
+	resize: none;
+	color: var(--reltio-textarea-color-text);
+	padding: var(--reltio-textarea-padding);
+	overflow-y: auto;
+	field-sizing: content;
+}
+
+._textarea_1k56p_80::placeholder {
+	color: var(--reltio-textarea-color-label);
+}
+
+._textarea_1k56p_80:disabled {
+	cursor: not-allowed;
+}
+
+._label_1k56p_111 {
+	position: absolute;
+	opacity: 0;
+	top: 16px;
+	left: 8px;
+	transform: translateY(-50%);
+	transition: all 0.2s ease;
+	background-color: var(--reltio-textarea-color-background);
+	padding: 4px 8px;
+	border-radius: var(--reltio-textarea-border-radius);
+	color: var(--_label-color);
+	z-index: 2;
+	font-size: var(--reltio-textarea-font-size);
+	font-family: var(--reltio-textarea-font-family);
+	pointer-events: none;
+}
+
+._textarea_1k56p_80:not(:placeholder-shown) + ._label_1k56p_111 {
+	top: -1px;
+	font-size: 12px;
+	opacity: 1;
+}
+
+._textarea_1k56p_80:focus + ._label_1k56p_111 {
+	top: -1px;
+	font-size: 12px;
+	opacity: 1;
+}
+
+._supportingText_1k56p_140 {
+	font-size: 12px;
+	padding: 4px var(--reltio-textarea-padding);
+	color: var(--_supporting-text-color);
+	font-family: var(--reltio-textarea-font-family);
+}
+
+._toolbar_1k56p_147 {
+	grid-area: toolbar;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	padding: 8px 12px;
+}
+`);
+export default json;

package/components/TextArea/TextArea.module.css.json

@@ -0,0 +1 @@
+{ "root": "_root_1k56p_1", "inputContainer": "_inputContainer_1k56p_57", "textarea": "_textarea_1k56p_80", "label": "_label_1k56p_111", "supportingText": "_supportingText_1k56p_140", "toolbar": "_toolbar_1k56p_147" }

package/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,39 @@
+import type React from "react";
+export type TextAreaProps = {
+    /**
+     * Floating label text displayed above the textarea
+     */
+    label?: string;
+    /**
+     * Whether the textarea is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Helper text displayed below the textarea
+     */
+    supportingText?: string;
+    /**
+     * Toolbar content rendered below the textarea input
+     */
+    toolbar?: React.ReactNode;
+    /**
+     * Custom styles including CSS custom properties for theming
+     */
+    style?: React.CSSProperties & {
+        "--reltio-textarea-font-family"?: string;
+        "--reltio-textarea-font-size"?: string;
+        "--reltio-textarea-line-height"?: string;
+        "--reltio-textarea-color-text"?: string;
+        "--reltio-textarea-color-border"?: string;
+        "--reltio-textarea-color-border-focus"?: string;
+        "--reltio-textarea-color-background"?: string;
+        "--reltio-textarea-color-error"?: string;
+        "--reltio-textarea-color-label"?: string;
+        "--reltio-textarea-color-supporting-text"?: string;
+        "--reltio-textarea-border-radius"?: string;
+        "--reltio-textarea-padding"?: string;
+        "--reltio-textarea-min-height"?: string;
+        "--reltio-textarea-max-height"?: string;
+    };
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style">;

package/components/TextArea/TextArea.types.js

@@ -0,0 +1 @@
+export {};

package/components/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextArea";
+export type * from "./TextArea.types";

package/components/TextArea/index.js

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

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.
@@ -33,7 +35,7 @@ export type RcTreeNodeData<T> = {
  */
 export type TreeListProps = {
     /** Hierarchical data to render.
-     * `type TreeItem = {id: TreeKey; label: string; children?: TreeItem[]}` `type TreeKey = string | number`
+     * `type TreeItem = {id: TreeKey; label: string; children?: TreeItem[]; isLoading?: boolean}` `type TreeKey = string | number`
      * @example
      * [
      *   { id: "1", label: "Node 1", children: [
@@ -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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback } from "react";
+import { ArrowRight } from "../../../../icons/ArrowRight";
 import { classNames } from "../../../../utils/classNames";
-import { ChevronIcon } from "../ChevronIcon";
 import { TreeLevelLines } from "../TreeLevelLines/TreeLevelLines";
 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(ArrowRight, { size: "small", className: classNames(styles.chevron, isExpanded && styles.expanded) }) })), 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_xk2s6_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_xk2s6_11 {
 	display: inline-block;
 	width: calc(var(--depth, 1) * var(--reltio-tree-list-indent-size, 16px));
 	flex: 0 0 auto;
 }
 
-._toggle_67wfw_17 {
+._toggle_xk2s6_17 {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -29,13 +29,41 @@ styleInject(`
 	cursor: pointer;
 }
 
-._actions_67wfw_29 {
+._chevron_xk2s6_29 {
+	transition: transform 0.2s ease;
+}
+
+._expanded_xk2s6_33 {
+	transform: rotate(90deg);
+}
+
+._spinner_xk2s6_37 {
+	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_xk2s6_37 0.8s linear infinite;
+}
+
+@keyframes _spin_xk2s6_37 {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+._actions_xk2s6_57 {
 	margin-left: auto;
 	opacity: 0;
 	transition: opacity 0.12s ease;
 }
 
-._wrapper_67wfw_1:hover ._actions_67wfw_29 {
+._wrapper_xk2s6_1:hover ._actions_xk2s6_57 {
 	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_xk2s6_1", "indent": "_indent_xk2s6_11", "toggle": "_toggle_xk2s6_17", "chevron": "_chevron_xk2s6_29", "expanded": "_expanded_xk2s6_33", "spinner": "_spinner_xk2s6_37", "spin": "_spin_xk2s6_37", "actions": "_actions_xk2s6_57" }

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)