@mpen/react-basic-inputs 0.1.7 → 0.1.9

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
@@ -259,8 +267,59 @@ const TextArea = React.forwardRef((function TextArea({onInput, style, initialHei
     });
 }));
 
+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, labelClassName, inputClassName, textClassName, ...rest} = opt;
+            const fixedKey = fixer.fix(opt, idx);
+            if (menu.value !== undefined) {
+                rest.checked = eq(value, menu.value);
+            }
+            return jsxRuntime.jsx("li", {
+                className: itemClassName,
+                "aria-disabled": rest.disabled,
+                children: jsxRuntime.jsxs("label", {
+                    className: labelClassName,
+                    children: [ jsxRuntime.jsx("input", {
+                        ...rest,
+                        className: inputClassName,
+                        value: idx,
+                        onChange,
+                        name,
+                        type: "radio"
+                    }), jsxRuntime.jsx("span", {
+                        className: textClassName,
+                        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
@@ -257,4 +265,53 @@ const TextArea = forwardRef((function TextArea({onInput, style, initialHeight =
     });
 }));
 
-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, labelClassName, inputClassName, textClassName, ...rest} = opt;
+            const fixedKey = fixer.fix(opt, idx);
+            if (menu.value !== undefined) {
+                rest.checked = eq(value, menu.value);
+            }
+            return jsx("li", {
+                className: itemClassName,
+                "aria-disabled": rest.disabled,
+                children: jsxs("label", {
+                    className: labelClassName,
+                    children: [ jsx("input", {
+                        ...rest,
+                        className: inputClassName,
+                        value: idx,
+                        onChange,
+                        name,
+                        type: "radio"
+                    }), jsx("span", {
+                        className: textClassName,
+                        children: text
+                    }) ]
+                })
+            }, fixedKey);
+        }))
+    });
+}
+
+export { Input, RadioMenu, Select, TextArea, TextInput };

package/dist/components/RadioMenu.d.ts

@@ -0,0 +1,33 @@
+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;
+    labelClassName?: string;
+    inputClassName?: string;
+    textClassName?: string;
+}, 'type' | 'children' | 'checked' | 'name' | 'className'>;
+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/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.7",
+  "version": "0.1.9",
   "packageManager": "yarn@3.5.0",
   "exports": {
     ".": {
@@ -54,5 +54,8 @@
   "peerDependencies": {
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
+  },
+  "dependencies": {
+    "classcat": "^5.0.4"
   }
 }