@paroicms/react-ui 0.5.15 → 0.6.0

package/dist/InputNumber.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { useInputCursorFix } from "./use-input-cursor-fix.js";
 import "../styles/InputNumber.css";
 export function InputNumber({ className, label, error, value, onChange, min, max, step, ref, ...props }) {
+    const { inputRef, saveCursorPos } = useInputCursorFix();
     const handleChange = (e) => {
+        saveCursorPos(e);
         const val = e.target.value;
         if (val === "") {
             onChange?.(undefined, e);
@@ -14,6 +17,12 @@ export function InputNumber({ className, label, error, value, onChange, min, max
             }
         }
     };
-    const inputElement = (_jsx("input", { ref: ref, type: "number", className: clsx("PaNumberInput", error && "error", !label && className), value: value ?? "", onChange: handleChange, min: min, max: max, step: step, ...props }));
+    const inputElement = (_jsx("input", { ref: (el) => {
+            inputRef.current = el;
+            if (typeof ref === "function")
+                ref(el);
+            else if (ref)
+                ref.current = el;
+        }, type: "number", className: clsx("PaNumberInput", error && "error", !label && className), value: value ?? "", onChange: handleChange, min: min, max: max, step: step, ...props }));
     return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), inputElement] })) : (inputElement), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/InputText.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import "../styles/InputText.css";
+import { useInputCursorFix } from "./use-input-cursor-fix.js";
 export function InputText({ value, onChange, label, error, className, inputClassName, endElement, icon, iconPosition = "left", ...rest }) {
+    const hasWrapper = Boolean(endElement || icon);
+    const { inputRef, saveCursorPos } = useInputCursorFix();
     const handleChange = (e) => {
+        saveCursorPos(e);
         onChange?.(e.target.value, e);
     };
-    const inputElement = (_jsx("input", { className: clsx("PaTextInput", inputClassName), value: value, onChange: handleChange, ...rest }));
-    const hasWrapper = Boolean(endElement || icon);
-    const fieldContent = endElement ? (_jsxs("span", { className: "PaTextField-row", children: [inputElement, endElement] })) : icon ? (_jsxs("span", { className: clsx("PaTextField-iconWrapper", iconPosition === "right" && "iconRight"), children: [_jsx("span", { className: "PaTextField-icon", children: icon }), inputElement] })) : (inputElement);
-    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaTextField PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), fieldContent] })) : hasWrapper ? (_jsx("span", { className: clsx("PaTextField", error && "error", className), children: fieldContent })) : (_jsx("input", { className: clsx("PaTextInput", inputClassName, className), value: value, onChange: handleChange, ...rest })), error && _jsx("span", { className: "PaFieldError", children: error })] }));
+    let fieldContent;
+    if (label || hasWrapper) {
+        const inputElement = (_jsx("input", { ref: inputRef, className: clsx("PaTextInput", inputClassName), value: value, onChange: handleChange, ...rest }));
+        fieldContent = endElement ? (_jsxs("span", { className: "PaTextField-row", children: [inputElement, endElement] })) : icon ? (_jsxs("span", { className: clsx("PaTextField-iconWrapper", iconPosition === "right" && "iconRight"), children: [_jsx("span", { className: "PaTextField-icon", children: icon }), inputElement] })) : (inputElement);
+    }
+    return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaTextField PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), fieldContent] })) : hasWrapper ? (_jsx("span", { className: clsx("PaTextField", error && "error", className), children: fieldContent })) : (_jsx("input", { ref: inputRef, className: clsx("PaTextInput", inputClassName, className), value: value, onChange: handleChange, ...rest })), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/PasswordInput.js

@@ -3,11 +3,20 @@ import "../styles/PasswordInput.css";
 import { clsx } from "clsx";
 import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
