@cognite/reveal-components 1.0.0

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-icon.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/components/tree-view-icon.tsx
+var t = ({ node: t, getIconFromIconName: n }) => {
+	let r = n(t.icon);
+	return /* @__PURE__ */ e(r, {
+		size: 16,
+		style: { color: t.iconColor },
+		className: "tree-view-icon"
+	});
+};
+//#endregion
+export { t as TreeViewIcon };

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-info.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { TreeNodeAction } from '../../../../../../foundation/treeNodes/tree-node-type/tree-node-actions';
+import { TreeNodeType } from '../../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+export type TreeViewInfoProps = {
+    node: TreeNodeType;
+    onClick?: TreeNodeAction;
+};
+export declare const TreeViewInfo: ({ node, onClick, }: TreeViewInfoProps) => ReactElement;

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-info.js

@@ -0,0 +1,32 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger as a } from "@cognite/aura/components/tooltip";
+import { IconInfoCircle as o } from "@tabler/icons-react";
+import { Button as s } from "@cognite/aura/components";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/components/tree-view-info.tsx
+var c = ({ node: c, onClick: l }) => {
+	let u = c.tooltip;
+	return /* @__PURE__ */ e(i, {
+		delayDuration: 500,
+		children: /* @__PURE__ */ t(n, {
+			open: u !== void 0 && void 0,
+			children: [/* @__PURE__ */ e(a, { render: /* @__PURE__ */ e(s, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Info",
+				className: "tree-view-info text-medium-foreground",
+				onClick: () => {
+					d(c);
+				},
+				children: /* @__PURE__ */ e(o, {})
+			}) }), /* @__PURE__ */ e(r, {
+				side: "right",
+				children: u
+			})]
+		})
+	});
+	function d(e) {
+		l !== void 0 && l(e);
+	}
+};
+//#endregion
+export { c as TreeViewInfo };

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-label.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { TreeNodeType } from '../../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+export type TreeViewLabelProps = {
+    node: TreeNodeType;
+    maxLabelLength?: number;
+};
+export declare const TreeViewLabel: ({ node, maxLabelLength, }: TreeViewLabelProps) => ReactElement;

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-label.js

@@ -0,0 +1,33 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c } from "@cognite/aura/components/tooltip";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/components/tree-view-label.tsx
+var l = ({ node: l, maxLabelLength: u }) => {
+	let d = l.label, f, p = t(null), m = t(null), [h, g] = n(!1), _ = e(() => {
+		let e = p.current;
+		e !== null && g(e.scrollWidth > e.clientWidth);
+	}, []), v = e((e) => {
+		if (m.current?.disconnect(), m.current = null, p.current = e, e !== null) {
+			let t = new ResizeObserver(_);
+			t.observe(e), m.current = t, _();
+		}
+	}, [_]);
+	u !== void 0 && d.length > u && (f = l.label, d = d.substring(0, u) + "..."), u === void 0 && h && (f = l.label);
+	let y = l.hasBoldLabel === !0;
+	return /* @__PURE__ */ r(s, {
+		delayDuration: 500,
+		children: /* @__PURE__ */ i(a, {
+			disabled: f === void 0,
+			children: [/* @__PURE__ */ r(c, { render: /* @__PURE__ */ r("span", {
+				ref: v,
+				className: `text-sm select-none whitespace-nowrap${y ? " font-semibold" : ""}`,
+				children: d
+			}) }), /* @__PURE__ */ r(o, {
+				side: "right",
+				children: f
+			})]
+		})
+	});
+};
+//#endregion
+export { l as TreeViewLabel };

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-load-more.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ILazyLoader } from '../../../../../../foundation/treeNodes/tree-node-type/i-lazy-loader';
+import { TreeNodeType } from '../../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+export type TreeViewLoadMoreProps = {
+    node: TreeNodeType;
+    level: number;
+    label?: string;
+    loader: ILazyLoader;
+};
+export declare const TreeViewLoadMore: ({ node, level, label, loader, }: TreeViewLoadMoreProps) => ReactElement;

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-load-more.js

