@salt-ds/lab 1.0.0-alpha.89 → 1.0.0-alpha.90
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 +103 -0
- package/css/salt-lab.css +120 -643
- package/dist-cjs/calendar/index.js +61 -0
- package/dist-cjs/calendar/index.js.map +1 -0
- package/dist-cjs/content-status/ContentStatus.js +1 -1
- package/dist-cjs/content-status/ContentStatus.js.map +1 -1
- package/dist-cjs/date-input/index.js +23 -0
- package/dist-cjs/date-input/index.js.map +1 -0
- package/dist-cjs/date-picker/index.js +106 -0
- package/dist-cjs/date-picker/index.js.map +1 -0
- package/dist-cjs/index.js +58 -56
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/localization-provider/index.js +26 -0
- package/dist-cjs/localization-provider/index.js.map +1 -0
- package/dist-cjs/rating/Rating.css.js +1 -1
- package/dist-cjs/rating/Rating.js +11 -16
- package/dist-cjs/rating/Rating.js.map +1 -1
- package/dist-cjs/side-panel/SidePanel.css.js +6 -0
- package/dist-cjs/side-panel/SidePanel.css.js.map +1 -0
- package/dist-cjs/side-panel/SidePanel.js +156 -0
- package/dist-cjs/side-panel/SidePanel.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelContent.css.js +6 -0
- package/dist-cjs/side-panel/SidePanelContent.css.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelContent.js +86 -0
- package/dist-cjs/side-panel/SidePanelContent.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelHeader.css.js +6 -0
- package/dist-cjs/side-panel/SidePanelHeader.css.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelHeader.js +26 -0
- package/dist-cjs/side-panel/SidePanelHeader.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelProvider.js +71 -0
- package/dist-cjs/side-panel/SidePanelProvider.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelTitle.css.js +6 -0
- package/dist-cjs/side-panel/SidePanelTitle.css.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelTitle.js +47 -0
- package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelTrigger.js +37 -0
- package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -0
- package/dist-cjs/side-panel/internal/SidePanelContext.js +31 -0
- package/dist-cjs/side-panel/internal/SidePanelContext.js.map +1 -0
- package/dist-cjs/side-panel/useSidePanel.js +41 -0
- package/dist-cjs/side-panel/useSidePanel.js.map +1 -0
- package/dist-cjs/utils/deprecatedExport.js +30 -0
- package/dist-cjs/utils/deprecatedExport.js.map +1 -0
- package/dist-es/calendar/index.js +50 -0
- package/dist-es/calendar/index.js.map +1 -0
- package/dist-es/content-status/ContentStatus.js +1 -1
- package/dist-es/content-status/ContentStatus.js.map +1 -1
- package/dist-es/date-input/index.js +20 -0
- package/dist-es/date-input/index.js.map +1 -0
- package/dist-es/date-picker/index.js +85 -0
- package/dist-es/date-picker/index.js.map +1 -0
- package/dist-es/index.js +12 -23
- package/dist-es/index.js.map +1 -1
- package/dist-es/localization-provider/index.js +20 -0
- package/dist-es/localization-provider/index.js.map +1 -0
- package/dist-es/rating/Rating.css.js +1 -1
- package/dist-es/rating/Rating.js +13 -18
- package/dist-es/rating/Rating.js.map +1 -1
- package/dist-es/side-panel/SidePanel.css.js +4 -0
- package/dist-es/side-panel/SidePanel.css.js.map +1 -0
- package/dist-es/side-panel/SidePanel.js +154 -0
- package/dist-es/side-panel/SidePanel.js.map +1 -0
- package/dist-es/side-panel/SidePanelContent.css.js +4 -0
- package/dist-es/side-panel/SidePanelContent.css.js.map +1 -0
- package/dist-es/side-panel/SidePanelContent.js +84 -0
- package/dist-es/side-panel/SidePanelContent.js.map +1 -0
- package/dist-es/side-panel/SidePanelHeader.css.js +4 -0
- package/dist-es/side-panel/SidePanelHeader.css.js.map +1 -0
- package/dist-es/side-panel/SidePanelHeader.js +24 -0
- package/dist-es/side-panel/SidePanelHeader.js.map +1 -0
- package/dist-es/side-panel/SidePanelProvider.js +69 -0
- package/dist-es/side-panel/SidePanelProvider.js.map +1 -0
- package/dist-es/side-panel/SidePanelTitle.css.js +4 -0
- package/dist-es/side-panel/SidePanelTitle.css.js.map +1 -0
- package/dist-es/side-panel/SidePanelTitle.js +45 -0
- package/dist-es/side-panel/SidePanelTitle.js.map +1 -0
- package/dist-es/side-panel/SidePanelTrigger.js +35 -0
- package/dist-es/side-panel/SidePanelTrigger.js.map +1 -0
- package/dist-es/side-panel/internal/SidePanelContext.js +28 -0
- package/dist-es/side-panel/internal/SidePanelContext.js.map +1 -0
- package/dist-es/side-panel/useSidePanel.js +39 -0
- package/dist-es/side-panel/useSidePanel.js.map +1 -0
- package/dist-es/utils/deprecatedExport.js +27 -0
- package/dist-es/utils/deprecatedExport.js.map +1 -0
- package/dist-types/calendar/index.d.ts +13 -8
- package/dist-types/date-input/index.d.ts +3 -2
- package/dist-types/index.d.ts +1 -0
- package/dist-types/localization-provider/index.d.ts +9 -1
- package/dist-types/rating/Rating.d.ts +1 -2
- package/dist-types/side-panel/SidePanel.d.ts +27 -0
- package/dist-types/side-panel/SidePanelContent.d.ts +4 -0
- package/dist-types/side-panel/SidePanelHeader.d.ts +4 -0
- package/dist-types/side-panel/SidePanelProvider.d.ts +20 -0
- package/dist-types/side-panel/SidePanelTitle.d.ts +4 -0
- package/dist-types/side-panel/SidePanelTrigger.d.ts +5 -0
- package/dist-types/side-panel/index.d.ts +7 -0
- package/dist-types/side-panel/internal/SidePanelContext.d.ts +48 -0
- package/dist-types/side-panel/internal/index.d.ts +1 -0
- package/dist-types/side-panel/useSidePanel.d.ts +32 -0
- package/dist-types/utils/deprecatedExport.d.ts +11 -0
- package/package.json +5 -12
- package/dist-cjs/calendar/Calendar.css.js +0 -6
- package/dist-cjs/calendar/Calendar.css.js.map +0 -1
- package/dist-cjs/calendar/Calendar.js +0 -152
- package/dist-cjs/calendar/Calendar.js.map +0 -1
- package/dist-cjs/calendar/CalendarGrid.js +0 -85
- package/dist-cjs/calendar/CalendarGrid.js.map +0 -1
- package/dist-cjs/calendar/CalendarMonthHeader.css.js +0 -6
- package/dist-cjs/calendar/CalendarMonthHeader.css.js.map +0 -1
- package/dist-cjs/calendar/CalendarMonthHeader.js +0 -48
- package/dist-cjs/calendar/CalendarMonthHeader.js.map +0 -1
- package/dist-cjs/calendar/CalendarNavigation.css.js +0 -6
- package/dist-cjs/calendar/CalendarNavigation.css.js.map +0 -1
- package/dist-cjs/calendar/CalendarNavigation.js +0 -337
- package/dist-cjs/calendar/CalendarNavigation.js.map +0 -1
- package/dist-cjs/calendar/CalendarWeekHeader.css.js +0 -6
- package/dist-cjs/calendar/CalendarWeekHeader.css.js.map +0 -1
- package/dist-cjs/calendar/CalendarWeekHeader.js +0 -46
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarContext.js +0 -25
- package/dist-cjs/calendar/internal/CalendarContext.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarDay.css.js +0 -6
- package/dist-cjs/calendar/internal/CalendarDay.css.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +0 -97
- package/dist-cjs/calendar/internal/CalendarDay.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +0 -6
- package/dist-cjs/calendar/internal/CalendarMonth.css.js.map +0 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +0 -76
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +0 -1
- package/dist-cjs/calendar/internal/useFocusManagement.js +0 -68
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +0 -1
- package/dist-cjs/calendar/internal/utils.js +0 -50
- package/dist-cjs/calendar/internal/utils.js.map +0 -1
- package/dist-cjs/calendar/useCalendar.js +0 -183
- package/dist-cjs/calendar/useCalendar.js.map +0 -1
- package/dist-cjs/calendar/useCalendarDay.js +0 -85
- package/dist-cjs/calendar/useCalendarDay.js.map +0 -1
- package/dist-cjs/calendar/useCalendarSelection.js +0 -604
- package/dist-cjs/calendar/useCalendarSelection.js.map +0 -1
- package/dist-cjs/date-input/DateInput.css.js +0 -6
- package/dist-cjs/date-input/DateInput.css.js.map +0 -1
- package/dist-cjs/date-input/DateInputRange.js +0 -352
- package/dist-cjs/date-input/DateInputRange.js.map +0 -1
- package/dist-cjs/date-input/DateInputSingle.js +0 -234
- package/dist-cjs/date-input/DateInputSingle.js.map +0 -1
- package/dist-cjs/date-picker/DatePicker.js +0 -75
- package/dist-cjs/date-picker/DatePicker.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerActions.css.js +0 -6
- package/dist-cjs/date-picker/DatePickerActions.css.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerActions.js +0 -91
- package/dist-cjs/date-picker/DatePickerActions.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerContext.js +0 -36
- package/dist-cjs/date-picker/DatePickerContext.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerHelperText.css.js +0 -6
- package/dist-cjs/date-picker/DatePickerHelperText.css.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerHelperText.js +0 -36
- package/dist-cjs/date-picker/DatePickerHelperText.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerOverlay.css.js +0 -6
- package/dist-cjs/date-picker/DatePickerOverlay.css.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerOverlay.js +0 -48
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +0 -166
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerPanel.css.js +0 -6
- package/dist-cjs/date-picker/DatePickerPanel.css.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerRangeGridPanel.js +0 -246
- package/dist-cjs/date-picker/DatePickerRangeGridPanel.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +0 -202
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +0 -355
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerSingleGridPanel.js +0 -253
- package/dist-cjs/date-picker/DatePickerSingleGridPanel.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +0 -148
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +0 -20
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +0 -1
- package/dist-cjs/date-picker/DatePickerTrigger.js +0 -32
- package/dist-cjs/date-picker/DatePickerTrigger.js.map +0 -1
- package/dist-cjs/date-picker/useDatePicker.js +0 -201
- package/dist-cjs/date-picker/useDatePicker.js.map +0 -1
- package/dist-cjs/date-picker/useFocusOut.js +0 -43
- package/dist-cjs/date-picker/useFocusOut.js.map +0 -1
- package/dist-cjs/date-picker/useKeyboard.js +0 -22
- package/dist-cjs/date-picker/useKeyboard.js.map +0 -1
- package/dist-cjs/localization-provider/LocalizationProvider.js +0 -51
- package/dist-cjs/localization-provider/LocalizationProvider.js.map +0 -1
- package/dist-es/calendar/Calendar.css.js +0 -4
- package/dist-es/calendar/Calendar.css.js.map +0 -1
- package/dist-es/calendar/Calendar.js +0 -150
- package/dist-es/calendar/Calendar.js.map +0 -1
- package/dist-es/calendar/CalendarGrid.js +0 -83
- package/dist-es/calendar/CalendarGrid.js.map +0 -1
- package/dist-es/calendar/CalendarMonthHeader.css.js +0 -4
- package/dist-es/calendar/CalendarMonthHeader.css.js.map +0 -1
- package/dist-es/calendar/CalendarMonthHeader.js +0 -46
- package/dist-es/calendar/CalendarMonthHeader.js.map +0 -1
- package/dist-es/calendar/CalendarNavigation.css.js +0 -4
- package/dist-es/calendar/CalendarNavigation.css.js.map +0 -1
- package/dist-es/calendar/CalendarNavigation.js +0 -335
- package/dist-es/calendar/CalendarNavigation.js.map +0 -1
- package/dist-es/calendar/CalendarWeekHeader.css.js +0 -4
- package/dist-es/calendar/CalendarWeekHeader.css.js.map +0 -1
- package/dist-es/calendar/CalendarWeekHeader.js +0 -44
- package/dist-es/calendar/CalendarWeekHeader.js.map +0 -1
- package/dist-es/calendar/internal/CalendarContext.js +0 -22
- package/dist-es/calendar/internal/CalendarContext.js.map +0 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +0 -4
- package/dist-es/calendar/internal/CalendarDay.css.js.map +0 -1
- package/dist-es/calendar/internal/CalendarDay.js +0 -95
- package/dist-es/calendar/internal/CalendarDay.js.map +0 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +0 -4
- package/dist-es/calendar/internal/CalendarMonth.css.js.map +0 -1
- package/dist-es/calendar/internal/CalendarMonth.js +0 -74
- package/dist-es/calendar/internal/CalendarMonth.js.map +0 -1
- package/dist-es/calendar/internal/useFocusManagement.js +0 -66
- package/dist-es/calendar/internal/useFocusManagement.js.map +0 -1
- package/dist-es/calendar/internal/utils.js +0 -44
- package/dist-es/calendar/internal/utils.js.map +0 -1
- package/dist-es/calendar/useCalendar.js +0 -181
- package/dist-es/calendar/useCalendar.js.map +0 -1
- package/dist-es/calendar/useCalendarDay.js +0 -83
- package/dist-es/calendar/useCalendarDay.js.map +0 -1
- package/dist-es/calendar/useCalendarSelection.js +0 -600
- package/dist-es/calendar/useCalendarSelection.js.map +0 -1
- package/dist-es/date-input/DateInput.css.js +0 -4
- package/dist-es/date-input/DateInput.css.js.map +0 -1
- package/dist-es/date-input/DateInputRange.js +0 -349
- package/dist-es/date-input/DateInputRange.js.map +0 -1
- package/dist-es/date-input/DateInputSingle.js +0 -232
- package/dist-es/date-input/DateInputSingle.js.map +0 -1
- package/dist-es/date-picker/DatePicker.js +0 -72
- package/dist-es/date-picker/DatePicker.js.map +0 -1
- package/dist-es/date-picker/DatePickerActions.css.js +0 -4
- package/dist-es/date-picker/DatePickerActions.css.js.map +0 -1
- package/dist-es/date-picker/DatePickerActions.js +0 -89
- package/dist-es/date-picker/DatePickerActions.js.map +0 -1
- package/dist-es/date-picker/DatePickerContext.js +0 -32
- package/dist-es/date-picker/DatePickerContext.js.map +0 -1
- package/dist-es/date-picker/DatePickerHelperText.css.js +0 -4
- package/dist-es/date-picker/DatePickerHelperText.css.js.map +0 -1
- package/dist-es/date-picker/DatePickerHelperText.js +0 -34
- package/dist-es/date-picker/DatePickerHelperText.js.map +0 -1
- package/dist-es/date-picker/DatePickerOverlay.css.js +0 -4
- package/dist-es/date-picker/DatePickerOverlay.css.js.map +0 -1
- package/dist-es/date-picker/DatePickerOverlay.js +0 -46
- package/dist-es/date-picker/DatePickerOverlay.js.map +0 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +0 -163
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +0 -1
- package/dist-es/date-picker/DatePickerPanel.css.js +0 -4
- package/dist-es/date-picker/DatePickerPanel.css.js.map +0 -1
- package/dist-es/date-picker/DatePickerRangeGridPanel.js +0 -244
- package/dist-es/date-picker/DatePickerRangeGridPanel.js.map +0 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +0 -199
- package/dist-es/date-picker/DatePickerRangeInput.js.map +0 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +0 -353
- package/dist-es/date-picker/DatePickerRangePanel.js.map +0 -1
- package/dist-es/date-picker/DatePickerSingleGridPanel.js +0 -251
- package/dist-es/date-picker/DatePickerSingleGridPanel.js.map +0 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +0 -146
- package/dist-es/date-picker/DatePickerSingleInput.js.map +0 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +0 -18
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +0 -1
- package/dist-es/date-picker/DatePickerTrigger.js +0 -30
- package/dist-es/date-picker/DatePickerTrigger.js.map +0 -1
- package/dist-es/date-picker/useDatePicker.js +0 -199
- package/dist-es/date-picker/useDatePicker.js.map +0 -1
- package/dist-es/date-picker/useFocusOut.js +0 -41
- package/dist-es/date-picker/useFocusOut.js.map +0 -1
- package/dist-es/date-picker/useKeyboard.js +0 -20
- package/dist-es/date-picker/useKeyboard.js.map +0 -1
- package/dist-es/localization-provider/LocalizationProvider.js +0 -47
- package/dist-es/localization-provider/LocalizationProvider.js.map +0 -1
- package/dist-types/calendar/Calendar.d.ts +0 -116
- package/dist-types/calendar/CalendarGrid.d.ts +0 -29
- package/dist-types/calendar/CalendarMonthHeader.d.ts +0 -18
- package/dist-types/calendar/CalendarNavigation.d.ts +0 -64
- package/dist-types/calendar/CalendarWeekHeader.d.ts +0 -6
- package/dist-types/calendar/internal/CalendarContext.d.ts +0 -7
- package/dist-types/calendar/internal/CalendarDay.d.ts +0 -32
- package/dist-types/calendar/internal/CalendarMonth.d.ts +0 -13
- package/dist-types/calendar/internal/useFocusManagement.d.ts +0 -9
- package/dist-types/calendar/internal/utils.d.ts +0 -6
- package/dist-types/calendar/useCalendar.d.ts +0 -294
- package/dist-types/calendar/useCalendarDay.d.ts +0 -56
- package/dist-types/calendar/useCalendarSelection.d.ts +0 -365
- package/dist-types/date-input/DateInputRange.d.ts +0 -136
- package/dist-types/date-input/DateInputSingle.d.ts +0 -104
- package/dist-types/date-picker/DatePicker.d.ts +0 -55
- package/dist-types/date-picker/DatePickerActions.d.ts +0 -81
- package/dist-types/date-picker/DatePickerContext.d.ts +0 -188
- package/dist-types/date-picker/DatePickerHelperText.d.ts +0 -4
- package/dist-types/date-picker/DatePickerOverlay.d.ts +0 -11
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +0 -102
- package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts +0 -16
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +0 -18
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +0 -84
- package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts +0 -64
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +0 -17
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +0 -8
- package/dist-types/date-picker/DatePickerTrigger.d.ts +0 -9
- package/dist-types/date-picker/index.d.ts +0 -13
- package/dist-types/date-picker/useDatePicker.d.ts +0 -119
- package/dist-types/date-picker/useFocusOut.d.ts +0 -9
- package/dist-types/date-picker/useKeyboard.d.ts +0 -20
- package/dist-types/localization-provider/LocalizationProvider.d.ts +0 -62
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import { useForkRef, useControlled, useFormFieldProps } from '@salt-ds/core';
|
|
2
|
-
import { useRef, useState, useEffect, useCallback } from 'react';
|
|
3
|
-
import { useLocalization } from '../localization-provider/LocalizationProvider.js';
|
|
4
|
-
import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
|
|
5
|
-
|
|
6
|
-
function useDatePicker(props, ref) {
|
|
7
|
-
const {
|
|
8
|
-
dateAdapter,
|
|
9
|
-
defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
|
|
10
|
-
} = useLocalization();
|
|
11
|
-
const {
|
|
12
|
-
readOnly = false,
|
|
13
|
-
disabled,
|
|
14
|
-
selectionVariant,
|
|
15
|
-
defaultSelectedDate,
|
|
16
|
-
isDayHighlighted,
|
|
17
|
-
isDayUnselectable,
|
|
18
|
-
selectedDate: selectedDateProp,
|
|
19
|
-
onSelectionChange,
|
|
20
|
-
onApply,
|
|
21
|
-
minDate = defaultMinDate,
|
|
22
|
-
maxDate = defaultMaxDate,
|
|
23
|
-
onCancel,
|
|
24
|
-
timezone
|
|
25
|
-
} = props;
|
|
26
|
-
const previousSelectedDate = useRef();
|
|
27
|
-
const datePickerRef = useRef(null);
|
|
28
|
-
const containerRef = useForkRef(ref, datePickerRef);
|
|
29
|
-
const {
|
|
30
|
-
state: { open },
|
|
31
|
-
helpers: { setOpen, setOnDismiss }
|
|
32
|
-
} = useDatePickerOverlay();
|
|
33
|
-
const [selectedDate, setSelectedDate] = useControlled({
|
|
34
|
-
controlled: selectedDateProp,
|
|
35
|
-
default: defaultSelectedDate,
|
|
36
|
-
name: "DatePicker",
|
|
37
|
-
state: "selectedDate"
|
|
38
|
-
});
|
|
39
|
-
const [enableApply, setEnableApply] = useState(false);
|
|
40
|
-
const [cancelled, setCancelled] = useState(false);
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
if (open) {
|
|
43
|
-
previousSelectedDate.current = selectedDate;
|
|
44
|
-
if (enableApply) {
|
|
45
|
-
setOnDismiss(cancel);
|
|
46
|
-
}
|
|
47
|
-
setCancelled(false);
|
|
48
|
-
}
|
|
49
|
-
}, [enableApply, open, setOnDismiss, setCancelled]);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (cancelled) {
|
|
52
|
-
setSelectedDate(previousSelectedDate == null ? void 0 : previousSelectedDate.current);
|
|
53
|
-
}
|
|
54
|
-
}, [cancelled, setSelectedDate]);
|
|
55
|
-
const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = useFormFieldProps();
|
|
56
|
-
const isReadOnly = readOnly || formFieldReadOnly || false;
|
|
57
|
-
const isDisabled = disabled || formFieldDisabled || false;
|
|
58
|
-
const applySingle = useCallback(
|
|
59
|
-
(event, date) => {
|
|
60
|
-
setCancelled(false);
|
|
61
|
-
setOpen(false, event.nativeEvent, "apply");
|
|
62
|
-
if (selectionVariant === "single") {
|
|
63
|
-
onApply == null ? void 0 : onApply(event, date);
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
[selectionVariant, setOpen, onApply]
|
|
67
|
-
);
|
|
68
|
-
const checkAndAddError = useCallback(
|
|
69
|
-
(date, checkFunction, errorType, details = {}) => {
|
|
70
|
-
const errorMessage = date ? checkFunction == null ? void 0 : checkFunction(date) : false;
|
|
71
|
-
if (errorMessage) {
|
|
72
|
-
details.errors = details.errors ?? [];
|
|
73
|
-
details.errors.push({
|
|
74
|
-
type: errorType,
|
|
75
|
-
message: errorMessage
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
[]
|
|
80
|
-
);
|
|
81
|
-
const selectSingle = useCallback(
|
|
82
|
-
(event, date, details) => {
|
|
83
|
-
var _a;
|
|
84
|
-
const canBeApplied = dateAdapter.isValid(date) && !((_a = details == null ? void 0 : details.errors) == null ? void 0 : _a.length);
|
|
85
|
-
setSelectedDate(date);
|
|
86
|
-
checkAndAddError(date, isDayUnselectable, "unselectable", details);
|
|
87
|
-
if (selectionVariant === "single") {
|
|
88
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
|
|
89
|
-
}
|
|
90
|
-
if (!enableApply && canBeApplied) {
|
|
91
|
-
applySingle(event, date);
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
[
|
|
95
|
-
checkAndAddError,
|
|
96
|
-
dateAdapter,
|
|
97
|
-
applySingle,
|
|
98
|
-
isDayUnselectable,
|
|
99
|
-
enableApply,
|
|
100
|
-
onSelectionChange,
|
|
101
|
-
selectionVariant
|
|
102
|
-
]
|
|
103
|
-
);
|
|
104
|
-
const applyRange = useCallback(
|
|
105
|
-
(event, date) => {
|
|
106
|
-
setCancelled(false);
|
|
107
|
-
setOpen(false, event.nativeEvent, "apply");
|
|
108
|
-
if (selectionVariant === "range") {
|
|
109
|
-
onApply == null ? void 0 : onApply(event, date);
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
[onApply, setOpen, selectionVariant]
|
|
113
|
-
);
|
|
114
|
-
const selectRange = useCallback(
|
|
115
|
-
(event, date, details) => {
|
|
116
|
-
var _a, _b, _c, _d;
|
|
117
|
-
setSelectedDate(date);
|
|
118
|
-
checkAndAddError(
|
|
119
|
-
date == null ? void 0 : date.startDate,
|
|
120
|
-
isDayUnselectable,
|
|
121
|
-
"unselectable",
|
|
122
|
-
details == null ? void 0 : details.startDate
|
|
123
|
-
);
|
|
124
|
-
checkAndAddError(
|
|
125
|
-
date == null ? void 0 : date.endDate,
|
|
126
|
-
isDayUnselectable,
|
|
127
|
-
"unselectable",
|
|
128
|
-
details == null ? void 0 : details.endDate
|
|
129
|
-
);
|
|
130
|
-
if (selectionVariant === "range") {
|
|
131
|
-
onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
|
|
132
|
-
}
|
|
133
|
-
const isAValidRange = dateAdapter.isValid(date == null ? void 0 : date.startDate) && dateAdapter.isValid(date == null ? void 0 : date.endDate);
|
|
134
|
-
const isValidSelection = !((_b = (_a = details == null ? void 0 : details.startDate) == null ? void 0 : _a.errors) == null ? void 0 : _b.length) && !((_d = (_c = details == null ? void 0 : details.endDate) == null ? void 0 : _c.errors) == null ? void 0 : _d.length);
|
|
135
|
-
const canBeApplied = isAValidRange && isValidSelection;
|
|
136
|
-
if (!enableApply && canBeApplied) {
|
|
137
|
-
applyRange(event, date);
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
[
|
|
141
|
-
checkAndAddError,
|
|
142
|
-
dateAdapter,
|
|
143
|
-
applyRange,
|
|
144
|
-
isDayUnselectable,
|
|
145
|
-
enableApply,
|
|
146
|
-
onSelectionChange,
|
|
147
|
-
selectionVariant
|
|
148
|
-
]
|
|
149
|
-
);
|
|
150
|
-
const cancel = useCallback(
|
|
151
|
-
(event) => {
|
|
152
|
-
setCancelled(true);
|
|
153
|
-
setOpen(false, event, "cancel");
|
|
154
|
-
onCancel == null ? void 0 : onCancel();
|
|
155
|
-
},
|
|
156
|
-
[setOpen, onCancel]
|
|
157
|
-
);
|
|
158
|
-
const returnValue = {
|
|
159
|
-
state: {
|
|
160
|
-
selectionVariant,
|
|
161
|
-
selectedDate,
|
|
162
|
-
cancelled,
|
|
163
|
-
enableApply,
|
|
164
|
-
disabled: isDisabled,
|
|
165
|
-
readOnly: isReadOnly,
|
|
166
|
-
containerRef,
|
|
167
|
-
minDate,
|
|
168
|
-
maxDate,
|
|
169
|
-
timezone
|
|
170
|
-
},
|
|
171
|
-
helpers: {
|
|
172
|
-
cancel,
|
|
173
|
-
isDayHighlighted,
|
|
174
|
-
isDayUnselectable,
|
|
175
|
-
setEnableApply
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
if (props.selectionVariant === "range") {
|
|
179
|
-
return {
|
|
180
|
-
...returnValue,
|
|
181
|
-
helpers: {
|
|
182
|
-
...returnValue.helpers,
|
|
183
|
-
apply: applyRange,
|
|
184
|
-
select: selectRange
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
}
|
|
188
|
-
return {
|
|
189
|
-
...returnValue,
|
|
190
|
-
helpers: {
|
|
191
|
-
...returnValue.helpers,
|
|
192
|
-
apply: applySingle,
|
|
193
|
-
select: selectSingle
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
export { useDatePicker };
|
|
199
|
-
//# sourceMappingURL=useDatePicker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n /** If `true`, the component is disabled. */\n disabled?: boolean;\n /**\n * Function to determine if a day is highlighted.\n * @param date - The date to check.\n * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n */\n isDayHighlighted?: (date: TDate) => string | false | undefined;\n /**\n * Function to determine if a day is unselectable.\n * @param date - The date to check.\n * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n */\n isDayUnselectable?: (date: TDate) => string | false | undefined;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: TDate;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: TDate;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n /**\n * Timezone, if un-defined will take the timezone from passed date (or defaultSelectedDate/selectedDate)\n * Can also be set to \"default\" to use the default timezone of the date library\n * Can also be set to \"system\" to take the timezone of the local system.\n */\n timezone?: Timezone;\n}\n\n/**\n * Props for single date selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection<TDate> | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection<TDate> | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for date range selection.\n * @template TDate - The type of the date object.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n extends UseDatePickerBaseProps<TDate> {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection<TDate> | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection<TDate> | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n * @template TDate - The type of the date object.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n TDate extends DateFrameworkType,\n SelectionVariant,\n> = SelectionVariant extends \"single\"\n ? UseDatePickerSingleProps<TDate>\n : SelectionVariant extends \"range\"\n ? UseDatePickerRangeProps<TDate>\n : never;\n\n/**\n * Custom hook for managing date picker state.\n * @template TDate - The type of the date object.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n TDate extends DateFrameworkType,\n SelectionVariant extends \"single\" | \"range\",\n>(\n props: UseDatePickerProps<TDate, SelectionVariant>,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n const {\n dateAdapter,\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<TDate>();\n const {\n readOnly = false,\n disabled,\n selectionVariant,\n defaultSelectedDate,\n isDayHighlighted,\n isDayUnselectable,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n timezone,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>();\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [enableApply, setEnableApply] = useState<boolean>(false);\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [selectionVariant, setOpen, onApply],\n );\n\n const checkAndAddError = useCallback(\n (\n date: TDate | null | undefined,\n checkFunction: ((date: TDate) => string | false | undefined) | undefined,\n errorType: string,\n details: {\n errors?: { type: string; message: string | false | undefined }[];\n } = {},\n ) => {\n const errorMessage = date ? checkFunction?.(date) : false;\n if (errorMessage) {\n details.errors = details.errors ?? [];\n details.errors.push({\n type: errorType,\n message: errorMessage,\n });\n }\n },\n [],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate> | null,\n details: DateInputSingleDetails,\n ) => {\n const canBeApplied =\n dateAdapter.isValid(date) && !details?.errors?.length;\n setSelectedDate(date);\n checkAndAddError(date, isDayUnselectable, \"unselectable\", details);\n\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && canBeApplied) {\n applySingle(event, date);\n }\n },\n [\n checkAndAddError,\n dateAdapter,\n applySingle,\n isDayUnselectable,\n enableApply,\n onSelectionChange,\n selectionVariant,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [onApply, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection<TDate> | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n checkAndAddError(\n date?.startDate,\n isDayUnselectable,\n \"unselectable\",\n details?.startDate,\n );\n checkAndAddError(\n date?.endDate,\n isDayUnselectable,\n \"unselectable\",\n details?.endDate,\n );\n\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n const isAValidRange =\n dateAdapter.isValid(date?.startDate) &&\n dateAdapter.isValid(date?.endDate);\n const isValidSelection =\n !details?.startDate?.errors?.length &&\n !details?.endDate?.errors?.length;\n const canBeApplied = isAValidRange && isValidSelection;\n if (!enableApply && canBeApplied) {\n applyRange(event, date);\n }\n },\n [\n checkAndAddError,\n dateAdapter,\n applyRange,\n isDayUnselectable,\n enableApply,\n onSelectionChange,\n selectionVariant,\n ],\n );\n\n const cancel = useCallback(\n (event?: Event) => {\n setCancelled(true);\n setOpen(false, event, \"cancel\");\n onCancel?.();\n },\n [setOpen, onCancel],\n );\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n timezone,\n },\n helpers: {\n cancel,\n isDayHighlighted,\n isDayUnselectable,\n setEnableApply,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState<TDate>;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState<TDate>;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
function getTabbableElements(parent) {
|
|
4
|
-
const focusableSelectors = [
|
|
5
|
-
"button:not([disabled])",
|
|
6
|
-
"input:not([disabled])",
|
|
7
|
-
'[tabindex]:not([tabindex="-1"])'
|
|
8
|
-
];
|
|
9
|
-
const tabbableElements = parent.querySelectorAll(
|
|
10
|
-
focusableSelectors.join(",")
|
|
11
|
-
);
|
|
12
|
-
return Array.from(tabbableElements).filter(
|
|
13
|
-
(element) => !element.hasAttribute("disabled") && element.tabIndex >= 0
|
|
14
|
-
);
|
|
15
|
-
}
|
|
16
|
-
function useFocusOut(context, props) {
|
|
17
|
-
const { onOpenChange } = context;
|
|
18
|
-
const { enabled = true } = props;
|
|
19
|
-
const reference = useMemo(() => {
|
|
20
|
-
const referenceElement = context.elements.reference;
|
|
21
|
-
if (!referenceElement) {
|
|
22
|
-
return {};
|
|
23
|
-
}
|
|
24
|
-
return {
|
|
25
|
-
onKeyDown(event) {
|
|
26
|
-
if (event.key === "Tab") {
|
|
27
|
-
const tabbableElements = getTabbableElements(referenceElement);
|
|
28
|
-
const tabbedBeforeFirstElement = event.shiftKey && document.activeElement === tabbableElements[0];
|
|
29
|
-
const tabbedAfterLastElement = document.activeElement === tabbableElements[tabbableElements.length - 1];
|
|
30
|
-
if (tabbedBeforeFirstElement || tabbedAfterLastElement) {
|
|
31
|
-
onOpenChange(false, event.nativeEvent, "focus-out");
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
}, [onOpenChange, context.elements.reference]);
|
|
37
|
-
return useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export { useFocusOut };
|
|
41
|
-
//# sourceMappingURL=useFocusOut.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusOut.js","sources":["../src/date-picker/useFocusOut.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nexport interface UseFocusOutProps {\n /**\n * Whether the hook is enabled\n * @default true\n */\n enabled?: boolean;\n}\n\nfunction getTabbableElements(parent: Element): HTMLElement[] {\n const focusableSelectors = [\n \"button:not([disabled])\",\n \"input:not([disabled])\",\n '[tabindex]:not([tabindex=\"-1\"])',\n ];\n const tabbableElements = parent.querySelectorAll<HTMLElement>(\n focusableSelectors.join(\",\"),\n );\n return Array.from(tabbableElements).filter(\n (element) => !element.hasAttribute(\"disabled\") && element.tabIndex >= 0,\n );\n}\n//\n// This hook is needed to close the overlay, when,\n// 1. the floating element is opened\n// 2. the user re-focuses into the reference element with the mouse\n// 3. the user tabs out of the reference element\n// Without this hook, the floating element can re-receive focus\nexport function useFocusOut(\n context: FloatingContext,\n props: UseFocusOutProps,\n): ElementProps {\n const { onOpenChange } = context;\n const { enabled = true } = props;\n\n const reference: ElementProps[\"reference\"] = useMemo(() => {\n const referenceElement = context.elements.reference as Element | undefined;\n\n if (!referenceElement) {\n return {};\n }\n\n return {\n onKeyDown(event: React.KeyboardEvent<Element>) {\n if (event.key === \"Tab\") {\n const tabbableElements = getTabbableElements(referenceElement);\n const tabbedBeforeFirstElement =\n event.shiftKey && document.activeElement === tabbableElements[0];\n const tabbedAfterLastElement =\n document.activeElement ===\n tabbableElements[tabbableElements.length - 1];\n if (tabbedBeforeFirstElement || tabbedAfterLastElement) {\n onOpenChange(false, event.nativeEvent, \"focus-out\");\n }\n }\n },\n };\n }, [onOpenChange, context.elements.reference]);\n\n return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":[],"mappings":";;AAWA,SAAS,oBAAoB,MAAA,EAAgC;AAC3D,EAAA,MAAM,kBAAA,GAAqB;AAAA,IACzB,wBAAA;AAAA,IACA,uBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,mBAAmB,MAAA,CAAO,gBAAA;AAAA,IAC9B,kBAAA,CAAmB,KAAK,GAAG;AAAA,GAC7B;AACA,EAAA,OAAO,KAAA,CAAM,IAAA,CAAK,gBAAgB,CAAA,CAAE,MAAA;AAAA,IAClC,CAAC,YAAY,CAAC,OAAA,CAAQ,aAAa,UAAU,CAAA,IAAK,QAAQ,QAAA,IAAY;AAAA,GACxE;AACF;AAOO,SAAS,WAAA,CACd,SACA,KAAA,EACc;AACd,EAAA,MAAM,EAAE,cAAa,GAAI,OAAA;AACzB,EAAA,MAAM,EAAE,OAAA,GAAU,IAAA,EAAK,GAAI,KAAA;AAE3B,EAAA,MAAM,SAAA,GAAuC,QAAQ,MAAM;AACzD,IAAA,MAAM,gBAAA,GAAmB,QAAQ,QAAA,CAAS,SAAA;AAE1C,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA,OAAO,EAAC;AAAA,IACV;AAEA,IAAA,OAAO;AAAA,MACL,UAAU,KAAA,EAAqC;AAC7C,QAAA,IAAI,KAAA,CAAM,QAAQ,KAAA,EAAO;AACvB,UAAA,MAAM,gBAAA,GAAmB,oBAAoB,gBAAgB,CAAA;AAC7D,UAAA,MAAM,2BACJ,KAAA,CAAM,QAAA,IAAY,QAAA,CAAS,aAAA,KAAkB,iBAAiB,CAAC,CAAA;AACjE,UAAA,MAAM,yBACJ,QAAA,CAAS,aAAA,KACT,gBAAA,CAAiB,gBAAA,CAAiB,SAAS,CAAC,CAAA;AAC9C,UAAA,IAAI,4BAA4B,sBAAA,EAAwB;AACtD,YAAA,YAAA,CAAa,KAAA,EAAO,KAAA,CAAM,WAAA,EAAa,WAAW,CAAA;AAAA,UACpD;AAAA,QACF;AAAA,MACF;AAAA,KACF;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,OAAA,CAAQ,QAAA,CAAS,SAAS,CAAC,CAAA;AAE7C,EAAA,OAAO,OAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAU,GAAI,EAAC,EAAI,CAAC,OAAA,EAAS,SAAS,CAAC,CAAA;AAC3E;;;;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
function useKeyboard(_context, props) {
|
|
4
|
-
const { enabled = true, onArrowDown } = props;
|
|
5
|
-
const reference = useMemo(
|
|
6
|
-
() => ({
|
|
7
|
-
onKeyDown(event) {
|
|
8
|
-
if (event.key === "ArrowDown") {
|
|
9
|
-
event.preventDefault();
|
|
10
|
-
onArrowDown == null ? void 0 : onArrowDown(event);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}),
|
|
14
|
-
[onArrowDown]
|
|
15
|
-
);
|
|
16
|
-
return useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export { useKeyboard };
|
|
20
|
-
//# sourceMappingURL=useKeyboard.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyboard.js","sources":["../src/date-picker/useKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { type KeyboardEvent, useMemo } from \"react\";\n\nexport interface UseKeyboardProps {\n /**\n * Whether the hook is enabled\n * @default true\n */\n enabled?: boolean;\n /**\n * Handler for when the arrow key down is pressed\n * @param event\n */\n onArrowDown?: (event: KeyboardEvent) => void;\n}\n\n/**\n * Floating UI Interactions hook, that will open DatePicker on keydown\n * @param context\n * @param props\n */\nexport function useKeyboard(\n _context: FloatingContext,\n props: UseKeyboardProps,\n): ElementProps {\n const { enabled = true, onArrowDown } = props;\n const reference = useMemo(\n () => ({\n onKeyDown(event: KeyboardEvent) {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n onArrowDown?.(event);\n }\n },\n }),\n [onArrowDown],\n );\n\n return useMemo(() => (enabled ? { reference } : {}), [enabled, reference]);\n}\n"],"names":[],"mappings":";;AAqBO,SAAS,WAAA,CACd,UACA,KAAA,EACc;AACd,EAAA,MAAM,EAAE,OAAA,GAAU,IAAA,EAAM,WAAA,EAAY,GAAI,KAAA;AACxC,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,OAAO;AAAA,MACL,UAAU,KAAA,EAAsB;AAC9B,QAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AAAA,QAChB;AAAA,MACF;AAAA,KACF,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,OAAO,OAAA,CAAQ,MAAO,OAAA,GAAU,EAAE,SAAA,EAAU,GAAI,EAAC,EAAI,CAAC,OAAA,EAAS,SAAS,CAAC,CAAA;AAC3E;;;;"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useContext, useMemo } from 'react';
|
|
3
|
-
|
|
4
|
-
const MIN_DATE = "1900-01-01T00:00:00.000";
|
|
5
|
-
const MAX_DATE = "2099-12-31T00:00:00.000";
|
|
6
|
-
const LocalizationProviderContext = (
|
|
7
|
-
// biome-ignore lint/suspicious/noExplicitAny: date frameworl
|
|
8
|
-
createContext(null)
|
|
9
|
-
);
|
|
10
|
-
if (process.env.NODE_ENV !== "production") {
|
|
11
|
-
LocalizationProviderContext.displayName = "LocalizationProviderContext";
|
|
12
|
-
}
|
|
13
|
-
const LocalizationProvider = function LocalizationProvider2(props) {
|
|
14
|
-
const { children, DateAdapter, instance, locale, minDate, maxDate } = props;
|
|
15
|
-
const dateAdapter = useMemo(() => {
|
|
16
|
-
return new DateAdapter({
|
|
17
|
-
locale,
|
|
18
|
-
instance
|
|
19
|
-
});
|
|
20
|
-
}, [DateAdapter, instance, locale]);
|
|
21
|
-
const defaultDates = useMemo(
|
|
22
|
-
() => ({
|
|
23
|
-
minDate: minDate || dateAdapter.date(MIN_DATE),
|
|
24
|
-
maxDate: maxDate || dateAdapter.date(MAX_DATE)
|
|
25
|
-
}),
|
|
26
|
-
[dateAdapter, minDate, maxDate]
|
|
27
|
-
);
|
|
28
|
-
const contextValue = useMemo(() => {
|
|
29
|
-
return {
|
|
30
|
-
dateAdapter,
|
|
31
|
-
defaultDates
|
|
32
|
-
};
|
|
33
|
-
}, [dateAdapter, defaultDates]);
|
|
34
|
-
return /* @__PURE__ */ jsx(LocalizationProviderContext.Provider, { value: contextValue, children });
|
|
35
|
-
};
|
|
36
|
-
const useLocalization = () => {
|
|
37
|
-
const localization = useContext(LocalizationProviderContext);
|
|
38
|
-
if (!localization) {
|
|
39
|
-
throw new Error(
|
|
40
|
-
"useLocalization should be called inside LocalizationProviderContext.Provider"
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
return localization;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export { LocalizationProvider, LocalizationProviderContext, useLocalization };
|
|
47
|
-
//# sourceMappingURL=LocalizationProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LocalizationProvider.js","sources":["../src/localization-provider/LocalizationProvider.tsx"],"sourcesContent":["import type {\n DateFrameworkType,\n SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nconst MIN_DATE = \"1900-01-01T00:00:00.000\";\nconst MAX_DATE = \"2099-12-31T00:00:00.000\";\n\nexport interface LocalizationProviderValue<TDate extends DateFrameworkType> {\n defaultDates: {\n minDate: TDate;\n maxDate: TDate;\n };\n dateAdapter: SaltDateAdapter<TDate>;\n}\n\n/**\n * Props for the LocalizationProvider component.\n *\n * @template TDate - The type of the date object used in the provider.\n * @template TLocale - The type of the locale, defaulting to string.\n */\nexport interface LocalizationProviderProps<\n TDate extends DateFrameworkType,\n TLocale = string,\n> {\n /**\n * The child components to be rendered within the provider.\n */\n children?: React.ReactNode;\n\n /**\n * The instance of the date library being used.\n */\n // biome-ignore lint/suspicious/noExplicitAny: date framework\n instance?: any;\n\n /**\n * The date adapter class, which provides methods for date manipulation and formatting.\n * This should be a constructor for a class implementing the SaltDateAdapter interface.\n */\n DateAdapter: new (\n // biome-ignore lint/suspicious/noExplicitAny: date framework\n ...args: any\n ) => SaltDateAdapter<TDate, TLocale>;\n\n /**\n * The locale to be used for date formatting and manipulation.\n */\n locale?: TLocale;\n\n /**\n * The minimum date allowed for all date selections.\n * Defaults to January 1, 1900.\n */\n minDate?: TDate;\n\n /**\n * The maximum date allowed for all date selections.\n * Defaults to December 31, 2099.\n */\n maxDate?: TDate;\n}\n\nexport type LocalizationProviderContext<TDate extends DateFrameworkType> = {\n [K in keyof LocalizationProviderValue<TDate>]:\n | LocalizationProviderValue<TDate>[K]\n | null;\n};\n\nexport const LocalizationProviderContext =\n // biome-ignore lint/suspicious/noExplicitAny: date frameworl\n createContext<LocalizationProviderValue<any> | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n LocalizationProviderContext.displayName = \"LocalizationProviderContext\";\n}\n\nexport const LocalizationProvider = function LocalizationProvider<\n TDate extends DateFrameworkType,\n TLocale,\n>(props: LocalizationProviderProps<TDate, TLocale>) {\n const { children, DateAdapter, instance, locale, minDate, maxDate } = props;\n\n const dateAdapter = useMemo(() => {\n return new DateAdapter({\n locale,\n instance,\n });\n }, [DateAdapter, instance, locale]);\n\n const defaultDates: LocalizationProviderValue<TDate>[\"defaultDates\"] =\n useMemo(\n () => ({\n minDate: minDate || dateAdapter.date(MIN_DATE),\n maxDate: maxDate || dateAdapter.date(MAX_DATE),\n }),\n [dateAdapter, minDate, maxDate],\n );\n\n const contextValue: LocalizationProviderValue<TDate> = useMemo(() => {\n return {\n dateAdapter,\n defaultDates,\n };\n }, [dateAdapter, defaultDates]);\n\n return (\n <LocalizationProviderContext.Provider value={contextValue}>\n {children}\n </LocalizationProviderContext.Provider>\n );\n};\n\n/**\n * Custom hook to access the localization context.\n *\n * This hook provides access to the localization settings and utilities\n * within the `LocalizationProviderContext`. It should be used within a\n * component that is a descendant of `LocalizationProviderContext.Provider`.\n *\n * @template TDate - The type of the date object used in the localization context.\n *\n * @returns The localization provider value, which includes date manipulation and formatting utilities.\n *\n * @throws Will throw an error if the hook is used outside of a `LocalizationProviderContext.Provider`.\n */\nexport const useLocalization = <\n TDate extends DateFrameworkType,\n>(): LocalizationProviderValue<TDate> => {\n const localization = useContext(LocalizationProviderContext);\n if (!localization) {\n throw new Error(\n \"useLocalization should be called inside LocalizationProviderContext.Provider\",\n );\n }\n return localization;\n};\n"],"names":["LocalizationProvider"],"mappings":";;;AAMA,MAAM,QAAA,GAAW,yBAAA;AACjB,MAAM,QAAA,GAAW,yBAAA;AAgEV,MAAM,2BAAA;AAAA;AAAA,EAEX,cAAqD,IAAI;AAAA;AAE3D,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,EAAA,2BAAA,CAA4B,WAAA,GAAc,6BAAA;AAC5C;AAEO,MAAM,oBAAA,GAAuB,SAASA,qBAAAA,CAG3C,KAAA,EAAkD;AAClD,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAa,UAAU,MAAA,EAAQ,OAAA,EAAS,SAAQ,GAAI,KAAA;AAEtE,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAO,IAAI,WAAA,CAAY;AAAA,MACrB,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,WAAA,EAAa,QAAA,EAAU,MAAM,CAAC,CAAA;AAElC,EAAA,MAAM,YAAA,GACJ,OAAA;AAAA,IACE,OAAO;AAAA,MACL,OAAA,EAAS,OAAA,IAAW,WAAA,CAAY,IAAA,CAAK,QAAQ,CAAA;AAAA,MAC7C,OAAA,EAAS,OAAA,IAAW,WAAA,CAAY,IAAA,CAAK,QAAQ;AAAA,KAC/C,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,OAAA,EAAS,OAAO;AAAA,GAChC;AAEF,EAAA,MAAM,YAAA,GAAiD,QAAQ,MAAM;AACnE,IAAA,OAAO;AAAA,MACL,WAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,YAAY,CAAC,CAAA;AAE9B,EAAA,2BACG,2BAAA,CAA4B,QAAA,EAA5B,EAAqC,KAAA,EAAO,cAC1C,QAAA,EACH,CAAA;AAEJ;AAeO,MAAM,kBAAkB,MAEU;AACvC,EAAA,MAAM,YAAA,GAAe,WAAW,2BAA2B,CAAA;AAC3D,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,YAAA;AACT;;;;"}
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import { type ResponsiveProp } from "@salt-ds/core";
|
|
2
|
-
import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
|
|
3
|
-
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
4
|
-
import { type UseCalendarMultiselectOffsetProps, type UseCalendarMultiselectRangeProps, type UseCalendarMultiselectSingleProps, type UseCalendarOffsetProps, type UseCalendarRangeProps, type UseCalendarSingleProps } from "./useCalendar";
|
|
5
|
-
/**
|
|
6
|
-
* Base props for the Calendar component.
|
|
7
|
-
*/
|
|
8
|
-
export interface CalendarBaseProps extends ComponentPropsWithoutRef<"div"> {
|
|
9
|
-
/**
|
|
10
|
-
* The content to be rendered inside the Calendar.
|
|
11
|
-
*/
|
|
12
|
-
children: ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* If `true`, hides dates that are out of the selectable range.
|
|
15
|
-
*/
|
|
16
|
-
hideOutOfRangeDates?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* Ref to attach to the focused element,enabling focus to be controlled.
|
|
19
|
-
*/
|
|
20
|
-
focusedDateRef?: React.MutableRefObject<HTMLElement | null>;
|
|
21
|
-
/**
|
|
22
|
-
* Number of visible months, maximum 12, defaults to 1
|
|
23
|
-
*/
|
|
24
|
-
numberOfVisibleMonths?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
|
|
25
|
-
/**
|
|
26
|
-
* Specifies the timezone behavior:
|
|
27
|
-
* - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.
|
|
28
|
-
* - If set to "default", the default timezone of the date library will be used.
|
|
29
|
-
* - If set to "system", the local system's timezone will be applied.
|
|
30
|
-
* - If set to "UTC", the time will be returned in UTC.
|
|
31
|
-
* - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
|
|
32
|
-
*/
|
|
33
|
-
timezone?: Timezone;
|
|
34
|
-
/**
|
|
35
|
-
* If `true`, the calendar will be multiselect.
|
|
36
|
-
*/
|
|
37
|
-
multiselect?: boolean;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Props for the Calendar component with single date selection.
|
|
41
|
-
* @template TDate - The type of the date object.
|
|
42
|
-
*/
|
|
43
|
-
export interface CalendarSingleProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarSingleProps<TDate> {
|
|
44
|
-
/**
|
|
45
|
-
* The selection variant, set to "single".
|
|
46
|
-
*/
|
|
47
|
-
selectionVariant: "single";
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* Props for the Calendar component with multi-select, date selection.
|
|
51
|
-
* @template TDate - The type of the date object.
|
|
52
|
-
*/
|
|
53
|
-
export interface CalendarMultiselectSingleProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiselectSingleProps<TDate> {
|
|
54
|
-
/**
|
|
55
|
-
* The selection variant, set to "single".
|
|
56
|
-
*/
|
|
57
|
-
selectionVariant: "single";
|
|
58
|
-
/**
|
|
59
|
-
* Multiple selection
|
|
60
|
-
*/
|
|
61
|
-
multiselect: true;
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* Props for the Calendar component with date range selection.
|
|
65
|
-
* @template TDate - The type of the date object.
|
|
66
|
-
*/
|
|
67
|
-
export interface CalendarRangeProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarRangeProps<TDate> {
|
|
68
|
-
/**
|
|
69
|
-
* The selection variant, set to "range".
|
|
70
|
-
*/
|
|
71
|
-
selectionVariant: "range";
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Props for the Calendar component with multi-select, date range selection.
|
|
75
|
-
* @template TDate - The type of the date object.
|
|
76
|
-
*/
|
|
77
|
-
export interface CalendarMultiselectRangeProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiselectRangeProps<TDate> {
|
|
78
|
-
/**
|
|
79
|
-
* The selection variant, set to "single".
|
|
80
|
-
*/
|
|
81
|
-
selectionVariant: "range";
|
|
82
|
-
/**
|
|
83
|
-
* Multiple selection
|
|
84
|
-
*/
|
|
85
|
-
multiselect: true;
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Props for the Calendar component with offset date selection.
|
|
89
|
-
* @template TDate - The type of the date object.
|
|
90
|
-
*/
|
|
91
|
-
export interface CalendarOffsetProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarOffsetProps<TDate> {
|
|
92
|
-
/**
|
|
93
|
-
* The selection variant, set to "offset".
|
|
94
|
-
*/
|
|
95
|
-
selectionVariant: "offset";
|
|
96
|
-
}
|
|
97
|
-
/**
|
|
98
|
-
* Props for the Calendar component with multi-select, offset date selection.
|
|
99
|
-
* @template TDate - The type of the date object.
|
|
100
|
-
*/
|
|
101
|
-
export interface CalendarMultiselectOffsetProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiselectOffsetProps<TDate> {
|
|
102
|
-
/**
|
|
103
|
-
* The selection variant, set to "offset".
|
|
104
|
-
*/
|
|
105
|
-
selectionVariant: "offset";
|
|
106
|
-
/**
|
|
107
|
-
* Multiple selection
|
|
108
|
-
*/
|
|
109
|
-
multiselect: true;
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* Type representing the props for the Calendar component with various selection variants.
|
|
113
|
-
* @template TDate - The type of the date object.
|
|
114
|
-
*/
|
|
115
|
-
export type CalendarProps<TDate extends DateFrameworkType> = CalendarSingleProps<TDate> | CalendarMultiselectSingleProps<TDate> | CalendarRangeProps<TDate> | CalendarMultiselectRangeProps<TDate> | CalendarOffsetProps<TDate> | CalendarMultiselectOffsetProps<TDate>;
|
|
116
|
-
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps<any> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type ResponsiveProp } from "@salt-ds/core";
|
|
2
|
-
import type { DateFrameworkType } from "@salt-ds/date-adapters";
|
|
3
|
-
import { type ComponentPropsWithoutRef } from "react";
|
|
4
|
-
import { type CalendarMonthHeaderProps } from "./CalendarMonthHeader";
|
|
5
|
-
import { type CalendarWeekHeaderProps } from "./CalendarWeekHeader";
|
|
6
|
-
import type { CalendarDayProps } from "./internal/CalendarDay";
|
|
7
|
-
/**
|
|
8
|
-
* Props for the CalendarGrid component.
|
|
9
|
-
* @template TDate - The type of the date object.
|
|
10
|
-
*/
|
|
11
|
-
export interface CalendarGridProps<TDate extends DateFrameworkType> extends ComponentPropsWithoutRef<"div"> {
|
|
12
|
-
/**
|
|
13
|
-
* Number of columns
|
|
14
|
-
*/
|
|
15
|
-
columns?: ResponsiveProp<number | string>;
|
|
16
|
-
/**
|
|
17
|
-
* Props for `CalendarWeekHeader`
|
|
18
|
-
*/
|
|
19
|
-
CalendarWeekHeaderProps?: Partial<CalendarWeekHeaderProps>;
|
|
20
|
-
/**
|
|
21
|
-
* Props for `CalendarMonthHeader`
|
|
22
|
-
*/
|
|
23
|
-
CalendarMonthHeaderProps?: Partial<CalendarMonthHeaderProps<TDate>>;
|
|
24
|
-
/**
|
|
25
|
-
* Props for `CalendarDay`
|
|
26
|
-
*/
|
|
27
|
-
CalendarDayProps?: Partial<CalendarDayProps<TDate>>;
|
|
28
|
-
}
|
|
29
|
-
export declare const CalendarGrid: import("react").ForwardRefExoticComponent<CalendarGridProps<any> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { DateFrameworkType } from "@salt-ds/date-adapters";
|
|
2
|
-
import { type ComponentPropsWithRef } from "react";
|
|
3
|
-
/**
|
|
4
|
-
* Props for the CalendarMonthHeader component.
|
|
5
|
-
* @template TDate - The type of the date object.
|
|
6
|
-
*/
|
|
7
|
-
export interface CalendarMonthHeaderProps<TDate extends DateFrameworkType> extends ComponentPropsWithRef<"div"> {
|
|
8
|
-
/**
|
|
9
|
-
* Month value
|
|
10
|
-
*/
|
|
11
|
-
month: TDate;
|
|
12
|
-
/**
|
|
13
|
-
* Format the month value
|
|
14
|
-
* @param date
|
|
15
|
-
*/
|
|
16
|
-
format?: string;
|
|
17
|
-
}
|
|
18
|
-
export declare const CalendarMonthHeader: import("react").ForwardRefExoticComponent<Omit<CalendarMonthHeaderProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
|
|
2
|
-
import type { DateFrameworkType } from "@salt-ds/date-adapters";
|
|
3
|
-
import { type ComponentPropsWithRef } from "react";
|
|
4
|
-
/**
|
|
5
|
-
* Props for the CalendarNavigation component.
|
|
6
|
-
* @template TDate - The type of the date object.
|
|
7
|
-
*/
|
|
8
|
-
export interface CalendarNavigationProps<TDate extends DateFrameworkType> extends ComponentPropsWithRef<"div"> {
|
|
9
|
-
/**
|
|
10
|
-
* Props for the month dropdown component.
|
|
11
|
-
*/
|
|
12
|
-
MonthDropdownProps?: DropdownProps<TDate>;
|
|
13
|
-
/**
|
|
14
|
-
* Props for the year dropdown component.
|
|
15
|
-
*/
|
|
16
|
-
YearDropdownProps?: DropdownProps<TDate>;
|
|
17
|
-
/**
|
|
18
|
-
* Callback fired when a month is selected.
|
|
19
|
-
* @param event - The change event.
|
|
20
|
-
*/
|
|
21
|
-
onMonthSelect?: DropdownProps<TDate>["onChange"];
|
|
22
|
-
/**
|
|
23
|
-
* Callback fired when a year is selected.
|
|
24
|
-
* @param event - The change event.
|
|
25
|
-
*/
|
|
26
|
-
onYearSelect?: DropdownProps<TDate>["onChange"];
|
|
27
|
-
/**
|
|
28
|
-
* Callback fired when navigating to the next month.
|
|
29
|
-
* @param event - The click event.
|
|
30
|
-
*/
|
|
31
|
-
onNavigateNext?: ButtonProps["onClick"];
|
|
32
|
-
/**
|
|
33
|
-
* If `true` then navigate next button is enabled
|
|
34
|
-
*/
|
|
35
|
-
disableNavigateNext?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Callback fired when navigating to the previous month.
|
|
38
|
-
* @param event - The click event.
|
|
39
|
-
*/
|
|
40
|
-
onNavigatePrevious?: ButtonProps["onClick"];
|
|
41
|
-
/**
|
|
42
|
-
* If `true` then navigate previous button is enabled
|
|
43
|
-
*/
|
|
44
|
-
disableNavigatePrevious?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* If `true`, hides the year dropdown.
|
|
47
|
-
*/
|
|
48
|
-
hideYearDropdown?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* The step value for navigation. Defaults to 1.
|
|
51
|
-
*/
|
|
52
|
-
step?: number;
|
|
53
|
-
/**
|
|
54
|
-
* Format the month dropdown values
|
|
55
|
-
* @param date
|
|
56
|
-
*/
|
|
57
|
-
formatMonth?: string;
|
|
58
|
-
/**
|
|
59
|
-
* Format the year dropdown values
|
|
60
|
-
* @param date
|
|
61
|
-
*/
|
|
62
|
-
formatYear?: string;
|
|
63
|
-
}
|
|
64
|
-
export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { type ComponentPropsWithRef } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Props for the CalendarWeekHeader component.
|
|
4
|
-
*/
|
|
5
|
-
export type CalendarWeekHeaderProps = ComponentPropsWithRef<"div"> & {};
|
|
6
|
-
export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<CalendarWeekHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { DateFrameworkType } from "@salt-ds/date-adapters";
|
|
2
|
-
import type { UseCalendarReturn } from "../useCalendar";
|
|
3
|
-
interface CalendarState<TDate extends DateFrameworkType> extends UseCalendarReturn<TDate> {
|
|
4
|
-
}
|
|
5
|
-
declare const CalendarContext: import("react").Context<CalendarState<any> | null>;
|
|
6
|
-
declare function useCalendarContext<TDate extends DateFrameworkType>(): CalendarState<TDate>;
|
|
7
|
-
export { CalendarContext, useCalendarContext };
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { type RenderPropsType, type TooltipProps } from "@salt-ds/core";
|
|
2
|
-
import { type ComponentPropsWithRef } from "react";
|
|
3
|
-
import { type DayStatus } from "../useCalendarDay";
|
|
4
|
-
export interface CalendarDayProps<TDate> extends Omit<ComponentPropsWithRef<"button">, "children"> {
|
|
5
|
-
/**
|
|
6
|
-
* Day date
|
|
7
|
-
*/
|
|
8
|
-
date: TDate;
|
|
9
|
-
/**
|
|
10
|
-
* Format of date
|
|
11
|
-
*/
|
|
12
|
-
format?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Render prop to enable customisation of day button.
|
|
15
|
-
*/
|
|
16
|
-
render?: RenderPropsType["render"];
|
|
17
|
-
/**
|
|
18
|
-
* Month being rendered
|
|
19
|
-
*/
|
|
20
|
-
month: TDate;
|
|
21
|
-
/**
|
|
22
|
-
* Additional Tooltip props
|
|
23
|
-
*/
|
|
24
|
-
TooltipProps?: Partial<TooltipProps>;
|
|
25
|
-
}
|
|
26
|
-
export interface renderCalendarDayProps<TDate> extends CalendarDayProps<TDate> {
|
|
27
|
-
/**
|
|
28
|
-
* Status of day
|
|
29
|
-
*/
|
|
30
|
-
status: DayStatus;
|
|
31
|
-
}
|
|
32
|
-
export declare const CalendarDay: import("react").ForwardRefExoticComponent<Omit<CalendarDayProps<any>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|