@oliasoft-open-source/react-ui-library 5.11.7 → 5.12.1

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { DependencyList } from 'react';
+import { DropOptions } from '@minoru/react-dnd-treeview';
 import { ElementType as ElementType_2 } from 'react';
 import { FC } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
@@ -1060,6 +1061,11 @@ export declare interface INumberInputProps {
     disableValidationOnFocus?: boolean;
 }
 
+declare interface IOnRowClickFunction {
+    (): any;
+    noStyle?: boolean;
+}
+
 export declare interface IOptionDropdownProps {
     name?: string;
     disabled?: boolean;
@@ -1720,41 +1726,24 @@ declare interface ITopBarTitleProps {
     onClick?: MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
 }
 
+declare interface ITreeListItemProps extends IListItem {
+    id: TStringOrNumber;
+    parent: TStringOrNumber;
+    droppable?: boolean;
+    onDrop?: (event: default_2.DragEvent<HTMLDivElement>) => void;
+}
+
 declare interface ITreeListProps {
     name?: string | default_2.ReactNode;
     noHeader?: boolean;
-    items: {
-        id: TStringOrNumber;
-        name: string | default_2.ReactNode;
-        parent: TStringOrNumber;
-        droppable?: boolean;
-        details?: string | default_2.ReactNode;
-        active?: boolean;
-        testId?: string;
-        icon?: {
-            icon: default_2.ReactNode;
-            color: string;
-            tooltip?: {
-                text: TStringOrNumber | default_2.ReactNode;
-                error?: boolean;
-                warning?: boolean;
-                placement?: string;
-                enabled?: boolean;
-                maxWidth?: TStringOrNumber;
-                triggerOffset?: TStringOrNumber;
-                possiblePlacements?: string[];
-                fontSize?: TStringOrNumber;
-                padding?: TStringOrNumber;
-            };
-        };
-        onDrop?: (event: default_2.DragEvent<HTMLDivElement>) => void;
-    }[];
+    items: ITreeListItemProps[] | ITreeRowItem[];
     onClick?: TEmpty;
     actions?: any[];
 }
 
 export declare interface ITreeProps {
     list: ITreeListProps;
+    canDrop?: (tree: NodeModel[], options: DropOptions) => boolean | void;
     draggable?: boolean;
     onListReorder?: (newList: any[]) => void;
     onChangeOpen?: (id: TStringOrNumber[]) => void;
@@ -1771,6 +1760,22 @@ export declare interface ITreeProps {
     allowParentReassignment?: boolean;
     stickyHeader?: boolean;
     height?: number | string;
+    render?: (node: NodeModel<any>, options: {
+        depth: number;
+        draggable: boolean;
+        handleRef: RefObject<HTMLDivElement>;
+        hasChild: boolean;
+        isOpen: boolean;
+        onToggle: (id: TStringOrNumber) => void;
+    }) => ReactElement;
+}
+
+declare interface ITreeRowItem extends TRowType_2 {
+    id: TStringOrNumber;
+    name?: string;
+    parent: TStringOrNumber;
+    droppable?: boolean;
+    onDrop?: (event: default_2.DragEvent<HTMLDivElement>) => void;
 }
 
 declare interface IUnitConfigItem {
@@ -2165,7 +2170,7 @@ declare const TRANSLATION_FALLBACK: {
     unknown: string;
 };
 
-export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, autoOpenActiveItems, treeRef: treeRefProp, itemHasChild, onItemToggle, icons, allowParentReassignment, stickyHeader, height, }: ITreeProps) => JSX_2.Element;
+export declare const Tree: ({ list, canDrop, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, autoOpenActiveItems, treeRef: treeRefProp, itemHasChild, onItemToggle, icons, allowParentReassignment, stickyHeader, height, render, }: ITreeProps) => JSX_2.Element;
 
 export declare enum TriggerType {
     TEXT = "Text",
@@ -2185,6 +2190,23 @@ declare type TRowType = {
     onRowMouseLeave?: TEmpty;
 };
 
+declare type TRowType_2 = {
+    active?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    cells: TCellShape[];
+    noDrag?: boolean;
+    onRowClick?: IOnRowClickFunction;
+    onRowFocus?: IOnRowClickFunction;
+    onRowMouseEnter?: IOnRowClickFunction;
+    onRowMouseLeave?: IOnRowClickFunction;
+    expandedContent?: {
+        content: ReactNode;
+        flush?: boolean;
+    };
+    actions?: any[];
+};
+
 declare type TSliderMark = {
     value: number | string;
     label?: number | string | ReactNode;

package/dist/index.js

@@ -3061,34 +3061,34 @@ const ExpandedContentRow = ({ colSpan: e, children: t, flush: n }) => /* @__PURE
 	return r && t ? e[n] || [] : i ? e : (console.warn("getHeaderAlignment: alignments array contains a mix of strings and arrays, returning an empty array."), []);
 };
 var cell_module_default = {
-	inputInTable: "_inputInTable_ie6ng_1",
-	inputHover: "_inputHover_ie6ng_13",
-	inputFocus: "_inputFocus_ie6ng_18",
-	inputError: "_inputError_ie6ng_25",
-	inputWarning: "_inputWarning_ie6ng_26",
-	inputDisabled: "_inputDisabled_ie6ng_61",
-	hideScrollbars: "_hideScrollbars_ie6ng_67",
-	cell: "_cell_ie6ng_77",
-	disabledLink: "_disabledLink_ie6ng_87",
-	inputWrapper: "_inputWrapper_ie6ng_91",
-	numberInputWrapper: "_numberInputWrapper_ie6ng_106",
-	breakWord: "_breakWord_ie6ng_113",
-	inputCell: "_inputCell_ie6ng_116",
-	sliderCell: "_sliderCell_ie6ng_119",
-	staticCell: "_staticCell_ie6ng_123",
-	staticCellContent: "_staticCellContent_ie6ng_126",
-	unit: "_unit_ie6ng_148",
-	sortingCell: "_sortingCell_ie6ng_151",
-	sortingCellIcon: "_sortingCellIcon_ie6ng_162",
-	icon: "_icon_ie6ng_173",
-	checkBoxCell: "_checkBoxCell_ie6ng_177",
-	iconCellWrapper: "_iconCellWrapper_ie6ng_181",
-	actionsCell: "_actionsCell_ie6ng_185",
-	rightAligned: "_rightAligned_ie6ng_193",
-	centerAligned: "_centerAligned_ie6ng_199",
-	leftAligned: "_leftAligned_ie6ng_205",
-	popover: "_popover_ie6ng_208",
-	disabledPointerEvents: "_disabledPointerEvents_ie6ng_211"
+	inputInTable: "_inputInTable_1b0yl_1",
+	inputHover: "_inputHover_1b0yl_13",
+	inputFocus: "_inputFocus_1b0yl_18",
+	inputError: "_inputError_1b0yl_25",
+	inputWarning: "_inputWarning_1b0yl_26",
+	inputDisabled: "_inputDisabled_1b0yl_61",
+	hideScrollbars: "_hideScrollbars_1b0yl_67",
+	cell: "_cell_1b0yl_77",
+	disabledLink: "_disabledLink_1b0yl_87",
+	inputWrapper: "_inputWrapper_1b0yl_91",
+	numberInputWrapper: "_numberInputWrapper_1b0yl_106",
+	breakWord: "_breakWord_1b0yl_113",
+	inputCell: "_inputCell_1b0yl_116",
+	sliderCell: "_sliderCell_1b0yl_119",
+	staticCell: "_staticCell_1b0yl_123",
+	staticCellContent: "_staticCellContent_1b0yl_126",
+	unit: "_unit_1b0yl_147",
+	sortingCell: "_sortingCell_1b0yl_150",
+	sortingCellIcon: "_sortingCellIcon_1b0yl_161",
+	icon: "_icon_1b0yl_172",
+	checkBoxCell: "_checkBoxCell_1b0yl_176",
+	iconCellWrapper: "_iconCellWrapper_1b0yl_180",
+	actionsCell: "_actionsCell_1b0yl_184",
+	rightAligned: "_rightAligned_1b0yl_192",
+	centerAligned: "_centerAligned_1b0yl_198",
+	leftAligned: "_leftAligned_1b0yl_204",
+	popover: "_popover_1b0yl_207",
+	disabledPointerEvents: "_disabledPointerEvents_1b0yl_210"
 };
 const InputCell = ({ cell: e, columnAlignment: t, testId: n, type: r }) => /* @__PURE__ */ jsx(Input, {
 	name: e.name,
@@ -6460,12 +6460,12 @@ const Content = ({ title: e, okText: t, onClickOk: n, disableConfirmButton: r, c
 	children: e
 });
 var tree_module_default = {
-	tree: "_tree_1mtkj_1",
-	toggle: "_toggle_1mtkj_7",
-	dropTarget: "_dropTarget_1mtkj_14",
-	placeholder: "_placeholder_1mtkj_29",
-	draggingSource: "_draggingSource_1mtkj_35",
-	placeholderContainer: "_placeholderContainer_1mtkj_38"
+	tree: "_tree_1cqsz_1",
+	toggle: "_toggle_1cqsz_7",
+	dropTarget: "_dropTarget_1cqsz_14",
+	placeholder: "_placeholder_1cqsz_29",
+	draggingSource: "_draggingSource_1cqsz_35",
+	placeholderContainer: "_placeholderContainer_1cqsz_38"
 };
 const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, draggable: o, icons: s, onDrop: c }) => {
 	let { id: l, data: u } = t, { active: d, testId: f, onClick: p, actions: m = [] } = u, [h, _] = React.useState(!1), [v, y] = React.useState(0), b = (e) => {
@@ -6522,39 +6522,39 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 }, TreePlaceholder = ({ depth: e }) => /* @__PURE__ */ jsx("div", {
 	className: tree_module_default.placeholder,
 	style: { left: e * 24 }
-}), Tree = ({ list: e, draggable: t = !1, onListReorder: n, onChangeOpen: r, testId: i, isInitialOpen: a = !1, autoOpenActiveItems: o = !1, treeRef: s, itemHasChild: l, onItemToggle: u, icons: d, allowParentReassignment: f, stickyHeader: m, height: h }) => {
-	let g = s ?? useRef(null), _ = (e) => {
-		r && r(e);
-	}, v = (t) => {
+}), Tree = ({ list: e, canDrop: t, draggable: n = !1, onListReorder: r, onChangeOpen: i, testId: a, isInitialOpen: o = !1, autoOpenActiveItems: s = !1, treeRef: l, itemHasChild: u, onItemToggle: d, icons: f, allowParentReassignment: m, stickyHeader: h, height: g, render: _ }) => {
+	let v = l ?? useRef(null), y = (e) => {
+		i && i(e);
+	}, b = (t) => {
 		let n = e.items.find((e) => e.id === t);
-		return n && n.parent ? [n.parent, ...v(n.parent)] : [];
+		return n && n.parent ? [n.parent, ...b(n.parent)] : [];
 	};
 	useEffect(() => {
-		if (o) {
+		if (s) {
 			let t = e.items.find((e) => e.active);
 			if (t) {
-				let e = v(t.id);
-				g.current?.open(e);
+				let e = b(t.id);
+				v.current?.open(e);
 			}
 		}
-	}, [o, e.items]);
-	let y = (e, t) => e?.findIndex((e) => e?.id === t) ?? -1, b = (e, t) => {
-		let n = y(t, e?.parent);
+	}, [s, e.items]);
+	let x = (e, t) => e?.findIndex((e) => e?.id === t) ?? -1, S = (e, t) => {
+		let n = x(t, e?.parent);
 		if (n >= 0) {
 			let r = t?.find((e) => e?.id === t[n]?.parent);
 			e.parent = r ? r.id : 0;
 		}
-	}, x = (e, t) => t?.filter((t) => t?.id !== e?.id) ?? [], S = (e, t, n) => (n?.splice(t, 0, e), n), C = (e) => e.map(({ id: e, parent: t, droppable: n, data: r }) => ({
+	}, C = (e, t) => t?.filter((t) => t?.id !== e?.id) ?? [], w = (e, t, n) => (n?.splice(t, 0, e), n), T = (e) => e.map(({ id: e, parent: t, droppable: n, data: r }) => ({
 		id: e,
 		parent: t,
 		droppable: n,
 		...r
-	})), w = (e, t) => {
-		let { dragSource: r, dropTarget: i } = t, a = [...e];
-		if (!n) return;
-		let o = y(a, r?.id), s = y(a, r?.parent), c = [];
-		r?.parent === i?.id && o === 0 && f && (b(r, a), a = x(r, a), a = S(r, s, a)), c = C(a), n(c);
-	}, T = e?.items?.map(({ id: e, droppable: t, parent: n, name: r, onDrop: i,...a }) => ({
+	})), E = (e, t) => {
+		let { dragSource: n, dropTarget: i } = t, a = [...e];
+		if (!r) return;
+		let o = x(a, n?.id), s = x(a, n?.parent), c = [];
+		n?.parent === i?.id && o === 0 && m && (S(n, a), a = C(n, a), a = w(n, s, a)), c = T(a), r(c);
+	}, D = e?.items?.map(({ id: e, droppable: t, parent: n, name: r, onDrop: i,...a }) => ({
 		id: e,
 		text: r,
 		droppable: t,
@@ -6566,41 +6566,48 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 		}
 	}));
 	return /* @__PURE__ */ jsxs("div", {
-		"data-testid": i,
+		"data-testid": a,
 		className: list_module_default.list,
-		style: { height: h },
+		style: { height: g },
 		children: [e.name && !e.noHeader && /* @__PURE__ */ jsx(ListHeading, {
 			name: e.name,
 			actions: e.actions,
-			stickyHeader: m
+			stickyHeader: h
 		}), /* @__PURE__ */ jsx(DndProvider, {
 			backend: MultiBackend,
 			options: getBackendOptions(),
 			context: window,
 			children: /* @__PURE__ */ jsx(Tree$1, {
-				ref: g,
-				tree: T,
+				ref: v,
+				tree: D,
 				sort: !1,
 				insertDroppableFirst: !1,
-				canDrag: () => t,
-				canDrop: (e, { dragSource: t, dropTargetId: n }) => {
+				canDrag: () => n,
+				canDrop: t || ((e, { dragSource: t, dropTargetId: n }) => {
 					if (t?.parent === n) return !0;
-				},
+				}),
 				rootId: 0,
-				render: (e, { depth: n, isOpen: r, onToggle: i, hasChild: a }) => /* @__PURE__ */ jsx(TreeItem, {
-					hasChild: l ? l(e) : a,
+				render: (e, { depth: t, hasChild: r, handleRef: i, isOpen: a, onToggle: o }) => _ ? _(e, {
+					depth: t,
+					draggable: n,
+					handleRef: i,
+					hasChild: r,
+					isOpen: a,
+					onToggle: o
+				}) : /* @__PURE__ */ jsx(TreeItem, {
+					hasChild: u ? u(e) : r,
 					node: e,
-					depth: n,
-					isOpen: r,
+					depth: t,
+					isOpen: a,
 					onToggle: () => {
-						u?.(e, !r), i();
+						d?.(e, !a), o();
 					},
-					draggable: t,
-					icons: d,
+					draggable: n,
+					icons: f,
 					onDrop: e.data?.onDrop
 				}),
-				onDrop: w,
-				onChangeOpen: _,
+				onDrop: E,
+				onChangeOpen: y,
 				dropTargetOffset: 10,
 				placeholderRender: (e, { depth: t }) => /* @__PURE__ */ jsx(TreePlaceholder, { depth: t }),
 				placeholderComponent: "div",
@@ -6612,7 +6619,8 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 					dropTarget: tree_module_default.dropTarget,
 					placeholder: tree_module_default.placeholderContainer
 				},
-				initialOpen: a
+				initialOpen: o,
+				enableAnimateExpand: !0
 			})
 		})]
 	});
@@ -8573,7 +8581,10 @@ const countDeltas = (e) => (Array.isArray(e) ? e : e ? [e] : []).reduce((e, t) =
 		if (i) return i;
 	}
 	return "";
-}, toText = (e) => Array.isArray(e) ? e.length === 0 ? "" : e.some((e) => e && typeof e == "object") ? "Multiple changes..." : String(e) : e && typeof e == "object" ? Object.keys(e).length === 0 ? "" : "Multiple changes..." : String(e), defaultMessage = (e) => {
+}, toText = (e) => {
+	let t = (e) => isValueWithUnit(e) ? withPrettyUnitLabel(e) : String(e);
+	return Array.isArray(e) ? e.length === 0 ? "" : e.some((e) => e && typeof e == "object") ? "Multiple changes..." : e.map(t).join(", ") : e && typeof e == "object" ? Object.keys(e).length === 0 ? "" : "Multiple changes..." : t(e);
+}, defaultMessage = (e) => {
 	switch (e.length) {
 		case 1: {
 			let [t] = e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "5.11.7",
+  "version": "5.12.1",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {