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

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export declare type AuditLogOperation = 'Created' | 'Cloned' | 'Reverted' | 'Imp
 
 export declare type AuditLogSource = 'System' | 'Application' | 'API';
 
-export declare const Badge: ({ children, color, title, dot, margin, small, }: IBadgeProps) => JSX_2.Element;
+export declare const Badge: ({ children, color, textColor: textColorProp, title, dot, margin, small, }: IBadgeProps) => JSX_2.Element;
 
 export declare const Breadcrumb: ({ links, small }: IBreadcrumbProps) => JSX_2.Element;
 
@@ -215,6 +215,7 @@ declare interface IAuditLogProps {
 export declare interface IBadgeProps {
     children?: ReactNode;
     color?: string;
+    textColor?: string;
     title?: TStringOrNumber | ReactNode | null;
     dot?: boolean;
     margin?: TStringOrNumber | null;
@@ -1781,6 +1782,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 +2186,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

@@ -827,29 +827,28 @@ const Section$1 = ({ section: e, closeOnOptionClick: t, close: n, tree: r, path:
 	placement: e || (t ? "right-start" : "bottom-start")
 }), isStringNumberOrNode = (e) => isString(e) || isNumber(e) || isValidElement(e), getType = (e) => Array.isArray(e) ? "array" : typeof e;
 var badge_module_default = {
-	wrapper: "_wrapper_nwprz_1",
-	badge: "_badge_nwprz_5",
-	label: "_label_nwprz_11",
-	dark: "_dark_nwprz_23",
-	light: "_light_nwprz_26",
-	small: "_small_nwprz_29",
-	dot: "_dot_nwprz_33",
-	hasChildren: "_hasChildren_nwprz_39"
+	wrapper: "_wrapper_14vly_1",
+	badge: "_badge_14vly_5",
+	label: "_label_14vly_11",
+	small: "_small_14vly_23",
+	dot: "_dot_14vly_27",
+	hasChildren: "_hasChildren_14vly_33"
 }, isDark = (e) => {
 	let t = e.substring(1), n = parseInt(t, 16), r = n >> 16 & 255, i = n >> 8 & 255, a = n >> 0 & 255;
 	return .2126 * r + .7152 * i + .0722 * a < 128;
 };
-const Badge = ({ children: e, color: t = "", title: n = null, dot: r = !1, margin: i = null, small: a = !1 }) => {
-	let o = !(n === null && r === !1);
+const Badge = ({ children: e, color: t = "", textColor: n = "", title: r = null, dot: i = !1, margin: a = null, small: o = !1 }) => {
+	let s = !(r === null && i === !1), c = n || (isDark(t) ? "#fff" : "rgba(0, 0, 0, 0.6)");
 	return /* @__PURE__ */ jsxs("div", {
 		className: badge_module_default.wrapper,
-		children: [o && /* @__PURE__ */ jsx("sup", {
-			className: cx(badge_module_default.badge, isDark(t) ? badge_module_default.dark : badge_module_default.light, n === null ? badge_module_default.dot : badge_module_default.label, a ? badge_module_default.small : "", e ? badge_module_default.hasChildren : ""),
+		children: [s && /* @__PURE__ */ jsx("sup", {
+			className: cx(badge_module_default.badge, r === null ? badge_module_default.dot : badge_module_default.label, o ? badge_module_default.small : "", e ? badge_module_default.hasChildren : ""),
 			style: {
 				background: t || void 0,
-				margin: i || void 0
+				margin: a || void 0,
+				color: c
 			},
-			children: n
+			children: r
 		}), e]
 	});
 }, Button$1 = ({ trigger: e, label: t, colored: n, small: r, width: i, disabled: a, groupOrder: o, loading: c, error: l, warning: u, active: d, tabIndex: f }) => {
@@ -6733,6 +6732,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 +9112,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.4",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {