@mpen/react-basic-inputs 0.1.11 → 0.2.0

package/dist/react-basic-inputs.d.ts

@@ -0,0 +1,150 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { DetailedHTMLProps } from 'react';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Key } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+declare type EventCallback<T = never> = (ev: T) => void;
+
+declare type HtmlInputElement = HTMLElementTagNameMap['input'];
+
+declare type HtmlSelectElement = HTMLElementTagNameMap['select'];
+
+/** Hack to de-conflict React's HTMLInputElement vs the standard dom lib */
+declare type HtmlTextAreaElement = HTMLElementTagNameMap['textarea'];
+
+export declare const Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange" | "formatOnChange"> & {
+onChange?: InputChangeEventHandler | undefined;
+value?: string | undefined;
+/**
+* Function used to format value on blur.
+*/
+formatOnChange?: ((value: string) => string) | undefined;
+} & RefAttributes<HTMLInputElement>>;
+
+export declare type InputChangeEvent = {
+    value: string;
+    type: 'change';
+    timeStamp: number;
+    target: HtmlInputElement;
+};
+
+export declare type InputChangeEventHandler = EventCallback<InputChangeEvent>;
+
+export declare type InputProps = OverrideProps<'input', {
+    onChange?: InputChangeEventHandler;
+    value?: string;
+    /**
+     * Function used to format value on blur.
+     */
+    formatOnChange?: (value: string) => string;
+}>;
+
+export declare type InvalidValueToOption<T> = (value: T) => SelectOption<T>;
+
+/**
+ * Not null or undefined.
+ */
+declare type NonNil = {};
+
+declare type Override<Base, Extension, DeleteKeys extends PropertyKey = never> = Omit<Base, keyof Extension | DeleteKeys> & Extension;
+
+declare type OverrideProps<Base extends ElementType, Extension, DeleteKeys extends PropertyKey = never> = Override<ComponentPropsWithoutRef<Base>, Extension, DeleteKeys>;
+
+export declare function RadioMenu<T extends NonNil>(menu: RadioMenuProps<T>): JSX_2.Element;
+
+export declare type RadioMenuChangeEvent<T> = {
+    value: T;
+    index: number;
+    type: 'change';
+    timeStamp: number;
+    target: HtmlInputElement;
+};
+
+export declare type RadioMenuChangeEventHandler<T> = EventCallback<RadioMenuChangeEvent<T>>;
+
+export declare 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 declare 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;
+};
+
+declare type Resolvable<TValue = unknown, TArgs extends ReadonlyArray<unknown> = []> = TValue extends any ? TValue | ((...args: TArgs) => TValue) : never;
+
+export declare function Select<T extends NonNil>({ options, value, invalidValueOption, onChange, placeholder, ...selectAttrs }: SelectProps<T>): JSX_2.Element;
+
+export declare interface SelectChangeEvent<T> {
+    value: T;
+    index: number;
+    type: 'change';
+    timeStamp: number;
+    target: HtmlSelectElement;
+}
+
+export declare type SelectChangeEventHandler<T> = EventCallback<SelectChangeEvent<T>>;
+
+export declare type SelectOption<T> = OverrideProps<'option', {
+    value: T;
+    text: ReactNode;
+    key?: Resolvable<Key, [SelectOption<T>, number]>;
+}, 'children' | 'selected'>;
+
+export declare 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 const TextArea: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "initialHeight"> & {
+/** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
+initialHeight?: string | undefined;
+} & RefAttributes<TextAreaRef>>;
+
+export declare type TextAreaProps = OverrideProps<'textarea', {
+    /** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
+    initialHeight?: string;
+}>;
+
+export declare type TextAreaRef = {
+    element: HtmlTextAreaElement | null;
+    adjustHeight: VoidFn;
+};
+
+export declare function TextInput({ formatOnChange, ...otherProps }: TextInputProps): JSX_2.Element;
+
+export declare type TextInputProps = Omit<InputProps, 'text'>;
+
+declare type VoidFn = () => void;
+
+export { }

package/dist/react-basic-inputs.js

@@ -0,0 +1,289 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+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 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);
+};
+function resolveValue(val, ...args) {
+  return typeof val === "function" ? val(...args) : val;
+}
+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 {
+  constructor() {
+    __publicField(this, "usedKeys", /* @__PURE__ */ new Map());
+  }
+  fix(opt, idx) {
+    let fixedKey = defaultMakeKey(opt, idx);
+    for (; ; ) {
+      let suffix = this.usedKeys.get(fixedKey);
+      if (suffix === void 0) {
+        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 fixedOptions2 = [...options];
+    if (isNotSelected) {
+      if (placeholder != null) {
+        fixedOptions2.unshift({ text: placeholder, hidden: true, value: null, key: PLACEHOLDER_KEY });
+      }
+    } else if (extraOption) {
+      fixedOptions2.push(extraOption);
+    }
+    return fixedOptions2;
+  }, [isValid, options, isNotSelected, extraOption, placeholder]);
+  const handleChange = useEvent((ev) => {
+    const idx = ev.target.selectedIndex;
+    const opt = fixedOptions[idx];
+    onChange == null ? void 0 : onChange({
+      value: opt.value,
+      // option: opt,
+      // event: ev,
+      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(() => {
+    refreshSelectedIndex();
+  }, [refreshSelectedIndex]);
+  const fixer = new KeyFixer();
+  return /* @__PURE__ */ jsx("select", { ...selectAttrs, onChange: handleChange, ref: setRef, children: fixedOptions.map((opt, idx) => {
+    const { value: value2, text, key, ...optAttrs } = opt;
+    const fixedKey = fixer.fix(opt, idx);
+    return /* @__PURE__ */ 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 Input2({ value = "", onChange, onInput, onBlur, formatOnChange = identity, ...otherProps }, ref) {
+  const [currentValue, setCurrentValue] = useState(value);
+  const lastValue = useRef(value);
+  const modified = useRef(false);
+  useUpdateEffect(() => {
+    setCurrentValue(value);
+    modified.current = false;
+    lastValue.current = value;
+  }, [value]);
+  const props = {
+    type: "text",
+    ...otherProps,
+    value: currentValue,
+    onChange: (ev) => {
+      setCurrentValue(ev.target.value);
+    },
+    // TODO: fire a change event onPaste ?
+    // formatOnPaste?
+    onInput: (ev) => {
+      modified.current = true;
+      onInput == null ? void 0 : onInput(ev);
+    },
+    onBlur: (ev) => {
+      const formattedValue = formatOnChange(currentValue);
+      if (modified.current) {
+        if (formattedValue !== lastValue.current) {
+          onChange == null ? void 0 : onChange({
+            type: "change",
+            value: formattedValue,
+            timeStamp: ev.timeStamp,
+            target: ev.target
+          });
+          lastValue.current = formattedValue;
+        }
+        if (formattedValue !== ev.target.value) {
+          setCurrentValue(formattedValue);
+        }
+      }
+      onBlur == null ? void 0 : onBlur(ev);
+    }
+  };
+  return /* @__PURE__ */ jsx("input", { ...props, ref });
+});
+function TextInput({ formatOnChange = collapseWhitespace, ...otherProps }) {
+  return /* @__PURE__ */ jsx(Input, { formatOnChange, ...otherProps, type: "text" });
+}
+const TextArea = forwardRef(function TextArea2({
+  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 == null ? void 0 : 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 /* @__PURE__ */ jsx("textarea", { ...rest, style: {
+    overflow: "hidden",
+    // these 2 styles aren't needed if the caller sets them in CSS.
+    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 /* @__PURE__ */ 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 !== void 0) {
+      rest.checked = eq(value, menu.value);
+    }
+    return /* @__PURE__ */ jsx("li", { className: itemClassName, "aria-disabled": rest.disabled, children: /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+      /* @__PURE__ */ jsx("input", { ...rest, className: inputClassName, value: idx, onChange, name, type: "radio" }),
+      /* @__PURE__ */ jsx("span", { className: textClassName, children: text })
+    ] }) }, fixedKey);
+  }) });
+}
+export {
+  Input,
+  RadioMenu,
+  Select,
+  TextArea,
+  TextInput
+};