@xsolla/xui-calendar 0.174.3 → 0.176.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,6 +1,39 @@
|
|
|
1
1
|
# Calendar
|
|
2
2
|
|
|
3
3
|
A cross-platform React calendar component supporting single date selection, date range selection, preset date chips, and a dual (side-by-side) calendar layout.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:calendar -->
|
|
5
|
+
xui-mcp-instructions:calendarA panel component that displays an interactive date grid for selecting a single date or a date range. Calendar is always triggered by a DatePicker field — it does not appear on its own.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
- As the date selection panel opened by a DatePicker input
|
|
9
|
+
- When a user needs to pick a date by navigating a calendar view
|
|
10
|
+
- When selecting a date range spanning days, weeks, or months
|
|
11
|
+
|
|
12
|
+
### Content guidelines
|
|
13
|
+
- Chip labels: use standard presets — Today, Yesterday, Last 7 days, Last 30 days, This month, Last month.
|
|
14
|
+
- Enable Chips whenever the Calendar is used for filtering or reporting — they significantly speed up selection.
|
|
15
|
+
- Use Bottom content for an explicit Apply / Cancel pair when the context requires confirmation before the selection takes effect.
|
|
16
|
+
|
|
17
|
+
### Behaviour guidelines
|
|
18
|
+
- Calendar opens anchored below the DatePicker field; if there is not enough space below, it opens upward.
|
|
19
|
+
- Single date (Range=False): clicking a day cell selects it and closes the panel immediately.
|
|
20
|
+
- Range (Range=True): first click sets the start date; hovering shows a preview highlight; second click sets the end date and closes the panel. If the second click lands before the first date, the range resets and the clicked date becomes the new start.
|
|
21
|
+
- Clicking a chip sets the predefined date or range and closes the panel. The chip enters Active state.
|
|
22
|
+
- Pressing Escape closes the panel without changing the selection; focus returns to the DatePicker field.
|
|
23
|
+
- The panel renders as a floating overlay — it does not shift page layout.
|
|
24
|
+
- Always set Months=Two and Range=True together when using range selection.
|
|
25
|
+
|
|
26
|
+
### Accessibility
|
|
27
|
+
- When the panel opens, focus moves to the selected date cell, or to today's date if nothing is selected.
|
|
28
|
+
- When the panel closes, focus returns to the DatePicker field that triggered it.
|
|
29
|
+
- Focus is trapped inside the panel while it is open — Tab cycles within the panel only.
|
|
30
|
+
- Apply role=*"dialog"* and aria-modal=*"true"* to the Calendar panel container.
|
|
31
|
+
- Apply aria-label=*"Choose a date"* (or *"Choose a date range"* when Range=True) to the dialog.
|
|
32
|
+
- Apply aria-selected=*"true"* to selected day cells.
|
|
33
|
+
- Apply aria-disabled=*"true"* to disabled day cells.
|
|
34
|
+
- Apply aria-current=*"date"* to today's date cell.
|
|
35
|
+
- Use aria-live to announce month navigation changes to screen readers.
|
|
36
|
+
<!-- END:xui-mcp-instructions:calendar -->
|
|
4
37
|
|
|
5
38
|
## Installation
|
|
6
39
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-calendar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.176.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons-base": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
20
|
-
"@xsolla/xui-select": "0.
|
|
21
|
-
"@xsolla/xui-tag": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.176.0",
|
|
17
|
+
"@xsolla/xui-core": "0.176.0",
|
|
18
|
+
"@xsolla/xui-icons-base": "0.176.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.176.0",
|
|
20
|
+
"@xsolla/xui-select": "0.176.0",
|
|
21
|
+
"@xsolla/xui-tag": "0.176.0",
|
|
22
22
|
"date-fns": "^3.0.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|