@agentero/design-system 0.35.0 → 0.36.0

package/src/input-number/input-number.js

@@ -0,0 +1,33 @@
+"use client";
+import { InputContext as e, useInputContext as t } from "../input/context.js";
+import { Input as n } from "../input/input.js";
+import { jsx as r } from "react/jsx-runtime";
+import { NumericFormat as i } from "react-number-format";
+//#region src/input-number/input-number.tsx
+var a = (t) => /* @__PURE__ */ r(e, {
+	value: null,
+	children: /* @__PURE__ */ r(n, {
+		"data-slot": "input-number",
+		...t
+	})
+}), o = (e) => {
+	let { ref: n, maxNumber: o, thousandSeparator: s = !1, allowLeadingZeros: c = !0, onChange: l, ...u } = t(e);
+	return /* @__PURE__ */ r(i, {
+		...u,
+		customInput: a,
+		getInputRef: n,
+		thousandSeparator: s,
+		allowLeadingZeros: c,
+		allowNegative: !1,
+		onChange: l,
+		onValueChange: ({ formattedValue: e }, { event: t, source: n }) => {
+			if (n !== "event" || t?.type !== "blur") return;
+			let r = t.target;
+			r.value = e, l?.(Object.assign(Object.create(t), t, { type: "change" }));
+		},
+		isAllowed: ({ floatValue: e }) => o === void 0 || e === void 0 || e <= o
+	});
+};
+o.displayName = "InputNumber";
+//#endregion
+export { o as InputNumber };

package/src/input-search/constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Milliseconds DebouncedInputSearch waits after the last keystroke before it
+ * calls `onChange`.
+ *
+ * @summary Debounce delay of DebouncedInputSearch, in milliseconds
+ */
+export declare const DEBOUNCE_TIME = 300;

package/src/input-search/constants.js

@@ -0,0 +1,4 @@
+//#region src/input-search/constants.ts
+var e = 300;
+//#endregion
+export { e as DEBOUNCE_TIME };

package/src/input-search/debounced-input-search.d.ts

@@ -0,0 +1,56 @@
+import { ChangeEventHandler } from 'react';
+import { InputSearchProps } from './input-search';
+export type DebouncedInputSearchProps = Omit<InputSearchProps, 'value' | 'defaultValue' | 'onChange'> & {
+    /**
+     * The query the page is filtering by. The field shows it, and follows it
+     * when it changes from outside (a reset button, a saved filter, navigation),
+     * unless the user is in the middle of typing: then what they typed stays,
+     * and `onChange` reports it once they pause.
+     */
+    value: string;
+    /**
+     * Fires once the user has stopped typing for `DEBOUNCE_TIME` milliseconds,
+     * with the change event of the last keystroke; clearing the field goes
+     * through the same delay. A pending call fires at once when the user
+     * presses Enter, and is dropped when the field unmounts, so a page that is
+     * navigating away is not sent back. Read the text from `event.target.value`, which is
+     * what the field shows at that moment. `event.currentTarget` is no longer
+     * set by then, since the event is delivered after the browser's dispatch.
+     */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+/**
+ * DebouncedInputSearch is an [InputSearch](?path=/docs/components-inputsearch--docs)
+ * for filters that are expensive to run: a table query, a request to the
+ * server. Keystrokes show up in the field at once, but `onChange` fires only
+ * once the user pauses for `DEBOUNCE_TIME` (300ms), with the last change
+ * event, so the page runs one search per pause instead of one per key. It is
+ * always controlled: `value` and `onChange` are required, the page owns the
+ * query, and the field follows a `value` changed from outside while the user
+ * is not typing.
+ *
+ * Every other prop goes to the InputSearch and from there to the `<input>`:
+ * the `ref`, `size`, `isLoading`, `placeholder`, `aria-*` and every other
+ * standard attribute. Only `type` is not accepted. `className` styles the
+ * frame.
+ *
+ * Do not use it where every keystroke matters, such as filtering a short list
+ * already in memory; that is a plain
+ * [InputSearch](?path=/docs/components-inputsearch--docs). To pick a value from
+ * the results, use [Combobox](?path=/docs/components-combobox--docs).
+ *
+ * @summary Search input that reports the query once the user pauses typing
+ * @dataAttribute {string} data-slot - Always set to "input-search" on the frame
+ *
+ * @example
+ * <DebouncedInputSearch
+ *   aria-label="Search agencies"
+ *   value={filters.query}
+ *   onChange={event => setFilters({ ...filters, query: event.target.value })}
+ *   isLoading={isFetching}
+ * />
+ */
+export declare const DebouncedInputSearch: {
+    ({ value, onChange, onKeyDown, ...props }: DebouncedInputSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-search/debounced-input-search.js

@@ -0,0 +1,27 @@
+"use client";
+import { chain as e } from "../../lib/merge-props.js";
+import "./constants.js";
+import { InputSearch as t } from "./input-search.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useDebouncedCallback as i } from "use-debounce";
+//#region src/input-search/debounced-input-search.tsx
+var a = ({ value: a, onChange: o, onKeyDown: s, ...c }) => {
+	let [l, u] = n(a), [d, f] = n(a), p = i(o, 300);
+	a !== d && (f(a), p.isPending() || u(a));
+	let m = (e) => {
+		u(e.target.value), p(e);
+	}, h = (e) => {
+		let t = e.nativeEvent.isComposing || e.keyCode === 229;
+		e.key === "Enter" && !t && p.flush();
+	};
+	return /* @__PURE__ */ r(t, {
+		...c,
+		value: l,
+		onChange: m,
+		onKeyDown: e(h, s)
+	});
+};
+a.displayName = "DebouncedInputSearch";
+//#endregion
+export { a as DebouncedInputSearch };

package/src/input-search/index.d.ts

@@ -1,2 +1,5 @@
+export { DEBOUNCE_TIME } from './constants';
+export { DebouncedInputSearch } from './debounced-input-search';
+export type { DebouncedInputSearchProps } from './debounced-input-search';
 export { InputSearch, inputSearchRecipe } from './input-search';
 export type { InputSearchProps } from './input-search';

package/src/input-search/index.js

@@ -1,2 +1,4 @@
-import { InputSearch as e, inputSearchRecipe as t } from "./input-search.js";
-export { e as InputSearch, t as inputSearchRecipe };
+import { DEBOUNCE_TIME as e } from "./constants.js";
+import { InputSearch as t, inputSearchRecipe as n } from "./input-search.js";
+import { DebouncedInputSearch as r } from "./debounced-input-search.js";
+export { e as DEBOUNCE_TIME, r as DebouncedInputSearch, t as InputSearch, n as inputSearchRecipe };