@oliasoft-open-source/react-ui-library 5.13.6-beta-2 → 5.13.6

package/dist/index.d.ts

@@ -1239,17 +1239,6 @@ export declare interface IRadioButtonProps {
     classForContainer?: 'grouped fields' | 'inline fields';
 }
 
-declare interface IRadioCell extends TCommonCell {
-    type: TCellType;
-    name: TStringOrNumber;
-    value: TStringOrNumber;
-    selected: boolean;
-    disabled?: boolean;
-    small?: boolean;
-    onChange: (evt: default_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    testId?: string;
-}
-
 declare interface IReorderData {
     from?: number;
     to?: number;
@@ -2032,9 +2021,9 @@ export declare type TButtonPosition = 'top' | 'bottom';
 
 export declare type TButtonType = 'submit' | 'button' | 'reset';
 
-declare type TCellShape = IPopoverCell | IStaticCell | ISelectCell | IHelpIconCell | ILibraryIconCell | ICheckBoxCell | IIconCell | IInputCell | ILinkCell | INumberInputCell | IActionCell | IRadioCell | ISortCell | ISliderCell | ISimpleCell;
+declare type TCellShape = IPopoverCell | IStaticCell | ISelectCell | IHelpIconCell | ILibraryIconCell | ICheckBoxCell | IIconCell | IInputCell | ILinkCell | INumberInputCell | IActionCell | ISortCell | ISliderCell | ISimpleCell;
 
-declare type TCellType = 'Static' | 'Icon' | 'Select' | 'Input' | 'NumberInput' | 'Popover' | 'CheckBox' | 'Radio' | 'Actions' | 'Link' | 'Slider' | 'Unit' | string;
+declare type TCellType = 'Static' | 'Icon' | 'Select' | 'Input' | 'NumberInput' | 'Popover' | 'CheckBox' | 'Actions' | 'Link' | 'Slider' | 'Unit' | string;
 
 export declare type TChangeEvent<T extends HTMLElement = HTMLInputElement> = ChangeEvent<T> & {
     target: T | {

package/dist/index.js

@@ -22,11 +22,10 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { SimplifyAP } from "simplify-ts";
 import Papa from "papaparse";
 import { Slide, ToastContainer as Toaster, toast as toast$1 } from "react-toastify";
-import { isNil as isNil$1 } from "es-toolkit";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import Placeholder from "@tiptap/extension-placeholder";
-import { Markdown } from "@tiptap/markdown";
+import { isNullOrUndefined } from "remirror";
+import { BoldExtension, BulletListExtension, CodeExtension, ItalicExtension, MarkdownExtension, OrderedListExtension, PlaceholderExtension } from "remirror/extensions";
+import { EditorComponent, Remirror, useActive, useCommands, useRemirror } from "@remirror/react";
+import "remirror/styles/all.css";
 import { DndProvider } from "react-dnd";
 import { MultiBackend, Tree as Tree$1, getBackendOptions } from "@minoru/react-dnd-treeview";
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
@@ -3587,55 +3586,7 @@ const Popover = ({ children: t, content: n, placement: r = "top-center", closeOn
 			})
 		})
 	});