@@ -0,0 +1,17 @@
+import { translate as e } from "../../../../../../foundation/utilities/translation/translateUtils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Button as n } from "@cognite/aura/components/button";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/components/tree-view-load-more.tsx
+var r = ({ node: r, level: i, label: a, loader: o }) => /* @__PURE__ */ t(n, {
+	variant: "outline",
+	size: "sm",
+	"aria-label": a,
+	className: "gap-[3px] p-0.5 mt-[3px]",
+	style: { marginLeft: (i + 1) * 16 },
+	onClick: async () => {
+		r.loadSiblings !== void 0 && await r.loadSiblings(o);
+	},
+	children: a ?? e({ key: "LOAD_MORE" })
+});
+//#endregion
+export { r as TreeViewLoadMore };

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-loading.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+export type TreeViewLoadingProps = {
+    level?: number;
+    label?: string;
+};
+export declare const TreeViewLoading: ({ level, label, }: TreeViewLoadingProps) => ReactElement;

package/dist/ui/components/commandBased/treeView/TreeView/components/tree-view-loading.js

@@ -0,0 +1,17 @@
+import { translate as e } from "../../../../../../foundation/utilities/translation/translateUtils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { IconLoader as r } from "@tabler/icons-react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/components/tree-view-loading.tsx
+var i = ({ level: i, label: a }) => {
+	let o;
+	return i !== void 0 && (o = (i + 1) * 16 + 6 + "px"), /* @__PURE__ */ n("div", {
+		className: `flex flex-row gap-1.5${i === void 0 ? "" : " my-[3px]"}`,
+		style: { marginLeft: o },
+		children: [/* @__PURE__ */ t(r, { className: "mt-0.5" }), /* @__PURE__ */ t("span", {
+			className: "text-sm font-semibold select-none whitespace-nowrap",
+			children: a ?? e({ key: "LOADING" })
+		})]
+	});
+};
+//#endregion
+export { i as TreeViewLoading };

package/dist/ui/components/commandBased/treeView/TreeView/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const TOOLTIP_DELAY = 500;
+export declare const TEXT_COLOR = "black";
+export declare const CARET_COLOR = "gray";
+export declare const HOVER_CARET_COLOR = "highlight";
+export declare const CARET_SIZE = 16;
+export declare const INDENTATION = 16;
+export declare const HORIZONTAL_SPACING = 6;
+export declare const VERTICAL_SPACING = 3;
+export declare const LOAD_MORE_BUTTON_PADDING_PX = 2;

package/dist/ui/components/commandBased/treeView/TreeView/constants.js

@@ -0,0 +1,4 @@
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/constants.ts
+var e = "gray", t = "highlight";
+//#endregion
+export { e as CARET_COLOR, t as HOVER_CARET_COLOR };

package/dist/ui/components/commandBased/treeView/TreeView/extraComponents/CadTreeAssetMappingDropdown.context.d.ts

@@ -0,0 +1,8 @@
+import { Context } from 'react';
+import { PickReturn } from '../../../../../../utilities/PickReturn';
+import { useInstancesByIdsQuery } from '../../../../../query/useInstancesByIdsQuery';
+export type CadTreeAssetMappingDropdownDependencies = {
+    useInstancesByIdsQuery: PickReturn<typeof useInstancesByIdsQuery, 'data'>;
+};
+export declare const defaultCadTreeAssetMappingDropdownDependencies: CadTreeAssetMappingDropdownDependencies;
+export declare const CadTreeAssetMappingDropdownContext: Context<CadTreeAssetMappingDropdownDependencies>;

package/dist/ui/components/commandBased/treeView/TreeView/extraComponents/CadTreeAssetMappingDropdown.context.js

