UNPKG

@payfit/unity-components

Version:

81 lines (80 loc) 3.04 kB
import { Icon as e } from "../../icon/Icon.js"; import { uyTv as t } from "@payfit/unity-themes"; import { jsx as n, jsxs as r } from "react/jsx-runtime"; import { useIntl as i } from "react-intl"; import { Button as a } from "react-aria-components/Button"; import { SelectValue as o } from "react-aria-components/Select"; //#region src/components/select/parts/SelectButton.tsx var s = t({ slots: { base: "uy:flex uy:flex-row uy:items-center uy:gap-100 uy:h-5.5 uy:sm:h-500 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border", selectValue: ["uy:min-w-0 uy:whitespace-nowrap uy:text-ellipsis uy:typography-body uy:flex-grow uy:text-left uy:overflow-hidden", "uy:data-[placeholder]:text-content-neutral-lowest"], iconWrapper: "uy:flex uy:shrink-0 uy:gap-50", icon: "" }, variants: { isDisabled: { true: { base: "uy:border-border-form-disabled uy:bg-surface-form-disabled", selectValue: "uy:text-content-form-disabled", icon: "uy:text-content-neutral-lowest-disabled" } }, isInvalid: { true: { base: "uy:border-border-form-error uy:bg-surface-form-error" } }, isReadOnly: { true: { base: "uy:border-border-form-disabled uy:bg-surface-form-disabled", selectValue: "uy:text-content-form-readonly", icon: "uy:text-content-neutral-lowest-disabled" } } }, compoundVariants: [{ isDisabled: !1, isInvalid: !1, isReadOnly: !1, className: { base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active", selectValue: "uy:text-content-form-enabled uy:hover:text-content-form-hover", icon: "uy:text-content-neutral-lowest uy:hover:text-content-neutral-lowest-hover" } }], defaultVariants: { isDisabled: !1, isInvalid: !1, isReadOnly: !1 } }), c = ({ isDisabled: t, isInvalid: c, isReadOnly: l, isOpen: u, renderValue: d }) => { let f = i(), { base: p, selectValue: m, iconWrapper: h, icon: g } = s({ isDisabled: t, isInvalid: c, isReadOnly: l }); return /* @__PURE__ */ r(a, { "data-dd-privacy": "mask", className: p(), isDisabled: t, "data-unity-slot": "select-button", children: [d ? /* @__PURE__ */ n(o, { className: m(), translate: "no", children: ({ state: e }) => e.selectedItems[0] ? d(e.selectedItems[0]) : null }) : /* @__PURE__ */ n(o, { className: m(), translate: "no" }), /* @__PURE__ */ r("div", { className: h(), children: [c && /* @__PURE__ */ n(e, { src: "WarningCircleOutlined", color: "content.form.invalid", alt: f.formatMessage({ id: "unity:component:form-field:form-input:error:alt", defaultMessage: "Error" }) }), /* @__PURE__ */ n(e, { className: g(), "aria-hidden": "true", src: u ? "CaretUpOutlined" : "CaretDownOutlined" })] })] }); }; c.displayName = "SelectButton"; //#endregion export { c as SelectButton };