@agentero/design-system 0.33.1 → 0.34.0

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

@@ -0,0 +1,96 @@
+import { InputProps } from '../input';
+/**
+ * Style recipe for InputSearch. Slots: `input` (hides the browser's own
+ * cancel button and search decoration, so the field shows only the clear
+ * button it draws) and `clear` (the clear button, the same 24px icon button
+ * as the Combobox clear, removed while the input is disabled).
+ *
+ * @summary tailwind-variants recipe backing the InputSearch input and clear button
+ */
+export declare const inputSearchRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    input: string;
+    clear: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            input?: import('tailwind-merge').ClassNameValue;
+            clear?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    input: string;
+    clear: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    input: string;
+    clear: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type InputSearchProps = Omit<InputProps, 'type'> & {
+    /**
+     * Shows a spinner at the end of the frame, in place of the clear button,
+     * while the results for the current text are on their way. Defaults to
+     * `false`.
+     */
+    isLoading?: boolean;
+    /**
+     * Accessible name of the clear button. Defaults to `'Clear search'`; name it
+     * after what is searched (`'Clear agency search'`) when a page carries
+     * several search fields.
+     */
+    clearLabel?: string;
+};
+/**
+ * InputSearch is a search field: a magnifier in front of the text and, once
+ * there is text, a clear button after it, named "Clear search" unless
+ * `clearLabel` says otherwise. The clear button empties the field
+ * and puts focus back in it, and it reports the change through `onChange` like
+ * a keystroke would: a real change event whose `event.target.value` is `''`,
+ * so a controlled field, an uncontrolled one and one registered with
+ * react-hook-form all clear the same way. While `isLoading` is set, a spinner
+ * takes the clear button's place. The clear button is not rendered while the
+ * input is disabled, whether `disabled` comes from the prop, from a
+ * surrounding `FieldText` or from a `<fieldset disabled>`.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) of `type="search"`
+ * inside an [InputGroup](?path=/docs/components-inputgroup--docs) frame, so
+ * it is announced as a search box. `className` styles the frame. Every other
+ * prop goes to the `<input>`: the `ref`, `id`, `name`, `value`, `onChange`,
+ * `aria-*` and every other standard attribute. Only `type` is not accepted.
+ * `placeholder` defaults to `'Search'`. Inside a `FieldText` the input takes
+ * its label, messages and states from the field as a plain `Input` does. The
+ * invalid state comes from `aria-invalid`, and the frame paints the
+ * destructive border.
+ *
+ * Do not use it to pick a value from a list; that is
+ * [Combobox](?path=/docs/components-combobox--docs), whose `search` field is
+ * drawn by InputSearch. For a filter that should
+ * run only once the user pauses typing, use `DebouncedInputSearch`.
+ *
+ * @summary Search input with a leading icon, a clear button and a loading slot
+ * @dataAttribute {string} data-slot - Always set to "input-search" on the frame
+ *
+ * @example
+ * <InputSearch
+ *   aria-label="Search agencies"
+ *   value={query}
+ *   onChange={event => setQuery(event.target.value)}
+ *   isLoading={isFetching}
+ * />
+ */
+export declare const InputSearch: {
+    ({ className, isLoading, clearLabel, placeholder, ref, onChange, ...props }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,53 @@
+"use client";
+import { chain as e, mergeRefs as t } from "../../lib/merge-props.js";
+import { InputContext as n } from "../input/context.js";
+import { Input as r } from "../input/input.js";
+import { InputGroup as i } from "../input-group/index.js";
+import { Loading as a } from "../loading/loading.js";
+import { IconCancel as o, IconSearch as s } from "./icons.js";
+import { tv as c } from "tailwind-variants";
+import { use as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/input-search/input-search.tsx
+var h = c({ slots: {
+	input: "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+	clear: [
+		"flex size-6 shrink-0 cursor-pointer items-center justify-center self-center rounded-sm",
+		"[&>svg>path]:fill-icon-input-default hover:[&>svg>path]:fill-icon-default-base-primary",
+		"focus-visible:outline-2 focus-visible:outline-border-input-focus",
+		"disabled:cursor-default disabled:[&>svg>path]:fill-icon-input-disable",
+		"group-has-[input:disabled]/input-group:hidden"
+	]
+} }), g = h(), _ = (e) => e !== void 0 && String(e) !== "", v = ({ className: c, isLoading: h = !1, clearLabel: v = "Clear search", placeholder: y = "Search", ref: b, onChange: x, ...S }) => {
+	let C = d(null), w = l(n)?.value, [T, E] = f(() => _(S.defaultValue)), D = S.value === void 0 ? w : S.value, O = D === void 0 ? T : _(D), k = (e) => E(e.target.value !== ""), A = u(() => t(C, b, (e) => {
+		e && E(e.value !== "");
+	}), [b]), j = () => {
+		let e = C.current;
+		e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+	};
+	return /* @__PURE__ */ m(i.Root, {
+		"data-slot": "input-search",
+		className: c,
+		children: [
+			/* @__PURE__ */ p(i.Addon, { children: /* @__PURE__ */ p(s, {}) }),
+			/* @__PURE__ */ p(r, {
+				ref: A,
+				type: "search",
+				placeholder: y,
+				...S,
+				className: g.input(),
+				onChange: e(k, x)
+			}),
+			h ? /* @__PURE__ */ p(i.Addon, { children: /* @__PURE__ */ p(a, { size: "sm" }) }) : O && /* @__PURE__ */ p(i.Addon, { children: /* @__PURE__ */ p("button", {
+				type: "button",
+				className: g.clear(),
+				"aria-label": v,
+				onClick: j,
+				children: /* @__PURE__ */ p(o, {})
+			}) })
+		]
+	});
+};
+v.displayName = "InputSearch";
+//#endregion
+export { v as InputSearch, h as inputSearchRecipe };