@oliasoft-open-source/react-ui-library 5.15.3 → 5.16.0

package/dist/index.d.ts

@@ -97,7 +97,7 @@ export declare enum Color {
     MUTED = "muted"
 }
 
-export declare const ColorInput: ({ columns, disabled, options, small, value, onChange, }: IColorInputProps) => JSX_2.Element;
+export declare const ColorInput: ({ columns, disabled, options, small, value, onChange, adjustColorsInDarkMode, }: IColorInputProps) => JSX_2.Element;
 
 export declare const Column: ({ background, borderLeft, borderRight, children, flex, flexbox, padding, scroll, showScrollbar, spacing, width, widthMobile, widthTablet, testId, }: ILayoutColumnProps) => JSX_2.Element;
 
@@ -347,6 +347,7 @@ export declare interface IColorInputProps {
     small?: boolean;
     value?: string;
     onChange?: (value: string) => void;
+    adjustColorsInDarkMode?: boolean;
 }
 
 /**
@@ -1798,6 +1799,7 @@ export declare interface ITreeProps {
         isOpen: boolean;
         onToggle: (id: TStringOrNumber) => void;
     }) => ReactElement;
+    placeholderIndent?: TStringOrNumber;
 }
 
 declare interface ITreeRowItem extends TRowType_2 {
@@ -1810,7 +1812,7 @@ declare interface ITreeRowItem extends TRowType_2 {
 
 export declare interface ITreeTableProps extends ITreeProps {
     table: {
-        columnAlignment?: (Align.LEFT | Align.RIGHT)[];
+        columnAlignment?: (Align.LEFT | Align.RIGHT | null)[];
         columnWidths?: string[];
         fixedWidth?: string;
         headers?: TRowType_2[];
@@ -2210,7 +2212,7 @@ declare const TRANSLATION_FALLBACK: {
     unknown: string;
 };
 
-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 const Tree: ({ list, canDrop, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, autoOpenActiveItems, treeRef: treeRefProp, itemHasChild, onItemToggle, icons, allowParentReassignment, stickyHeader, height, render, placeholderIndent, }: ITreeProps) => JSX_2.Element;
 
 export declare const TreeTable: ({ allowParentReassignment, autoOpenActiveItems, canDrop, draggable, icons, isInitialOpen, itemHasChild, onItemToggle, onListReorder, onChangeOpen, table, testId, treeRef, }: ITreeTableProps) => JSX_2.Element;
 

package/dist/index.js

@@ -1337,23 +1337,24 @@ const Popover = ({ children: t, content: n, placement: r = "top-center", closeOn
 	})] });
 };
 var color_input_module_default = {
-	colorInput: "_colorInput_hb750_1",
-	trigger: "_trigger_hb750_8",
-	buttonColor: "_buttonColor_hb750_12",
-	options: "_options_hb750_17",
-	option: "_option_hb750_17"
-};
-const ColorInput = ({ columns: e = 9, disabled: t, options: n = [], small: r, value: i, onChange: a }) => {
-	var o;
-	let [s, c] = useState(!1), l = (o = n.find((e) => e.value === i)) == null ? void 0 : o.label;
+	colorInput: "_colorInput_1j7vk_1",
+	trigger: "_trigger_1j7vk_8",
+	buttonColor: "_buttonColor_1j7vk_12",
+	options: "_options_1j7vk_17",
+	option: "_option_1j7vk_17",
+	adjustColorsInDarkMode: "_adjustColorsInDarkMode_1j7vk_26"
+};
+const ColorInput = ({ columns: e = 9, disabled: t, options: n = [], small: r, value: i, onChange: a, adjustColorsInDarkMode: o = !1 }) => {
+	var s;
+	let [c, l] = useState(!1), u = (s = n.find((e) => e.value === i)) == null ? void 0 : s.label;
 	return /* @__PURE__ */ jsx("div", {
-		className: color_input_module_default.colorInput,
+		className: cx(color_input_module_default.colorInput, o ? color_input_module_default.adjustColorsInDarkMode : void 0),
 		children: /* @__PURE__ */ jsx(Popover, {
 			placement: "bottom-start",
-			isOpen: s,
-			onToggle: c,
+			isOpen: c,
+			onToggle: l,
 			content: /* @__PURE__ */ jsx("div", {
-				className: color_input_module_default.options,
+				className: cx(color_input_module_default.options, o ? color_input_module_default.adjustColorsInDarkMode : void 0),
 				style: { gridTemplateColumns: `repeat(${e}, auto)` },
 				children: n.map((e) => /* @__PURE__ */ jsx("div", {
 					className: color_input_module_default.option,
@@ -1367,7 +1368,7 @@ const ColorInput = ({ columns: e = 9, disabled: t, options: n = [], small: r, va
 							style: { backgroundColor: e.value }
 						}),
 						onClick: () => {
-							a == null || a(e.value), c(!1);
+							a == null || a(e.value), l(!1);
 						}
 					}, e.value)
 				}))
@@ -1375,9 +1376,9 @@ const ColorInput = ({ columns: e = 9, disabled: t, options: n = [], small: r, va
 			children: /* @__PURE__ */ jsx(Button, {
 				disabled: t,
 				small: r,
-				active: s,
+				active: c,
 				width: r ? "var(--size-sm)" : "var(--size)",
-				tooltip: l,
+				tooltip: u,
 				label: /* @__PURE__ */ jsx("div", {
 					className: color_input_module_default.buttonColor,
 					style: { backgroundColor: i }
@@ -6679,32 +6680,32 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 			]
 		})
 	});
-}, TreePlaceholder = ({ depth: e }) => /* @__PURE__ */ jsx("div", {
+}, TreePlaceholder = ({ depth: e, indent: t = "var(--size-sm)" }) => /* @__PURE__ */ jsx("div", {
 	className: tree_module_default.placeholder,
-	style: { left: e * 24 }
-}), 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: _ }) => {
-	var v;
-	let y = l == null ? useRef(null) : l, b = (e) => {
+	style: { left: `calc(${t} * ${e})` }
+}), 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: _, placeholderIndent: v }) => {
+	var y;
+	let b = l == null ? useRef(null) : l, x = (e) => {
 		i && i(e);
-	}, x = (t) => {
+	}, S = (t) => {
 		let n = e.items.find((e) => e.id === t);
-		return n && n.parent ? [n.parent, ...x(n.parent)] : [];
+		return n && n.parent ? [n.parent, ...S(n.parent)] : [];
 	};
 	useEffect(() => {
 		if (s) {
 			let n = e.items.find((e) => e.active);
 			if (n) {
 				var t;
-				let e = x(n.id);
-				(t = y.current) == null || t.open(e);
+				let e = S(n.id);
+				(t = b.current) == null || t.open(e);
 			}
 		}
 	}, [s, e.items]);
-	let S = (e, t) => {
+	let C = (e, t) => {
 		var n;
 		return (n = e == null ? void 0 : e.findIndex((e) => (e == null ? void 0 : e.id) === t)) == null ? -1 : n;
-	}, C = (e, t) => {
-		let n = S(t, e == null ? void 0 : e.parent);
+	}, w = (e, t) => {
+		let n = C(t, e == null ? void 0 : e.parent);
 		if (n >= 0) {
 			let r = t == null ? void 0 : t.find((e) => {
 				var r;
@@ -6712,20 +6713,20 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 			});
 			e.parent = r ? r.id : 0;
 		}
-	}, w = (e, t) => {
+	}, T = (e, t) => {
 		var n;
 		return (n = t == null ? void 0 : t.filter((t) => (t == null ? void 0 : t.id) !== (e == null ? void 0 : e.id))) == null ? [] : n;
-	}, T = (e, t, n) => (n == null || n.splice(t, 0, e), n), E = (e) => e.map(({ id: e, parent: t, droppable: n, data: r }) => ({
+	}, E = (e, t, n) => (n == null || n.splice(t, 0, e), n), D = (e) => e.map(({ id: e, parent: t, droppable: n, data: r }) => ({
 		id: e,
 		parent: t,
 		droppable: n,
 		...r
-	})), D = (e, t) => {
+	})), O = (e, t) => {
 		let { dragSource: n, dropTarget: i } = t, a = [...e];
 		if (!r) return;
-		let o = S(a, n == null ? void 0 : n.id), s = S(a, n == null ? void 0 : n.parent), c = [];
-		(n == null ? void 0 : n.parent) === (i == null ? void 0 : i.id) && o === 0 && m && (C(n, a), a = w(n, a), a = T(n, s, a)), c = E(a), r(c);
-	}, O = e == null || (v = e.items) == null ? void 0 : v.map(({ id: e, droppable: t, parent: n, name: r, onDrop: i, ...a }) => ({
+		let o = C(a, n == null ? void 0 : n.id), s = C(a, n == null ? void 0 : n.parent), c = [];
+		(n == null ? void 0 : n.parent) === (i == null ? void 0 : i.id) && o === 0 && m && (w(n, a), a = T(n, a), a = E(n, s, a)), c = D(a), r(c);
+	}, k = e == null || (y = e.items) == null ? void 0 : y.map(({ id: e, droppable: t, parent: n, name: r, onDrop: i, ...a }) => ({
 		id: e,
 		text: r,
 		droppable: t,
@@ -6749,8 +6750,8 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 			options: getBackendOptions(),
 			context: window,
 			children: /* @__PURE__ */ jsx(Tree$1, {
-				ref: y,
-				tree: O,
+				ref: b,
+				tree: k,
 				sort: !1,
 				insertDroppableFirst: !1,
 				canDrag: () => n,
@@ -6780,10 +6781,13 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 						onDrop: (s = e.data) == null ? void 0 : s.onDrop
 					});
 				},
-				onDrop: D,
-				onChangeOpen: b,
+				onDrop: O,
+				onChangeOpen: x,
 				dropTargetOffset: 10,
-				placeholderRender: (e, { depth: t }) => /* @__PURE__ */ jsx(TreePlaceholder, { depth: t }),
+				placeholderRender: (e, { depth: t }) => /* @__PURE__ */ jsx(TreePlaceholder, {
+					depth: t,
+					indent: v
+				}),
 				placeholderComponent: "div",
 				listComponent: "div",
 				listItemComponent: "div",
@@ -6800,17 +6804,19 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 	});
 };
 var tree_table_module_default = {
-	treeTable: "_treeTable_3rlrs_1",
-	treeTableHeader: "_treeTableHeader_3rlrs_21",
-	folderCell: "_folderCell_3rlrs_29",
-	dragCell: "_dragCell_3rlrs_30",
-	drag: "_drag_3rlrs_30",
-	folder: "_folder_3rlrs_29",
-	treeTableRow: "_treeTableRow_3rlrs_60",
-	nested: "_nested_3rlrs_63"
+	treeTable: "_treeTable_1ywvy_1",
+	treeTableHeader: "_treeTableHeader_1ywvy_22",
+	folderCell: "_folderCell_1ywvy_30",
+	dragCell: "_dragCell_1ywvy_31",
+	drag: "_drag_1ywvy_31",
+	folder: "_folder_1ywvy_30",
+	active: "_active_1ywvy_61"
 };
 const TreeTableRow = ({ columnAlignment: e, columnWidths: t, depth: n, draggable: r, handleRef: i, hasChild: a, hasRowActions: o, icons: s, isOpen: c, node: l, onDragEnter: u, onDragOver: d, onDragLeave: f, onDrop: p, onToggle: m }) => {
-	let { data: h, droppable: _ } = l, { id: v, cells: y, testId: b, actions: x = [] } = h, S = `max(calc(var(--size) * ${a ? n + 1 : n}), var(--size))`;
+	let { data: h, droppable: _ } = l, { id: v, cells: y, testId: b, actions: x = [], active: S, onRowClick: C } = h, w = _ || a, T = (e) => {
+		let r = t ? t[e] : void 0;
+		return e === 0 ? `calc(${r} - ${`calc(var(--size) * ${w ? n + 1 : n})`})` : r;
+	};
 	return /* @__PURE__ */ jsx("table", {
 		className: table_module_default.table,
 		"data-testid": b,
@@ -6819,7 +6825,8 @@ const TreeTableRow = ({ columnAlignment: e, columnWidths: t, depth: n, draggable
 		onDragOver: d,
 		onDragLeave: f,
 		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", {
-			className: cx(tree_table_module_default.treeTableRow, n > 0 && tree_table_module_default.nested),
+			onClick: C,
+			className: cx(tree_table_module_default.treeTableRow, S ? tree_table_module_default.active : void 0),
 			children: [
 				r && /* @__PURE__ */ jsx("td", {
 					className: tree_table_module_default.dragCell,
@@ -6830,14 +6837,10 @@ const TreeTableRow = ({ columnAlignment: e, columnWidths: t, depth: n, draggable
 						children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
 					})
 				}),
-				/* @__PURE__ */ jsx("td", {
+				Array.from({ length: n }).map((e, t) => /* @__PURE__ */ jsx("td", { className: tree_table_module_default.folderCell }, t)),
+				w && /* @__PURE__ */ jsx("td", {
 					className: tree_table_module_default.folderCell,
-					style: {
-						width: S,
-						minWidth: S,
-						maxWidth: S
-					},
-					children: (_ || a) && /* @__PURE__ */ jsx("div", {
+					children: /* @__PURE__ */ jsx("div", {
 						className: tree_table_module_default.folder,
 						onClick: () => m(v),
 						onMouseDown: (e) => e.stopPropagation(),
@@ -6851,15 +6854,12 @@ const TreeTableRow = ({ columnAlignment: e, columnWidths: t, depth: n, draggable
 						})
 					})
 				}),
-				y.map((n, r) => {
-					let i = t ? t[r] : void 0;
-					return /* @__PURE__ */ jsx(Cell, {
-						isHeader: !1,
-						cell: n,
-						width: r === 0 ? `calc(${i} - ${S} + var(--size))` : i,
-						columnAlignment: e ? e[r] : null
-					}, r);
-				}),
+				y.map((t, n) => /* @__PURE__ */ jsx(Cell, {
+					isHeader: !1,
+					cell: t,
+					width: T(n),
+					columnAlignment: e ? e[n] : null
+				}, n)),
 				o && /* @__PURE__ */ jsx(Cell, {
 					isHeader: !1,
 					cell: {
@@ -6874,7 +6874,6 @@ const TreeTableRow = ({ columnAlignment: e, columnWidths: t, depth: n, draggable
 	className: cx(table_module_default.table, tree_table_module_default.treeTableHeader),
 	children: /* @__PURE__ */ jsx("thead", { children: i.map((i, a) => /* @__PURE__ */ jsxs("tr", { children: [
 		n && /* @__PURE__ */ jsx("th", { className: tree_table_module_default.dragCell }),
-		/* @__PURE__ */ jsx("th", { className: tree_table_module_default.folderCell }),
 		i.cells.map((n, r) => /* @__PURE__ */ jsx(Cell, {
 			isHeader: !0,
 			cell: n,
@@ -6917,6 +6916,7 @@ const TreeTableRow = ({ columnAlignment: e, columnWidths: t, depth: n, draggable
 			onChangeOpen: l,
 			onItemToggle: s,
 			onListReorder: c,
+			placeholderIndent: "var(--size)",
 			render: (e, { depth: t, draggable: n, handleRef: r, hasChild: a, isOpen: o, onToggle: s }) => /* @__PURE__ */ jsx(TreeTableRow, {
 				node: e,
 				columnAlignment: p,

package/package.json

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