+import { useInputCursorFix } from "./use-input-cursor-fix.js";
 export function PasswordInput({ className, inputClassName, label, error, value, onChange, ref, ...props }) {
     const [visible, setVisible] = useState(false);
+    const { inputRef, saveCursorPos } = useInputCursorFix();
     const handleChange = (e) => {
+        saveCursorPos(e);
         onChange?.(e.target.value, e);
     };
-    const inputWithToggle = (_jsxs("span", { className: clsx("PaPasswordInput-inputWrapper", error && "error"), children: [_jsx("input", { ref: ref, type: visible ? "text" : "password", className: clsx("PaPasswordInput-input", inputClassName), value: value, onChange: handleChange, ...props }), _jsx("button", { type: "button", className: "PaPasswordInput-toggle", onClick: () => setVisible(!visible), tabIndex: -1, "aria-label": visible ? "Hide password" : "Show password", children: visible ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })] }));
+    const inputWithToggle = (_jsxs("span", { className: clsx("PaPasswordInput-inputWrapper", error && "error"), children: [_jsx("input", { ref: (el) => {
+                    inputRef.current = el;
+                    if (typeof ref === "function")
+                        ref(el);
+                    else if (ref)
+                        ref.current = el;
+                }, type: visible ? "text" : "password", className: clsx("PaPasswordInput-input", inputClassName), value: value, onChange: handleChange, ...props }), _jsx("button", { type: "button", className: "PaPasswordInput-toggle", onClick: () => setVisible(!visible), tabIndex: -1, "aria-label": visible ? "Hide password" : "Show password", children: visible ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })] }));
     return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaPasswordInput PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), inputWithToggle] })) : (inputWithToggle), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/Textarea.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "../styles/Textarea.css";
 import { clsx } from "clsx";
+import { useInputCursorFix } from "./use-input-cursor-fix.js";
 export function Textarea({ className, inputClassName, label, error, value, onChange, ref, ...props }) {
+    const { inputRef, saveCursorPos } = useInputCursorFix();
     const handleChange = (e) => {
+        saveCursorPos(e);
         onChange?.(e.target.value, e);
     };
-    const textareaElement = (_jsx("textarea", { ref: ref, className: clsx("PaTextarea", error && "error", inputClassName, !label && className), value: value, onChange: handleChange, ...props }));
+    const textareaElement = (_jsx("textarea", { ref: (el) => {
+            inputRef.current = el;
+            if (typeof ref === "function")
+                ref(el);
+            else if (ref)
+                ref.current = el;
+        }, className: clsx("PaTextarea", error && "error", inputClassName, !label && className), value: value, onChange: handleChange, ...props }));
     return (_jsxs(_Fragment, { children: [label ? (_jsxs("label", { className: clsx("PaField", error && "error", className), children: [_jsx("span", { className: "PaField-label", children: label }), textareaElement] })) : (textareaElement), error && _jsx("span", { className: "PaFieldError", children: error })] }));
 }

package/dist/use-input-cursor-fix.d.ts

@@ -0,0 +1,16 @@
+import { type ChangeEvent, type RefObject } from "react";
+type TextInput = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * Firefox workaround: after a controlled input re-renders inside a `<label>`,
+ * Firefox fires a spurious focus+select that selects all text. This hook saves
+ * the cursor position on each change event and restores it when a spurious
+ * focus is detected.
+ *
+ * Returns `{ inputRef, saveCursorPos }`. Wire `inputRef` to the element's `ref`
+ * and call `saveCursorPos(e)` at the start of your onChange handler.
+ */
+export declare function useInputCursorFix<T extends TextInput>(): {
+    inputRef: RefObject<T | null>;
+    saveCursorPos: (e: ChangeEvent<T>) => void;
+};
+export {};

package/dist/use-input-cursor-fix.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+/**
+ * Firefox workaround: after a controlled input re-renders inside a `<label>`,
+ * Firefox fires a spurious focus+select that selects all text. This hook saves
+ * the cursor position on each change event and restores it when a spurious
+ * focus is detected.
+ *
+ * Returns `{ inputRef, saveCursorPos }`. Wire `inputRef` to the element's `ref`
+ * and call `saveCursorPos(e)` at the start of your onChange handler.
+ */
+export function useInputCursorFix() {
+    const inputRef = useRef(null);
+    const cursorPos = useRef(null);
+    const saveCursorPos = (e) => {
+        cursorPos.current = e.target.selectionStart;
+    };
+    useEffect(() => {
+        const el = inputRef.current;
+        if (!el)
+            return;
+        const onFocus = () => {
+            const pos = cursorPos.current;
+            if (pos !== null) {
+                cursorPos.current = null;
+                queueMicrotask(() => {
+                    el.setSelectionRange(pos, pos);
+                });
+            }
+        };
+        el.addEventListener("focus", onFocus);
+        return () => el.removeEventListener("focus", onFocus);
+    }, []);
+    return { inputRef, saveCursorPos };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.15",
+  "version": "0.6.0",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",