@@ -0,0 +1,6 @@
+import { useInstancesByIdsQuery as e } from "../../../../../query/useInstancesByIdsQuery.js";
+import { createContext as t } from "react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/extraComponents/CadTreeAssetMappingDropdown.context.ts
+var n = { useInstancesByIdsQuery: e }, r = t(n);
+//#endregion
+export { r as CadTreeAssetMappingDropdownContext, n as defaultCadTreeAssetMappingDropdownDependencies };

package/dist/ui/components/commandBased/treeView/TreeView/extraComponents/CadTreeAssetMappingDropdown.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { CadTreeNode } from '../../../../../../domains';
+export declare function CadTreeAssetMappingDropdown({ cadTreeNode, }: {
+    cadTreeNode: CadTreeNode;
+}): ReactElement;

package/dist/ui/components/commandBased/treeView/TreeView/extraComponents/CadTreeAssetMappingDropdown.js

@@ -0,0 +1,69 @@
+import { createInstanceKey as e, instanceIdToInstanceReference as t } from "../../../../../../data-providers/cache/idAndKeyTranslation.js";
+import { createInstanceReferenceKey as n } from "../../../../../../utilities/instanceIds/toKey.js";
+import "../../../../../../utilities/index.js";
+import { CadTreeAssetMappingDropdownContext as r } from "./CadTreeAssetMappingDropdown.context.js";
+import { useContext as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Tooltip as c, TooltipContent as l, TooltipProvider as u, TooltipTrigger as d } from "@cognite/aura/components/tooltip";
+import { IconLink as f, IconTrash as p } from "@tabler/icons-react";
+import { Label as m } from "@cognite/aura/components/label";
+import { Popover as h, PopoverContent as g, PopoverTrigger as _ } from "@cognite/aura/components/popover";
+import { cn as v } from "@cognite/aura/utils";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/extraComponents/CadTreeAssetMappingDropdown.tsx
+var y = 28;
+function b({ cadTreeNode: p }) {
+	let { useInstancesByIdsQuery: m } = i(r), y = p.getInstanceMappings(), { data: b } = m(y.map((e) => t(e.instance)));
+	if (y === void 0 || b === void 0 || b.size === 0) return /* @__PURE__ */ o(a, {});
+	let S = async (e) => {
+		try {
+			await p.deleteInstanceMapping(e);
+		} catch (e) {
+			console.error("CAD Instance mapping deletion failed: ", e);
+		}
+	};
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(u, {
+		delayDuration: 500,
+		children: /* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(d, { children: /* @__PURE__ */ s(h, { children: [/* @__PURE__ */ o(_, { render: /* @__PURE__ */ o("div", {
+			role: "button",
+			tabIndex: 0,
+			className: v("flex shrink-0 items-center justify-center rounded-lg", "hover:bg-accent-background", "cursor-pointer transition-all"),
+			children: /* @__PURE__ */ o(f, { className: "size-4" })
+		}) }), /* @__PURE__ */ o(g, {
+			side: "right",
+			align: "start",
+			sideOffset: 2,
+			className: "p-0 flex justify-between",
+			children: /* @__PURE__ */ o("div", {
+				className: "max-h-[600px] w-full overflow-x-hidden overflow-y-auto flex p-1.5 flex-col gap-1.5 rounded-lg bg-white shadow-[0px_1px_16px_4px_rgba(79,82,104,0.1),0px_1px_8px_0px_rgba(79,82,104,0.08),0px_1px_2px_0px_rgba(79,82,104,0.24)]",
+				children: y.map((r) => {
+					let i = n(t(r.instance)), a = b.get(i);
+					return /* @__PURE__ */ o(x, {
+						name: a?.name ?? `${i}`,
+						deleteDelegate: () => S(r)
+					}, e(r.instance));
+				})
+			})
+		})] }) }), /* @__PURE__ */ o(l, {
+			side: "right",
+			children: "Show asset mappings"
+		})] })
+	}) });
+}
+function x({ name: e, deleteDelegate: t }) {
+	let n = e.length !== void 0 && e.length > y ? `${e.slice(0, y)}...` : e;
+	return /* @__PURE__ */ s("div", {
+		className: "flex flex-row justify-between",
+		children: [/* @__PURE__ */ o(u, { children: /* @__PURE__ */ s(c, { children: [/* @__PURE__ */ o(d, { render: /* @__PURE__ */ o(m, {
+			className: "p-0",
+			children: n
+		}) }), /* @__PURE__ */ o(l, { children: e })] }) }), /* @__PURE__ */ o("div", {
+			role: "button",
+			tabIndex: 0,
+			className: v("inline-flex size-5 shrink-0 items-center justify-center rounded-sm", "text-destructive-foreground-on-critical", "hover:bg-destructive-background-hover", "cursor-pointer transition-all"),
+			onClick: t,
+			children: /* @__PURE__ */ o(p, {})
+		})]
+	});
+}
+//#endregion
+export { b as CadTreeAssetMappingDropdown };

package/dist/ui/components/commandBased/treeView/TreeView/extraComponents/createTreeNodeExtraComponent.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { TreeNodeType } from '../../../../../../foundation/treeNodes';
+export declare function createTreeNodeExtraComponent(treeNode: TreeNodeType): ReactNode;

package/dist/ui/components/commandBased/treeView/TreeView/extraComponents/createTreeNodeExtraComponent.js

@@ -0,0 +1,10 @@
+import { CadTreeNode as e } from "../../../../../../foundation/treeNodes/cad-tree-node/cad-tree-node.js";
+import "../../../../../../domains/index.js";
+import { CadTreeAssetMappingDropdown as t } from "./CadTreeAssetMappingDropdown.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/extraComponents/createTreeNodeExtraComponent.tsx
+function r(r) {
+	return r instanceof e ? /* @__PURE__ */ n(t, { cadTreeNode: r }) : null;
+}
+//#endregion
+export { r as createTreeNodeExtraComponent };

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-node.context.d.ts

@@ -0,0 +1,20 @@
+import { Context, ReactElement } from 'react';
+import { TreeViewCaretProps } from './components/tree-view-caret';
+import { TreeViewCheckboxProps } from './components/tree-view-checkbox';
+import { TreeViewIconProps } from './components/tree-view-icon';
+import { TreeViewInfoProps } from './components/tree-view-info';
+import { TreeViewLabelProps } from './components/tree-view-label';
+import { TreeViewLoadMoreProps } from './components/tree-view-load-more';
+import { TreeViewLoadingProps } from './components/tree-view-loading';
+type CustomTreeViewNodeDependencies = {
+    TreeViewCaret: (props: TreeViewCaretProps) => ReactElement;
+    TreeViewCheckbox: (props: TreeViewCheckboxProps) => ReactElement;
+    TreeViewIcon: (props: TreeViewIconProps) => ReactElement;
+    TreeViewInfo: (props: TreeViewInfoProps) => ReactElement;
+    TreeViewLabel: (props: TreeViewLabelProps) => ReactElement;
+    TreeViewLoadMore: (props: TreeViewLoadMoreProps) => ReactElement;
+    TreeViewLoading: (props: TreeViewLoadingProps) => ReactElement;
+};
+export declare const defaultTreeViewNodeDependencies: CustomTreeViewNodeDependencies;
+export declare const CustomTreeViewNodeContext: Context<CustomTreeViewNodeDependencies>;
+export {};

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-node.context.js

@@ -0,0 +1,21 @@
+import { TreeViewCaret as e } from "./components/tree-view-caret.js";
+import { TreeViewCheckbox as t } from "./components/tree-view-checkbox.js";
+import { TreeViewIcon as n } from "./components/tree-view-icon.js";
+import { TreeViewInfo as r } from "./components/tree-view-info.js";
+import { TreeViewLabel as i } from "./components/tree-view-label.js";
+import { TreeViewLoadMore as a } from "./components/tree-view-load-more.js";
+import { TreeViewLoading as o } from "./components/tree-view-loading.js";
+import { createContext as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/tree-view-node.context.tsx
+var l = {
+	TreeViewCaret: (t) => /* @__PURE__ */ c(e, { ...t }),
+	TreeViewCheckbox: (e) => /* @__PURE__ */ c(t, { ...e }),
+	TreeViewIcon: (e) => /* @__PURE__ */ c(n, { ...e }),
+	TreeViewInfo: (e) => /* @__PURE__ */ c(r, { ...e }),
+	TreeViewLabel: (e) => /* @__PURE__ */ c(i, { ...e }),
+	TreeViewLoadMore: (e) => /* @__PURE__ */ c(a, { ...e }),
+	TreeViewLoading: (e) => /* @__PURE__ */ c(o, { ...e })
+}, u = s(l);
+//#endregion
+export { u as CustomTreeViewNodeContext, l as defaultTreeViewNodeDependencies };

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-node.d.ts

@@ -0,0 +1,17 @@
+import { Context, ReactElement } from 'react';
+import { TreeNodeType } from '../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+import { TreeViewProps } from './tree-view-props';
+import { OpenContextMenuAction } from './types';
+export type TreeViewNodeProps = {
+    node: TreeNodeType;
+    level: number;
+    props: TreeViewProps;
+    openContextMenu: OpenContextMenuAction;
+};
+export declare const TreeViewNode: ({ node: inputNode, level, props, openContextMenu, }: TreeViewNodeProps) => ReactElement;
+type CustomTreeViewChildDependencies = {
+    TreeViewChild: (props: TreeViewNodeProps) => ReactElement;
+};
+export declare const defaultTreeViewChildDependencies: CustomTreeViewChildDependencies;
+export declare const CustomTreeViewChildContext: Context<CustomTreeViewChildDependencies>;
+export {};

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-node.js

@@ -0,0 +1,93 @@
+import { getChildrenAsArray as e } from "./components/get-children-as-array.js";
+import { createTreeNodeExtraComponent as t } from "./extraComponents/createTreeNodeExtraComponent.js";
+import { CustomTreeViewNodeContext as n } from "./tree-view-node.context.js";
+import { createContext as r, useContext as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useSignalValue as l } from "@cognite/signal-utils/react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/tree-view-node.tsx
+var u = ({ node: r, level: u, props: d, openContextMenu: p }) => {
+	let [m, h] = a(!1);
+	l(r.updateSignal);
+	let { TreeViewChild: g } = i(f), { TreeViewCaret: _, TreeViewCheckbox: v, TreeViewIcon: y, TreeViewInfo: b, TreeViewLabel: x, TreeViewLoadMore: S, TreeViewLoading: C } = i(n);
+	if (r.isVisibleInTree === !1) return /* @__PURE__ */ s(o, {});
+	let w = e(r, d.loader), T = d.hasHover ?? !0, E = d.hasCheckboxes ?? !0, D = r.hasInfoIcon === !0 && (r.tooltip !== void 0 || d.onClickInfo !== void 0), O = r.isLoadingChildren === !0, k = r.isLoadingSiblings === !1 && r.needLoadSiblings === !0 && r.loadSiblings !== void 0;
+	return /* @__PURE__ */ c("div", { children: [
+		/* @__PURE__ */ c("div", {
+			id: r.id,
+			className: `flex flex-row items-center justify-between rounded text-foreground gap-1.5 py-[3px] ${r.isSelected ? "bg-primary-background/20" : m ? "bg-muted-background" : ""}`,
+			style: { marginLeft: u * 16 + "px" },
+			onMouseEnter: () => {
+				T && h(!0);
+			},
+			onMouseLeave: () => {
+				T && h(!1);
+			},
+			onContextMenu: (e) => {
+				e.preventDefault(), e.stopPropagation(), p(r, {
+					x: e.clientX,
+					y: e.clientY
+				});
+			},
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "flex flex-row items-center tree-view-node-row gap-1.5",
+					role: "row",
+					children: [
+						/* @__PURE__ */ s(_, { node: r }),
+						E && /* @__PURE__ */ s(v, {
+							node: r,
+							onToggleNode: d.onToggleNode
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "flex flex-row items-center gap-1.5",
+							role: "treeitem",
+							"aria-selected": r.isSelected === !0,
+							onClick: (e) => {
+								d.onSelectNode !== void 0 && d.onSelectNode(r, e.shiftKey, e.ctrlKey || e.metaKey), e.stopPropagation(), e.preventDefault();
+							},
+							children: [
+								d.getIconFromIconName && r.icon !== void 0 && /* @__PURE__ */ s(y, {
+									node: r,
+									getIconFromIconName: d.getIconFromIconName
+								}),
+								O && /* @__PURE__ */ s(C, { label: d.loadingLabel }),
+								!O && /* @__PURE__ */ s(x, {
+									node: r,
+									maxLabelLength: d.maxLabelLength
+								})
+							]
+						})
+					]
+				}),
+				t(r),
+				D && /* @__PURE__ */ s(b, {
+					node: r,
+					onClick: d.onClickInfo
+				})
+			]
+		}),
+		w !== void 0 && w.map((e) => /* @__PURE__ */ s(g, {
+			node: e,
+			level: u + 1,
+			props: d,
+			openContextMenu: p
+		}, e.id)),
+		k && d.loader !== void 0 && /* @__PURE__ */ s(S, {
+			node: r,
+			level: u,
+			label: d.loadMoreLabel,
+			loader: d.loader
+		}),
+		r.isLoadingSiblings === !0 && /* @__PURE__ */ s(C, {
+			level: u,
+			label: d.loadingLabel
+		})
+	] });
+}, d = { TreeViewChild: (e) => /* @__PURE__ */ s(u, {
+	node: e.node,
+	level: e.level,
+	props: e.props,
+	openContextMenu: e.openContextMenu
+}) }, f = r(d);
+//#endregion
+export { f as CustomTreeViewChildContext, u as TreeViewNode, d as defaultTreeViewChildDependencies };

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-props.d.ts

