@reltio/design 0.0.1 → 0.0.2

package/components/TreeList/TreeList.d.ts

@@ -0,0 +1,2 @@
+import type { TreeListProps } from "./TreeList.types";
+export declare const TreeList: import("react").MemoExoticComponent<({ data, LabelComponent, expandedKeys: expandedKeysProp, onExpand, }: TreeListProps) => import("react/jsx-runtime").JSX.Element>;

package/components/TreeList/TreeList.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tree from "rc-tree";
+import { memo, useCallback, useMemo, useState } from "react";
+import { TreeNode } from "./components/TreeNode/TreeNode";
+import { getLevelLinesData, transformTreeData } from "./helpers";
+import styles from "./TreeList.module.css";
+export const TreeList = memo(({ data, LabelComponent, expandedKeys: expandedKeysProp, onExpand, }) => {
+    const topLevelKeys = useMemo(() => data.map((item) => item.id), [data]);
+    const isControlled = expandedKeysProp !== undefined;
+    const [expandedKeys, setExpandedKeys] = useState(() => isControlled ? new Set() : new Set(topLevelKeys));
+    const rcData = useMemo(() => transformTreeData(data), [data]);
+    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;
+        }
+        setExpandedKeys(new Set(keys));
+        onExpand?.(keys);
+    }, [isControlled, onExpand]);
+    const handleToggle = useCallback((id, isExpanded) => {
+        const next = new Set(expandedSet);
+        isExpanded ? next.delete(id) : next.add(id);
+        updateExpandedKeys(Array.from(next));
+    }, [expandedSet, updateExpandedKeys]);
+    const renderTitle = useCallback((node) => {
+        const raw = node.data.raw;
+        const isLeafNode = !!node.isLeaf;
+        const isExpanded = expandedSet.has(node.key);
+        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 }) }));
+});
+TreeList.displayName = "TreeList";

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

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

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

@@ -0,0 +1,24 @@
+import styleInject from 'style-inject';
+import json from './TreeList.module.css.json';
+styleInject(`
+._root_k7z3s_1 {
+	--reltio-tree-list-font-family: inherit;
+	--reltio-tree-list-font-size: inherit;
+	--reltio-tree-list-text-color: inherit;
+	--reltio-tree-list-background: inherit;
+	--reltio-tree-list-line-height: inherit;
+	display: block;
+	overflow: auto;
+	font-family: var(--reltio-tree-list-font-family, system-ui, sans-serif);
+	font-size: var(--reltio-tree-list-font-size, 14px);
+	color: var(--reltio-tree-list-text-color, #1a1a1a);
+	background: var(--reltio-tree-list-background, transparent);
+	border: none;
+	border-radius: var(--reltio-tree-list-border-radius, 0);
+}
+
+._rc-tree-treenode_k7z3s_17 {
+	list-style: none;
+}
+`);
+export default json;

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

@@ -0,0 +1 @@
+{ "root": "_root_k7z3s_1", "rc-tree-treenode": "_rc-tree-treenode_k7z3s_17" }

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

@@ -0,0 +1,60 @@
+import type { ComponentType } from "react";
+/**
+ * Unique identifier that keeps tree nodes stable across renders.
+ */
+export type TreeKey = string | number;
+/**
+ * Tree node shape. Children create nested levels.
+ */
+export type TreeItem = {
+    /** Stable id of the node. */
+    id: TreeKey;
+    /** Text label rendered by default `TreeList`. */
+    label: string;
+    /** Optional nested children. */
+    children?: TreeItem[];
+};
+/**
+ * Internal rc-tree node representation used for rendering.
+ */
+export type RcTreeNodeData<T> = {
+    key: TreeKey;
+    title: null;
+    isLeaf?: boolean;
+    data: {
+        raw: T;
+        depth: number;
+        parentId?: TreeKey;
+    };
+    children?: RcTreeNodeData<T>[];
+};
+/**
+ * Props for the TreeList component.
+ */
+export type TreeListProps = {
+    /** Hierarchical data to render.
+     * `type TreeItem = {id: TreeKey; label: string; children?: TreeItem[]}` `type TreeKey = string | number`
+     * @example
+     * [
+     *   { id: "1", label: "Node 1", children: [
+     *     { id: "1.1", label: "Node 1.1" },
+     *     { id: "1.2", label: "Node 1.2" }
+     *   ] },
+     *   { id: "2", label: "Node 2", children: [
+     *     { id: "2.1", label: "Node 2.1" }
+     *   ] }
+     * ]
+     */
+    data: TreeItem[];
+    /** Custom renderer for the node label. */
+    LabelComponent?: ComponentType<{
+        data: TreeItem;
+    }>;
+    /** Controlled list of expanded node ids. */
+    expandedKeys?: TreeKey[];
+    /**
+     * Called when the expanded state changes (controlled mode).
+     * Provides the resulting expanded keys list.
+     */
+    onExpand?: (keys: TreeKey[]) => void;
+};

