@payfit/unity-components/dist/esm/components/autocomplete/Autocomplete.js

import { Icon as e } from "../icon/Icon.js";
import { Spinner as t } from "../spinner/Spinner.js";
import { Text as n } from "../text/Text.js";
import { AutocompleteClearButton as r } from "./parts/AutocompleteClearButton.js";
import { AutocompletePanel as i } from "./parts/AutocompletePanel.js";
import { forwardRef as a, useCallback as o, useRef as s, useState as c } from "react";
import { uyTv as l } from "@payfit/unity-themes";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useIntl as f } from "react-intl";
import { useResizeObserver as p } from "usehooks-ts";
import { ComboBox as m, Input as h } from "react-aria-components/ComboBox";
import { useId as g } from "react-aria/useId";
//#region src/components/autocomplete/Autocomplete.tsx
var _ = l({
	slots: {
		base: [
			"uy:group uy:transition-colors uy:w-full uy:flex uy:gap-100 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
			"uy:enabled:bg-surface-form-high-enabled",
			"uy:has-data-[focus-visible=\"true\"]:outline-none uy:has-data-[focus-visible=\"true\"]:ring-2 uy:has-data-[focus-visible=\"true\"]:ring-utility-focus-ring uy:has-data-[focus-visible=\"true\"]:ring-offset-2 uy:has-data-[focus-visible=\"true\"]:bg-surface-form-high-focus",
			"uy:active:border uy:active:border-solid uy:active:border-border-form-active",
			"uy:data-[disabled=true]:border uy:data-[disabled=true]:border-solid uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-high-disabled",
			"uy:data-[invalid=true]:border uy:data-[invalid=true]:border-solid uy:data-[invalid=true]:border-border-form-error uy:data-[invalid=true]:bg-surface-form-high-error"
		],
		input: [
			"uy:h-300 uy:typography-body uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
			"uy:enabled:text-content-form-enabled",
			"uy:data-[hovered]:text-content-form-hover",
			"uy:data-[focus-visible]:text-content-form-focus",
			"uy:active:text-content-form-active",
			"uy:group-data-[invalid=true]:bg-surface-form-high-error"
		],
		icon: ["uy:self-center", "uy:group-data-[disabled=true]:text-content-neutral-lowest-disabled"],
		invalidIcon: ["uy:self-center uy:hidden", "uy:group-data-[invalid=true]:block"],
		wrapperState: ["uy:flex uy:items-center uy:gap-50"]
	},
	variants: { isReadOnly: {
		true: {
			base: "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-high-disabled",
			icon: "uy:text-content-neutral-lowest-disabled",
			input: "uy:bg-surface-form-high-disabled uy:text-content-form-read-only uy:placeholder-content-form-read-only uy:cursor-text"
		},
		false: {
			base: ["uy:bg-surface-form-high-enabled", "uy:has-data-[hovered]:bg-surface-form-high-hover uy:data-[disabled=true]:cursor-not-allowed"],
			icon: "uy:text-content-neutral-lowest",
			input: "uy:bg-text-content-form-active uy:placeholder-content-neutral-lowest uy:group-data-[disabled=true]:cursor-not-allowed"
		}
	} }
}), v = ({ intl: e, placeholder: t, isDisabled: n }) => n ? "" : t || e.formatMessage({
	id: "unity:component:autocomplete:placeholder",
	defaultMessage: "Search"
}), y = (a, l) => {
	let { placeholder: y, isDisabled: b, isInvalid: x, isReadOnly: S, items: C, children: w, loadingState: T, name: E, feedbackText: D, ...O } = a, k = f(), A = s(null), [j, M] = c(null), N = g();
	p({
		ref: A,
		onResize: o(() => {
			A.current && M(`${A.current.offsetWidth}px`);
		}, [A])
	});
	let { base: P, input: F, icon: I, invalidIcon: L, wrapperState: R } = _({ isReadOnly: S });
	return /* @__PURE__ */ d("search", {
		ref: l,
		children: [/* @__PURE__ */ d(m, {
			className: P(),
			name: E,
			isInvalid: x,
			isDisabled: b || S,
			isReadOnly: S,
			ref: A,
			"aria-label": k.formatMessage({
				id: "unity:component:autocomplete:placeholder",
				defaultMessage: "Search"
			}),
			items: C,
			...O,
			children: [
				/* @__PURE__ */ u(e, {
					src: "MagnifyingGlassOutlined",
					className: I(),
					"aria-hidden": "true"
				}),
				/* @__PURE__ */ u(h, {
					className: F(),
					"aria-describedby": N,
					placeholder: v({
						intl: k,
						placeholder: y,
						isDisabled: b
					})
				}),
				/* @__PURE__ */ d("div", {
					className: R(),
					children: [
						/* @__PURE__ */ u(e, {
							className: L(),
							src: "WarningCircleOutlined",
							color: "content.form.invalid",
							alt: k.formatMessage({
								id: "unity:component:form-field:form-input:error:alt",
								defaultMessage: "Error"
							})
						}),
						T && T !== "error" && T !== "idle" && /* @__PURE__ */ u("span", {
							className: "uy:px-50",
							children: /* @__PURE__ */ u(t, {
								label: k.formatMessage({
									id: "unity:component:common:loading:label",
									defaultMessage: "Loading..."
								}),
								color: "primary",
								size: "small",
								"aria-hidden": "true"
							})
						}),
						/* @__PURE__ */ u(r, {
							isReadOnly: S,
							isDisabled: b
						})
					]
				}),
				/* @__PURE__ */ u(i, {
					panelWidth: j,
					searchRef: A,
					children: w
				})
			]
		}), x && /* @__PURE__ */ u(n, {
			id: N,
			className: "uy:typography-body-small-strong uy:text-content-form-invalid",
			children: D
		})]
	});
}, b = a(function(e, t) {
	return y(e, t);
});
b.displayName = "Autocomplete";
//#endregion
export { b as Autocomplete };