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

package/dist/index.d.ts

@@ -8,10 +8,12 @@ import { ElementType as ElementType_2 } from 'react';
 import { FC } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FocusEventHandler } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { Id } from 'react-toastify';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { KeyboardEventHandler } from 'react';
+import { MemoExoticComponent } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { MutableRefObject } from 'react';
@@ -21,6 +23,7 @@ import { Property } from 'csstype';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { ToastContainer as Toaster } from 'react-toastify';
 
@@ -1778,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;
@@ -1956,7 +1969,7 @@ export declare const RadioButton: ({ name, label: rawLabel, options: rawOptions,
 
 export declare const readFile: (file?: Blob, method?: TFileReaderMethod) => Promise<string | ArrayBuffer | null>;
 
-export declare const RichTextInput: default_2.ForwardRefExoticComponent<IRichTextInputProps & default_2.RefAttributes<any>>;
+export declare const RichTextInput: MemoExoticComponent<ForwardRefExoticComponent<IRichTextInputProps & RefAttributes<any>>>;
 
 export declare const Row: ({ alignItems, justifyContent, children, flex, height, marginBottom, marginTop, spacing: spacingProp, wrap, testId, }: IRowProps) => JSX_2.Element;
 
@@ -2172,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

@@ -6061,9 +6061,9 @@ var rich_text_input_module_default = {
 	hideScrollbars: "_hideScrollbars_1fb4l_67",
 	richTextInput: "_richTextInput_1fb4l_77"
 };
-const RichTextInput = forwardRef(({ placeholder: e, onChange: t, value: n, disabled: r, toolbarComponent: i }, a) => {
-	let o = useContext(DisabledContext), c = r || o, { manager: u, state: d, setState: f, getContext: p } = useRemirror({
-		extensions: () => [
+const RichTextInput = memo(forwardRef(({ placeholder: e, onChange: t, value: n, disabled: r, toolbarComponent: i }, a) => {
+	let c = useContext(DisabledContext), u = r || c, { manager: d, state: f, setState: p, getContext: m } = useRemirror({
+		extensions: useCallback(() => [
 			new BoldExtension({}),
 			new BulletListExtension({}),
 			new CodeExtension(),
@@ -6071,29 +6071,29 @@ const RichTextInput = forwardRef(({ placeholder: e, onChange: t, value: n, disab
 			new MarkdownExtension({}),
 			new OrderedListExtension(),
 			new PlaceholderExtension({ placeholder: e })
-		],
+		], [e]),
 		content: n,
 		selection: "start",
 		stringHandler: "markdown"
 	});
-	return useImperativeHandle(a, () => p(), [p]), /* @__PURE__ */ jsx("div", {
+	return useImperativeHandle(a, () => m(), [m]), /* @__PURE__ */ jsx("div", {
 		className: rich_text_input_module_default.richTextInput,
 		children: /* @__PURE__ */ jsxs(Remirror, {
-			manager: u,
-			state: d,
+			manager: d,
+			state: f,
 			placeholder: e,
 			onChange: ({ helpers: e, state: n }) => {
 				let r = e.getMarkdown(n);
-				t && t(r), f(n);
+				t && t(r), p(n);
 			},
-			editable: !c,
+			editable: !u,
 			children: [/* @__PURE__ */ jsx(RichTextToolbar, {
-				disabled: c,
+				disabled: u,
 				toolbarComponent: i
 			}), /* @__PURE__ */ jsx(EditorComponent, {})]
 		})
 	});
-});
+}));
 var row_module_default = { row: "_row_n16je_1" };
 const Row = ({ alignItems: t = "initial", justifyContent: n = "initial", children: r = null, flex: a = !1, height: o = "auto", marginBottom: s = "0", marginTop: c = "0", spacing: l = "var(--padding)", wrap: u = !1, testId: d = null }) => {
 	let f = typeof l == "number" ? `${l}px` : l, p = (r === null || r === !1 ? [] : Array.isArray(r) ? r.filter((e) => isValidElement(e)) : [r]).map((t, n) => /* @__PURE__ */ jsx(React.Fragment, { children: React.cloneElement(t, { spacing: f }) }, n));
@@ -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.1",
+  "version": "5.13.3",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {