@mpen/react-basic-inputs 0.1.2

package/README.md

@@ -0,0 +1,37 @@
+# react-basic-inputs
+
+Thin wrappers around native input elements to make them behave better.
+
+## Installation
+
+```sh
+yarn add @mnpenner/react-basic-inputs
+# or
+npm install @mnpenner/react-basic-inputs
+```
+
+## Links
+
+- Docs: https://mnpenner.github.io/react-basic-inputs
+- Repo: https://github.com/mnpenner/react-basic-inputs
+  - Code: https://github.com/mnpenner/react-basic-inputs/tree/default/src
+  - Issues: https://github.com/mnpenner/react-basic-inputs/issues
+- Npm: https://www.npmjs.com/package/@mnpenner/react-basic-inputs
+- Yarn: https://yarnpkg.com/package/@mnpenner/react-basic-inputs
+- Bundlephobia: https://bundlephobia.com/package/@mnpenner/react-basic-inputs
+- Unpkg: https://unpkg.com/@mnpenner/react-basic-inputs/dist/bundle.mjs
+- jsDelivr: https://cdn.jsdelivr.net/npm/@mnpenner/react-basic-inputs/dist/bundle.mjs
+
+## Components
+
+### Select
+
+Like `<select>` but takes an `options` prop instead of `children`.
+
+- The values are typed; they can be anything, not just `string`
+- Duplicate values are OK. e.g. if you want to put "United States" at the top of your country list and then again in
+  alphabetical order, it will just work
+- Each `<option>` will automatically be assigned a unique React `key`
+- If the current `value` cannot be found in the list of `options` it will be appended to the end
+  - If you want to override this behavior, set `invalidValueOption`
+- `placeholder` prop

package/dist/bundle.cjs

@@ -0,0 +1,212 @@
+"use strict";
+
+var jsxRuntime = require("react/jsx-runtime");
+
+var React = require("react");
+
+const NOOP = Object.freeze((() => {}));
+
+function identity(x) {
+    return x;
+}
+
+let useEvent;
+
+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);
+        }), []);
+    };
+} else {
+    useEvent = NOOP;
+}
+
+var useEvent$1 = useEvent;
+
+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;
+
+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);
+    } else if (typeof opt.value === "string" || typeof opt.value === "number") {
+        return opt.value;
+    }
+    return idx;
+}
+
+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$1((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 usedKeys = new Map;
+    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})`;
+            }
+            return React.createElement("option", {
+                ...optAttrs,
+                key: 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"
+    });
+}
+
+exports.Input = Input;
+
+exports.Select = Select;
+
+exports.TextInput = TextInput;

package/dist/bundle.d.ts

@@ -0,0 +1,3 @@
+export { Select } from './components/Select';
+export { TextInput } from './components/TextInput';
+export { Input } from './components/Input';

package/dist/bundle.mjs

@@ -0,0 +1,206 @@
+import { jsx } from "react/jsx-runtime";
+
+import { useDebugValue, useRef, useLayoutEffect, useCallback, useEffect, useMemo, createElement, forwardRef, useState } from "react";
+
+const NOOP = Object.freeze((() => {}));
+
+function identity(x) {
+    return x;
+}
+
+let useEvent;
+
+if (typeof window !== "undefined") {
+    useEvent = handler => {
+        useDebugValue(handler);
+        const handlerRef = useRef(handler);
+        useLayoutEffect((() => {
+            handlerRef.current = handler;
+        }), [ handler ]);
+        return useCallback((ev => {
+            handlerRef.current(ev);
+        }), []);
+    };
+} else {
+    useEvent = NOOP;
+}
+
+var useEvent$1 = useEvent;
+
+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;
+
+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);
+    } else if (typeof opt.value === "string" || typeof opt.value === "number") {
+        return opt.value;
+    }
+    return idx;
+}
+
+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$1((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 usedKeys = new Map;
+    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})`;
+            }
+            return createElement("option", {
+                ...optAttrs,
+                key: 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"
+    });
+}
+
+export { Input, Select, TextInput };

package/dist/components/Input.d.ts

@@ -0,0 +1,25 @@
+/// <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/Select.d.ts

@@ -0,0 +1,33 @@
+import { Key, ReactNode } from 'react';
+import { Resolvable } from '../util/resolvable';
+import { EventCallback, HtmlSelectElement, NonNil, OverrideProps } from "../types/utility";
+export type SelectOption<T> = OverrideProps<'option', {
+    value: T;
+    text: ReactNode;
+    key?: Resolvable<Key, [SelectOption<T>, number]>;
+}, 'children' | 'selected'>;
+export interface SelectChangeEvent<T> {
+    value: T;
+    index: number;
+    type: 'change';
+    timeStamp: number;
+    target: HtmlSelectElement;
+}
+export type SelectChangeEventHandler<T> = EventCallback<SelectChangeEvent<T>>;
+export type InvalidValueToOption<T> = (value: T) => SelectOption<T>;
+export type SelectProps<T extends NonNil> = OverrideProps<'select', {
+    options: SelectOption<T>[];
+    value?: T | null;
+    onChange?: SelectChangeEventHandler<T>;
+    /**
+     * Function used to create an <option> when `value` cannot be found in the list of `options`.
+     * Set to `null` to disable this behavior.
+     * By default, stringifies `value`.
+     */
+    invalidValueOption?: InvalidValueToOption<T> | null;
+    /**
+     * Text to display when `value` is nullish.
+     */
+    placeholder?: ReactNode;
+}, 'children' | 'defaultValue'>;
+export declare function Select<T extends NonNil>({ options, value, invalidValueOption, onChange, placeholder, ...selectAttrs }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/TextInput.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from "./Input";
+export type TextInputProps = Omit<InputProps, 'text'>;
+export declare function TextInput({ formatOnChange, ...otherProps }: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useEvent.d.ts

@@ -0,0 +1,6 @@
+import { 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;

package/dist/types/utility.d.ts

@@ -0,0 +1,30 @@
+export type Fn<TArgs extends ReadonlyArray<unknown> = unknown[], TRet = unknown> = (...args: TArgs[]) => TRet;
+export type AnyFn = (...args: any[]) => any;
+export type EventCallback<T = never> = (ev: T) => void;
+export type VoidFn = () => void;
+export type EmptyObject = Record<PropertyKey, never>;
+export type UnknownObject = Record<PropertyKey, unknown>;
+export type Override<Base, Extension, DeleteKeys extends PropertyKey = never> = Omit<Base, keyof Extension | DeleteKeys> & Extension;
+export type PartiallyRequired<Type, Key extends keyof Type> = Omit<Type, Key> & Required<Pick<Type, Key>>;
+export type Optionalize<T1 extends T2, T2> = Omit<T1, keyof T2> & Partial<Pick<T1, keyof T2>>;
+/**
+ * Nullish. Either `null` or `undefined`.
+ */
+export type nil = null | undefined;
+/**
+ * Not null or undefined.
+ */
+export type NonNil = {};
+export type OverrideProps<Base extends import('react').ElementType, Extension, DeleteKeys extends PropertyKey = never> = Override<import('react').ComponentPropsWithoutRef<Base>, Extension, DeleteKeys>;
+export type OmitProps<Base extends import('react').ElementType, DeleteKeys extends PropertyKey> = Omit<import('react').ComponentPropsWithoutRef<Base>, DeleteKeys>;
+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 HtmlInputElement = HTMLElementTagNameMap['input'];
+export type HtmlSelectElement = HTMLElementTagNameMap['select'];
+export type HtmlInputChangeEvent = import('react').ChangeEvent<HtmlInputElement>;
+export type ArrayType<T extends any[]> = T[number];
+type _UnionKeys<T> = T extends T ? keyof T : never;
+type _StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<_UnionKeys<TAll>, keyof T>, never>> : never;
+export type XOR<T> = _StrictUnionHelper<T, T>;
+export {};

package/dist/util/constants.d.ts

@@ -0,0 +1,5 @@
+import { AnyFn, NonNil } from "../types/utility";
+export declare const EMPTY_OBJECT: Readonly<NonNil>;
+export declare const EMPTY_ARRAY: ReadonlyArray<any>;
+export declare const NOOP: AnyFn;
+export declare function identity<T>(x: T): T;

package/dist/util/format.d.ts

@@ -0,0 +1,9 @@
+import { nil } from "../types/utility";
+export declare function collapseWhitespace(str: string | nil): string;
+export declare function formatEmail(str: string | nil): string;
+export declare function formatUrl(str: string | nil): string;
+export declare function fullWide(n: number): string;
+export declare function stringToNumber(n: string): number;
+export declare function numberToString(f: number): string;
+export declare function formatStrNumber(n: string): string;
+export declare function formatUsername(str: string | nil): string;

package/dist/util/resolvable.d.ts

@@ -0,0 +1,4 @@
+import { Fn } from "../types/utility";
+export type Resolvable<TValue = unknown, TArgs extends ReadonlyArray<unknown> = []> = TValue extends any ? TValue | ((...args: TArgs) => TValue) : never;
+export type Resolved<T> = T extends Fn ? ReturnType<T> : T;
+export declare function resolveValue<TValue, TArgs extends ReadonlyArray<any>>(val: Resolvable<TValue, TArgs>, ...args: TArgs): TValue;

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@mpen/react-basic-inputs",
+  "version": "0.1.2",
+  "packageManager": "yarn@3.5.0",
+  "exports": {
+    ".": {
+      "import": "./dist/bundle.mjs",
+      "require": "./dist/bundle.cjs",
+      "types": "./dist/bundle.d.ts"
+    }
+  },
+  "type": "module",
+  "files": [
+    "./dist"
+  ],
+  "scripts": {
+    "dev:build": "rollup -cw",
+    "dev:serve": "serve -l tcp://0.0.0.0:8080",
+    "dev": "run-p \"dev:**\"",
+    "serve": "bun run --hot dev/serve.ts",
+    "bundle:clean": "rimraf -g \"dist/*\"",
+    "bundle:build": "rollup -c",
+    "bundle": "run-s bundle:clean bundle:build",
+    "patch": "npm version patch && VER=$(jq -r '.version' package.json) && hg ci -m \"Publish v$VER\" && hg tag \"v$VER\"",
+    "release": "run-s bundle patch && npm publish --access=public && hg push"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@types/eslint": "^8",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.5.0",
+    "npm-run-all": "^4.1.5",
+    "react": ">=17 <19",
+    "react-dom": ">=17 <19",
+    "react-use": "^17.4.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.20.2",
+    "serve": "^14.2.0",
+    "ts-jest": "^29.1.0",
+    "tslib": "^2.5.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=17 <19",
+    "react-dom": ">=17 <19"
+  }
+}