@mpen/react-basic-inputs 0.1.6 → 0.1.8

package/dist/bundle.cjs

@@ -63,13 +63,6 @@ var useUpdateEffect = function(effect, deps) {
 
 var useUpdateEffect$1 = useUpdateEffect;
 
-const defaultMakeInvalidValueOption = value => ({
-    value,
-    text: String(value),
-    disabled: true,
-    key: INVALID_OPTION_KEY
-});
-
 function defaultMakeKey(opt, idx) {
     if (opt.key != null) {
         return resolveValue(opt.key, opt, idx);
@@ -79,6 +72,30 @@ function defaultMakeKey(opt, idx) {
     return idx;
 }
 
+class KeyFixer {
+    usedKeys=new Map;
+    fix(opt, idx) {
+        let fixedKey = defaultMakeKey(opt, idx);
+        for (;;) {
+            let suffix = this.usedKeys.get(fixedKey);
+            if (suffix === undefined) {
+                this.usedKeys.set(fixedKey, 1);
+                break;
+            }
+            this.usedKeys.set(fixedKey, ++suffix);
+            fixedKey = `${fixedKey}(${suffix})`;
+        }
+        return fixedKey;
+    }
+}
+
+const defaultMakeInvalidValueOption = value => ({
+    value,
+    text: String(value),
+    disabled: true,
+    key: INVALID_OPTION_KEY
+});
+
 const PLACEHOLDER_KEY = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb";
 
 const INVALID_OPTION_KEY = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
@@ -132,23 +149,14 @@ function Select({options, value, invalidValueOption = defaultMakeInvalidValueOpt
     useUpdateEffect$1((() => {
         refreshSelectedIndex();
     }), [ refreshSelectedIndex ]);
-    const usedKeys = new Map;
+    const fixer = new KeyFixer;
     return jsxRuntime.jsx("select", {
         ...selectAttrs,
         onChange: handleChange,
         ref: setRef,
         children: fixedOptions.map(((opt, idx) => {
             const {value, text, key, ...optAttrs} = opt;
-            let fixedKey = defaultMakeKey(opt, idx);
-            for (;;) {
-                let suffix = usedKeys.get(fixedKey);
-                if (suffix === undefined) {
-                    usedKeys.set(fixedKey, 1);
-                    break;
-                }
-                usedKeys.set(fixedKey, ++suffix);
-                fixedKey = `${fixedKey}(${suffix})`;
-            }
+            const fixedKey = fixer.fix(opt, idx);
             return React.createElement("option", {
                 ...optAttrs,
                 key: fixedKey
@@ -215,35 +223,43 @@ function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
     });
 }
 
-const TextArea = React.forwardRef((function TextArea({onInput, style, ...rest}, fwdRef) {
+const TextArea = React.forwardRef((function TextArea({onInput, style, initialHeight = "auto", ...rest}, fwdRef) {
     const ref = React.useRef(null);
-    const [height, setHeight] = React.useState("auto");
-    const adjustHeight = () => {
+    const [height, setHeight] = React.useState(initialHeight);
+    const adjustHeight = React.useCallback((() => {
         const textarea = ref.current;
         if (!textarea) return;
-        textarea.style.height = "auto";
+        textarea.style.height = initialHeight;
         const newHeight = `${textarea.scrollHeight}px`;
         setHeight(newHeight);
         textarea.style.height = newHeight;
-    };
+    }), [ initialHeight ]);
     React.useImperativeHandle(fwdRef, (() => ({
         element: ref.current,
-        resize: adjustHeight
-    })), [ setHeight, ref.current ]);
+        adjustHeight
+    })), [ adjustHeight ]);
     const input = useEventHandler((ev => {
         adjustHeight();
         onInput?.(ev);
     }));
     React.useLayoutEffect((() => {
         adjustHeight();
-    }), []);
+        const textarea = ref.current;
+        if (!textarea) return;
+        const resizeObserver = new ResizeObserver((entries => {
+            adjustHeight();
+        }));
+        resizeObserver.observe(textarea);
+        return () => {
+            resizeObserver.unobserve(textarea);
+        };
+    }), [ adjustHeight ]);
     return jsxRuntime.jsx("textarea", {
-        rows: 1,
         ...rest,
         style: {
-            ...style,
             overflow: "hidden",
             resize: "none",
+            ...style,
             height
         },
         onInput: input,
@@ -251,8 +267,55 @@ const TextArea = React.forwardRef((function TextArea({onInput, style, ...rest},
     });
 }));
 
+function RadioMenu(menu) {
+    const defaultId = React.useId();
+    const name = menu.name ?? defaultId;
+    const eq = menu.valueEquals ?? Object.is;
+    const fixedOptions = menu.options ?? [];
+    const fixer = new KeyFixer;
+    const onChange = useEventHandler((ev => {
+        const selectedIndex = Number(ev.target.value);
+        const selectedOption = fixedOptions[selectedIndex];
+        if (selectedOption != null && menu.onChange != null) {
+            menu.onChange({
+                value: selectedOption.value,
+                index: selectedIndex,
+                type: "change",
+                timeStamp: ev.timeStamp,
+                target: ev.target
+            });
+        }
+    }));
+    return jsxRuntime.jsx("ul", {
+        className: menu.className,
+        children: fixedOptions.map(((opt, idx) => {
+            const {value, text, key, itemClassName, ...rest} = opt;
+            const fixedKey = fixer.fix(opt, idx);
+            if (menu.value !== undefined) {
+                rest.checked = eq(value, menu.value);
+            }
+            return jsxRuntime.jsx("li", {
+                className: itemClassName,
+                children: jsxRuntime.jsxs("label", {
+                    children: [ jsxRuntime.jsx("input", {
+                        ...rest,
+                        value: idx,
+                        onChange,
+                        name,
+                        type: "radio"
+                    }), jsxRuntime.jsx("span", {
+                        children: text
+                    }) ]
+                })
+            }, fixedKey);
+        }))
+    });
+}
+
 exports.Input = Input;
 
+exports.RadioMenu = RadioMenu;
+
 exports.Select = Select;
 
 exports.TextArea = TextArea;

package/dist/bundle.d.ts

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

package/dist/bundle.mjs

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-import { useDebugValue, useRef, useInsertionEffect, useEffect, useMemo, useCallback, createElement, forwardRef, useState, useImperativeHandle, useLayoutEffect } from "react";
+import { useDebugValue, useRef, useInsertionEffect, useEffect, useMemo, useCallback, createElement, forwardRef, useState, useImperativeHandle, useLayoutEffect, useId } from "react";
 
 const NOOP = Object.freeze((() => {}));
 
@@ -61,13 +61,6 @@ var useUpdateEffect = function(effect, deps) {
 
 var useUpdateEffect$1 = useUpdateEffect;
 
-const defaultMakeInvalidValueOption = value => ({
-    value,
-    text: String(value),
-    disabled: true,
-    key: INVALID_OPTION_KEY
-});
-
 function defaultMakeKey(opt, idx) {
     if (opt.key != null) {
         return resolveValue(opt.key, opt, idx);
@@ -77,6 +70,30 @@ function defaultMakeKey(opt, idx) {
     return idx;
 }
 
+class KeyFixer {
+    usedKeys=new Map;
+    fix(opt, idx) {
+        let fixedKey = defaultMakeKey(opt, idx);
+        for (;;) {
+            let suffix = this.usedKeys.get(fixedKey);
+            if (suffix === undefined) {
+                this.usedKeys.set(fixedKey, 1);
+                break;
+            }
+            this.usedKeys.set(fixedKey, ++suffix);
+            fixedKey = `${fixedKey}(${suffix})`;
+        }
+        return fixedKey;
+    }
+}
+
+const defaultMakeInvalidValueOption = value => ({
+    value,
+    text: String(value),
+    disabled: true,
+    key: INVALID_OPTION_KEY
+});
+
 const PLACEHOLDER_KEY = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb";
 
 const INVALID_OPTION_KEY = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
@@ -130,23 +147,14 @@ function Select({options, value, invalidValueOption = defaultMakeInvalidValueOpt
     useUpdateEffect$1((() => {
         refreshSelectedIndex();
     }), [ refreshSelectedIndex ]);
-    const usedKeys = new Map;
+    const fixer = new KeyFixer;
     return jsx("select", {
         ...selectAttrs,
         onChange: handleChange,
         ref: setRef,
         children: fixedOptions.map(((opt, idx) => {
             const {value, text, key, ...optAttrs} = opt;
-            let fixedKey = defaultMakeKey(opt, idx);
-            for (;;) {
-                let suffix = usedKeys.get(fixedKey);
-                if (suffix === undefined) {
-                    usedKeys.set(fixedKey, 1);
-                    break;
-                }
-                usedKeys.set(fixedKey, ++suffix);
-                fixedKey = `${fixedKey}(${suffix})`;
-            }
+            const fixedKey = fixer.fix(opt, idx);
             return createElement("option", {
                 ...optAttrs,
                 key: fixedKey
@@ -213,35 +221,43 @@ function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
     });
 }
 
-const TextArea = forwardRef((function TextArea({onInput, style, ...rest}, fwdRef) {
+const TextArea = forwardRef((function TextArea({onInput, style, initialHeight = "auto", ...rest}, fwdRef) {
     const ref = useRef(null);
-    const [height, setHeight] = useState("auto");
-    const adjustHeight = () => {
+    const [height, setHeight] = useState(initialHeight);
+    const adjustHeight = useCallback((() => {
         const textarea = ref.current;
         if (!textarea) return;
-        textarea.style.height = "auto";
+        textarea.style.height = initialHeight;
         const newHeight = `${textarea.scrollHeight}px`;
         setHeight(newHeight);
         textarea.style.height = newHeight;
-    };
+    }), [ initialHeight ]);
     useImperativeHandle(fwdRef, (() => ({
         element: ref.current,
-        resize: adjustHeight
-    })), [ setHeight, ref.current ]);
+        adjustHeight
+    })), [ adjustHeight ]);
     const input = useEventHandler((ev => {
         adjustHeight();
         onInput?.(ev);
     }));
     useLayoutEffect((() => {
         adjustHeight();
-    }), []);
+        const textarea = ref.current;
+        if (!textarea) return;
+        const resizeObserver = new ResizeObserver((entries => {
+            adjustHeight();
+        }));
+        resizeObserver.observe(textarea);
+        return () => {
+            resizeObserver.unobserve(textarea);
+        };
+    }), [ adjustHeight ]);
     return jsx("textarea", {
-        rows: 1,
         ...rest,
         style: {
-            ...style,
             overflow: "hidden",
             resize: "none",
+            ...style,
             height
         },
         onInput: input,
@@ -249,4 +265,49 @@ const TextArea = forwardRef((function TextArea({onInput, style, ...rest}, fwdRef
     });
 }));
 
-export { Input, Select, TextArea, TextInput };
+function RadioMenu(menu) {
+    const defaultId = useId();
+    const name = menu.name ?? defaultId;
+    const eq = menu.valueEquals ?? Object.is;
+    const fixedOptions = menu.options ?? [];
+    const fixer = new KeyFixer;
+    const onChange = useEventHandler((ev => {
+        const selectedIndex = Number(ev.target.value);
+        const selectedOption = fixedOptions[selectedIndex];
+        if (selectedOption != null && menu.onChange != null) {
+            menu.onChange({
+                value: selectedOption.value,
+                index: selectedIndex,
+                type: "change",
+                timeStamp: ev.timeStamp,
+                target: ev.target
+            });
+        }
+    }));
+    return jsx("ul", {
+        className: menu.className,
+        children: fixedOptions.map(((opt, idx) => {
+            const {value, text, key, itemClassName, ...rest} = opt;
+            const fixedKey = fixer.fix(opt, idx);
+            if (menu.value !== undefined) {
+                rest.checked = eq(value, menu.value);
+            }
+            return jsx("li", {
+                className: itemClassName,
+                children: jsxs("label", {
+                    children: [ jsx("input", {
+                        ...rest,
+                        value: idx,
+                        onChange,
+                        name,
+                        type: "radio"
+                    }), jsx("span", {
+                        children: text
+                    }) ]
+                })
+            }, fixedKey);
+        }))
+    });
+}
+
+export { Input, RadioMenu, Select, TextArea, TextInput };

package/dist/components/RadioMenu.d.ts

@@ -0,0 +1,30 @@
+import { EventCallback, HtmlInputElement, NonNil, OverrideProps } from '../types/utility';
+import { Key, ReactNode } from 'react';
+import { Resolvable } from '../util/resolvable';
+import { JSX } from 'react/jsx-runtime';
+export type RadioMenuOption<T extends NonNil> = OverrideProps<'input', {
+    value: T;
+    text: ReactNode;
+    key?: Resolvable<Key, [RadioMenuOption<T>, number]>;
+    itemClassName?: string;
+}, 'type' | 'children' | 'checked' | 'name'>;
+export type RadioMenuChangeEvent<T> = {
+    value: T;
+    index: number;
+    type: 'change';
+    timeStamp: number;
+    target: HtmlInputElement;
+};
+export type RadioMenuChangeEventHandler<T> = EventCallback<RadioMenuChangeEvent<T>>;
+export type RadioMenuProps<T extends NonNil> = {
+    options: RadioMenuOption<T>[];
+    value?: T | null;
+    className?: string;
+    /**
+     * Value comparison function. Defaults to {@linkcode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is|Object.is}
+     */
+    valueEquals?: (a: T, b: T) => boolean;
+    onChange?: RadioMenuChangeEventHandler<T>;
+    name?: string;
+};
+export declare function RadioMenu<T extends NonNil>(menu: RadioMenuProps<T>): JSX.Element;

package/dist/components/TextArea.d.ts

@@ -2,7 +2,13 @@
 import { HtmlTextAreaElement, OverrideProps, VoidFn } from '../types/utility';
 export type TextAreaRef = {
     element: HtmlTextAreaElement;
-    resize: VoidFn;
+    adjustHeight: 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>>;
+export type TextAreaProps = OverrideProps<'textarea', {
+    /** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
+    initialHeight?: string;
+}>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "initialHeight"> & {
+    /** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
+    initialHeight?: string;
+} & import("react").RefAttributes<TextAreaRef>>;

package/dist/util/assert.d.ts

@@ -0,0 +1 @@
+export declare function cast<T>(val: any): asserts val is T;

package/dist/util/key-fixer.d.ts

@@ -0,0 +1,8 @@
+import { Key } from 'react';
+/**
+ * Produces unique React Keys from an option.
+ */
+export declare class KeyFixer {
+    usedKeys: Map<Key, number>;
+    fix(opt: any, idx: number): Key;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpen/react-basic-inputs",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "packageManager": "yarn@3.5.0",
   "exports": {
     ".": {
@@ -54,5 +54,8 @@
   "peerDependencies": {
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
+  },
+  "dependencies": {
+    "classcat": "^5.0.4"
   }
 }