-};
-var radio_button_module_default = {
-	wrapper: "_wrapper_1homz_1",
-	inline: "_inline_1homz_1",
-	radio: "_radio_1homz_5",
-	labelMargin: "_labelMargin_1homz_8",
-	small: "_small_1homz_27",
-	noMargin: "_noMargin_1homz_32",
-	noLabel: "_noLabel_1homz_36",
-	disabled: "_disabled_1homz_96",
-	isInTable: "_isInTable_1homz_112",
-	helpIconEnabled: "_helpIconEnabled_1homz_117"
-};
-const RadioInput = ({ name: e, label: t, value: n, selected: r, disabled: i = !1, small: a = !1, onChange: o, noMargin: s = !1, testId: c, helpText: l, onClickHelp: u, textTransform: d = TextTransform.CAPITALIZE }) => {
-	let f = l || u;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx(radio_button_module_default.radio, i ? radio_button_module_default.disabled : null, a ? radio_button_module_default.small : null, s ? radio_button_module_default.noMargin : null, t ? null : radio_button_module_default.noLabel),
-		onClick: o,
-		"data-testid": c,
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				type: InputType.RADIO,
-				value: n,
-				checked: r,
-				onChange: () => {},
-				disabled: i
-			}),
-			/* @__PURE__ */ jsx("label", {
-				"data-name": e,
-				"data-value": n,
-				style: { textTransform: d },
-				children: t
-			}),
-			f && /* @__PURE__ */ jsx("div", {
-				className: radio_button_module_default.helpIconEnabled,
-				onClick: u,
-				children: /* @__PURE__ */ jsx(HelpIcon, { text: l })
-			})
-		]
-	});
-}, RadioCell = ({ cell: e, testId: t }) => /* @__PURE__ */ jsx(RadioInput, {
-	selected: e.selected,
-	name: e.name,
-	value: e.value,
-	noMargin: !0,
-	disabled: e.disabled,
-	onChange: (t) => e.onChange(t),
-	testId: t
-}), CellWrapper = ({ cell: e, isHeader: t, columnAlignment: n, testId: r }) => {
+}, CellWrapper = ({ cell: e, isHeader: t, columnAlignment: n, testId: r }) => {
 	if (!e) return null;
 	switch (e.type) {
 		case "Input":
@@ -3654,10 +3605,6 @@ const RadioInput = ({ name: e, label: t, value: n, selected: r, disabled: i = !1
 			cell: e,
 			testId: r
 		});
-		case "Radio": return /* @__PURE__ */ jsx(RadioCell, {
-			cell: e,
-			testId: r
-		});
 		case "Slider": return /* @__PURE__ */ jsx(SliderCell, { cell: e });
 		case "Icon": return /* @__PURE__ */ jsx(IconCell, { cell: e });
 		case "Actions": return /* @__PURE__ */ jsx(ActionsCell, { cell: e });
@@ -3670,7 +3617,7 @@ const RadioInput = ({ name: e, label: t, value: n, selected: r, disabled: i = !1
 	}
 };
 let CellType = /* @__PURE__ */ function(e) {
-	return e.INPUT = "Input", e.NUMBER_INPUT = "NumberInput", e.SELECT = "Select", e.POPOVER = "Popover", e.SLIDER = "Slider", e.CHECKBOX = "CheckBox", e.RADIO = "Radio", e.ACTIONS = "Actions", e.AUTO_UNIT = "AutoUnit", e.UNIT = "Unit", e.STATIC = "Static", e;
+	return e.INPUT = "Input", e.NUMBER_INPUT = "NumberInput", e.SELECT = "Select", e.POPOVER = "Popover", e.SLIDER = "Slider", e.CHECKBOX = "CheckBox", e.ACTIONS = "Actions", e.AUTO_UNIT = "AutoUnit", e.UNIT = "Unit", e.STATIC = "Static", e;
 }({});
 const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment: r = Align.LEFT, width: i, testId: a }) => {
 	var o;
@@ -3679,7 +3626,7 @@ const Cell = ({ cell: e, isHeader: t, columnHeaderAlignment: n, columnAlignment:
 		bodyAlignment: r,
 		headerAlignment: n,
 		isHeader: t
-	}, m = getCellAlignment(f, cell_module_default), h = getCellAlignment(f, cell_module_default, !0), _ = e.type === CellType.INPUT || e.type === CellType.NUMBER_INPUT || e.type === CellType.SELECT || e.type === CellType.POPOVER ? cell_module_default.inputCell : e.type === CellType.SLIDER ? cell_module_default.sliderCell : e.type === CellType.CHECKBOX || e.type === CellType.RADIO ? cell_module_default.checkBoxCell : e.type === CellType.ACTIONS ? cell_module_default.actionsCell : cell_module_default.staticCell, v = cx(cell_module_default.cell, _, e.hasSort ? cell_module_default.sortingCell : null, m, e.breakWord ? cell_module_default.breakWord : ""), y = (o = u == null ? i : u) == null ? void 0 : o, b = e.type === CellType.STATIC || !e.type, x = {
+	}, m = getCellAlignment(f, cell_module_default), h = getCellAlignment(f, cell_module_default, !0), _ = e.type === CellType.INPUT || e.type === CellType.NUMBER_INPUT || e.type === CellType.SELECT || e.type === CellType.POPOVER ? cell_module_default.inputCell : e.type === CellType.SLIDER ? cell_module_default.sliderCell : e.type === CellType.CHECKBOX ? cell_module_default.checkBoxCell : e.type === CellType.ACTIONS ? cell_module_default.actionsCell : cell_module_default.staticCell, v = cx(cell_module_default.cell, _, e.hasSort ? cell_module_default.sortingCell : null, m, e.breakWord ? cell_module_default.breakWord : ""), y = (o = u == null ? i : u) == null ? void 0 : o, b = e.type === CellType.STATIC || !e.type, x = {
 		width: y,
 		minWidth: y,
 		textTransform: t && b ? TextTransform.CAPITALIZE : void 0,
@@ -5055,7 +5002,7 @@ const normalizeParsedResult = (e) => {
 		onClickCopyClipboard: useCallback(async (e) => {
 			let t = await v();
 			if (!t) return;
-			let { fields: n = [], units: r = [], rows: a = [] } = t, o = (r == null ? [] : r).map((e) => e != null && e.length ? e : placeholder$1).slice(0, n.length), s = (e, t) => t === "comma" ? e.replace(/\./g, ",") : e, c = unParse(n, o, a.map((t) => t.map((t) => isNil$1(t) ? "" : s(t.toString(), e))), { delimiter: "	" });
+			let { fields: n = [], units: r = [], rows: a = [] } = t, o = (r == null ? [] : r).map((e) => e != null && e.length ? e : placeholder$1).slice(0, n.length), s = (e, t) => t === "comma" ? e.replace(/\./g, ",") : e, c = unParse(n, o, a.map((t) => t.map((t) => isNullOrUndefined(t) ? "" : s(t.toString(), e))), { delimiter: "	" });
 			try {
 				await navigator.clipboard.writeText(c), transitionToast({ message: {
 					type: "Success",
@@ -5978,7 +5925,46 @@ const PrintHeader = ({ logo: e, alt: t, logoWidth: n = "100px" }) => /* @__PURE_
 	alt: t,
 	className: print_header_module_default.printHeader,
 	style: { width: n }
-}), RadioButton = ({ name: e, label: t, options: n, value: r, onChange: i, disabled: a = !1, small: o = !1, noMargin: c = !1, onClick: l = () => {}, inline: u = !1, mainLabel: d = "", radioButtonsData: f, classForContainer: p = "grouped fields" }) => {
+});
+var radio_button_module_default = {
+	wrapper: "_wrapper_1fbik_1",
+	inline: "_inline_1fbik_1",
+	radio: "_radio_1fbik_5",
+	labelMargin: "_labelMargin_1fbik_8",
+	small: "_small_1fbik_27",
+	noMargin: "_noMargin_1fbik_32",
+	disabled: "_disabled_1fbik_90",
+	isInTable: "_isInTable_1fbik_106",
+	helpIconEnabled: "_helpIconEnabled_1fbik_111"
+};
+const RadioInput = ({ name: e, label: t, value: n, selected: r, disabled: i = !1, small: a = !1, onChange: o, noMargin: s = !1, testId: c, helpText: l, onClickHelp: u, textTransform: d = TextTransform.CAPITALIZE }) => {
+	let f = l || u;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(radio_button_module_default.radio, i ? radio_button_module_default.disabled : null, a ? radio_button_module_default.small : null, s ? radio_button_module_default.noMargin : null),
+		onClick: o,
+		"data-testid": c,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: InputType.RADIO,
+				value: n,
+				checked: r,
+				onChange: () => {},
+				disabled: i
+			}),
+			/* @__PURE__ */ jsx("label", {
+				"data-name": e,
+				"data-value": n,
+				style: { textTransform: d },
+				children: t
+			}),
+			f && /* @__PURE__ */ jsx("div", {
+				className: radio_button_module_default.helpIconEnabled,
+				onClick: u,
+				children: /* @__PURE__ */ jsx(HelpIcon, { text: l })
+			})
+		]
+	});
+}, RadioButton = ({ name: e, label: t, options: n, value: r, onChange: i, disabled: a = !1, small: o = !1, noMargin: c = !1, onClick: l = () => {}, inline: u = !1, mainLabel: d = "", radioButtonsData: f, classForContainer: p = "grouped fields" }) => {
 	let m = useContext(DisabledContext), h = f !== void 0, { simpleInputs: _, options: v, selectedOptions: y } = h ? {
 		simpleInputs: !1,
 		options: f,
@@ -6017,95 +6003,94 @@ var rich_text_toolbar_module_default = {
 let RichTextIcon = /* @__PURE__ */ function(e) {
 	return e.BOLD = "bold", e.ITALIC = "italic", e.CODE = "code", e.UL = "ul", e.OL = "ol", e;
 }({});
-const RichTextToolbar = ({ editor: e, disabled: t = !1, toolbarComponent: n = null }) => {
-	var r, i, a, o, s;
-	let c = [
+const RichTextToolbar = ({ disabled: e = !1, toolbarComponent: t = null }) => {
+	let { focus: n, toggleBold: r, toggleBulletList: i, toggleCode: a, toggleItalic: o, toggleOrderedList: s } = useCommands(), c = useActive(), l = [
 		{
 			icon: RichTextIcon.BOLD,
-			onClick: () => e == null ? void 0 : e.chain().focus().toggleBold().run(),
-			active: (r = e == null ? void 0 : e.isActive("bold")) == null ? !1 : r
+			onClick: r,
+			active: c.bold()
 		},
 		{
 			icon: RichTextIcon.ITALIC,
-			onClick: () => e == null ? void 0 : e.chain().focus().toggleItalic().run(),
-			active: (i = e == null ? void 0 : e.isActive("italic")) == null ? !1 : i
+			onClick: o,
+			active: c.italic()
 		},
 		{
 			icon: RichTextIcon.CODE,
-			onClick: () => e == null ? void 0 : e.chain().focus().toggleCode().run(),
-			active: (a = e == null ? void 0 : e.isActive("code")) == null ? !1 : a
+			onClick: a,
+			active: c.code()
 		},
 		{
 			icon: RichTextIcon.UL,
-			onClick: () => e == null ? void 0 : e.chain().focus().toggleBulletList().run(),
-			active: (o = e == null ? void 0 : e.isActive("bulletList")) == null ? !1 : o
+			onClick: i,
+			active: c.bulletList()
 		},
 		{
 			icon: RichTextIcon.OL,
-			onClick: () => e == null ? void 0 : e.chain().focus().toggleOrderedList().run(),
-			active: (s = e == null ? void 0 : e.isActive("orderedList")) == null ? !1 : s
+			onClick: s,
+			active: c.orderedList()
 		}
 	];
 	return /* @__PURE__ */ jsxs("div", {
 		className: rich_text_toolbar_module_default.richTextToolbarContainer,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: rich_text_toolbar_module_default.richTextToolbar,
-			children: c.map((e, n) => /* @__PURE__ */ jsx(Button, {
+			children: l.map((t, r) => /* @__PURE__ */ jsx(Button, {
 				small: !0,
 				round: !0,
 				basic: !0,
-				icon: e.icon,
+				icon: t.icon,
 				colored: Color.MUTED,
-				onClick: e.onClick,
-				active: e.active,
-				disabled: t
-			}, n))
-		}), n]
+				onClick: () => {
+					t.onClick(), n();
+				},
+				active: t.active,
+				disabled: e
+			}, r))
+		}), t]
 	});
 };
 var rich_text_input_module_default = {
-	inputInTable: "_inputInTable_gb097_1",
-	inputHover: "_inputHover_gb097_13",
-	inputFocus: "_inputFocus_gb097_18",
-	inputError: "_inputError_gb097_25",
-	inputWarning: "_inputWarning_gb097_26",
-	inputDisabled: "_inputDisabled_gb097_61",
-	hideScrollbars: "_hideScrollbars_gb097_67",
-	richTextInput: "_richTextInput_gb097_77"
+	inputInTable: "_inputInTable_1fb4l_1",
+	inputHover: "_inputHover_1fb4l_13",
+	inputFocus: "_inputFocus_1fb4l_18",
+	inputError: "_inputError_1fb4l_25",
+	inputWarning: "_inputWarning_1fb4l_26",
+	inputDisabled: "_inputDisabled_1fb4l_61",
+	hideScrollbars: "_hideScrollbars_1fb4l_67",
+	richTextInput: "_richTextInput_1fb4l_77"
 };
 const RichTextInput = memo(forwardRef(({ placeholder: e, onChange: t, value: n, disabled: r, toolbarComponent: i }, a) => {
-	let o = useContext(DisabledContext), u = r || o, d = useEditor({
-		extensions: [
-			StarterKit,
-			Placeholder.configure({ placeholder: e }),
-			Markdown
-		],
-		content: n == null ? "" : n,
-		contentType: "markdown",
-		editable: !u,
-		onUpdate: ({ editor: e }) => {
-			t == null || t(e.getMarkdown());
-		}
+	let c = useContext(DisabledContext), u = r || c, { manager: d, state: f, setState: p, getContext: m } = useRemirror({
+		extensions: useCallback(() => [
+			new BoldExtension({}),
+			new BulletListExtension({}),
+			new CodeExtension(),
+			new ItalicExtension(),
+			new MarkdownExtension({}),
+			new OrderedListExtension(),
+			new PlaceholderExtension({ placeholder: e })
+		], [e]),
+		content: n,
+		selection: "start",
+		stringHandler: "markdown"
 	});
-	return useEffect(() => {
-		if (!d) return;
-		let e = d.getMarkdown();
-		n !== void 0 && n !== e && d.commands.setContent(n, {
-			emitUpdate: !1,
-			contentType: "markdown"
-		});
-	}, [n, d]), useEffect(() => {
-		d && d.setEditable(!u);
-	}, [u, d]), useImperativeHandle(a, () => ({
-		clearContent: () => d == null ? void 0 : d.commands.clearContent(!0),
-		editor: d
-	}), [d]), /* @__PURE__ */ jsxs("div", {
+	return useImperativeHandle(a, () => m(), [m]), /* @__PURE__ */ jsx("div", {
 		className: rich_text_input_module_default.richTextInput,
-		children: [/* @__PURE__ */ jsx(RichTextToolbar, {
-			editor: d,
-			disabled: u,
-			toolbarComponent: i
-		}), /* @__PURE__ */ jsx(EditorContent, { editor: d })]
+		children: /* @__PURE__ */ jsxs(Remirror, {
+			manager: d,
+			state: f,
+			placeholder: e,
+			onChange: ({ helpers: e, state: n }) => {
+				let r = e.getMarkdown(n);
+				t && t(r), p(n);
+			},
+			editable: !u,
+			children: [/* @__PURE__ */ jsx(RichTextToolbar, {
+				disabled: u,
+				toolbarComponent: i
+			}), /* @__PURE__ */ jsx(EditorComponent, {})]
+		})
 	});
 }));
 var row_module_default = { row: "_row_n16je_1" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "5.13.6-beta-2",
+  "version": "5.13.6",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {
@@ -39,10 +39,9 @@
   "dependencies": {
     "@fontsource/noto-sans": "^5.2.5",
     "@minoru/react-dnd-treeview": "^3.5.0",
+    "@remirror/pm": "^3.0.1",
+    "@remirror/react": "^3.0.3",
     "@tanstack/react-virtual": "^3.13.2",
-    "@tiptap/extension-placeholder": "^3.20.0",
-    "@tiptap/react": "^3.20.0",
-    "@tiptap/starter-kit": "^3.20.0",
     "@types/rc-slider": "^9.3.1",
     "@types/react-resizable": "^3.0.8",
     "@types/react-window": "^1.8.8",
@@ -65,10 +64,10 @@
     "react-toastify": "^9.1.3",
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.11",
+    "remirror": "^3.0.3",
     "resize-observer-polyfill": "^1.5.1",
     "simplify-ts": "^1.0.2",
-    "styled-components": "^6.1.15",
-    "@tiptap/markdown": "^3.20.0"
+    "styled-components": "^6.1.15"
   },
   "devDependencies": {
     "@dmsnell/diff-match-patch": "^1.1.0",