@@ -0,0 +1,23 @@
+import { ILazyLoader } from '../../../../../foundation/treeNodes/tree-node-type/i-lazy-loader';
+import { GetTreeNodeContextMenu, TreeNodeAction, TreeNodeSelectAction } from '../../../../../foundation/treeNodes/tree-node-type/tree-node-actions';
+import { TreeNodeType } from '../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+import { IconName } from '../../../../../foundation/utilities/types';
+import { IconType } from '../../Factories/IconType';
+export type TreeViewProps = {
+    showRoot?: boolean;
+    hasHover?: boolean;
+    hasCheckboxes?: boolean;
+    className?: string;
+    loadingLabel?: string;
+    loadMoreLabel?: string;
+    maxLabelLength?: number;
+    onSelectNode?: TreeNodeSelectAction;
+    onToggleNode?: TreeNodeAction;
+    onClickInfo?: TreeNodeAction;
+    getContextMenu?: GetTreeNodeContextMenu;
+    onKeyDown?: (root: TreeNodeType, event: KeyboardEvent) => boolean;
+    getIconFromIconName?: GetIconFromIconNameFn;
+    root?: TreeNodeType;
+    loader?: ILazyLoader;
+};
+export type GetIconFromIconNameFn = (icon: IconName) => IconType;

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-scrolling.d.ts

@@ -0,0 +1,4 @@
+import { TreeNodeType } from '../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+import { UniqueId } from '../../../../../foundation/utilities/types';
+export declare function scrollToNode(container: HTMLElement | undefined, node: TreeNodeType | undefined): void;
+export declare function scrollToElementId(container: HTMLElement | undefined, id: UniqueId): void;

package/dist/ui/components/commandBased/treeView/TreeView/tree-view-scrolling.js

@@ -0,0 +1,21 @@
+import { TreeNode as e } from "../../../../../foundation/treeNodes/tree-node/tree-node.js";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/tree-view-scrolling.ts
+function t(t, r) {
+	r !== void 0 && (r instanceof e && r.expandAllAncestors(), n(t, r.id));
+}
+function n(e, t) {
+	if (e === void 0) return;
+	let n = document.getElementById(t);
+	if (n === null) {
+		console.error("Element is not found", t);
+		return;
+	}
+	let r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
+	i.top >= r.top && i.bottom <= r.bottom || n.scrollIntoView({
+		behavior: "smooth",
+		block: "nearest",
+		inline: "nearest"
+	});
+}
+//#endregion
+export { n as scrollToElementId, t as scrollToNode };

package/dist/ui/components/commandBased/treeView/TreeView/tree-view.context.d.ts

@@ -0,0 +1,11 @@
+import { Context, ReactElement } from 'react';
+import { TreeViewContextMenuProps } from './components/tree-view-context-menu';
+import { TreeViewNodeProps } from './tree-view-node';
+type CustomTreeViewDependencies = {
+    Loader: () => ReactElement;
+    TreeViewNode: (props: TreeViewNodeProps) => ReactElement;
+    TreeViewContextMenu: (props: TreeViewContextMenuProps) => ReactElement;
+};
+export declare const defaultTreeViewDependencies: CustomTreeViewDependencies;
+export declare const CustomTreeViewContext: Context<CustomTreeViewDependencies>;
+export {};

package/dist/ui/components/commandBased/treeView/TreeView/tree-view.context.js

@@ -0,0 +1,13 @@
+import { TreeViewContextMenu as e } from "./components/tree-view-context-menu.js";
+import { TreeViewNode as t } from "./tree-view-node.js";
+import { createContext as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { IconLoader as i } from "@tabler/icons-react";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/tree-view.context.tsx
+var a = {
+	Loader: () => /* @__PURE__ */ r(i, { className: "animate-spin" }),
+	TreeViewNode: (e) => /* @__PURE__ */ r(t, { ...e }),
+	TreeViewContextMenu: (t) => /* @__PURE__ */ r(e, { ...t })
+}, o = n(a);
+//#endregion
+export { o as CustomTreeViewContext, a as defaultTreeViewDependencies };

package/dist/ui/components/commandBased/treeView/TreeView/tree-view.d.ts

@@ -0,0 +1,3 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TreeViewProps } from './tree-view-props';
+export declare const TreeView: ForwardRefExoticComponent<TreeViewProps & RefAttributes<HTMLDivElement>>;

package/dist/ui/components/commandBased/treeView/TreeView/tree-view.js

@@ -0,0 +1,54 @@
+import { getChildrenAsArray as e } from "./components/get-children-as-array.js";
+import { CustomTreeViewContext as t } from "./tree-view.context.js";
+import { forwardRef as n, useCallback as r, useContext as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/treeView/TreeView/tree-view.tsx
+var l = n((n, l) => {
+	let { loader: u, onKeyDown: d, getContextMenu: f, showRoot: p, className: m } = n, h = u?.root ?? n.root, { Loader: g, TreeViewNode: _, TreeViewContextMenu: v } = i(t), [y, b] = a(0), [x, S] = a(void 0);
+	h === void 0 && u?.loadInitialRoot !== void 0 && u.loadInitialRoot().then(() => {
+		b((e) => e + 1);
+	});
+	let C = r((e, t) => {
+		if (f !== void 0) {
+			let n = f(e);
+			n !== void 0 && n.length > 0 && S({
+				commands: n,
+				position: t
+			});
+		}
+	}, [f]), w = r((e) => {
+		h !== void 0 && d !== void 0 && d(h, e.nativeEvent) && e.preventDefault();
+	}, [d, h]);
+	if (h === void 0) return /* @__PURE__ */ s(g, {});
+	let T = p === !1 ? /* @__PURE__ */ s("div", {
+		ref: l,
+		className: `overflow-auto m-2 outline-none w-auto h-auto whitespace-nowrap pb-1${m === void 0 ? "" : ` ${m}`}`,
+		onKeyDown: w,
+		tabIndex: 0,
+		role: "tree",
+		children: e(h, u, !1)?.map((e) => /* @__PURE__ */ s(_, {
+			node: e,
+			level: 0,
+			props: n,
+			openContextMenu: C
+		}, e.id))
+	}) : /* @__PURE__ */ s("div", {
+		ref: l,
+		className: `overflow-auto m-2 outline-none w-auto h-auto whitespace-nowrap pb-1${m === void 0 ? "" : ` ${m}`}`,
+		onKeyDown: w,
+		tabIndex: 0,
+		role: "tree",
+		children: /* @__PURE__ */ s(_, {
+			node: h,
+			level: 0,
+			props: n,
+			openContextMenu: C
+		}, h.id)
+	});
+	return /* @__PURE__ */ c(o, { children: [T, x !== void 0 && /* @__PURE__ */ s(v, {
+		state: x,
+		onClose: () => S(void 0)
+	})] });
+});
+//#endregion
+export { l as TreeView };

package/dist/ui/components/commandBased/treeView/TreeView/types.d.ts

@@ -0,0 +1,11 @@
+import { BaseCommand } from '../../../../../foundation/commands/BaseCommand';
+import { TreeNodeType } from '../../../../../foundation/treeNodes/tree-node-type/tree-node-type';
+export type ContextMenuPosition = {
+    x: number;
+    y: number;
+};
+export type ContextMenuState = {
+    commands: BaseCommand[];
+    position: ContextMenuPosition;
+};
+export type OpenContextMenuAction = (node: TreeNodeType, position: ContextMenuPosition) => void;

package/dist/ui/components/commandBased/utils/LabelWithShortcut.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { BaseCommand } from '../../../../foundation/commands/BaseCommand';
+type LabelWithShortcutProps = {
+    label?: string;
+    command?: BaseCommand;
+    inverted?: boolean;
+};
+export declare const LabelWithShortcut: React.FC<LabelWithShortcutProps>;
+export {};

package/dist/ui/components/commandBased/utils/LabelWithShortcut.js

@@ -0,0 +1,22 @@
+import "react";
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region libs/shared/reveal-components/src/ui/components/commandBased/utils/LabelWithShortcut.tsx
+var r = ({ label: r, command: i, inverted: a = !0 }) => {
+	if (r === void 0) return /* @__PURE__ */ t(e, {});
+	let o = i?.getShortCutKeys(), s = a ? "bg-foreground-fixed-light/20 text-foreground-fixed-light" : "bg-foreground/10 text-foreground";
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-row",
+		children: [/* @__PURE__ */ t("div", {
+			className: "mr-1",
+			children: r
+		}), o !== void 0 && /* @__PURE__ */ t("div", {
+			className: "flex gap-1 ml-1",
+			children: o.map((e) => /* @__PURE__ */ t("kbd", {
+				className: `px-1 py-0.5 rounded text-xs font-mono ${s}`,
+				children: e
+			}, e))
+		})]
+	}, r);
+};
+//#endregion
+export { r as LabelWithShortcut };

package/dist/ui/components/commandBased/utils/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_PADDING = "4px 8px";
+export declare const SELECT_DROPDOWN_ICON_COLOR = "rgba(0, 0, 0, 0.7)";
+export declare const TOOLTIP_DELAY = 500;

package/dist/ui/components/commandBased/utils/types.d.ts

@@ -0,0 +1,2 @@
+export type PlacementType = 'top' | 'right' | 'bottom' | 'left';
+export type FlexDirection = 'row' | 'column';