@oliasoft-open-source/react-ui-library 5.13.2 → 5.13.3

package/dist/index.d.ts

@@ -1781,6 +1781,16 @@ declare interface ITreeRowItem extends TRowType_2 {
     onDrop?: (event: default_2.DragEvent<HTMLDivElement>) => void;
 }
 
+export declare interface ITreeTableProps extends ITreeProps {
+    table: {
+        columnAlignment?: (Align.LEFT | Align.RIGHT)[];
+        columnWidths?: string[];
+        fixedWidth?: string;
+        headers?: TRowType_2[];
+        rows: ITreeRowItem[];
+    };
+}
+
 declare interface IUnitConfigItem {
     onChange?: (params: {
         oldUnit: string;
@@ -2175,6 +2185,8 @@ declare const TRANSLATION_FALLBACK: {
 
 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 TreeTable: ({ allowParentReassignment, autoOpenActiveItems, canDrop, draggable, icons, isInitialOpen, itemHasChild, onItemToggle, onListReorder, onChangeOpen, table, testId, treeRef, }: ITreeTableProps) => JSX_2.Element;
+
 export declare enum TriggerType {
     TEXT = "Text",
     BUTTON = "Button",

package/dist/index.js

@@ -6733,6 +6733,141 @@ 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"
+};
+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))`;
+	return /* @__PURE__ */ jsx("table", {
+		className: table_module_default.table,
+		"data-testid": b,
+		onDrop: p,
+		onDragEnter: u,
+		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),
+			children: [
+				r && /* @__PURE__ */ jsx("td", {
+					className: tree_table_module_default.dragCell,
+					children: /* @__PURE__ */ jsx("div", {
+						className: tree_table_module_default.drag,
+						onClick: (e) => e.stopPropagation(),
+						ref: i,
+						children: /* @__PURE__ */ jsx(Icon, { icon: IconType.DRAG })
+					})
+				}),
+				/* @__PURE__ */ jsx("td", {
+					className: tree_table_module_default.folderCell,
+					style: {
+						width: S,
+						minWidth: S,
+						maxWidth: S
+					},
+					children: (_ || a) && /* @__PURE__ */ jsx("div", {
+						className: tree_table_module_default.folder,
+						onClick: () => m(v),
+						onMouseDown: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsx(Button, {
+							basic: !0,
+							colored: c ? !0 : Color.MUTED,
+							disabled: !a,
+							small: !0,
+							round: !0,
+							icon: a && c ? (s == null ? void 0 : s.collapse) || IconType.COLLAPSE : (s == null ? void 0 : s.expand) || IconType.EXPAND
+						})
+					})
+				}),
+				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);
+				}),
+				o && /* @__PURE__ */ jsx(Cell, {
+					isHeader: !1,
+					cell: {
+						type: CellType.ACTIONS,
+						actions: x
+					}
+				})
+			]
+		}) })
+	});
+}, TreeTableHeader = ({ columnAlignment: e, columnWidths: t, draggable: n, hasRowActions: r, headers: i }) => /* @__PURE__ */ jsx("table", {
+	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,
+			width: t ? t[r] : void 0,
+			columnAlignment: e ? e[r] : void 0
+		}, r)),
+		r && /* @__PURE__ */ jsx(Cell, {
+			isHeader: !0,
+			cell: {
+				type: CellType.ACTIONS,
+				actions: i.actions,
+				width: 31
+			}
+		})
+	] }, a)) })
+}), TreeTable = ({ allowParentReassignment: e, autoOpenActiveItems: t = !1, canDrop: n, draggable: r = !1, icons: i, isInitialOpen: a = !1, itemHasChild: o, onItemToggle: s, onListReorder: c, onChangeOpen: l, table: u, testId: d, treeRef: f }) => {
+	let { columnAlignment: p, columnWidths: m, fixedWidth: h, headers: g, rows: _ = [] } = u, v = hasRowActions(_, g == null ? [] : g);
+	return /* @__PURE__ */ jsxs("div", {
+		className: tree_table_module_default.treeTable,
+		"data-testid": d,
+		style: { width: h },
+		children: [!!g && /* @__PURE__ */ jsx(TreeTableHeader, {
+			columnAlignment: p,
+			columnWidths: m,
+			draggable: r,
+			hasRowActions: v,
+			headers: g
+		}), /* @__PURE__ */ jsx(Tree, {
+			allowParentReassignment: e,
+			autoOpenActiveItems: t,
+			canDrop: n,
+			draggable: r,
+			icons: i,
+			isInitialOpen: a,
+			itemHasChild: o,
+			list: {
+				noHeader: !0,
+				items: _
+			},
+			onChangeOpen: l,
+			onItemToggle: s,
+			onListReorder: c,
+			render: (e, { depth: t, draggable: n, handleRef: r, hasChild: a, isOpen: o, onToggle: s }) => /* @__PURE__ */ jsx(TreeTableRow, {
+				node: e,
+				columnAlignment: p,
+				columnWidths: m,
+				depth: t,
+				draggable: n,
+				handleRef: r,
+				hasChild: a,
+				hasRowActions: v,
+				icons: i,
+				isOpen: o,
+				onToggle: s
+			}, e.id),
+			treeRef: f
+		})]
+	});
 }, useRunAfterUpdate = () => {
 	let e = useRef(null);
 	return useLayoutEffect(() => {
@@ -8978,4 +9113,4 @@ const ComparisonViewModal = ({ auditLog: e, auditLogs: t, data: n, isOpen: r, se
 		e === ConfigKeyType.Translations ? setConfig(e, getTranslations(t)) : setConfig(e, isPrimitiveValue(t) ? t : { ...t });
 	});
 };
-export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Collapse, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, UsageTracker, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };
+export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Collapse, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TreeTable, TriggerType, UnitInput, UnitTable, UsageTracker, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };

package/package.json

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