@mpen/react-basic-inputs 0.1.11 → 0.2.0

package/dist/bundle.cjs

@@ -1,328 +0,0 @@
-"use strict";
-
-var jsxRuntime = require("react/jsx-runtime");
-
-var React = require("react");
-
-const NOOP = Object.freeze((() => {}));
-
-function identity(x) {
-    return x;
-}
-
-let useEventHandler;
-
-if (typeof window !== "undefined") {
-    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 {
-    useEventHandler = NOOP;
-}
-
-function useEvent(handler) {
-    return useEventHandler(handler);
-}
-
-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;
-}
-
-function useFirstMountState() {
-    var isFirst = React.useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-}
-
-var useUpdateEffect = function(effect, deps) {
-    var isFirstMount = useFirstMountState();
-    React.useEffect((function() {
-        if (!isFirstMount) {
-            return effect();
-        }
-    }), deps);
-};
-
-var useUpdateEffect$1 = useUpdateEffect;
-
-function defaultMakeKey(opt, idx) {
-    if (opt.key != null) {
-        return resolveValue(opt.key, opt, idx);
-    } else if (typeof opt.value === "string" || typeof opt.value === "number") {
-        return opt.value;
-    }
-    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";
-
-function Select({options, value, invalidValueOption = defaultMakeInvalidValueOption, onChange, placeholder, ...selectAttrs}) {
-    const isNotSelected = value == null;
-    const isValid = React.useMemo((() => value != null && options.some((o => o.value == value))), [ options, value ]);
-    const extraOption = React.useMemo((() => {
-        if (value == null || !invalidValueOption) return null;
-        return invalidValueOption(value);
-    }), [ invalidValueOption, value ]);
-    const fixedOptions = React.useMemo((() => {
-        if (isValid) return options;
-        const fixedOptions = [ ...options ];
-        if (isNotSelected) {
-            if (placeholder != null) {
-                fixedOptions.unshift({
-                    text: placeholder,
-                    hidden: true,
-                    value: null,
-                    key: PLACEHOLDER_KEY
-                });
-            }
-        } else if (extraOption) {
-            fixedOptions.push(extraOption);
-        }
-        return fixedOptions;
-    }), [ isValid, options, isNotSelected, extraOption, placeholder ]);
-    const handleChange = useEvent((ev => {
-        const idx = ev.target.selectedIndex;
-        const opt = fixedOptions[idx];
-        onChange?.({
-            value: opt.value,
-            index: idx,
-            type: "change",
-            timeStamp: ev.timeStamp,
-            target: ev.target
-        });
-    }));
-    const ref = React.useRef(null);
-    const refreshSelectedIndex = React.useCallback((() => {
-        if (!ref.current) return;
-        if (ref.current.selectedIndex < 0 || fixedOptions[ref.current.selectedIndex].value != value) {
-            ref.current.selectedIndex = fixedOptions.findIndex((opt => opt.value == value));
-        }
-    }), [ fixedOptions, value ]);
-    const setRef = el => {
-        ref.current = el;
-        refreshSelectedIndex();
-    };
-    useUpdateEffect$1((() => {
-        refreshSelectedIndex();
-    }), [ refreshSelectedIndex ]);
-    const fixer = new KeyFixer;
-    return jsxRuntime.jsx("select", {
-        ...selectAttrs,
-        onChange: handleChange,
-        ref: setRef,
-        children: fixedOptions.map(((opt, idx) => {
-            const {value, text, key, ...optAttrs} = opt;
-            const fixedKey = fixer.fix(opt, idx);
-            return React.createElement("option", {
-                ...optAttrs,
-                key: fixedKey,
-                value: fixedKey
-            }, opt.text);
-        }))
-    });
-}
-
-function collapseWhitespace(str) {
-    if (!str) return "";
-    return String(str).replace(/\s+/gu, " ").trim();
-}
-
-const Input = React.forwardRef((function Input({value = "", onChange, onInput, onBlur, formatOnChange = identity, ...otherProps}, ref) {
-    const [currentValue, setCurrentValue] = React.useState(value);
-    const lastValue = React.useRef(value);
-    const modified = React.useRef(false);
-    useUpdateEffect$1((() => {
-        setCurrentValue(value);
-        modified.current = false;
-        lastValue.current = value;
-    }), [ value ]);
-    const props = {
-        type: "text",
-        ...otherProps,
-        value: currentValue,
-        onChange: ev => {
-            setCurrentValue(ev.target.value);
-        },
-        onInput: ev => {
-            modified.current = true;
-            onInput?.(ev);
-        },
-        onBlur: ev => {
-            const formattedValue = formatOnChange(currentValue);
-            if (modified.current) {
-                if (formattedValue !== lastValue.current) {
-                    onChange?.({
-                        type: "change",
-                        value: formattedValue,
-                        timeStamp: ev.timeStamp,
-                        target: ev.target
-                    });
-                    lastValue.current = formattedValue;
-                }
-                if (formattedValue !== ev.target.value) {
-                    setCurrentValue(formattedValue);
-                }
-            }
-            onBlur?.(ev);
-        }
-    };
-    return jsxRuntime.jsx("input", {
-        ...props,
-        ref
-    });
-}));
-
-function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
-    return jsxRuntime.jsx(Input, {
-        formatOnChange,
-        ...otherProps,
-        type: "text"
-    });
-}
-
-const TextArea = React.forwardRef((function TextArea({onInput, style, initialHeight = "auto", ...rest}, fwdRef) {
-    const ref = React.useRef(null);
-    const [height, setHeight] = React.useState(initialHeight);
-    const adjustHeight = React.useCallback((() => {
-        const textarea = ref.current;
-        if (!textarea) return;
-        textarea.style.height = initialHeight;
-        const newHeight = `${textarea.scrollHeight}px`;
-        setHeight(newHeight);
-        textarea.style.height = newHeight;
-    }), [ initialHeight ]);
-    React.useImperativeHandle(fwdRef, (() => ({
-        element: 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", {
-        ...rest,
-        style: {
-            overflow: "hidden",
-            resize: "none",
-            ...style,
-            height
-        },
-        onInput: input,
-        ref
-    });
-}));
-
-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;
-
-exports.TextInput = TextInput;

package/dist/bundle.d.ts

@@ -1,5 +0,0 @@
-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,318 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-import { useDebugValue, useRef, useInsertionEffect, useEffect, useMemo, useCallback, createElement, forwardRef, useState, useImperativeHandle, useLayoutEffect, useId } from "react";
-
-const NOOP = Object.freeze((() => {}));
-
-function identity(x) {
-    return x;
-}
-
-let useEventHandler;
-
-if (typeof window !== "undefined") {
-    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 {
-    useEventHandler = NOOP;
-}
-
-function useEvent(handler) {
-    return useEventHandler(handler);
-}
-
-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;
-}
-
-function useFirstMountState() {
-    var isFirst = useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-}
-
-var useUpdateEffect = function(effect, deps) {
-    var isFirstMount = useFirstMountState();
-    useEffect((function() {
-        if (!isFirstMount) {
-            return effect();
-        }
-    }), deps);
-};
-
-var useUpdateEffect$1 = useUpdateEffect;
-
-function defaultMakeKey(opt, idx) {
-    if (opt.key != null) {
-        return resolveValue(opt.key, opt, idx);
-    } else if (typeof opt.value === "string" || typeof opt.value === "number") {
-        return opt.value;
-    }
-    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";
-
-function Select({options, value, invalidValueOption = defaultMakeInvalidValueOption, onChange, placeholder, ...selectAttrs}) {
-    const isNotSelected = value == null;
-    const isValid = useMemo((() => value != null && options.some((o => o.value == value))), [ options, value ]);
-    const extraOption = useMemo((() => {
-        if (value == null || !invalidValueOption) return null;
-        return invalidValueOption(value);
-    }), [ invalidValueOption, value ]);
-    const fixedOptions = useMemo((() => {
-        if (isValid) return options;
-        const fixedOptions = [ ...options ];
-        if (isNotSelected) {
-            if (placeholder != null) {
-                fixedOptions.unshift({
-                    text: placeholder,
-                    hidden: true,
-                    value: null,
-                    key: PLACEHOLDER_KEY
-                });
-            }
-        } else if (extraOption) {
-            fixedOptions.push(extraOption);
-        }
-        return fixedOptions;
-    }), [ isValid, options, isNotSelected, extraOption, placeholder ]);
-    const handleChange = useEvent((ev => {
-        const idx = ev.target.selectedIndex;
-        const opt = fixedOptions[idx];
-        onChange?.({
-            value: opt.value,
-            index: idx,
-            type: "change",
-            timeStamp: ev.timeStamp,
-            target: ev.target
-        });
-    }));
-    const ref = useRef(null);
-    const refreshSelectedIndex = useCallback((() => {
-        if (!ref.current) return;
-        if (ref.current.selectedIndex < 0 || fixedOptions[ref.current.selectedIndex].value != value) {
-            ref.current.selectedIndex = fixedOptions.findIndex((opt => opt.value == value));
-        }
-    }), [ fixedOptions, value ]);
-    const setRef = el => {
-        ref.current = el;
-        refreshSelectedIndex();
-    };
-    useUpdateEffect$1((() => {
-        refreshSelectedIndex();
-    }), [ refreshSelectedIndex ]);
-    const fixer = new KeyFixer;
-    return jsx("select", {
-        ...selectAttrs,
-        onChange: handleChange,
-        ref: setRef,
-        children: fixedOptions.map(((opt, idx) => {
-            const {value, text, key, ...optAttrs} = opt;
-            const fixedKey = fixer.fix(opt, idx);
-            return createElement("option", {
-                ...optAttrs,
-                key: fixedKey,
-                value: fixedKey
-            }, opt.text);
-        }))
-    });
-}
-
-function collapseWhitespace(str) {
-    if (!str) return "";
-    return String(str).replace(/\s+/gu, " ").trim();
-}
-
-const Input = forwardRef((function Input({value = "", onChange, onInput, onBlur, formatOnChange = identity, ...otherProps}, ref) {
-    const [currentValue, setCurrentValue] = useState(value);
-    const lastValue = useRef(value);
-    const modified = useRef(false);
-    useUpdateEffect$1((() => {
-        setCurrentValue(value);
-        modified.current = false;
-        lastValue.current = value;
-    }), [ value ]);
-    const props = {
-        type: "text",
-        ...otherProps,
-        value: currentValue,
-        onChange: ev => {
-            setCurrentValue(ev.target.value);
-        },
-        onInput: ev => {
-            modified.current = true;
-            onInput?.(ev);
-        },
-        onBlur: ev => {
-            const formattedValue = formatOnChange(currentValue);
-            if (modified.current) {
-                if (formattedValue !== lastValue.current) {
-                    onChange?.({
-                        type: "change",
-                        value: formattedValue,
-                        timeStamp: ev.timeStamp,
-                        target: ev.target
-                    });
-                    lastValue.current = formattedValue;
-                }
-                if (formattedValue !== ev.target.value) {
-                    setCurrentValue(formattedValue);
-                }
-            }
-            onBlur?.(ev);
-        }
-    };
-    return jsx("input", {
-        ...props,
-        ref
-    });
-}));
-
-function TextInput({formatOnChange = collapseWhitespace, ...otherProps}) {
-    return jsx(Input, {
-        formatOnChange,
-        ...otherProps,
-        type: "text"
-    });
-}
-
-const TextArea = forwardRef((function TextArea({onInput, style, initialHeight = "auto", ...rest}, fwdRef) {
-    const ref = useRef(null);
-    const [height, setHeight] = useState(initialHeight);
-    const adjustHeight = useCallback((() => {
-        const textarea = ref.current;
-        if (!textarea) return;
-        textarea.style.height = initialHeight;
-        const newHeight = `${textarea.scrollHeight}px`;
-        setHeight(newHeight);
-        textarea.style.height = newHeight;
-    }), [ initialHeight ]);
-    useImperativeHandle(fwdRef, (() => ({
-        element: 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", {
-        ...rest,
-        style: {
-            overflow: "hidden",
-            resize: "none",
-            ...style,
-            height
-        },
-        onInput: input,
-        ref
-    });
-}));
-
-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/Input.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { EventCallback, HtmlInputElement, OverrideProps } from "../types/utility";
-export type InputChangeEvent = {
-    value: string;
-    type: 'change';
-    timeStamp: number;
-    target: HtmlInputElement;
-};
-export type InputChangeEventHandler = EventCallback<InputChangeEvent>;
-export type InputProps = OverrideProps<'input', {
-    onChange?: InputChangeEventHandler;
-    value?: string;
-    /**
-     * Function used to format value on blur.
-     */
-    formatOnChange?: (value: string) => string;
-}>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange" | "formatOnChange"> & {
-    onChange?: InputChangeEventHandler;
-    value?: string;
-    /**
-     * Function used to format value on blur.
-     */
-    formatOnChange?: (value: string) => string;
-} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/RadioMenu.d.ts

@@ -1,33 +0,0 @@
-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;