@mpen/react-basic-inputs 0.1.3 → 0.1.5

package/dist/bundle.cjs

@@ -10,24 +10,34 @@ function identity(x) {
     return x;
 }
 
-let useEvent;
+let useEventHandler;
 
 if (typeof window !== "undefined") {
-    useEvent = handler => {
-        React.useDebugValue(handler);
-        const handlerRef = React.useRef(handler);
-        React.useLayoutEffect((() => {
-            handlerRef.current = handler;
-        }), [ handler ]);
-        return React.useCallback((ev => {
-            handlerRef.current(ev);
-        }), []);
+    useEventHandler = callback => {
+        React.useDebugValue(callback);
+        const latestRef = React.useRef(useEvent_shouldNotBeInvokedBeforeMount);
+        React.useInsertionEffect((() => {
+            latestRef.current = callback;
+        }), [ callback ]);
+        const stableRef = React.useRef(null);
+        if (!stableRef.current) {
+            stableRef.current = function() {
+                return latestRef.current.apply(this, arguments);
+            };
+        }
+        return stableRef.current;
     };
 } else {
-    useEvent = NOOP;
+    useEventHandler = NOOP;
+}
+
+function useEvent(handler) {
+    return useEventHandler(handler);
 }
 
-var useEvent$1 = useEvent;
+function useEvent_shouldNotBeInvokedBeforeMount() {
+    throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
+}
 
 function resolveValue(val, ...args) {
     return typeof val === "function" ? val(...args) : val;
@@ -97,7 +107,7 @@ function Select({options, value, invalidValueOption = defaultMakeInvalidValueOpt
         }
         return fixedOptions;
     }), [ isValid, options, isNotSelected, extraOption, placeholder ]);