package/components/TreeList/TreeList.types.js

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

package/components/TreeList/components/ChevronIcon.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    expanded: boolean;
+};
+export declare const ChevronIcon: ({ expanded }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/TreeList/components/ChevronIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChevronIcon = ({ expanded }) => {
+    return (_jsx("svg", { viewBox: "0 0 24 24", style: {
+            transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+            transition: "transform 0.2s ease",
+            transformOrigin: "50% 50%",
+        }, "aria-hidden": "true", children: _jsx("polygon", { points: "6,9 18,9 12,16", fill: "currentColor" }) }));
+};

package/components/TreeList/components/TreeLevelLines/TreeLevelLines.d.ts

@@ -0,0 +1,2 @@
+import type { TreeLevelLinesProps } from "./TreeLevelLines.types";
+export declare const TreeLevelLines: import("react").MemoExoticComponent<({ levelLines, isLast }: TreeLevelLinesProps) => import("react/jsx-runtime").JSX.Element>;

package/components/TreeList/components/TreeLevelLines/TreeLevelLines.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { classNames } from "../../../../utils/classNames";
+import styles from "./TreeLevelLines.module.css";
+const LevelLine = memo(({ needDrawLine = false, isLastLevelLine = false, drawHorizontalLine = false, }) => (_jsx("div", { className: classNames(styles.levelLine, needDrawLine && styles.showLine, isLastLevelLine && styles.lastLevelLine, drawHorizontalLine && styles.horizontalLine) })));
+export const TreeLevelLines = memo(({ levelLines, isLast = false }) => {
+    const needDrawLines = levelLines;
+    const isRoot = needDrawLines.length === 0;
+    const level = needDrawLines.length + 2;
+    if (isRoot) {
+        return null;
+    }
+    return (_jsxs("div", { className: classNames(styles.levelLines), children: [needDrawLines.map((needDrawLine, index) => (_jsx(LevelLine, { needDrawLine: needDrawLine }, `${index}-${needDrawLine}`))), _jsx(LevelLine, { needDrawLine: true, drawHorizontalLine: true, isLastLevelLine: isLast }, level)] }));
+});
+LevelLine.displayName = "LevelLine";
+TreeLevelLines.displayName = "TreeLevelLines";

package/components/TreeList/components/TreeLevelLines/TreeLevelLines.module.css.d.ts

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

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

@@ -0,0 +1,52 @@
+import styleInject from 'style-inject';
+import json from './TreeLevelLines.module.css.json';
+styleInject(`
+._levelLines_12unh_1 {
+	position: absolute;
+	display: flex;
+	padding-left: 0;
+	cursor: initial;
+	bottom: 0;
+	top: 0;
+	z-index: 0;
+}
+
+._levelLine_12unh_1 {
+	padding-left: var(--reltio-tree-list-indent-size, 16px);
+	height: 100%;
+	position: relative;
+}
+
+._showLine_12unh_17::after {
+	content: "";
+	position: absolute;
+	height: 100%;
+	width: 1px;
+	left: calc(var(--reltio-tree-list-indent-size, 16px) - 2px);
+	top: 0;
+	bottom: 0;
+	background-color: var(--reltio-tree-list-line-color, rgba(0, 0, 0, 0.08));
+}
+
+._lastLevelLine_12unh_28::after {
+	height: 50%;
+}
+
+._lastLevelLine_12unh_28 {
+	padding-left: calc(
+		var(--reltio-tree-list-indent-size, 16px) +
+		(var(--reltio-tree-list-toggle-size, 26px) / 2)
+	);
+}
+
+._horizontalLine_12unh_39::before {
+	content: "";
+	height: 1px;
+	width: 5px;
+	position: absolute;
+	top: 50%;
+	left: calc(var(--reltio-tree-list-indent-size, 16px) - 2px);
+	background-color: var(--reltio-tree-list-line-color, rgba(0, 0, 0, 0.08));
+}
+`);
+export default json;

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

@@ -0,0 +1 @@
+{ "levelLines": "_levelLines_12unh_1", "levelLine": "_levelLine_12unh_1", "showLine": "_showLine_12unh_17", "lastLevelLine": "_lastLevelLine_12unh_28", "horizontalLine": "_horizontalLine_12unh_39" }

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

@@ -0,0 +1,4 @@
+export type TreeLevelLinesProps = {
+    levelLines: boolean[];
+    isLast: boolean;
+};

package/components/TreeList/components/TreeLevelLines/TreeLevelLines.types.js

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

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

@@ -0,0 +1,2 @@
+import type { TreeNodeProps } from "./TreeNode.types";
+export declare const TreeNode: import("react").MemoExoticComponent<({ id, node, depth, isLeaf, isExpanded, levelLines, isLast, onToggle, LabelComponent, }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+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] }));
+});
+TreeNode.displayName = "TreeNode";

