@payfit/unity-components
Version:
132 lines (131 loc) • 5.38 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { DateCalendar as t } from "../date-calendar/DateCalendar.js";
import { DateInput as n } from "./parts/DateInput.js";
import { forwardRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useIntl as s } from "react-intl";
import { Dialog as c } from "react-aria-components/Dialog";
import { Button as l, DatePicker as u, Group as d, Popover as f } from "react-aria-components/DatePicker";
//#region src/components/date-picker/DatePicker.tsx
var p = i({
slots: {
base: ["uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75", "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active uy:data-[open=true]:border-border-form-active"],
inputWrapper: [
"uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
"uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
"uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
],
suffix: [
"uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
"uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:not-group-data-[open=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active uy:group-data-[open=true]:border-border-form-active",
"uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
]
},
variants: {
isInvalid: { true: {
base: "uy:border-border-form-error uy:bg-surface-form-error",
suffix: "uy:bg-surface-form-error uy:border-border-form-error"
} },
isReadOnly: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
} },
isDisabled: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
} }
},
compoundVariants: [{
isInvalid: !1,
isDisabled: !1,
isReadOnly: !1,
className: {
base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
suffix: "uy:border-border-form-enabled uy:bg-surface-neutral uy:text-content-neutral-low"
}
}]
}), m = i({
base: "uy:w-[356px] uy:overflow-auto uy:shadow-300 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
variants: {
isEntering: { true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-in-from-bottom-1 uy:duration-200 uy:ease-out" },
isExiting: { true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in" }
}
}), h = r(({ value: r, defaultValue: i, isInvalid: h, isLoading: g, isDisabled: _, isReadOnly: v, onClearButtonPress: y, onBlur: b, onFocus: x, onChange: S, onOpenChange: C, id: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, "aria-details": O, ...k }, A) => {
let j = s(), { base: M, inputWrapper: N, suffix: P } = p({
isInvalid: !!h,
isReadOnly: !!v,
isDisabled: !!_
}), F = (e) => {
S?.(e);
}, I = (e) => {
C?.(e), e ? x?.() : b?.();
}, L = (e) => k.isDateUnavailable ? k.isDateUnavailable(e) : !1, R = () => {
y?.();
};
return /* @__PURE__ */ o(u, {
ref: A,
"data-dd-privacy": "mask",
...k,
className: M(),
value: r,
defaultValue: i,
minValue: k.minValue,
maxValue: k.maxValue,
isReadOnly: !!v,
isDisabled: !!_,
onChange: F,
onFocus: x,
onBlur: b,
onOpenChange: I,
isDateUnavailable: L,
"aria-label": T,
"aria-labelledby": E,
"aria-describedby": D,
"aria-details": O,
children: [/* @__PURE__ */ o(d, {
className: N(),
id: w,
children: [/* @__PURE__ */ a(n, {
isLoading: g,
isDisabled: _,
isReadOnly: v,
isInvalid: h,
onClearButtonPress: R
}), /* @__PURE__ */ a(l, {
className: P(),
isDisabled: v || _,
children: /* @__PURE__ */ a(e, {
src: "CalendarBlankOutlined",
color: "inherit",
alt: j.formatMessage({
id: "unity:component:form-field:date-picker:calendar-button",
defaultMessage: "Open Calendar"
})
})
})]
}), /* @__PURE__ */ a(f, {
className: ({ isEntering: e, isExiting: t }) => m({
isEntering: e,
isExiting: t
}),
children: /* @__PURE__ */ a(c, {
className: "uy:p-150",
"data-dd-privacy": "mask",
children: /* @__PURE__ */ a(t, {
value: r,
defaultValue: i,
minValue: k.minValue,
maxValue: k.maxValue,
onChange: F,
firstDayOfWeek: k.firstDayOfWeek
})
})
})]
});
});
h.displayName = "DatePicker";
//#endregion
export { h as DatePicker };