@payfit/unity-components
Version:
87 lines (86 loc) • 2.99 kB
JavaScript
import { Search as e } from "../search/Search.js";
import { SelectButton as t } from "./parts/SelectButton.js";
import { forwardRef as n, useMemo as r, useState as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { useIntl as c } from "react-intl";
import { Separator as l } from "react-aria-components/Separator";
import { Autocomplete as u, useFilter as d } from "react-aria-components/Autocomplete";
import { ListBox as f, Popover as p, Select as m } from "react-aria-components/Select";
import { ListLayout as h, Virtualizer as g } from "react-aria-components/Virtualizer";
//#region src/components/select/Select.tsx
var _ = a({ slots: {
base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:shadow-300",
listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
} }), v = ({ children: n, items: a, placeholder: v, isDisabled: y, isInvalid: b, isReadOnly: x, value: S, defaultValue: C, onChange: w, isSearchable: T = !1, onBlur: E, placement: D, searchInputAriaLabel: O, renderEmptyState: k, renderValue: A, ...j }, M) => {
let N = c(), [P, F] = i(!1), { contains: I } = d({ sensitivity: "base" }), { base: L, popover: R, listbox: z } = _(), B = S !== void 0 || w !== void 0 ? {
value: S,
onChange: w
} : { defaultValue: C }, V = r(() => {
if (k !== void 0) return typeof k == "function" ? k : () => k;
}, [k]);
return /* @__PURE__ */ s(m, {
onOpenChange: F,
...j,
ref: M,
className: L(),
placeholder: y ? void 0 : v,
isDisabled: y || x,
isInvalid: b,
onBlur: E,
...B,
children: [/* @__PURE__ */ o(t, {
isDisabled: y,
isInvalid: b,
isReadOnly: x,
isOpen: P,
renderValue: A
}), /* @__PURE__ */ o(p, {
offset: 1,
containerPadding: 8,
className: R(),
placement: D,
children: T ? /* @__PURE__ */ s(u, {
filter: I,
children: [
/* @__PURE__ */ o("div", {
className: "uy:m-100",
children: /* @__PURE__ */ o(e, {
label: O ?? N.formatMessage({
id: "unity:component:select:search:label",
defaultMessage: "Search options"
}),
"data-dd-privacy": "mask"
})
}),
/* @__PURE__ */ o(l, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
/* @__PURE__ */ o(g, {
layout: h,
layoutOptions: { padding: 8 },
children: /* @__PURE__ */ o(f, {
items: a,
className: z(),
renderEmptyState: V,
children: n
})
})
]
}) : /* @__PURE__ */ o(g, {
layout: h,
layoutOptions: { padding: 8 },
children: /* @__PURE__ */ o(f, {
items: a,
className: z(),
renderEmptyState: V,
children: n
})
})
})]
});
}, y = n(function(e, t) {
return v(e, t);
});
y.displayName = "Select";
//#endregion
export { y as Select };