@frontify/fondue
Version:
Design system of Frontify
170 lines (169 loc) • 5.59 kB
JavaScript
import { jsx as t, jsxs as f } from "react/jsx-runtime";
/* empty css */
import { shift as G, offset as J } from "@floating-ui/dom";
import { IconCaretLeftDouble as Q, IconCaretLeft as U, IconCaretRight as X, IconCaretRightDouble as Z } from "@frontify/fondue-icons";
import { format as _, getYear as $ } from "date-fns";
import { forwardRef as ee, useRef as te, useState as ae } from "react";
import C from "react-datepicker";
import { createPortal as re } from "react-dom";
import { Button as o } from "../Button/Button.es.js";
import { ButtonEmphasis as s, ButtonSize as i, ButtonStyle as l } from "../Button/ButtonTypes.es.js";
import { merge as oe } from "../../utilities/merge.es.js";
import { Validation as se } from "../../utilities/validation.es.js";
import { DatePickerTrigger as ie } from "./DatePickerTrigger.es.js";
const le = C.default ?? C, ne = (n, a) => n === "single" ? a < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", ce = ee(
({
placeHolder: n = "Select a date",
isClearable: a,
shouldCloseOnSelect: h,
onChange: u,
onOpen: c,
onClose: d,
onBlur: g,
onKeyDown: M,
dateFormat: x = "MMM dd, yyyy",
value: z,
startDate: N,
endDate: P,
minDate: R,
maxDate: b,
validation: I = se.Default,
customTrigger: S,
customHeader: v,
children: B,
fixedHeight: j = !0,
hasPopperArrow: W = !0,
preventOpenOnFocus: q = !1,
inline: w = !1,
filterDate: F = () => !0,
variant: k = "single",
hugWidth: p = !0,
"data-test-id": H = "date-picker",
triggerAriaLabel: L = "Open or close the date picker"
}, A) => {
const y = te(null), [m, D] = ae(!1), E = () => {
D(!0), c == null || c(), queueMicrotask(K);
}, K = () => {
var e, r;
(r = (e = y.current) == null ? void 0 : e.querySelector("button")) == null || r.focus();
}, O = () => {
D(!1), d == null || d();
};
return /* @__PURE__ */ t("div", { "data-test-id": H, className: p ? "tw-w-auto" : "tw-w-full", children: /* @__PURE__ */ t(
le,
{
wrapperClassName: p ? "tw-w-auto" : "tw-w-full",
calendarClassName: oe([
"react-datepicker-wrap tw-pointer-events-auto",
w && "react-datepicker-inline"
]),
inline: w,
selected: z,
startDate: N,
endDate: P,
minDate: R,
maxDate: b,
calendarStartDay: 1,
onChange: u,
onKeyDown: m ? void 0 : M,
onBlur: g,
selectsRange: k === "range",
showPopperArrow: W,
preventOpenOnFocus: q,
filterDate: F,
fixedHeight: j,
customInput: S ?? /* @__PURE__ */ t(
ie,
{
isCalendarOpen: m,
isClearable: a,
placeHolder: n,
validation: I,
onDateChanged: u,
hugWidth: p,
"aria-haspopup": "dialog",
"aria-expanded": m,
"aria-label": L
}
),
ref: A,
formatWeekDay: (e) => e.slice(0, 1),
isClearable: a,
dateFormat: x,
onCalendarClose: O,
onCalendarOpen: E,
shouldCloseOnSelect: h,
dayClassName: (e) => ne(k, e),
popperProps: {
strategy: "fixed"
},
popperContainer: ({ children: e }) => re(e, document.body),
popperModifiers: [G({ padding: 8 }), J(8)],
renderCustomHeader: ({ date: e, decreaseMonth: r, increaseMonth: T, increaseYear: V, decreaseYear: Y }) => /* @__PURE__ */ f(
"div",
{
className: "tw-flex tw-flex-col tw-gap-3",
ref: y,
"data-test-id": "date-picker-header",
children: [
v,
/* @__PURE__ */ f("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0", children: [
/* @__PURE__ */ t(
o,
{
style: l.Default,
size: i.Medium,
onClick: Y,
emphasis: s.Weak,
icon: /* @__PURE__ */ t(Q, { size: 20 })
}
),
/* @__PURE__ */ t(
o,
{
style: l.Default,
size: i.Medium,
onClick: r,
emphasis: s.Weak,
icon: /* @__PURE__ */ t(U, { size: 20 })
}
),
/* @__PURE__ */ f("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center", children: [
_(e, "MMMM"),
" ",
$(e)
] }),
/* @__PURE__ */ t(
o,
{
style: l.Default,
size: i.Medium,
onClick: T,
emphasis: s.Weak,
icon: /* @__PURE__ */ t(X, { size: 20 })
}
),
/* @__PURE__ */ t(
o,
{
style: l.Default,
size: i.Medium,
onClick: V,
emphasis: s.Weak,
icon: /* @__PURE__ */ t(Z, { size: 20 })
}
)
] })
]
}
),
children: B
}
) });
}
);
ce.displayName = "FondueDatePicker";
export {
ce as DatePicker
};
//# sourceMappingURL=DatePicker.es.js.map