Skip to content

Commit ec04355

Browse files
flaviendelangleLukasTy
flaviendelangle
and
LukasTy
authored
[temporal] New Calendar component (#1973)
Co-authored-by: Lukas <llukas.tyla@gmail.com>
1 parent d44ff16 commit ec04355

File tree

180 files changed

+13225
-329
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

180 files changed

+13225
-329
lines changed

‎docs/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"dependencies": {
1919
"@base-ui/react": "workspace:*",
2020
"@base-ui/utils": "workspace:*",
21+
"@date-fns/tz": "^1.4.1",
2122
"@mdx-js/loader": "^3.1.1",
2223
"@mdx-js/react": "^3.1.1",
2324
"@mui/internal-docs-infra": "0.6.1-canary.1",
@@ -29,6 +30,7 @@
2930
"@types/mdx": "^2.0.13",
3031
"clipboard-copy": "^4.0.1",
3132
"clsx": "^2.1.1",
33+
"date-fns": "^4.1.0",
3234
"es-toolkit": "^1.45.1",
3335
"estree-util-value-to-estree": "^3.5.0",
3436
"globby": "^16.1.1",

‎docs/reference/generated/calendar-day-button.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "CalendarDayButton",
3+
"description": "An individual interactive day button in the calendar.\nRenders a `<button>` element.",
4+
"props": {
5+
"focusableWhenDisabled": {
6+
"type": "boolean",
7+
"default": "false",
8+
"description": "When `true` the item remains focusable when disabled.",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"nativeButton": {
12+
"type": "boolean",
13+
"default": "true",
14+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
15+
"detailedType": "boolean | undefined"
16+
},
17+
"format": {
18+
"type": "string",
19+
"default": "adapter.formats.dayOfMonth",
20+
"description": "The format used to display the day.",
21+
"detailedType": "string | undefined"
22+
},
23+
"className": {
24+
"type": "string | ((state: Calendar.DayButton.State) => string | undefined)",
25+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
26+
"detailedType": "| string\n| ((state: Calendar.DayButton.State) => string | undefined)"
27+
},
28+
"style": {
29+
"type": "CSSProperties | ((state: Calendar.DayButton.State) => CSSProperties | undefined)",
30+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayButton.State,\n ) => CSSProperties | undefined)\n| undefined"
31+
},
32+
"render": {
33+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayButton.State) => ReactElement)",
34+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
35+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayButton.State,\n ) => ReactElement)"
36+
}
37+
},
38+
"dataAttributes": {
39+
"data-selected": {
40+
"description": "Present when the day is selected."
41+
},
42+
"data-disabled": {
43+
"description": "Present when the day is disabled."
44+
},
45+
"data-current": {
46+
"description": "Present when the day is the current date."
47+
},
48+
"data-outside-month": {
49+
"description": "Present when the day is outside the month rendered by the day grid wrapping it."
50+
},
51+
"data-unavailable": {
52+
"description": "Present when the day is unavailable."
53+
}
54+
},
55+
"cssVariables": {}
56+
}

‎docs/reference/generated/calendar-day-grid-body.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "CalendarDayGridBody",
3+
"description": "Groups all parts of the calendar's day grid.\nRenders a `<tbody>` element.",
4+
"props": {
5+
"fixedWeekNumber": {
6+
"type": "number",
7+
"description": "Will render the requested amount of weeks by adding weeks of the next month if needed.\nSet it to 6 to create a Gregorian calendar where all months have the same number of weeks.",
8+
"detailedType": "number | undefined"
9+
},
10+
"offset": {
11+
"type": "number",
12+
"default": "0",
13+
"description": "The offset to apply to the rendered month compared to the current month.\nThis is mostly useful when displaying multiple day grids.",
14+
"detailedType": "number | undefined"
15+
},
16+
"children": {
17+
"type": "ReactNode | ((week: Date, index: number, weeks: Date[]) => ReactNode)",
18+
"description": "The children of the component.\nIf a function is provided, it will be called for each week to render as its parameter.",
19+
"detailedType": "| React.ReactNode\n| ((\n week: Date,\n index: number,\n weeks: Date[],\n ) => ReactNode)"
20+
},
21+
"className": {
22+
"type": "string | ((state: Calendar.DayGridBody.State) => string | undefined)",
23+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
24+
"detailedType": "| string\n| ((\n state: Calendar.DayGridBody.State,\n ) => string | undefined)"
25+
},
26+
"style": {
27+
"type": "CSSProperties | ((state: Calendar.DayGridBody.State) => CSSProperties | undefined)",
28+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGridBody.State,\n ) => CSSProperties | undefined)\n| undefined"
29+
},
30+
"render": {
31+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGridBody.State) => ReactElement)",
32+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
33+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGridBody.State,\n ) => ReactElement)"
34+
}
35+
},
36+
"dataAttributes": {},
37+
"cssVariables": {}
38+
}

