@octopusdeploy/design-system-components
Version:
The design systems component library.
161 lines (160 loc) • 7.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerCalendar = DatePickerCalendar;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const date_fns_1 = require("date-fns");
const react_day_picker_1 = require("react-day-picker");
const Button_1 = require("../../Button");
function DatePickerCalendar({ selected, onSelect, month, onMonthChange, startMonth, endMonth, disablePastDates }) {
return ((0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { selected: selected, onSelect: onSelect, month: month, onMonthChange: onMonthChange, startMonth: startMonth, endMonth: endMonth, disabled: disablePastDates ? { before: new Date() } : undefined, classNames: calendarStyles, required: true, mode: "single", autoFocus: true, role: "dialog", captionLayout: "dropdown", navLayout: "after", showOutsideDays: true, fixedWeeks: true, components: {
PreviousMonthButton: PreviousMonthButton,
NextMonthButton: NextMonthButton,
}, formatters: {
formatMonthDropdown: (month) => (0, date_fns_1.format)(month, "MMM"),
} }));
}
const calendarStyles = {
[react_day_picker_1.UI.Root]: (0, css_1.css)({
padding: `${design_system_tokens_1.space[12]} ${design_system_tokens_1.space[12]} ${design_system_tokens_1.space[8]}`,
backgroundColor: design_system_tokens_1.themeTokens.color.background.quartary.default,
}),
[react_day_picker_1.UI.Month]: (0, css_1.css)({
display: "grid",
gridTemplateColumns: "1fr auto",
gridTemplateRows: "auto auto",
gridTemplateAreas: `
"caption nav"
"grid grid"
`,
gridRowGap: design_system_tokens_1.space[4],
}),
[react_day_picker_1.UI.MonthCaption]: (0, css_1.css)({
gridArea: "caption",
display: "flex",
alignItems: "center",
}),
[react_day_picker_1.UI.Nav]: (0, css_1.css)({
gridArea: "nav",
display: "flex",
gap: design_system_tokens_1.space[8],
width: "fit-content",
}),
[react_day_picker_1.UI.CaptionLabel]: (0, css_1.css)({
display: "none",
}),
[react_day_picker_1.UI.Dropdowns]: (0, css_1.css)({
display: "flex",
gap: design_system_tokens_1.space[12],
}),
[react_day_picker_1.UI.Dropdown]: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.primary,
font: design_system_tokens_1.text.heading.small,
height: "1.75rem",
backgroundColor: "transparent",
border: "2px solid transparent",
borderRadius: design_system_tokens_1.borderRadius.medium,
cursor: "pointer",
"&:focus-visible": {
outline: "none",
borderColor: design_system_tokens_1.themeTokens.color.border.selected,
},
}),
[react_day_picker_1.UI.MonthGrid]: (0, css_1.css)({
gridArea: "grid",
tableLayout: "fixed",
width: "calc(2.25rem * 7)", // 7 days × 36px each
borderCollapse: "collapse",
}),
[react_day_picker_1.UI.Weekday]: (0, css_1.css)({
height: "2.25rem",
width: "2.25rem",
padding: 0,
font: design_system_tokens_1.text.body.bold.xSmall,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
[react_day_picker_1.UI.Day]: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.xSmall,
height: "2.25rem",
width: "2.25rem",
textAlign: "center",
verticalAlign: "middle",
padding: 0,
}),
[react_day_picker_1.UI.DayButton]: (0, css_1.css)({
all: "unset",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
height: "2.125rem",
width: "2.125rem",
cursor: "pointer",
borderRadius: "50%",
boxSizing: "border-box",
"&:hover": {
backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
},
"&:focus-visible": {
outline: `2px solid ${design_system_tokens_1.themeTokens.color.border.selected}`,
outlineOffset: design_system_tokens_1.space[1],
backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
},
}),
[react_day_picker_1.DayFlag.outside]: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.tertiary,
}),
[react_day_picker_1.DayFlag.disabled]: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.tertiary,
"& button": {
cursor: "not-allowed",
"&:hover": {
backgroundColor: "transparent",
},
},
}),
[react_day_picker_1.DayFlag.today]: (0, css_1.css)({
"& button": {
border: `1px solid ${design_system_tokens_1.themeTokens.color.border.selected}`,
"&:focus-visible": {
backgroundColor: design_system_tokens_1.themeTokens.color.background.quartary.default,
},
},
}),
[react_day_picker_1.SelectionState.selected]: (0, css_1.css)({
"& button": {
color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
font: design_system_tokens_1.text.body.bold.xSmall,
backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
"&:hover": {
color: design_system_tokens_1.themeTokens.color.text.primary,
},
"&:focus-visible": {
backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
},
},
}),
};
function PreviousMonthButton({ onClick }) {
const { previousMonth } = (0, react_day_picker_1.useDayPicker)();
const handleClick = (e) => {
if (isButtonMouseEvent(e)) {
onClick?.(e);
}
};
return (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "neutral", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ChevronLeftIcon, { size: 20 }), onClick: handleClick, disabled: previousMonth === undefined, accessibleName: "Previous month" });
}
function NextMonthButton({ onClick }) {
const { nextMonth } = (0, react_day_picker_1.useDayPicker)();
const handleClick = (e) => {
if (isButtonMouseEvent(e)) {
onClick?.(e);
}
};
return (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "neutral", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ChevronRightIcon, { size: 20 }), onClick: handleClick, disabled: nextMonth === undefined, accessibleName: "Next month" });
}
function isButtonMouseEvent(e) {
return e.currentTarget instanceof HTMLButtonElement;
}