@mpen/react-basic-inputs 0.2.5 → 0.2.7

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

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { DetailedHTMLProps } from 'react';
 import { ElementType } from 'react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -9,7 +10,11 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { TextareaHTMLAttributes } from 'react';
 
-export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: DebouncedInputProps): JSX_2.Element;
+export declare function ActionButton({ onClick, ...props }: ActionButtonProps): JSX_2.Element;
+
+export declare type ActionButtonProps = RequiredKeys<ComponentPropsWithoutRef<'button'>, 'onClick'>;
+
+export declare const DebouncedInput: FC<DebouncedInputProps>;
 
 export declare type DebouncedInputChangeEvent = {
     value: string;
@@ -17,9 +22,16 @@ export declare type DebouncedInputChangeEvent = {
 
 export declare type DebouncedInputProps = OverrideProps<'input', {
     value: string;
+    /**
+     * Triggers after `debounce` milliseconds following an input change or immediately when the input loses focus.
+     */
     onChange: (ev: DebouncedInputChangeEvent) => void;
+    /**
+     * The delay in milliseconds before the `onChange` event is triggered. This delay is reset with each new input
+     * event.
+     */
     debounce?: number;
-}>;
+}, 'defaultValue' | 'onInput' | 'onBlur'>;
 
 declare type EventCallback<T = never> = (ev: T) => void;
 
@@ -102,6 +114,8 @@ export declare type RadioMenuProps<T extends NonNil> = {
     name?: string;
 };
 
+declare type RequiredKeys<Type, Key extends keyof Type> = Omit<Type, Key> & Required<Pick<Type, Key>>;
+
 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;
@@ -119,7 +133,7 @@ export declare type SelectChangeEventHandler<T> = EventCallback<SelectChangeEven
 export declare type SelectOption<T> = OverrideProps<'option', {
     value: T;
     text: ReactNode;
-    key?: Resolvable<StrictKey, [SelectOption<T>, number]>;
+    uniqueKey?: Resolvable<string, [SelectOption<T>, number]>;
 }, 'children' | 'selected'>;
 
 export declare type SelectProps<T extends NonNil> = OverrideProps<'select', {
@@ -138,8 +152,6 @@ export declare type SelectProps<T extends NonNil> = OverrideProps<'select', {
     placeholder?: ReactNode;
 }, 'children' | 'defaultValue'>;
 
-declare type StrictKey = string | number;
-
 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;
@@ -162,3 +174,9 @@ export declare type TextInputProps = Omit<InputProps, 'text'>;
 declare type VoidFn = () => void;
 
 export { }
+
+
+export declare namespace BasicOption {
+    var __is$option: boolean;
+}
+

package/dist/react-basic-inputs.js

@@ -1,315 +1,266 @@
-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(() => {
+var k = Object.defineProperty;
+var M = (e, t, r) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var O = (e, t, r) => (M(e, typeof t != "symbol" ? t + "" : t, r), r);
+import { jsx as x, jsxs as V } from "react/jsx-runtime";
+import { useDebugValue as D, useRef as v, useInsertionEffect as j, useEffect as q, useMemo as N, useCallback as w, createElement as H, forwardRef as R, useState as T, useImperativeHandle as L, useLayoutEffect as z, useId as F } from "react";
+const $ = 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 U(e) {
+  return e;
 }
-function useEvent(handler) {
-  return useEventHandler(handler);
+let b;
+typeof window < "u" ? b = (e) => {
+  D(e);
+  const t = v(B);
+  j(() => {
+    t.current = e;
+  }, [e]);
+  const r = v(null);
+  return r.current || (r.current = function() {
+    return t.current.apply(this, arguments);
+  }), r.current;
+} : b = $;
+function Y(e) {
+  return b(e);
 }
-function useEvent_shouldNotBeInvokedBeforeMount() {
+function B() {
   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;
+function J() {
+  var e = v(!0);
+  return e.current ? (e.current = !1, !0) : e.current;
 }
-var useUpdateEffect = function(effect, deps) {
-  var isFirstMount = useFirstMountState();
-  useEffect(function() {
-    if (!isFirstMount) {
-      return effect();
-    }
-  }, deps);
+var E = function(e, t) {
+  var r = J();
+  q(function() {
+    if (!r)
+      return e();
+  }, t);
 };
-function resolveValue(val, ...args) {
-  return typeof val === "function" ? val(...args) : val;
+function P(e, ...t) {
+  return typeof e == "function" ? e(...t) : e;
 }
-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;
+function W(e, t) {
+  if (e.uniqueKey != null)
+    return P(e.uniqueKey, e, t);
+  if (typeof e.value == "string")
+    return e.value;
+  if (typeof e.value == "number")
+    return String(e.value);
+  try {
+    const r = JSON.stringify(e.value);
+    if (r !== void 0)
+      return r;
+  } catch {
   }
-  return idx;
+  return String(t);
 }
-class KeyFixer {
+class _ {
   constructor() {
-    __publicField(this, "usedKeys", /* @__PURE__ */ new Map());
+    O(this, "usedKeys", /* @__PURE__ */ new Map());
   }
-  fix(opt, idx) {
-    let fixedKey = defaultMakeKey(opt, idx);
+  fix(t, r) {
+    let s = W(t, r);
     for (; ; ) {
-      let suffix = this.usedKeys.get(fixedKey);
-      if (suffix === void 0) {
-        this.usedKeys.set(fixedKey, 1);
+      let u = this.usedKeys.get(s);
+      if (u === void 0) {
+        this.usedKeys.set(s, 1);
         break;
       }
-      this.usedKeys.set(fixedKey, ++suffix);
-      fixedKey = `${fixedKey}(${suffix})`;
+      this.usedKeys.set(s, ++u), s = `${s}(${u})`;
     }
-    return fixedKey;
+    return s;
   }
 }
-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 C = (e) => ({
+  value: e,
+  text: String(e),
+  disabled: !0,
+  key: Q
+}), G = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", Q = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+function se({
+  options: e,
+  value: t,
+  invalidValueOption: r = C,
+  onChange: s,
+  placeholder: u,
+  ...f
 }) {
-  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,
+  const l = t == null, o = N(() => t != null && e.some((n) => n.value == t), [e, t]), d = N(() => t == null || !r ? null : r(t), [r, t]), i = N(() => {
+    if (o)
+      return e;
+    const n = [...e];
+    return l ? u != null && n.unshift({ text: u, hidden: !0, value: null, key: G }) : d && n.push(d), n;
+  }, [o, e, l, d, u]), y = Y((n) => {
+    const p = n.target.selectedIndex, g = i[p];
+    s == null || s({
+      value: g.value,
       // option: opt,
       // event: ev,
-      index: idx,
+      index: p,
       type: "change",
-      timeStamp: ev.timeStamp,
-      target: ev.target
+      timeStamp: n.timeStamp,
+      target: n.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();
+  }), c = v(null), a = w(() => {
+    c.current && (c.current.selectedIndex < 0 || i[c.current.selectedIndex].value != t) && (c.current.selectedIndex = i.findIndex((n) => n.value == t));
+  }, [i, t]), h = (n) => {
+    c.current = n, a();
   };
-  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);
+  E(() => {
+    a();
+  }, [a]);
+  const m = new _();
+  return /* @__PURE__ */ x("select", { ...f, onChange: y, ref: h, children: i.map((n, p) => {
+    const { value: g, text: ee, uniqueKey: te, ...A } = n, S = m.fix(n, p);
+    return /* @__PURE__ */ H("option", { ...A, key: S, value: S }, n.text);
   }) });
 }
-function collapseWhitespace(str) {
-  if (!str)
-    return "";
-  return String(str).replace(/\s+/gu, " ").trim();
+function X(e) {
+  return e ? String(e).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 = {
+const Z = R(function({ value: t = "", onPaste: r, onChange: s, onInput: u, onBlur: f, formatOnChange: l = U, ...o }, d) {
+  const [i, y] = T(t), c = v(t), a = v(!1);
+  E(() => {
+    y(t), a.current = !1, c.current = t;
+  }, [t]);
+  const h = {
     type: "text",
-    ...otherProps,
-    value: currentValue,
-    onChange: (ev) => {
-      setCurrentValue(ev.target.value);
+    ...o,
+    ref: d,
+    value: i,
+    onChange: (m) => {
+      y(m.target.value);
     },
     // TODO: fire a change event onPaste ?
     // formatOnPaste?
-    onInput: (ev) => {
-      modified.current = true;
-      onInput == null ? void 0 : onInput(ev);
+    // onPaste: ev => {
+    //     ev.preventDefault()
+    //
+    //     const clipboard = formatOnChange(ev.clipboardData.getData('text/plain'))
+    //     const selectionStart = ev.currentTarget.selectionStart ?? 0
+    //     const newText = ev.currentTarget.selectionStart == null
+    //         ? clipboard : ev.currentTarget.value.slice(0,ev.currentTarget.selectionStart) + clipboard + ev.currentTarget.value.slice(ev.currentTarget.selectionEnd ?? ev.currentTarget.selectionStart)
+    //     setCurrentValue(newText)
+    //     ev.currentTarget.value = newText
+    //     ev.currentTarget.setSelectionRange(selectionStart+clipboard.length, selectionStart+clipboard.length)
+    //     onPaste?.(ev)
+    //     // ev.preventDefault()
+    //     // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
+    // },
+    onInput: (m) => {
+      a.current = !0, u == null || u(m);
     },
-    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);
+    onBlur: (m) => {
+      const n = l(i);
+      a.current && (n !== c.current && (s == null || s({
+        type: "change",
+        value: n,
+        timeStamp: m.timeStamp,
+        target: m.target
+      }), c.current = n), n !== m.target.value && y(n)), f == null || f(m);
     }
   };
-  return /* @__PURE__ */ jsx("input", { ...props, ref });
+  return /* @__PURE__ */ x("input", { ...h });
 });
-function TextInput({ formatOnChange = collapseWhitespace, ...otherProps }) {
-  return /* @__PURE__ */ jsx(Input, { formatOnChange, ...otherProps, type: "text" });
+function ce({ formatOnChange: e = X, ...t }) {
+  return /* @__PURE__ */ x(Z, { formatOnChange: e, ...t, 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)
+const ie = R(function({
+  onInput: t,
+  style: r,
+  initialHeight: s = "auto",
+  ...u
+}, f) {
+  const l = v(null), [o, d] = T(s), i = w(() => {
+    const c = l.current;
+    if (!c)
       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);
+    c.style.height = s;
+    const a = `${c.scrollHeight}px`;
+    d(a), c.style.height = a;
+  }, [s]);
+  L(f, () => ({
+    element: l.current,
+    adjustHeight: i
+  }), [i]);
+  const y = b((c) => {
+    i(), t == null || t(c);
   });
-  useLayoutEffect(() => {
-    adjustHeight();
-    const textarea = ref.current;
-    if (!textarea)
+  return z(() => {
+    i();
+    const c = l.current;
+    if (!c)
       return;
-    const resizeObserver = new ResizeObserver((_entries) => {
-      adjustHeight();
+    const a = new ResizeObserver((h) => {
+      i();
     });
-    resizeObserver.observe(textarea);
-    return () => {
-      resizeObserver.unobserve(textarea);
+    return a.observe(c), () => {
+      a.unobserve(c);
     };
-  }, [adjustHeight]);
-  return /* @__PURE__ */ jsx("textarea", { ...rest, style: {
+  }, [i]), /* @__PURE__ */ x("textarea", { ...u, style: {
     overflow: "hidden",
     // these 2 styles aren't needed if the caller sets them in CSS.
     resize: "none",
-    ...style,
-    height
-  }, onInput: input, ref });
+    ...r,
+    height: o
+  }, onInput: y, ref: l });
 });
-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
-      });
-    }
+function ae(e) {
+  const t = F(), r = e.name ?? t, s = e.valueEquals ?? Object.is, u = e.options ?? [], f = new _(), l = b((o) => {
+    const d = Number(o.target.value), i = u[d];
+    i != null && e.onChange != null && e.onChange({
+      value: i.value,
+      index: d,
+      type: "change",
+      timeStamp: o.timeStamp,
+      target: o.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);
+  return /* @__PURE__ */ x("ul", { className: e.className, children: u.map((o, d) => {
+    const { value: i, text: y, key: c, itemClassName: a, labelClassName: h, inputClassName: m, textClassName: n, ...p } = o, g = f.fix(o, d);
+    return e.value !== void 0 && (p.checked = s(i, e.value)), /* @__PURE__ */ x("li", { className: a, "aria-disabled": p.disabled, children: /* @__PURE__ */ V("label", { className: h, children: [
+      /* @__PURE__ */ x("input", { ...p, className: m, value: d, onChange: l, name: r, type: "radio" }),
+      /* @__PURE__ */ x("span", { className: n, children: y })
+    ] }) }, g);
   }) });
 }
-function useBox(value) {
-  const ref = useRef(value);
-  ref.current = value;
-  return ref;
+function K() {
+  return v(null);
 }
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounce = 500,
-  ...props
-}) {
-  const [value, setValue] = useState(initialValue);
-  const onChangeRef = useBox(onChange);
-  const debounceRef = useBox(debounce);
-  useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      onChangeRef.current({ value });
-    }, debounceRef.current);
-    return () => clearTimeout(timeout);
-  }, [debounceRef, onChangeRef, value]);
-  return /* @__PURE__ */ jsx("input", { ...props, value, onChange: (e) => setValue(e.target.value) });
+function I(e) {
+  e.current != null && (clearTimeout(e.current), e.current = null);
+}
+const fe = ({
+  value: e,
+  onChange: t,
+  debounce: r = 500,
+  ...s
+}) => {
+  const u = K(), f = K();
+  E(() => {
+    I(f), u.current != null && (u.current.value = e);
+  }, [e]);
+  const l = () => {
+    u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
+  };
+  return /* @__PURE__ */ x("input", { ...s, ref: u, defaultValue: e, onInput: () => {
+    I(f), f.current = setTimeout(l, r);
+  }, onBlur: () => {
+    I(f), l();
+  } });
+};
+function le({ onClick: e, ...t }) {
+  return t.onClick = (r) => {
+    r.preventDefault(), e == null || e(r);
+  }, /* @__PURE__ */ x("button", { type: "button", ...t });
 }
 export {
-  DebouncedInput,
-  Input,
-  RadioMenu,
-  Select,
-  TextArea,
-  TextInput
+  le as ActionButton,
+  fe as DebouncedInput,
+  Z as Input,
+  ae as RadioMenu,
+  se as Select,
+  ie as TextArea,
+  ce as TextInput
 };

package/dist/react-basic-inputs.umd.cjs

@@ -1,317 +1 @@
-(function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["@mpen/react-basic-inputs"] = {}, global.jsxRuntime, global.React));
-})(this, function(exports2, jsxRuntime, React) {
-  "use strict";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;
-};
-
-  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 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);
-  };
-  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 = 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 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 = 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(() => {
-      refreshSelectedIndex();
-    }, [refreshSelectedIndex]);
-    const fixer = new KeyFixer();
-    return /* @__PURE__ */ jsxRuntime.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__ */ 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 Input2({ 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(() => {
-      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__ */ jsxRuntime.jsx("input", { ...props, ref });
-  });
-  function TextInput({ formatOnChange = collapseWhitespace, ...otherProps }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Input, { formatOnChange, ...otherProps, type: "text" });
-  }
-  const TextArea = React.forwardRef(function TextArea2({
-    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 == null ? void 0 : 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 /* @__PURE__ */ jsxRuntime.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 = 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 /* @__PURE__ */ 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 !== void 0) {
-        rest.checked = eq(value, menu.value);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: itemClassName, "aria-disabled": rest.disabled, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("input", { ...rest, className: inputClassName, value: idx, onChange, name, type: "radio" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClassName, children: text })
-      ] }) }, fixedKey);
-    }) });
-  }
-  function useBox(value) {
-    const ref = React.useRef(value);
-    ref.current = value;
-    return ref;
-  }
-  function DebouncedInput({
-    value: initialValue,
-    onChange,
-    debounce = 500,
-    ...props
-  }) {
-    const [value, setValue] = React.useState(initialValue);
-    const onChangeRef = useBox(onChange);
-    const debounceRef = useBox(debounce);
-    React.useEffect(() => {
-      setValue(initialValue);
-    }, [initialValue]);
-    React.useEffect(() => {
-      const timeout = setTimeout(() => {
-        onChangeRef.current({ value });
-      }, debounceRef.current);
-      return () => clearTimeout(timeout);
-    }, [debounceRef, onChangeRef, value]);
-    return /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, value, onChange: (e) => setValue(e.target.value) });
-  }
-  exports2.DebouncedInput = DebouncedInput;
-  exports2.Input = Input;
-  exports2.RadioMenu = RadioMenu;
-  exports2.Select = Select;
-  exports2.TextArea = TextArea;
-  exports2.TextInput = TextInput;
-  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+(function(l,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(l=typeof globalThis<"u"?globalThis:l||self,s(l["@mpen/react-basic-inputs"]={},l.jsxRuntime,l.React))})(this,function(l,s,n){"use strict";var J=Object.defineProperty;var W=(l,s,n)=>s in l?J(l,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):l[s]=n;var w=(l,s,n)=>(W(l,typeof s!="symbol"?s+"":s,n),n);const M=Object.freeze(()=>{});function A(e){return e}let g;typeof window<"u"?g=e=>{n.useDebugValue(e);const t=n.useRef(_);n.useInsertionEffect(()=>{t.current=e},[e]);const r=n.useRef(null);return r.current||(r.current=function(){return t.current.apply(this,arguments)}),r.current}:g=M;function j(e){return g(e)}function _(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function k(){var e=n.useRef(!0);return e.current?(e.current=!1,!0):e.current}var N=function(e,t){var r=k();n.useEffect(function(){if(!r)return e()},t)};function q(e,...t){return typeof e=="function"?e(...t):e}function D(e,t){if(e.uniqueKey!=null)return q(e.uniqueKey,e,t);if(typeof e.value=="string")return e.value;if(typeof e.value=="number")return String(e.value);try{const r=JSON.stringify(e.value);if(r!==void 0)return r}catch{}return String(t)}class E{constructor(){w(this,"usedKeys",new Map)}fix(t,r){let f=D(t,r);for(;;){let c=this.usedKeys.get(f);if(c===void 0){this.usedKeys.set(f,1);break}this.usedKeys.set(f,++c),f=`${f}(${c})`}return f}}const V=e=>({value:e,text:String(e),disabled:!0,key:L}),H="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",L="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function z({options:e,value:t,invalidValueOption:r=V,onChange:f,placeholder:c,...d}){const x=t==null,y=n.useMemo(()=>t!=null&&e.some(u=>u.value==t),[e,t]),m=n.useMemo(()=>t==null||!r?null:r(t),[r,t]),a=n.useMemo(()=>{if(y)return e;const u=[...e];return x?c!=null&&u.unshift({text:c,hidden:!0,value:null,key:H}):m&&u.push(m),u},[y,e,x,m,c]),h=j(u=>{const b=u.target.selectedIndex,I=a[b];f==null||f({value:I.value,index:b,type:"change",timeStamp:u.timeStamp,target:u.target})}),i=n.useRef(null),o=n.useCallback(()=>{i.current&&(i.current.selectedIndex<0||a[i.current.selectedIndex].value!=t)&&(i.current.selectedIndex=a.findIndex(u=>u.value==t))},[a,t]),v=u=>{i.current=u,o()};N(()=>{o()},[o]);const p=new E;return s.jsx("select",{...d,onChange:h,ref:v,children:a.map((u,b)=>{const{value:I,text:G,uniqueKey:Q,...C}=u,T=p.fix(u,b);return n.createElement("option",{...C,key:T,value:T},u.text)})})}function F(e){return e?String(e).replace(/\s+/gu," ").trim():""}const O=n.forwardRef(function({value:t="",onPaste:r,onChange:f,onInput:c,onBlur:d,formatOnChange:x=A,...y},m){const[a,h]=n.useState(t),i=n.useRef(t),o=n.useRef(!1);N(()=>{h(t),o.current=!1,i.current=t},[t]);const v={type:"text",...y,ref:m,value:a,onChange:p=>{h(p.target.value)},onInput:p=>{o.current=!0,c==null||c(p)},onBlur:p=>{const u=x(a);o.current&&(u!==i.current&&(f==null||f({type:"change",value:u,timeStamp:p.timeStamp,target:p.target}),i.current=u),u!==p.target.value&&h(u)),d==null||d(p)}};return s.jsx("input",{...v})});function $({formatOnChange:e=F,...t}){return s.jsx(O,{formatOnChange:e,...t,type:"text"})}const B=n.forwardRef(function({onInput:t,style:r,initialHeight:f="auto",...c},d){const x=n.useRef(null),[y,m]=n.useState(f),a=n.useCallback(()=>{const i=x.current;if(!i)return;i.style.height=f;const o=`${i.scrollHeight}px`;m(o),i.style.height=o},[f]);n.useImperativeHandle(d,()=>({element:x.current,adjustHeight:a}),[a]);const h=g(i=>{a(),t==null||t(i)});return n.useLayoutEffect(()=>{a();const i=x.current;if(!i)return;const o=new ResizeObserver(v=>{a()});return o.observe(i),()=>{o.unobserve(i)}},[a]),s.jsx("textarea",{...c,style:{overflow:"hidden",resize:"none",...r,height:y},onInput:h,ref:x})});function P(e){const t=n.useId(),r=e.name??t,f=e.valueEquals??Object.is,c=e.options??[],d=new E,x=g(y=>{const m=Number(y.target.value),a=c[m];a!=null&&e.onChange!=null&&e.onChange({value:a.value,index:m,type:"change",timeStamp:y.timeStamp,target:y.target})});return s.jsx("ul",{className:e.className,children:c.map((y,m)=>{const{value:a,text:h,key:i,itemClassName:o,labelClassName:v,inputClassName:p,textClassName:u,...b}=y,I=d.fix(y,m);return e.value!==void 0&&(b.checked=f(a,e.value)),s.jsx("li",{className:o,"aria-disabled":b.disabled,children:s.jsxs("label",{className:v,children:[s.jsx("input",{...b,className:p,value:m,onChange:x,name:r,type:"radio"}),s.jsx("span",{className:u,children:h})]})},I)})})}function K(){return n.useRef(null)}function S(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const U=({value:e,onChange:t,debounce:r=500,...f})=>{const c=K(),d=K();N(()=>{S(d),c.current!=null&&(c.current.value=e)},[e]);const x=()=>{c.current!=null&&c.current.value!==e&&(t==null||t({value:c.current.value}))};return s.jsx("input",{...f,ref:c,defaultValue:e,onInput:()=>{S(d),d.current=setTimeout(x,r)},onBlur:()=>{S(d),x()}})};function Y({onClick:e,...t}){return t.onClick=r=>{r.preventDefault(),e==null||e(r)},s.jsx("button",{type:"button",...t})}l.ActionButton=Y,l.DebouncedInput=U,l.Input=O,l.RadioMenu=P,l.Select=z,l.TextArea=B,l.TextInput=$,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mpen/react-basic-inputs",
   "private": false,
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/react-basic-inputs.umd.cjs",
@@ -24,10 +24,10 @@
     "_publish": "npm publish --access=public"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
+    "@mpen/is-type": "^0.1.11",
     "@types/bun": "^1.1.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
@@ -38,11 +38,11 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "npm-run-all": "^4.1.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-use": "^17.5.0",
     "sass": "^1.77.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1"
   }