‎docs/reference/generated/calendar-day-grid-cell.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "CalendarDayGridCell",
3+
"description": "An individual day cell in the calendar.\nRenders a `<td>` element.",
4+
"props": {
5+
"value": {
6+
"type": "Date",
7+
"required": true,
8+
"description": "The value to select when this cell is clicked."
9+
},
10+
"className": {
11+
"type": "string | ((state: Calendar.DayGridCell.State) => string | undefined)",
12+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
13+
"detailedType": "| string\n| ((\n state: Calendar.DayGridCell.State,\n ) => string | undefined)"
14+
},
15+
"style": {
16+
"type": "CSSProperties | ((state: Calendar.DayGridCell.State) => CSSProperties | undefined)",
17+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGridCell.State,\n ) => CSSProperties | undefined)\n| undefined"
18+
},
19+
"render": {
20+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGridCell.State) => ReactElement)",
21+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
22+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGridCell.State,\n ) => ReactElement)"
23+
}
24+
},
25+
"dataAttributes": {},
26+
"cssVariables": {}
27+
}

‎docs/reference/generated/calendar-day-grid-header-cell.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "CalendarDayGridHeaderCell",
3+
"description": "An individual day header cell in the calendar.\nRenders a `<th>` element.",
4+
"props": {
5+
"value": {
6+
"type": "Date",
7+
"required": true
8+
},
9+
"formatter": {
10+
"type": "((date: Date) => string)",
11+
"default": "(date) => adapter.format(date, 'EEE').charAt(0).toUpperCase()",
12+
"description": "The formatter function used to display the day of the week.",
13+
"detailedType": "((date: Date) => string) | undefined"
14+
},
15+
"className": {
16+
"type": "string | ((state: Calendar.DayGridHeaderCell.State) => string | undefined)",
17+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
18+
"detailedType": "| string\n| ((\n state: Calendar.DayGridHeaderCell.State,\n ) => string | undefined)"
19+
},
20+
"style": {
21+
"type": "CSSProperties | ((state: Calendar.DayGridHeaderCell.State) => CSSProperties | undefined)",
22+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGridHeaderCell.State,\n ) => CSSProperties | undefined)\n| undefined"
23+
},
24+
"render": {
25+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGridHeaderCell.State) => ReactElement)",
26+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
27+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGridHeaderCell.State,\n ) => ReactElement)"
28+
}
29+
},
30+
"dataAttributes": {},
31+
"cssVariables": {}
32+
}

‎docs/reference/generated/calendar-day-grid-header-row.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "CalendarDayGridHeaderRow",
3+
"description": "Groups all cells of the calendar's day grid header row.\nRenders a `<tr>` element.",
4+
"props": {
5+
"children": {
6+
"type": "ReactNode | ((day: Date, index: number, days: Date[]) => ReactNode)",
7+
"description": "The children of the component.\nIf a function is provided, it will be called for each day of the week as its parameter.",
8+
"detailedType": "| React.ReactNode\n| ((day: Date, index: number, days: Date[]) => ReactNode)"
9+
},
10+
"className": {
11+
"type": "string | ((state: Calendar.DayGridHeaderRow.State) => string | undefined)",
12+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
13+
"detailedType": "| string\n| ((\n state: Calendar.DayGridHeaderRow.State,\n ) => string | undefined)"
14+
},
15+
"style": {
16+
"type": "CSSProperties | ((state: Calendar.DayGridHeaderRow.State) => CSSProperties | undefined)",
17+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGridHeaderRow.State,\n ) => CSSProperties | undefined)\n| undefined"
18+
},
19+
"render": {
20+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGridHeaderRow.State) => ReactElement)",
21+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
22+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGridHeaderRow.State,\n ) => ReactElement)"
23+
}
24+
},
25+
"dataAttributes": {},
26+
"cssVariables": {}
27+
}

‎docs/reference/generated/calendar-day-grid-header.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "CalendarDayGridHeader",
3+
"description": "Groups all parts of the calendar's day grid header.\nRenders a `<thead>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: Calendar.DayGridHeader.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((\n state: Calendar.DayGridHeader.State,\n ) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: Calendar.DayGridHeader.State) => CSSProperties | undefined)",
12+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGridHeader.State,\n ) => CSSProperties | undefined)\n| undefined"
13+
},
14+
"render": {
15+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGridHeader.State) => ReactElement)",
16+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
17+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGridHeader.State,\n ) => ReactElement)"
18+
}
19+
},
20+
"dataAttributes": {},
21+
"cssVariables": {}
22+
}

‎docs/reference/generated/calendar-day-grid-row.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "CalendarDayGridRow",
3+
"description": "Groups all cells of a given calendar's day grid row.\nRenders a `<tr>` element.",
4+
"props": {
5+
"value": {
6+
"type": "Date",
7+
"required": true,
8+
"description": "The date object representing the week."
9+
},
10+
"children": {
11+
"type": "ReactNode | ((day: Date, index: number, days: Date[]) => ReactNode)",
12+
"description": "The children of the component.\nIf a function is provided, it will be called for each day of the week as its parameter.",
13+
"detailedType": "| React.ReactNode\n| ((day: Date, index: number, days: Date[]) => ReactNode)"
14+
},
15+
"className": {
16+
"type": "string | ((state: Calendar.DayGridRow.State) => string | undefined)",
17+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
18+
"detailedType": "| string\n| ((state: Calendar.DayGridRow.State) => string | undefined)"
19+
},
20+
"style": {
21+
"type": "CSSProperties | ((state: Calendar.DayGridRow.State) => CSSProperties | undefined)",
22+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGridRow.State,\n ) => CSSProperties | undefined)\n| undefined"
23+
},
24+
"render": {
25+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGridRow.State) => ReactElement)",
26+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
27+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGridRow.State,\n ) => ReactElement)"
28+
}
29+
},
30+
"dataAttributes": {},
31+
"cssVariables": {}
32+
}

‎docs/reference/generated/calendar-day-grid.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "CalendarDayGrid",
3+
"description": "Groups all the parts of the calendar's day grid.\nRenders a `<table>` element.",
4+
"props": {
5+
"className": {
6+
"type": "string | ((state: Calendar.DayGrid.State) => string | undefined)",
7+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
8+
"detailedType": "| string\n| ((state: Calendar.DayGrid.State) => string | undefined)"
9+
},
10+
"style": {
11+
"type": "CSSProperties | ((state: Calendar.DayGrid.State) => CSSProperties | undefined)",
12+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DayGrid.State,\n ) => CSSProperties | undefined)\n| undefined"
13+
},
14+
"render": {
15+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DayGrid.State) => ReactElement)",
16+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
17+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DayGrid.State,\n ) => ReactElement)"
18+
}
19+
},
20+
"dataAttributes": {},
21+
"cssVariables": {}
22+
}

‎docs/reference/generated/calendar-decrement-month.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "CalendarDecrementMonth",
3+
"description": "Displays an element to navigate to the previous month in the calendar.\nRenders a `<button>` element.",
4+
"props": {
5+
"nativeButton": {
6+
"type": "boolean",
7+
"default": "true",
8+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (e.g. `<div>`).",
9+
"detailedType": "boolean | undefined"
10+
},
11+
"className": {
12+
"type": "string | ((state: Calendar.DecrementMonth.State) => string | undefined)",
13+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
14+
"detailedType": "| string\n| ((\n state: Calendar.DecrementMonth.State,\n ) => string | undefined)"
15+
},
16+
"style": {
17+
"type": "CSSProperties | ((state: Calendar.DecrementMonth.State) => CSSProperties | undefined)",
18+
"detailedType": "| React.CSSProperties\n| ((\n state: Calendar.DecrementMonth.State,\n ) => CSSProperties | undefined)\n| undefined"
19+
},
20+
"render": {
21+
"type": "ReactElement | ((props: HTMLProps, state: Calendar.DecrementMonth.State) => ReactElement)",
22+
"description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
23+
"detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Calendar.DecrementMonth.State,\n ) => ReactElement)"
24+
}
25+
},
26+
"dataAttributes": {
27+
"data-disabled": {
28+
"description": "Present when the button is disabled."
29+
}
30+
},
31+
"cssVariables": {}
32+
}

0 commit comments

Comments
 (0)