@intable/react 0.0.14 → 0.0.15

package/dist/index.js

@@ -1,24 +1,23 @@
+import { createRoot, flushSync } from "./utils.js";
 import './style.css';/* empty css      */
 import { createElement, useEffect, useRef } from "react";
-import { createRoot } from "react-dom/client";
-import { flushSync } from "react-dom";
 import "intable/wc";
 import { createComputed, onCleanup } from "solid-js";
-const Intable = (o) => {
-	let s = useRef(null);
+const Intable = (e) => {
+	let a = useRef(null);
 	return useEffect(() => {
-		s.current && (s.current.options = {
-			class: o.className,
-			...o,
+		a.current && (a.current.options = {
+			class: e.className,
+			...e,
 			renderer: component
 		});
-	}, [o]), createElement("wc-table", {
-		ref: s,
+	}, [e]), createElement("wc-table", {
+		ref: a,
 		style: { display: "contents" }
 	});
-}, component = (i) => (a) => {
+}, component = (o) => (s) => {
 	let c = document.createElement("div"), l = createRoot(c);
-	return createComputed(() => flushSync(() => l.render(createElement(i, a)))), onCleanup(() => l.unmount()), c;
+	return createComputed(() => flushSync(() => l.render(createElement(o, s)))), onCleanup(() => l.unmount()), c;
 };
 var src_default = Intable;
 export { Intable, component, src_default as default };

package/dist/plugins/antd.js

@@ -1,10 +1,45 @@
+import { createRoot } from "../utils.js";
+import { createElement, useEffect, useRef, useState } from "react";
+import { resolveOptions } from "intable/utils";
 import { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker } from "antd";
 const AntdPlugin = {
 	name: "antd",
-	store(d) {
-		d.editors.text = editor(Input), d.editors.number = editor(InputNumber), d.editors.rate = editor(Rate), d.editors.switch = editor(Switch), d.editors.checkbox = editor(Checkbox), d.editors.color = selector(ColorPicker, { transform: (e) => e?.toHexString?.() || e }), d.editors.select = selector(Select), d.editors.date = selector(DatePicker), d.editors.time = selector(TimePicker), d.editors.datetime = selector(DatePicker, { showTime: !0 });
+	store(e) {
+		e.editors.text = editor(Input), e.editors.number = editor(InputNumber), e.editors.rate = editor(Rate), e.editors.switch = editor(Switch), e.editors.checkbox = editor(Checkbox), e.editors.color = selector(ColorPicker, { transform: (e) => e?.toHexString?.() || e }), e.editors.select = selector(Select), e.editors.date = selector(DatePicker), e.editors.time = selector(TimePicker), e.editors.datetime = selector(DatePicker, { showTime: !0 });
 	},
 	rewriteProps: { class: ({ class: e }) => `antd ${e}` }
 };
-var editor = (e, u = {}) => createEditor(e, u, !1), selector = (e, u = {}) => createEditor(e, u, !0);
-export { AntdPlugin };
+var getEl = (e) => e && (e instanceof Text && (e = e.nextElementSibling), e?.querySelector("input") ?? e?.querySelector("button") ?? e?.querySelector("[class*=trigger]") ?? e);
+const createEditor = (s, c, l) => (u) => {
+	let { eventKey: d, value: f, col: p, ok: m, cancel: h, props: g } = u, _ = document.createElement("div"), v = createRoot(_), y = d || f, b;
+	v.render(createElement(() => {
+		let [e, u] = useState(y), d = useRef(null);
+		return useEffect(() => {
+			b = d.current, l ? setTimeout(() => (getEl(d.current)?.click?.(), d.current?.focus?.()), 0) : d.current?.focus?.();
+		}, []), createElement(s, {
+			ref: d,
+			value: e,
+			onChange: (e) => {
+				let o = e instanceof Event ? e.target?.value : e;
+				y = c.transform ? c.transform(o) : o, u(y), l && !Array.isArray(y) && setTimeout(m, 100);
+			},
+			onPointerDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.stopPropagation(), e.key === "Enter" && m(), e.key === "Escape" && h();
+			},
+			...p?.enum && { options: resolveOptions(p.enum) },
+			...c,
+			...g
+		});
+	}));
+	let x = document.createDocumentFragment();
+	return x.appendChild(_), {
+		el: x,
+		getValue: () => y,
+		destroy: () => v.unmount(),
+		focus: () => (l && getEl(b)?.click?.(), b?.focus?.()),
+		blur: () => b?.blur?.()
+	};
+};
+var editor = (e, o = {}) => createEditor(e, o, !1), selector = (e, o = {}) => createEditor(e, o, !0);
+export { AntdPlugin, createEditor };

package/dist/react/src/plugins/antd.d.ts

@@ -1,2 +1,5 @@
 import type { Plugin } from 'intable';
+import type { Editor } from 'intable/plugins/EditablePlugin';
+import { type FC } from 'react';
 export declare const AntdPlugin: Plugin;
+export declare const createEditor: (Comp: FC<any>, opts: any, isSelector?: boolean) => Editor;

package/dist/react/src/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function createRoot(container: HTMLElement): {
+    render: (element: any) => any;
+    unmount: () => any;
+};
+export declare function flushSync(fn: any): any;

package/dist/utils.js

@@ -0,0 +1,13 @@
+import { version } from "react";
+import * as Client from "react-dom/client";
+import ReactDom from "react-dom";
+function createRoot(i) {
+	return version.startsWith("16.") || version.startsWith("17.") ? {
+		render: (e) => ReactDom.render(e, i),
+		unmount: () => ReactDom.unmountComponentAtNode(i)
+	} : Client.createRoot(i);
+}
+function flushSync(r) {
+	return version.startsWith("16.") || version.startsWith("17.") ? r() : ReactDom.flushSync(r);
+}
+export { createRoot, flushSync };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intable/react",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,11 +18,11 @@
   ],
   "dependencies": {
     "solid-js": "^1.9.9",
-    "intable": "^0.0.14"
+    "intable": "^0.0.15"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0 || ^20.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "devDependencies": {
     "@types/react": "^18",