@payfit/unity-components
Version:
46 lines (45 loc) • 1.71 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { CircularIconButton as t } from "../../icon-button/CircularIconButton.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { useIntl as o } from "react-intl";
import { Input as s } from "react-aria-components/Input";
import { SearchField as c } from "react-aria-components/SearchField";
//#region src/components/select-list/parts/SelectListSearchInput.tsx
var l = r({ slots: {
base: "uy:flex uy:gap-100 uy:items-center uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:text-content-form-active uy:typography-body",
input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden"
} }), u = n((n, r) => {
let u = o(), { base: d, input: f } = l();
return /* @__PURE__ */ a(c, {
className: d(),
ref: r,
"data-dd-privacy": "mask",
children: [
/* @__PURE__ */ i(e, {
src: "MagnifyingGlassOutlined",
role: "presentation",
color: "content.neutral.lowest"
}),
/* @__PURE__ */ i(s, {
"aria-label": u.formatMessage({
id: "unity:component:common:search:label",
defaultMessage: "Search"
}),
className: f()
}),
/* @__PURE__ */ i(t, {
title: u.formatMessage({
id: "unity:component:common:clear:title",
defaultMessage: "Clear"
}),
icon: "CloseOutlined",
asElement: "button"
})
]
});
});
u.displayName = "SelectListSearchInput";
//#endregion
export { u as SelectListSearchInput };