@salt-ds/date-components 0.0.0-snapshot-20260330155807
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/CHANGELOG.md +109 -0
- package/README.md +63 -0
- package/css/salt-date-components.css +633 -0
- package/dist-cjs/calendar/Calendar.css.js +6 -0
- package/dist-cjs/calendar/Calendar.css.js.map +1 -0
- package/dist-cjs/calendar/Calendar.js +154 -0
- package/dist-cjs/calendar/Calendar.js.map +1 -0
- package/dist-cjs/calendar/CalendarGrid.js +85 -0
- package/dist-cjs/calendar/CalendarGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarMonthHeader.css.js +6 -0
- package/dist-cjs/calendar/CalendarMonthHeader.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarMonthHeader.js +41 -0
- package/dist-cjs/calendar/CalendarMonthHeader.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.css.js +6 -0
- package/dist-cjs/calendar/CalendarNavigation.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +334 -0
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -0
- package/dist-cjs/calendar/CalendarWeekHeader.css.js +6 -0
- package/dist-cjs/calendar/CalendarWeekHeader.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarWeekHeader.js +46 -0
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarContext.js +23 -0
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarDay.css.js +6 -0
- package/dist-cjs/calendar/internal/CalendarDay.css.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarDay.js +98 -0
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +6 -0
- package/dist-cjs/calendar/internal/CalendarMonth.css.js.map +1 -0
- package/dist-cjs/calendar/internal/CalendarMonth.js +81 -0
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -0
- package/dist-cjs/calendar/internal/createAnnouncement.js +90 -0
- package/dist-cjs/calendar/internal/createAnnouncement.js.map +1 -0
- package/dist-cjs/calendar/internal/useFocusManagement.js +66 -0
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -0
- package/dist-cjs/calendar/internal/utils.js +50 -0
- package/dist-cjs/calendar/internal/utils.js.map +1 -0
- package/dist-cjs/calendar/useCalendar.js +464 -0
- package/dist-cjs/calendar/useCalendar.js.map +1 -0
- package/dist-cjs/calendar/useCalendarDay.js +84 -0
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -0
- package/dist-cjs/calendar/useCalendarSelection.js +353 -0
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -0
- package/dist-cjs/calendar/useDateSelectionAnnouncer.js +52 -0
- package/dist-cjs/calendar/useDateSelectionAnnouncer.js.map +1 -0
- package/dist-cjs/date-input/DateInput.css.js +6 -0
- package/dist-cjs/date-input/DateInput.css.js.map +1 -0
- package/dist-cjs/date-input/DateInputRange.js +353 -0
- package/dist-cjs/date-input/DateInputRange.js.map +1 -0
- package/dist-cjs/date-input/DateInputSingle.js +237 -0
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -0
- package/dist-cjs/date-picker/DatePicker.js +83 -0
- package/dist-cjs/date-picker/DatePicker.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerActions.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerActions.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerActions.js +119 -0
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerContext.js +36 -0
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerHelperText.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerHelperText.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerHelperText.js +36 -0
- package/dist-cjs/date-picker/DatePickerHelperText.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerOverlay.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js +49 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +164 -0
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerPanel.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerPanel.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerRangeGridPanel.js +250 -0
- package/dist-cjs/date-picker/DatePickerRangeGridPanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerRangeInput.js +206 -0
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerRangePanel.js +365 -0
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerSingleGridPanel.js +262 -0
- package/dist-cjs/date-picker/DatePickerSingleGridPanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerSingleInput.js +150 -0
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +20 -0
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerTrigger.js +32 -0
- package/dist-cjs/date-picker/DatePickerTrigger.js.map +1 -0
- package/dist-cjs/date-picker/useDatePicker.js +222 -0
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -0
- package/dist-cjs/date-picker/useFocusOut.js +43 -0
- package/dist-cjs/date-picker/useFocusOut.js.map +1 -0
- package/dist-cjs/date-picker/useKeyboard.js +22 -0
- package/dist-cjs/date-picker/useKeyboard.js.map +1 -0
- package/dist-cjs/index.js +64 -0
- package/dist-cjs/index.js.map +1 -0
- package/dist-cjs/localization-provider/LocalizationProvider.js +51 -0
- package/dist-cjs/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-es/calendar/Calendar.css.js +4 -0
- package/dist-es/calendar/Calendar.css.js.map +1 -0
- package/dist-es/calendar/Calendar.js +152 -0
- package/dist-es/calendar/Calendar.js.map +1 -0
- package/dist-es/calendar/CalendarGrid.js +83 -0
- package/dist-es/calendar/CalendarGrid.js.map +1 -0
- package/dist-es/calendar/CalendarMonthHeader.css.js +4 -0
- package/dist-es/calendar/CalendarMonthHeader.css.js.map +1 -0
- package/dist-es/calendar/CalendarMonthHeader.js +39 -0
- package/dist-es/calendar/CalendarMonthHeader.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.css.js +4 -0
- package/dist-es/calendar/CalendarNavigation.css.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +332 -0
- package/dist-es/calendar/CalendarNavigation.js.map +1 -0
- package/dist-es/calendar/CalendarWeekHeader.css.js +4 -0
- package/dist-es/calendar/CalendarWeekHeader.css.js.map +1 -0
- package/dist-es/calendar/CalendarWeekHeader.js +44 -0
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -0
- package/dist-es/calendar/internal/CalendarContext.js +20 -0
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -0
- package/dist-es/calendar/internal/CalendarDay.css.js +4 -0
- package/dist-es/calendar/internal/CalendarDay.css.js.map +1 -0
- package/dist-es/calendar/internal/CalendarDay.js +96 -0
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -0
- package/dist-es/calendar/internal/CalendarMonth.css.js +4 -0
- package/dist-es/calendar/internal/CalendarMonth.css.js.map +1 -0
- package/dist-es/calendar/internal/CalendarMonth.js +79 -0
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -0
- package/dist-es/calendar/internal/createAnnouncement.js +87 -0
- package/dist-es/calendar/internal/createAnnouncement.js.map +1 -0
- package/dist-es/calendar/internal/useFocusManagement.js +64 -0
- package/dist-es/calendar/internal/useFocusManagement.js.map +1 -0
- package/dist-es/calendar/internal/utils.js +44 -0
- package/dist-es/calendar/internal/utils.js.map +1 -0
- package/dist-es/calendar/useCalendar.js +462 -0
- package/dist-es/calendar/useCalendar.js.map +1 -0
- package/dist-es/calendar/useCalendarDay.js +82 -0
- package/dist-es/calendar/useCalendarDay.js.map +1 -0
- package/dist-es/calendar/useCalendarSelection.js +349 -0
- package/dist-es/calendar/useCalendarSelection.js.map +1 -0
- package/dist-es/calendar/useDateSelectionAnnouncer.js +50 -0
- package/dist-es/calendar/useDateSelectionAnnouncer.js.map +1 -0
- package/dist-es/date-input/DateInput.css.js +4 -0
- package/dist-es/date-input/DateInput.css.js.map +1 -0
- package/dist-es/date-input/DateInputRange.js +350 -0
- package/dist-es/date-input/DateInputRange.js.map +1 -0
- package/dist-es/date-input/DateInputSingle.js +235 -0
- package/dist-es/date-input/DateInputSingle.js.map +1 -0
- package/dist-es/date-picker/DatePicker.js +80 -0
- package/dist-es/date-picker/DatePicker.js.map +1 -0
- package/dist-es/date-picker/DatePickerActions.css.js +4 -0
- package/dist-es/date-picker/DatePickerActions.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerActions.js +117 -0
- package/dist-es/date-picker/DatePickerActions.js.map +1 -0
- package/dist-es/date-picker/DatePickerContext.js +32 -0
- package/dist-es/date-picker/DatePickerContext.js.map +1 -0
- package/dist-es/date-picker/DatePickerHelperText.css.js +4 -0
- package/dist-es/date-picker/DatePickerHelperText.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerHelperText.js +34 -0
- package/dist-es/date-picker/DatePickerHelperText.js.map +1 -0
- package/dist-es/date-picker/DatePickerOverlay.css.js +4 -0
- package/dist-es/date-picker/DatePickerOverlay.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerOverlay.js +47 -0
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -0
- package/dist-es/date-picker/DatePickerOverlayProvider.js +161 -0
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -0
- package/dist-es/date-picker/DatePickerPanel.css.js +4 -0
- package/dist-es/date-picker/DatePickerPanel.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerRangeGridPanel.js +248 -0
- package/dist-es/date-picker/DatePickerRangeGridPanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerRangeInput.js +203 -0
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -0
- package/dist-es/date-picker/DatePickerRangePanel.js +363 -0
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerSingleGridPanel.js +260 -0
- package/dist-es/date-picker/DatePickerSingleGridPanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerSingleInput.js +148 -0
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -0
- package/dist-es/date-picker/DatePickerSinglePanel.js +18 -0
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerTrigger.js +30 -0
- package/dist-es/date-picker/DatePickerTrigger.js.map +1 -0
- package/dist-es/date-picker/useDatePicker.js +220 -0
- package/dist-es/date-picker/useDatePicker.js.map +1 -0
- package/dist-es/date-picker/useFocusOut.js +41 -0
- package/dist-es/date-picker/useFocusOut.js.map +1 -0
- package/dist-es/date-picker/useKeyboard.js +20 -0
- package/dist-es/date-picker/useKeyboard.js.map +1 -0
- package/dist-es/index.js +25 -0
- package/dist-es/index.js.map +1 -0
- package/dist-es/localization-provider/LocalizationProvider.js +47 -0
- package/dist-es/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-types/calendar/Calendar.d.ts +105 -0
- package/dist-types/calendar/CalendarGrid.d.ts +27 -0
- package/dist-types/calendar/CalendarMonthHeader.d.ts +17 -0
- package/dist-types/calendar/CalendarNavigation.d.ts +43 -0
- package/dist-types/calendar/CalendarWeekHeader.d.ts +6 -0
- package/dist-types/calendar/index.d.ts +9 -0
- package/dist-types/calendar/internal/CalendarContext.d.ts +6 -0
- package/dist-types/calendar/internal/CalendarDay.d.ts +33 -0
- package/dist-types/calendar/internal/CalendarMonth.d.ts +14 -0
- package/dist-types/calendar/internal/createAnnouncement.d.ts +24 -0
- package/dist-types/calendar/internal/useFocusManagement.d.ts +9 -0
- package/dist-types/calendar/internal/utils.d.ts +6 -0
- package/dist-types/calendar/useCalendar.d.ts +335 -0
- package/dist-types/calendar/useCalendarDay.d.ts +67 -0
- package/dist-types/calendar/useCalendarSelection.d.ts +145 -0
- package/dist-types/calendar/useDateSelectionAnnouncer.d.ts +6 -0
- package/dist-types/date-input/DateInputRange.d.ts +131 -0
- package/dist-types/date-input/DateInputSingle.d.ts +99 -0
- package/dist-types/date-input/index.d.ts +2 -0
- package/dist-types/date-picker/DatePicker.d.ts +52 -0
- package/dist-types/date-picker/DatePickerActions.d.ts +79 -0
- package/dist-types/date-picker/DatePickerContext.d.ts +172 -0
- package/dist-types/date-picker/DatePickerHelperText.d.ts +4 -0
- package/dist-types/date-picker/DatePickerOverlay.d.ts +11 -0
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +106 -0
- package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts +14 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +17 -0
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +83 -0
- package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts +63 -0
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +15 -0
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +8 -0
- package/dist-types/date-picker/DatePickerTrigger.d.ts +9 -0
- package/dist-types/date-picker/index.d.ts +13 -0
- package/dist-types/date-picker/useDatePicker.d.ts +121 -0
- package/dist-types/date-picker/useFocusOut.d.ts +9 -0
- package/dist-types/date-picker/useKeyboard.d.ts +20 -0
- package/dist-types/index.d.ts +4 -0
- package/dist-types/localization-provider/LocalizationProvider.d.ts +62 -0
- package/dist-types/localization-provider/index.d.ts +1 -0
- package/package.json +60 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# @salt-ds/date-components
|
|
2
|
+
|
|
3
|
+
## 0.0.0-snapshot-20260330155807
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- ad98ac6: New package `@salt-ds/date-components` has been added to contain shared date-related components such as `Calendar`, `CalendarNavigation`, and `DateInput`.
|
|
8
|
+
To avoid a breaking change, `@salt-ds/lab` still re-exports these components for now (and logs a deprecation warning in development). New code should import from `@salt-ds/date-components`.
|
|
9
|
+
|
|
10
|
+
Calendar updates
|
|
11
|
+
|
|
12
|
+
- fixed styling issues with selected range border.
|
|
13
|
+
- fix Calendar dropdown spacing that caused an ellipsis to appear at mobile breakpoints.
|
|
14
|
+
- improved screenreader support.
|
|
15
|
+
- type improvements
|
|
16
|
+
- remove un-used code/types and simplified structure of selection types.
|
|
17
|
+
- simplify types, generics for usage of date adapters are no longer essentially required unless you are creating a custom date adapter.
|
|
18
|
+
- Calendar provides default screen-reader announcements by default.
|
|
19
|
+
- custom live announcements can be configured through a `createAnnouncement` factory method.
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
import { Calendar } from "@salt-ds/lab";
|
|
23
|
+
import type { CreateAnnouncement } from "@salt-ds/lab";
|
|
24
|
+
|
|
25
|
+
const customCreateAnnouncement: CreateAnnouncement<DateFrameworkType> = (announcementType, state, dateAdapter) => {
|
|
26
|
+
switch (minFocusableDateExceeded) {
|
|
27
|
+
case "dateSelected":
|
|
28
|
+
return `Minimum date exceeded ${dateAdapter.format(state.selectedDate)}`;
|
|
29
|
+
case "maxFocusableDateExceeded":
|
|
30
|
+
return `Maximum date exceeded ${dateAdapter.format(state.selectedDate)}`;
|
|
31
|
+
case "dateSelected":
|
|
32
|
+
return `You selected ${dateAdapter.format(state.selectedDate, "longDate")}`;
|
|
33
|
+
case "visibleMonthChanged":
|
|
34
|
+
return `Selected ${dateAdapter.format(state.startVisibleMonth, "monthYear")}`;
|
|
35
|
+
default:
|
|
36
|
+
return undefined;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
<Calendar
|
|
41
|
+
createAnnouncement={customCreateAnnouncement}
|
|
42
|
+
timezone="UTC"
|
|
43
|
+
/>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
- `CalendarNavigation` has new props `PreviousButtonProps` and `NextButtonProps` to pass props to the navigation buttons.
|
|
47
|
+
These props can be used in place of `onNavigateNext`, `disableNavigateNext` and `onNavigatePrevious`, `disableNavigatePrevious`.
|
|
48
|
+
- `CalendarNavigation` has removed props `onMonthSelect` and `onYearSelect`, use `MonthDropdownProps` and `YearDropdownProps` instead.
|
|
49
|
+
|
|
50
|
+
```diff
|
|
51
|
+
<CalendarNavigation
|
|
52
|
+
- onMonthSelect={handleMonthSelect}
|
|
53
|
+
+ MonthDropdownProps={{
|
|
54
|
+
+ onChange: handleMonthSelect
|
|
55
|
+
+ }}
|
|
56
|
+
- onYearSelect={handleYearSelect}
|
|
57
|
+
+ YearDropdownProps={{
|
|
58
|
+
+ onChange: handleYearSelect
|
|
59
|
+
+ }}
|
|
60
|
+
- onNavigatePrevious={handlePrevious}
|
|
61
|
+
- disableNavigatePrevious={isPreviousDisabled}
|
|
62
|
+
+ PreviousButtonProps={{
|
|
63
|
+
+ onClick: handlePrevious,
|
|
64
|
+
+ disabled: isPreviousDisabled
|
|
65
|
+
+ }}
|
|
66
|
+
- onNavigateNext={handleNext}
|
|
67
|
+
- disableNavigateNext={isNextDisabled}
|
|
68
|
+
+ NextButtonProps={{
|
|
69
|
+
+ onClick: handleNext,
|
|
70
|
+
+ disabled: isNextDisabled
|
|
71
|
+
+ }}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
- `CalendarNavigation` now adds tooltips to out of range dates.
|
|
76
|
+
- when a Calendar has `minDate` or `maxDate` and the user navigates to a month outside of that range, the Calendar will now automatically navigate back to the closest valid month.
|
|
77
|
+
|
|
78
|
+
- 6252900: Update date library dependency versions used by date components and date-adapters.
|
|
79
|
+
|
|
80
|
+
Package.json dependency range updates:
|
|
81
|
+
|
|
82
|
+
- `@date-fns/tz` `^1.2.0` -> `^1.4.1` (root, `@salt-ds/lab` devDeps, site deps, and `@salt-ds/date-adapters` peers)
|
|
83
|
+
- `dayjs` `^1.11.13` -> `^1.11.20` (lab devDeps, site deps, and date-adapters peers)
|
|
84
|
+
- `luxon` `^3.6.1` -> `^3.7.2` (lab devDeps, site deps, and date-adapters peers)
|
|
85
|
+
- `moment-timezone` `^0.5.46` -> `^0.6.1` (lab devDeps, site deps, and date-adapters peers)
|
|
86
|
+
- `@types/luxon` `^3.6.2` -> `^3.7.1` (lab devDeps, site devDeps, and date-adapters peers)
|
|
87
|
+
|
|
88
|
+
These changes are dependency-only (no Salt public API changes).
|
|
89
|
+
|
|
90
|
+
- 61769ce: Date picker updates
|
|
91
|
+
|
|
92
|
+
- fixed a bug where a disabled picker could still open by clicking the input
|
|
93
|
+
- improved screen reader support
|
|
94
|
+
|
|
95
|
+
- 8ebbe39: `DateInputSingle` and `DateInputRange` a11y and dayjs timezone improvements
|
|
96
|
+
|
|
97
|
+
- added `aria-invalid` to `DateInputSingle` and `DateInputRange` input elements when an error is present.
|
|
98
|
+
- fixed Dayjs timezone handling for date input/picker workflows so that user-entered dates are correctly interpreted as midnight in the selected IANA timezone when serializing to ISO (e.g. `America/New_York`, `Asia/Shanghai`).
|
|
99
|
+
|
|
100
|
+
- Updated dependencies [6252900]
|
|
101
|
+
- Updated dependencies [cfc1591]
|
|
102
|
+
- Updated dependencies [0a08ae0]
|
|
103
|
+
- Updated dependencies [49b3486]
|
|
104
|
+
- Updated dependencies [8ebbe39]
|
|
105
|
+
- Updated dependencies [8d9ca17]
|
|
106
|
+
- Updated dependencies [a68cf61]
|
|
107
|
+
- @salt-ds/date-adapters@0.0.0-snapshot-20260330155807
|
|
108
|
+
- @salt-ds/core@0.0.0-snapshot-20260330155807
|
|
109
|
+
- @salt-ds/icons@0.0.0-snapshot-20260330155807
|
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# @salt-ds/date-components
|
|
2
|
+
|
|
3
|
+
Salt Design System date components.
|
|
4
|
+
|
|
5
|
+
## Status
|
|
6
|
+
|
|
7
|
+
The date components previously lived in `@salt-ds/lab`. They now live here in `@salt-ds/date-components`.
|
|
8
|
+
|
|
9
|
+
To avoid a breaking change, `@salt-ds/lab` still re-exports these components for now (and logs a deprecation warning in development). New code should import from `@salt-ds/date-components`.
|
|
10
|
+
|
|
11
|
+
## Contents
|
|
12
|
+
|
|
13
|
+
This package includes:
|
|
14
|
+
|
|
15
|
+
- **Calendar** (and supporting hooks)
|
|
16
|
+
- **Date input** components
|
|
17
|
+
- **Date picker** components
|
|
18
|
+
- **LocalizationProvider** for date localization/config
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
yarn add @salt-ds/date-components @salt-ds/date-adapters
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
You will also need the usual Salt peer dependencies (React) and the Salt packages used by these components (for example `@salt-ds/core`, `@salt-ds/styles`).
|
|
27
|
+
|
|
28
|
+
## Date adapters
|
|
29
|
+
|
|
30
|
+
The date components rely on `@salt-ds/date-adapters` for parsing/formatting and date framework integration.
|
|
31
|
+
|
|
32
|
+
Make sure you have an adapter configured for the date library/framework you’re using, and wrap your app (or the relevant subtree) with `LocalizationProvider`.
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
Import components from `@salt-ds/date-components`:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import {
|
|
40
|
+
LocalizationProvider,
|
|
41
|
+
DatePicker,
|
|
42
|
+
DateInputSingle,
|
|
43
|
+
Calendar,
|
|
44
|
+
} from "@salt-ds/date-components";
|
|
45
|
+
|
|
46
|
+
// ...render in your app
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Migration from `@salt-ds/lab`
|
|
50
|
+
|
|
51
|
+
If you currently import date components from `@salt-ds/lab`, you can continue to do so for now, but those exports are deprecated and will be removed in a future release.
|
|
52
|
+
|
|
53
|
+
Update imports from:
|
|
54
|
+
|
|
55
|
+
```ts
|
|
56
|
+
import { DatePicker } from "@salt-ds/lab";
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
to:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import { DatePicker } from "@salt-ds/date-components";
|
|
63
|
+
```
|