@mpen/react-basic-inputs 0.2.2 → 0.2.4

package/README.md

@@ -1,26 +1,28 @@
-# react-basic-inputs
+# @mpen/react-basic-inputs
 
 Thin wrappers around native input elements to make them behave better.
 
+<a href="https://pkg-size.dev/@mpen/react-basic-inputs"><img src="https://pkg-size.dev/badge/bundle/12662" title="Bundle size for @mpen/react-basic-inputs"></a>
+
 ## Installation
 
 ```sh
-yarn add @mnpenner/react-basic-inputs
+bun add --dev @mpen/react-basic-inputs
+# or
+yarn add @mpen/react-basic-inputs
 # or
-npm install @mnpenner/react-basic-inputs
+npm install @mpen/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
+- Npm: https://www.npmjs.com/package/@mpen/react-basic-inputs
+  - https://www.npmjs.com/package/@mpen/react-basic-inputs?activeTab=code
+- Yarn: https://yarnpkg.com/package/@mpen/react-basic-inputs
+- pkg-size: https://pkg-size.dev/@mpen%2Freact-basic-inputs
+- Bundlephobia: https://bundlephobia.com/package/@mpen/react-basic-inputs
+- Unpkg: https://unpkg.com/@mpen/react-basic-inputs/dist/react-basic-inputs.js
+- jsDelivr: https://cdn.jsdelivr.net/npm/@mpen/react-basic-inputs/dist/react-basic-inputs.js
 
 ## Components
 

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

@@ -9,6 +9,18 @@ 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 type DebouncedInputChangeEvent = {
+    value: string;
+};
+
+export declare type DebouncedInputProps = OverrideProps<'input', {
+    value: string;
+    onChange: (ev: DebouncedInputChangeEvent) => void;
+    debounce?: number;
+}>;
+
 declare type EventCallback<T = never> = (ev: T) => void;
 
 declare type HtmlInputElement = HTMLElementTagNameMap['input'];
@@ -107,7 +119,7 @@ export declare type SelectChangeEventHandler<T> = EventCallback<SelectChangeEven
 export declare type SelectOption<T> = OverrideProps<'option', {
     value: T;
     text: ReactNode;
-    key?: Resolvable<Key, [SelectOption<T>, number]>;
+    key?: Resolvable<StrictKey, [SelectOption<T>, number]>;
 }, 'children' | 'selected'>;
 
 export declare type SelectProps<T extends NonNil> = OverrideProps<'select', {
@@ -126,6 +138,8 @@ 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;

package/dist/react-basic-inputs.js

@@ -280,7 +280,33 @@ function RadioMenu(menu) {
     ] }) }, fixedKey);
   }) });
 }
+function useBox(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+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) });
+}
 export {
+  DebouncedInput,
   Input,
   RadioMenu,
   Select,

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

@@ -282,6 +282,32 @@ var __publicField = (obj, key, value) => {
       ] }) }, 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mpen/react-basic-inputs",
   "private": false,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/react-basic-inputs.umd.cjs",
@@ -15,11 +15,13 @@
   },
   "scripts": {
     "dev": "bun run --bun vite",
-    "build": "bun run --bun tsc && bun run --bun vite build",
-    "lint": "bun run --bun eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build": "bun run --bun vite build",
+    "lint": "run-s 'lint:*'",
+    "lint:ts": "bun run --bun tsc",
+    "lint:es": "bun run --bun eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "bun run --bun vite preview",
     "_prepublishOnly": "bun run --bun build",
-    "publish": "npm publish --access=public"
+    "_publish": "npm publish --access=public"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -39,6 +41,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use": "^17.5.0",
+    "sass": "^1.77.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1"