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

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,10 +22,11 @@ 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 { 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 { 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 { DndProvider } from "react-dnd";
 import { MultiBackend, Tree as Tree$1, getBackendOptions } from "@minoru/react-dnd-treeview";
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
@@ -3586,55 +3587,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":
@@ -3653,10 +3606,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 });
@@ -3669,7 +3618,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;
@@ -3678,7 +3627,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,
@@ -5054,7 +5003,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) => isNullOrUndefined(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) => isNil$1(t) ? "" : s(t.toString(), e))), { delimiter: "	" });
 			try {
 				await navigator.clipboard.writeText(c), transitionToast({ message: {
 					type: "Success",
@@ -5977,7 +5926,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,
@@ -6016,94 +6004,95 @@ 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 = ({ disabled: e = !1, toolbarComponent: t = null }) => {
-	let { focus: n, toggleBold: r, toggleBulletList: i, toggleCode: a, toggleItalic: o, toggleOrderedList: s } = useCommands(), c = useActive(), l = [
+const RichTextToolbar = ({ editor: e, disabled: t = !1, toolbarComponent: n = null }) => {
+	var r, i, a, o, s;
+	let c = [
 		{
 			icon: RichTextIcon.BOLD,
-			onClick: r,
-			active: c.bold()
+			onClick: () => e == null ? void 0 : e.chain().focus().toggleBold().run(),
+			active: (r = e == null ? void 0 : e.isActive("bold")) == null ? !1 : r
 		},
 		{
 			icon: RichTextIcon.ITALIC,
-			onClick: o,
-			active: c.italic()
+			onClick: () => e == null ? void 0 : e.chain().focus().toggleItalic().run(),
+			active: (i = e == null ? void 0 : e.isActive("italic")) == null ? !1 : i
 		},
 		{
 			icon: RichTextIcon.CODE,
-			onClick: a,
-			active: c.code()
+			onClick: () => e == null ? void 0 : e.chain().focus().toggleCode().run(),
+			active: (a = e == null ? void 0 : e.isActive("code")) == null ? !1 : a
 		},
 		{
 			icon: RichTextIcon.UL,
-			onClick: i,
-			active: c.bulletList()
+			onClick: () => e == null ? void 0 : e.chain().focus().toggleBulletList().run(),
+			active: (o = e == null ? void 0 : e.isActive("bulletList")) == null ? !1 : o
 		},
 		{
 			icon: RichTextIcon.OL,
-			onClick: s,
-			active: c.orderedList()
+			onClick: () => e == null ? void 0 : e.chain().focus().toggleOrderedList().run(),
+			active: (s = e == null ? void 0 : e.isActive("orderedList")) == null ? !1 : s
 		}
 	];
 	return /* @__PURE__ */ jsxs("div", {
 		className: rich_text_toolbar_module_default.richTextToolbarContainer,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: rich_text_toolbar_module_default.richTextToolbar,
-			children: l.map((t, r) => /* @__PURE__ */ jsx(Button, {
+			children: c.map((e, n) => /* @__PURE__ */ jsx(Button, {
 				small: !0,
 				round: !0,
 				basic: !0,
-				icon: t.icon,
+				icon: e.icon,
 				colored: Color.MUTED,
-				onClick: () => {
-					t.onClick(), n();
-				},
-				active: t.active,
-				disabled: e
-			}, r))
-		}), t]
+				onClick: e.onClick,
+				active: e.active,
+				disabled: t
+			}, n))
+		}), n]
 	});
 };
 var rich_text_input_module_default = {
-	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"
+	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"
 };
 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(),
-			new ItalicExtension(),
-			new MarkdownExtension({}),
-			new OrderedListExtension(),
-			new PlaceholderExtension({ placeholder: e })
-		], [e]),
-		content: n,
-		selection: "start",
-		stringHandler: "markdown"
+	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());
+		}
 	});
-	return useImperativeHandle(a, () => m(), [m]), /* @__PURE__ */ jsx("div", {
+	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(!1),
+		editor: d
+	}), [d]), /* @__PURE__ */ jsxs("div", {
 		className: rich_text_input_module_default.richTextInput,
-		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, {})]
-		})
+		children: [/* @__PURE__ */ jsx(RichTextToolbar, {
+			editor: d,
+			disabled: u,
+			toolbarComponent: i
+		}), /* @__PURE__ */ jsx(EditorContent, { editor: d })]
 	});
 }));
 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.7-beta-1",
+  "version": "5.13.7-beta-2",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {
@@ -39,9 +39,11 @@
   "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/markdown": "^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",
@@ -64,7 +66,6 @@
     "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"