@plitzi/plitzi-ui 1.6.2

package/dist/components/Tree/TreeNode.d.ts

@@ -0,0 +1,87 @@
+import { default as TreeStyles, variantKeys } from './Tree.styles';
+import { DragMetadata, DropPosition } from './utils';
+import { IconProps } from '../Icon';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+import { DragEvent, ReactElement, ReactNode } from 'react';
+export type ItemControlsProps = {
+    id?: string;
+    hovered?: boolean;
+    selected?: boolean;
+    parentSelected?: boolean;
+} & {
+    [key: string]: unknown;
+};
+export type TreeNodeProps = {
+    controls?: ReactNode;
+    className?: string;
+    icon?: ReactNode;
+    id?: string;
+    parentNodeId?: string;
+    level?: number;
+    isOpen?: boolean;
+    isParent?: boolean;
+    hovered?: boolean;
+    parentSelected?: boolean;
+    selected?: boolean;
+    canDragDrop?: boolean;
+    label?: string;
+    setOpened?: (id: string, isOpen: boolean) => void;
+    setDragMetadata?: (metadata: DragMetadata) => void;
+    getDragMetadata?: () => DragMetadata;
+    resetDragMetadata?: () => void;
+    isDragAllowed?: (id: string, dropPosition: DropPosition, parentId?: string) => boolean;
+    onChange?: (id: string, value: string) => void;
+    onHover?: (id?: string) => void;
+    onSelect?: (id?: string) => void;
+    onDrop?: (event: DragEvent, id: string, toId: string, dropPosition: DropPosition) => void;
+} & useThemeSharedProps<typeof TreeStyles, typeof variantKeys>;
+declare const TreeNode: import('react').NamedExoticComponent<{
+    controls?: ReactNode;
+    className?: string;
+    icon?: ReactNode;
+    id?: string;
+    parentNodeId?: string;
+    level?: number;
+    isOpen?: boolean;
+    isParent?: boolean;
+    hovered?: boolean;
+    parentSelected?: boolean;
+    selected?: boolean;
+    canDragDrop?: boolean;
+    label?: string;
+    setOpened?: (id: string, isOpen: boolean) => void;
+    setDragMetadata?: (metadata: DragMetadata) => void;
+    getDragMetadata?: () => DragMetadata;
+    resetDragMetadata?: () => void;
+    isDragAllowed?: (id: string, dropPosition: DropPosition, parentId?: string) => boolean;
+    onChange?: (id: string, value: string) => void;
+    onHover?: (id?: string) => void;
+    onSelect?: (id?: string) => void;
+    onDrop?: (event: DragEvent, id: string, toId: string, dropPosition: DropPosition) => void;
+} & {
+    className?: (string | {
+        root?: string | undefined;
+        item?: string | undefined;
+        containerEditable?: string | undefined;
+        dropIndicator?: string | undefined;
+        collapsableIcon?: string | undefined;
+        icon?: string | undefined;
+    }) | undefined;
+} & {
+    readonly intent?: "primary" | "secondary" | undefined;
+    readonly size?: "xs" | "md" | "sm" | "custom" | undefined;
+    readonly hovered?: boolean | undefined;
+    readonly selected?: boolean | undefined;
+    readonly parentSelected?: boolean | undefined;
+    readonly dragAllowed?: boolean | undefined;
+    readonly isOpen?: boolean | undefined;
+    readonly dropPosition?: "bottom" | "top" | "inside" | undefined;
+}> & {
+    readonly type: {
+        ({ controls, icon, className, id, parentNodeId, level, isOpen, isParent, hovered, parentSelected, selected, canDragDrop, label, intent, size, setOpened, setDragMetadata, getDragMetadata, resetDragMetadata, isDragAllowed, onChange, onHover, onSelect, onDrop }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+} & {
+    Icon: ({ className, children, icon, active, disabled, testId, intent, size, cursor, title, ...props }: IconProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
+};
+export default TreeNode;

package/dist/components/Tree/TreeNode.js

@@ -0,0 +1,182 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Icon/index.js";
+import n from "../../hooks/useDidUpdateEffect/index.js";
+import r from "../ContentEditable/index.js";
+import { getPaddingLeft as i } from "./utils.js";
+import { cloneElement as a, isValidElement as o, memo as s, useCallback as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+//#region src/components/Tree/TreeNode.tsx
+var h = ({ controls: s, icon: h, className: _ = "", id: v = "", parentNodeId: y = "", level: b = 0, isOpen: x = !1, isParent: S = !1, hovered: C = !1, parentSelected: w = !1, selected: T = !1, canDragDrop: E = !0, label: D = "", intent: O, size: k, setOpened: A, setDragMetadata: j, getDragMetadata: M, resetDragMetadata: N, isDragAllowed: P, onChange: F, onHover: I, onSelect: L, onDrop: R }) => {
+	let [z, B] = d(!1), [V, H] = d(!0), [U, W] = d(), G = e("Tree", {
+		className: _,
+		componentKey: [
+			"item",
+			"dropIndicator",
+			"containerEditable",
+			"collapsableIcon",
+			"icon"
+		],
+		variants: {
+			intent: O,
+			size: k,
+			selected: T,
+			hovered: C,
+			parentSelected: w,
+			dropPosition: U,
+			dragAllowed: V,
+			isOpen: x
+		}
+	}), K = u({}), q = u(null), J = c((e) => {
+		e.stopPropagation(), S && A?.(v, !x);
+	}, [
+		v,
+		x,
+		A,
+		S
+	]), Y = c(() => L?.(v), [L, v]);
+	n(() => {
+		K.current = q.current?.getBoundingClientRect();
+	}, [z]);
+	let X = c((e) => {
+		j?.({
+			isDragging: !0,
+			nodeId: v,
+			parentNodeId: y,
+			nodeHoveredId: "",
+			dropPosition: void 0
+		}), I?.(void 0), L?.(void 0), e.dataTransfer.setDragImage(e.currentTarget, 0, 0);
+	}, [
+		I,
+		L,
+		j,
+		v,
+		y
+	]), Z = c(() => {
+		N?.(), B(!1), W(void 0), H(!0);
+	}, [N]), Q = (e) => {
+		e.preventDefault();
+		let { nodeId: t, nodeHoveredId: n } = M?.() ?? {};
+		if (t === v || !K.current) return;
+		let r = K.current.height * .25, i = K.current.height / 2, a = e.clientY - K.current.top, o;
+		o = a < r || !S && a < i ? "top" : a > K.current.height - r || !S && a >= i ? "bottom" : "inside", (n !== v || U !== o) && j?.({
+			nodeHoveredId: v,
+			dropPosition: o
+		}), (!z || U !== o) && (B(!0), W(o), H(P?.(v, o, y) ?? !0));
+	}, $ = c(() => {
+		z && (B(!1), H(!0), W(void 0));
+	}, [z]), ee = c((e) => {
+		e.stopPropagation(), e.preventDefault();
+		let { nodeId: t, dropPosition: n } = M?.() ?? {};
+		B(!1), H(!0), W(void 0), N?.(), t !== v && R?.(e, t, v, n);
+	}, [
+		M,
+		v,
+		R,
+		N
+	]), te = c((e) => {
+		e.stopPropagation(), C && I?.(void 0);
+	}, [C, I]), ne = c((e) => {
+		e.stopPropagation(), C || I?.(v);
+	}, [
+		C,
+		v,
+		I
+	]), re = c((e) => {
+		e !== D && F?.(v, e);
+	}, [
+		v,
+		D,
+		F
+	]), ie = l(() => {
+		if (typeof h == "string" && !h.startsWith("http")) return /* @__PURE__ */ f(g.Icon, {
+			intent: "custom",
+			size: k,
+			icon: h,
+			className: G.icon
+		});
+		if (typeof h == "string" && h.startsWith("http")) return /* @__PURE__ */ f(g.Icon, {
+			intent: "custom",
+			size: k,
+			className: G.icon,
+			children: /* @__PURE__ */ f("img", { src: h })
+		});
+		if (o(h)) return a(h, {
+			...h.props,
+			size: k,
+			className: m(h.props.className, G.icon)
+		});
+	}, [
+		h,
+		k,
+		G.icon
+	]), ae = l(() => {
+		if (o(s)) return a(s, {
+			intent: O,
+			size: k,
+			...s.props,
+			id: v,
+			hovered: C,
+			selected: T,
+			parentSelected: w
+		});
+	}, [
+		s,
+		C,
+		w,
+		v,
+		T,
+		O,
+		k
+	]);
+	return /* @__PURE__ */ f("div", {
+		ref: q,
+		className: m("tree-item", G.item),
+		"data-id": v,
+		onClick: Y,
+		onDragStart: X,
+		onDragEnd: Z,
+		onDragOver: Q,
+		onDragLeave: $,
+		onDrop: ee,
+		draggable: E,
+		onMouseEnter: ne,
+		onMouseLeave: te,
+		tabIndex: -1,
+		children: /* @__PURE__ */ p("div", {
+			className: "w-full flex items-center gap-2",
+			style: { paddingLeft: `${i(b, k)}px` },
+			children: [
+				ie,
+				/* @__PURE__ */ p("div", {
+					className: "flex relative grow basis-0 overflow-hidden",
+					children: [/* @__PURE__ */ f(r, {
+						className: m(G.containerEditable, { "opacity-30": z && U !== "inside" }),
+						size: k,
+						value: D,
+						onChange: re,
+						openMode: "doubleClick"
+					}), z && /* @__PURE__ */ f("span", { className: G.dropIndicator })]
+				}),
+				ae,
+				S && /* @__PURE__ */ p("div", {
+					className: G.collapsableIcon,
+					onClick: J,
+					children: [!x && /* @__PURE__ */ f(t, {
+						icon: "fa-solid fa-chevron-left",
+						intent: "custom",
+						size: "xs"
+					}), x && /* @__PURE__ */ f(t, {
+						icon: "fa-solid fa-chevron-down",
+						intent: "custom",
+						size: "xs"
+					})]
+				})
+			]
+		})
+	});
+};
+h.displayName = "TreeNode";
+var g = Object.assign(s(h), { Icon: t });
+//#endregion
+export { g as default };

package/dist/components/Tree/index.d.ts

@@ -0,0 +1,5 @@
+import { default as Tree } from './Tree';
+import { default as treeTheme } from './Tree.styles';
+export * from './Tree';
+export { treeTheme };
+export default Tree;

package/dist/components/Tree/index.js

@@ -0,0 +1,6 @@
+import e from "./Tree.js";
+import t from "./Tree.styles.js";
+//#region src/components/Tree/index.ts
+var n = e;
+//#endregion
+export { n as default, t as treeTheme };

package/dist/components/Tree/utils.d.ts

@@ -0,0 +1,45 @@
+import { TreeProps } from './Tree';
+import { ReactNode } from 'react';
+export type TreeItem = {
+    id: string;
+    icon?: ReactNode;
+    label: string;
+    items?: TreeItem[];
+};
+export type TreeFlatItems = {
+    [key: string]: TreeFlatItem | undefined;
+};
+export type TreeFlatItem = Omit<TreeItem, 'items'> & {
+    level: number;
+    path: string;
+    parentId?: string;
+    items?: string[];
+};
+export type DragMetadata = {
+    isDragging?: boolean;
+    nodeId?: string;
+    parentNodeId?: string;
+    nodeHoveredId?: string;
+    dropPosition?: DropPosition;
+};
+export type DropPosition = 'top' | 'bottom' | 'inside';
+export declare const defaultDragMetadata: {
+    isDragging: boolean;
+    nodeHoveredId: string;
+    dropPosition: undefined;
+};
+export declare const DropDirectionConstants: {
+    top: string;
+    bottom: string;
+    inside: string;
+};
+export declare const getFlatItems: (items: TreeItem[], level?: number, parentId?: string, path?: string) => TreeFlatItems;
+export declare const setClosedMultiple: (id: string, flatItems: TreeFlatItems) => {
+    [key: string]: boolean;
+};
+export declare const hasParentSelected: (id: string, idSelected: string, flatItems: TreeFlatItems) => boolean;
+export declare const setOpenedMultiple: (id: string, flatItems: TreeFlatItems) => {
+    [key: string]: boolean;
+};
+export declare const moveNode: (nodeId: string, toNodeId: string, dropPosition: DropPosition, items: TreeItem[], flatItems: TreeFlatItems) => TreeItem[] | undefined;
+export declare const getPaddingLeft: (level: number, size: TreeProps["size"]) => number;

package/dist/components/Tree/utils.js

@@ -0,0 +1,92 @@
+import { get as e } from "../../helpers/lodash/get.js";
+import { isInViewport as t } from "../../helpers/utils.js";
+import { produce as n } from "immer";
+//#region src/components/Tree/utils.ts
+var r = {
+	isDragging: !1,
+	nodeHoveredId: "",
+	dropPosition: void 0
+}, i = (e, t = 0, n = "", r = "") => {
+	let a = {};
+	return e.forEach((e, o) => {
+		let { id: s, items: c } = e, l = {
+			...e,
+			level: t,
+			parentId: n,
+			path: r ? `${r}.${o}` : `${o}`
+		};
+		if (!c) {
+			a[s] = l;
+			return;
+		}
+		l.items = c.map((e) => e.id), a = {
+			...a,
+			[s]: l,
+			...i(c, t + 1, s, `${r ? `${r}.` : ""}${o}.items`)
+		};
+	}), a;
+}, a = (e, t) => {
+	let n = {}, r = t[e];
+	if (!r?.items) return n;
+	n[e] = !1;
+	let { items: i } = r;
+	return i.forEach((r) => {
+		let i = t[r];
+		!i || !i.items || (n[e] = !1, n = {
+			...n,
+			...a(r, t)
+		});
+	}), n;
+}, o = (e, t, n) => {
+	if (!t) return !1;
+	let r = n[e];
+	return !r || !r.parentId ? !1 : r.parentId === t ? !0 : o(r.parentId, t, n);
+}, s = (e, n) => {
+	let r = {}, i = n[e];
+	for (; i && (i.items && (r[i.id] = !0), i.parentId);) i = n[i.parentId];
+	if (Object.keys(r).length === 0) {
+		let n = window.document.querySelector(`[data-id="${e}"]`);
+		if (n && !t(n)) {
+			let { offsetParent: e, offsetTop: t } = n;
+			e && (e.scrollTop = t);
+		}
+		return r;
+	}
+	let a = window.document.querySelector(`[data-id="${e}"]`);
+	if (a && !t(a)) {
+		let { offsetParent: e, offsetTop: t } = a;
+		e && (e.scrollTop = t);
+	}
+	return r;
+}, c = (t, r, i, a, o) => {
+	let s = !1, c = n(a, (n) => {
+		let a = o[t], c = o[r];
+		if (!a || !a.parentId || !c) return;
+		let l = o[a.parentId], u = e(n, a.path), d = e(n, l.path);
+		if (!u || !d) return;
+		let f = d.items?.findIndex((e) => e.id === t) ?? -1;
+		d.items && f !== -1 && d.items.splice(f, 1);
+		let p = o[c.parentId ? c.parentId : r];
+		if (p) {
+			if (i === "inside" && r !== a.parentId) {
+				let t = e(n, `${c.path}.items`);
+				t && (t.splice(t.length, 0, u), s = !0);
+			} else if (i !== "inside" && c.parentId) {
+				let t = e(n, `${p.path}.items`);
+				if (t) {
+					let e = t.findIndex((e) => e.id === r) + (i === "top" ? 0 : 1);
+					t.splice(e, 0, u), s = !0;
+				}
+			}
+		}
+	});
+	if (s) return c;
+}, l = (e, t) => {
+	switch (t) {
+		case "sm": return e * 12;
+		case "xs": return e * 8;
+		default: return e * 16;
+	}
+};
+//#endregion
+export { r as defaultDragMetadata, i as getFlatItems, l as getPaddingLeft, o as hasParentSelected, c as moveNode, a as setClosedMultiple, s as setOpenedMultiple };

package/dist/components/index.d.ts

@@ -0,0 +1,95 @@
+import { default as Accordion } from './Accordion';
+import { default as Alert } from './Alert';
+import { default as Badge } from './Badge';
+import { default as Breadcrumb } from './Breadcrumb';
+import { default as Button } from './Button';
+import { default as Card } from './Card';
+import { default as Checkbox } from './Checkbox';
+import { default as CodeMirror } from './CodeMirror';
+import { default as ColorPicker } from './ColorPicker';
+import { default as ContainerAutoScale } from './ContainerAutoScale';
+import { default as ContainerCollapsable } from './ContainerCollapsable';
+import { default as ContainerDraggable } from './ContainerDraggable';
+import { default as ContainerFloating } from './ContainerFloating';
+import { default as ContainerFrame } from './ContainerFrame';
+import { default as ContainerResizable } from './ContainerResizable';
+import { default as ContainerRoot } from './ContainerRoot';
+import { default as ContainerShadow } from './ContainerShadow';
+import { default as ContainerTabs } from './ContainerTabs';
+import { default as ContainerWindow } from './ContainerWindow';
+import { default as Contenteditable } from './ContentEditable';
+import { default as Dummy } from './Dummy';
+import { default as ErrorBoundary } from './ErrorBoundary';
+import { default as ErrorMessage } from './ErrorMessage';
+import { default as FileUpload } from './FileUpload';
+import { default as Flex } from './Flex';
+import { default as Form } from './Form';
+import { default as Heading } from './Heading';
+import { default as Icon } from './Icon';
+import { default as IconGroup } from './IconGroup';
+import { default as Input } from './Input';
+import { default as KVInput } from './KVInput';
+import { default as Label } from './Label';
+import { default as Markdown } from './Markdown';
+import { default as MenuList } from './MenuList';
+import { default as MetricInput } from './MetricInput';
+import { default as Modal } from './Modal';
+import { default as Popup } from './Popup';
+import { default as Provider } from './Provider';
+import { default as QueryBuilder } from './QueryBuilder';
+import { default as Select } from './Select';
+import { default as Select2 } from './Select2';
+import { default as Sidebar } from './Sidebar';
+import { default as Switch } from './Switch';
+import { default as Text } from './Text';
+import { default as TextArea } from './TextArea';
+import { default as Tree } from './Tree';
+export * from './Breadcrumb';
+export * from './Badge';
+export * from './FileUpload';
+export * from './ContainerAutoScale';
+export * from './Toast';
+export * from './ContainerShadow';
+export * from './KVInput';
+export * from './ColorPicker';
+export * from './Modal';
+export * from './MenuList';
+export * from './Markdown';
+export * from './ErrorBoundary';
+export * from './ContainerTabs';
+export * from './Cache';
+export * from './Form';
+export * from './Heading';
+export * from './Tree';
+export * from './ContentEditable';
+export * from './ContainerFrame';
+export * from './Checkbox';
+export * from './ContainerFloating';
+export * from './Switch';
+export * from './QueryBuilder';
+export * from './Select';
+export * from './Select2';
+export * from './CodeMirror';
+export * from './Text';
+export * from './Sidebar';
+export * from './Accordion';
+export * from './Dummy';
+export * from './ErrorMessage';
+export * from './Card';
+export * from './ContainerDraggable';
+export * from './ContainerResizable';
+export * from './ContainerRoot';
+export * from './ContainerWindow';
+export * from './Alert';
+export * from './Button';
+export * from './Input';
+export * from './MetricInput';
+export * from './Provider';
+export * from './TextArea';
+export * from './Label';
+export * from './Icon';
+export * from './IconGroup';
+export * from './Flex';
+export * from './ContainerCollapsable';
+export * from './Popup';
+export { Badge, Breadcrumb, FileUpload, ContainerAutoScale, ContainerShadow, KVInput, ColorPicker, Modal, MenuList, Markdown, ErrorBoundary, ContainerTabs, Form, Heading, Tree, Contenteditable, ContainerFrame, Checkbox, ContainerFloating, Switch, QueryBuilder, Select, Select2, CodeMirror, Text, Sidebar, Accordion, Dummy, Alert, Button, Input, MetricInput, Provider, TextArea, Label, ErrorMessage, Icon, IconGroup, Flex, ContainerCollapsable, Card, ContainerDraggable, ContainerResizable, ContainerRoot, ContainerWindow, Popup };