-    const handleChange = useEvent$1((ev => {
+    const handleChange = useEvent((ev => {
         const idx = ev.target.selectedIndex;
         const opt = fixedOptions[idx];
         onChange?.({
@@ -205,8 +215,46 @@ function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
     });
 }
 
+const TextArea = React.forwardRef((function TextArea({onInput, style, ...rest}, fwdRef) {
+    const ref = React.useRef(null);
+    const [height, setHeight] = React.useState("auto");
+    const adjustHeight = () => {
+        const textarea = ref.current;
+        if (!textarea) return;
+        textarea.style.height = "auto";
+        const newHeight = `${textarea.scrollHeight}px`;
+        setHeight(newHeight);
+        textarea.style.height = newHeight;
+    };
+    React.useImperativeHandle(fwdRef, (() => ({
+        element: ref.current,
+        resize: adjustHeight
+    })), [ setHeight, ref.current ]);
+    const input = useEventHandler((ev => {
+        adjustHeight();
+        onInput?.(ev);
+    }));
+    React.useLayoutEffect((() => {
+        adjustHeight();
+    }), []);
+    return jsxRuntime.jsx("textarea", {
+        rows: 1,
+        ...rest,
+        style: {
+            ...style,
+            overflow: "hidden",
+            resize: "none",
+            height
+        },
+        onInput: input,
+        ref
+    });
+}));
+
 exports.Input = Input;
 
 exports.Select = Select;
 
+exports.TextArea = TextArea;
+
 exports.TextInput = TextInput;

package/dist/bundle.d.ts

@@ -1,3 +1,4 @@
 export * from './components/Select';
 export * from './components/TextInput';
 export * from './components/Input';
+export * from './components/TextArea';

package/dist/bundle.mjs

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 
-import { useDebugValue, useRef, useLayoutEffect, useCallback, useEffect, useMemo, createElement, forwardRef, useState } from "react";
+import { useDebugValue, useRef, useInsertionEffect, useEffect, useMemo, useCallback, createElement, forwardRef, useState, useImperativeHandle, useLayoutEffect } from "react";
 
 const NOOP = Object.freeze((() => {}));
 
@@ -8,24 +8,34 @@ function identity(x) {
     return x;
 }
 
-let useEvent;
+let useEventHandler;
 
 if (typeof window !== "undefined") {
-    useEvent = handler => {
-        useDebugValue(handler);
-        const handlerRef = useRef(handler);
-        useLayoutEffect((() => {
-            handlerRef.current = handler;
-        }), [ handler ]);
-        return useCallback((ev => {
-            handlerRef.current(ev);
-        }), []);
+    useEventHandler = callback => {
+        useDebugValue(callback);
+        const latestRef = useRef(useEvent_shouldNotBeInvokedBeforeMount);
+        useInsertionEffect((() => {
+            latestRef.current = callback;
+        }), [ callback ]);
+        const stableRef = useRef(null);
+        if (!stableRef.current) {
+            stableRef.current = function() {
+                return latestRef.current.apply(this, arguments);
+            };
+        }
+        return stableRef.current;
     };
 } else {
-    useEvent = NOOP;
+    useEventHandler = NOOP;
+}
+
+function useEvent(handler) {
+    return useEventHandler(handler);
 }
 
-var useEvent$1 = useEvent;
+function useEvent_shouldNotBeInvokedBeforeMount() {
+    throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
+}
 
 function resolveValue(val, ...args) {
     return typeof val === "function" ? val(...args) : val;
@@ -95,7 +105,7 @@ function Select({options, value, invalidValueOption = defaultMakeInvalidValueOpt
         }
         return fixedOptions;
     }), [ isValid, options, isNotSelected, extraOption, placeholder ]);
-    const handleChange = useEvent$1((ev => {
+    const handleChange = useEvent((ev => {
         const idx = ev.target.selectedIndex;
         const opt = fixedOptions[idx];
         onChange?.({
@@ -203,4 +213,40 @@ function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
     });
 }
 
-export { Input, Select, TextInput };
+const TextArea = forwardRef((function TextArea({onInput, style, ...rest}, fwdRef) {
+    const ref = useRef(null);
+    const [height, setHeight] = useState("auto");
+    const adjustHeight = () => {
+        const textarea = ref.current;
+        if (!textarea) return;
+        textarea.style.height = "auto";
+        const newHeight = `${textarea.scrollHeight}px`;
+        setHeight(newHeight);
+        textarea.style.height = newHeight;
+    };
+    useImperativeHandle(fwdRef, (() => ({
+        element: ref.current,
+        resize: adjustHeight
+    })), [ setHeight, ref.current ]);
+    const input = useEventHandler((ev => {
+        adjustHeight();
+        onInput?.(ev);
+    }));
+    useLayoutEffect((() => {
+        adjustHeight();
+    }), []);
+    return jsx("textarea", {
+        rows: 1,
+        ...rest,
+        style: {
+            ...style,
+            overflow: "hidden",
+            resize: "none",
+            height
+        },
+        onInput: input,
+        ref
+    });
+}));
+
+export { Input, Select, TextArea, TextInput };

package/dist/components/TextArea.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HtmlTextAreaElement, OverrideProps, VoidFn } from '../types/utility';
+export type TextAreaRef = {
+    element: HtmlTextAreaElement;
+    resize: VoidFn;
+};
+export type TextAreaProps = OverrideProps<'textarea', {}>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, never> & import("react").RefAttributes<TextAreaRef>>;

package/dist/hooks/useEvent.d.ts

@@ -1,6 +1,6 @@
-import { EventCallback } from "../types/utility";
+import { AnyFn, EventCallback } from "../types/utility";
 /**
  * @see https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
  */
-declare let useEvent: <T>(handler: EventCallback<T>) => (ev: T) => void;
-export default useEvent;
+export declare let useEventHandler: <TCallback extends AnyFn>(callback: TCallback) => TCallback;
+export default function useEvent<T>(handler: EventCallback<T>): EventCallback<T>;

package/dist/types/utility.d.ts

@@ -20,6 +20,7 @@ export type OmitProps<Base extends import('react').ElementType, DeleteKeys exten
 export type MapKeyType<M> = M extends Map<infer K, any> ? K : never;
 export type MapValueType<M> = M extends Map<any, infer V> ? V : never;
 /** Hack to de-conflict React's HTMLInputElement vs the standard dom lib */
+export type HtmlTextAreaElement = HTMLElementTagNameMap['textarea'];
 export type HtmlInputElement = HTMLElementTagNameMap['input'];
 export type HtmlSelectElement = HTMLElementTagNameMap['select'];
 export type HtmlInputChangeEvent = import('react').ChangeEvent<HtmlInputElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpen/react-basic-inputs",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "packageManager": "yarn@3.5.0",
   "exports": {
     ".": {
@@ -49,7 +49,7 @@
     "serve": "^14.2.0",
     "ts-jest": "^29.1.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": ">=17 <19",