package/components/TreeList/components/TreeNode/TreeNode.module.css.d.ts

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

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

@@ -0,0 +1,42 @@
+import styleInject from 'style-inject';
+import json from './TreeNode.module.css.json';
+styleInject(`
+._wrapper_67wfw_1 {
+	display: flex;
+	align-items: center;
+	line-height: var(--reltio-tree-list-line-height, 1.5);
+	padding: var(--reltio-tree-list-row-padding-block, 2px)
+		var(--reltio-tree-list-row-padding-inline, 4px);
+	position: relative;
+	z-index: 1;
+}
+
+._indent_67wfw_11 {
+	display: inline-block;
+	width: calc(var(--depth, 1) * var(--reltio-tree-list-indent-size, 16px));
+	flex: 0 0 auto;
+}
+
+._toggle_67wfw_17 {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--reltio-tree-list-toggle-size, 26px);
+	height: var(--reltio-tree-list-toggle-size, 26px);
+	border: none;
+	background: none;
+	color: var(--reltio-tree-list-toggle-color, #5f6368);
+	cursor: pointer;
+}
+
+._actions_67wfw_29 {
+	margin-left: auto;
+	opacity: 0;
+	transition: opacity 0.12s ease;
+}
+
+._wrapper_67wfw_1:hover ._actions_67wfw_29 {
+	opacity: 1;
+}
+`);
+export default json;

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

@@ -0,0 +1 @@
+{ "wrapper": "_wrapper_67wfw_1", "indent": "_indent_67wfw_11", "toggle": "_toggle_67wfw_17", "actions": "_actions_67wfw_29" }

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

@@ -0,0 +1,15 @@
+import type { ComponentType } from "react";
+import type { TreeItem, TreeKey } from "../../TreeList.types";
+export type TreeNodeProps = {
+    id: TreeKey;
+    node: TreeItem;
+    depth: number;
+    isLeaf: boolean;
+    isExpanded: boolean;
+    levelLines: boolean[];
+    isLast: boolean;
+    onToggle: (id: TreeKey, expanded: boolean) => void;
+    LabelComponent?: ComponentType<{
+        data: TreeItem;
+    }>;
+};

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

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

package/components/TreeList/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { RcTreeNodeData, TreeItem, TreeKey } from "./TreeList.types";
+export declare const getLevelLinesData: <T>(treeData: ReadonlyArray<RcTreeNodeData<T>>) => Record<TreeKey, [boolean[], boolean]>;
+export declare const transformTreeData: (data: TreeItem[], depth?: number, parentId?: TreeKey) => RcTreeNodeData<TreeItem>[];

package/components/TreeList/helpers.js

@@ -0,0 +1,27 @@
+export const getLevelLinesData = (treeData) => {
+    const acc = {};
+    const traverse = (nodes, prefix = [], depth = 0) => {
+        for (let index = 0; index < nodes.length; index++) {
+            const node = nodes[index];
+            const isLast = index === nodes.length - 1;
+            acc[node.key] = [prefix, isLast];
+            if (node.children?.length) {
+                const nextPrefix = depth === 0 ? [...prefix, false] : [...prefix, !isLast];
+                traverse(node.children, nextPrefix, depth + 1);
+            }
+        }
+    };
+    traverse(treeData);
+    return acc;
+};
+export const transformTreeData = (data, depth = 1, parentId) => {
+    return data.map((item) => ({
+        key: item.id,
+        title: null,
+        isLeaf: !item.children?.length,
+        data: { raw: item, depth, parentId },
+        children: item.children
+            ? transformTreeData(item.children, depth + 1, item.id)
+            : undefined,
+    }));
+};

package/components/TreeList/index.d.ts

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

package/components/TreeList/index.js

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

package/package.json

@@ -1,14 +1,15 @@
 {
 	"name": "@reltio/design",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"main": "packages/design/index.js",
 	"description": "Reltio Design System",
 	"peerDependencies": {
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
+		"react": ">=17 <20",
+		"react-dom": ">=17 <20"
 	},
 	"dependencies": {
-		"style-inject": "^0.3.0"
+		"style-inject": "^0.3.0",
+		"rc-tree": "^5.13.1"
 	},
 	"scripts": {
 		"build": "node build-css.mjs && tsc && tsc-alias",

package/packages/design/index.d.ts

@@ -1 +1,2 @@
 export * from "../../components/Button";
+export * from "../../components/TreeList";

package/packages/design/index.js

@@ -1 +1,2 @@
 export * from "../../components/Button";
+export * from "../../components/TreeList";