@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.56
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 +161 -0
- package/css/salt-lab.css +44 -7
- package/dist-cjs/calendar/Calendar.js +12 -12
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarGrid.css.js +6 -0
- package/dist-cjs/calendar/CalendarGrid.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarGrid.js +107 -0
- package/dist-cjs/calendar/CalendarGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +219 -201
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/CalendarWeekHeader.js +10 -4
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarContext.js +6 -2
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +6 -9
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +47 -54
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/useFocusManagement.js +18 -18
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-cjs/calendar/internal/utils.js +33 -48
- package/dist-cjs/calendar/internal/utils.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +46 -38
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +15 -21
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +44 -35
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +102 -107
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +39 -51
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +15 -13
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js +3 -8
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerContext.js +6 -2
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlay.js +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +21 -8
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +76 -28
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +45 -40
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +123 -84
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +17 -20
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
- 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 +60 -110
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/index.js +19 -20
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/localization-provider/LocalizationProvider.js +48 -0
- package/dist-cjs/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.css.js +6 -0
- package/dist-cjs/overlay/OverlayHeader.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.js +35 -0
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -0
- package/dist-cjs/system-status/SystemStatus.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.js +4 -0
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/calendar/Calendar.js +12 -12
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarGrid.css.js +4 -0
- package/dist-es/calendar/CalendarGrid.css.js.map +1 -0
- package/dist-es/calendar/CalendarGrid.js +105 -0
- package/dist-es/calendar/CalendarGrid.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +220 -202
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/CalendarWeekHeader.js +11 -5
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-es/calendar/internal/CalendarContext.js +6 -2
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +6 -9
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +48 -55
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/useFocusManagement.js +15 -15
- package/dist-es/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-es/calendar/internal/utils.js +32 -45
- package/dist-es/calendar/internal/utils.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +40 -32
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +11 -17
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +40 -29
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +101 -107
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +39 -51
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +15 -13
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js +3 -8
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerContext.js +6 -2
- package/dist-es/date-picker/DatePickerContext.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlay.js +1 -0
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +21 -8
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +77 -30
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +44 -39
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +124 -85
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +17 -20
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
- 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 +61 -111
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/index.js +8 -7
- package/dist-es/index.js.map +1 -1
- package/dist-es/localization-provider/LocalizationProvider.js +44 -0
- package/dist-es/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.css.js +4 -0
- package/dist-es/overlay/OverlayHeader.css.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.js +33 -0
- package/dist-es/overlay/OverlayHeader.js.map +1 -0
- package/dist-es/system-status/SystemStatus.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.js +5 -1
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +11 -6
- package/dist-types/calendar/CalendarGrid.d.ts +13 -0
- package/dist-types/calendar/CalendarNavigation.d.ts +9 -11
- package/dist-types/calendar/CalendarWeekHeader.d.ts +4 -3
- package/dist-types/calendar/index.d.ts +1 -2
- package/dist-types/calendar/internal/CalendarContext.d.ts +5 -6
- package/dist-types/calendar/internal/CalendarDay.d.ts +6 -8
- package/dist-types/calendar/internal/CalendarMonth.d.ts +5 -6
- package/dist-types/calendar/internal/useFocusManagement.d.ts +3 -4
- package/dist-types/calendar/internal/utils.d.ts +7 -11
- package/dist-types/calendar/useCalendar.d.ts +207 -55
- package/dist-types/calendar/useCalendarDay.d.ts +5 -7
- package/dist-types/calendar/useCalendarSelection.d.ts +92 -58
- package/dist-types/date-input/DateInputRange.d.ts +38 -56
- package/dist-types/date-input/DateInputSingle.d.ts +32 -49
- package/dist-types/date-input/index.d.ts +0 -1
- package/dist-types/date-picker/DatePicker.d.ts +23 -5
- package/dist-types/date-picker/DatePickerActions.d.ts +13 -12
- package/dist-types/date-picker/DatePickerContext.d.ts +42 -59
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +10 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +13 -3
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +17 -17
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +12 -3
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +11 -11
- package/dist-types/date-picker/DatePickerTrigger.d.ts +9 -0
- package/dist-types/date-picker/index.d.ts +3 -2
- package/dist-types/date-picker/useDatePicker.d.ts +52 -59
- package/dist-types/index.d.ts +2 -0
- package/dist-types/localization-provider/LocalizationProvider.d.ts +62 -0
- package/dist-types/localization-provider/index.d.ts +1 -0
- package/dist-types/overlay/OverlayHeader.d.ts +20 -0
- package/dist-types/overlay/index.d.ts +1 -0
- package/package.json +11 -3
- package/dist-cjs/calendar/CalendarDateGrid.css.js +0 -6
- package/dist-cjs/calendar/CalendarDateGrid.css.js.map +0 -1
- package/dist-cjs/calendar/CalendarDateGrid.js +0 -105
- package/dist-cjs/calendar/CalendarDateGrid.js.map +0 -1
- package/dist-cjs/calendar/formatDate.js +0 -51
- package/dist-cjs/calendar/formatDate.js.map +0 -1
- package/dist-cjs/date-input/utils.js +0 -63
- package/dist-cjs/date-input/utils.js.map +0 -1
- package/dist-es/calendar/CalendarDateGrid.css.js +0 -4
- package/dist-es/calendar/CalendarDateGrid.css.js.map +0 -1
- package/dist-es/calendar/CalendarDateGrid.js +0 -103
- package/dist-es/calendar/CalendarDateGrid.js.map +0 -1
- package/dist-es/calendar/formatDate.js +0 -48
- package/dist-es/calendar/formatDate.js.map +0 -1
- package/dist-es/date-input/utils.js +0 -57
- package/dist-es/date-input/utils.js.map +0 -1
- package/dist-types/calendar/CalendarDateGrid.d.ts +0 -10
- package/dist-types/calendar/formatDate.d.ts +0 -14
- package/dist-types/date-input/utils.d.ts +0 -43
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerRangePanel.js","sources":["../src/date-picker/DatePickerRangePanel.tsx"],"sourcesContent":["import {\n type DateValue,\n endOfMonth,\n getLocalTimeZone,\n isSameMonth,\n startOfMonth,\n today,\n} from \"@internationalized/date\";\nimport {\n FlexItem,\n FlexLayout,\n FormFieldContext,\n type FormFieldContextValue,\n FormFieldHelperText,\n StackLayout,\n makePrefixer,\n useControlled,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useState,\n} from \"react\";\nimport {\n Calendar,\n CalendarDateGrid,\n type CalendarDateGridProps,\n CalendarNavigation,\n type CalendarNavigationProps,\n type CalendarOffsetProps,\n type CalendarProps,\n type CalendarRangeProps,\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n type DateRangeSelection,\n type UseCalendarSelectionRangeProps,\n getCurrentLocale,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerRangePanel component.\n * @template T - The type of the selected date range.\n */\nexport interface DatePickerRangePanelProps<T>\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Callback fired when a date range is selected.\n * @param event - The synthetic event.\n * @param selectedDate - The selected date range or null.\n */\n onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n /**\n * Helper text to be displayed below the date picker.\n */\n helperText?: string;\n\n /**\n * The currently visible month for the start date.\n */\n startVisibleMonth?: DateValue;\n\n /**\n * The default visible month for the start date.\n */\n defaultStartVisibleMonth?: DateValue;\n\n /**\n * Callback fired when the visible month for the start date changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month for the start date.\n */\n onStartVisibleMonthChange?: (\n event: SyntheticEvent,\n visibleMonth: DateValue,\n ) => void;\n\n /**\n * The currently visible month for the end date.\n */\n endVisibleMonth?: DateValue;\n\n /**\n * The default visible month for the end date.\n */\n defaultEndVisibleMonth?: DateValue;\n\n /**\n * Callback fired when the visible month for the end date changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month for the end date.\n */\n onEndVisibleMonthChange?: (\n event: SyntheticEvent,\n visibleMonth: DateValue,\n ) => void;\n\n /**\n * Props to be passed to the start date CalendarNavigation component.\n */\n StartCalendarNavigationProps?: CalendarNavigationProps;\n\n /**\n * Props to be passed to the start date calendar component.\n */\n StartCalendarProps?: Partial<\n Omit<\n CalendarRangeProps | CalendarOffsetProps,\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectedDateChange\"\n | \"onVisibleMonthChange\"\n >\n >;\n /**\n * Props to be passed to the start date CalendarWeekHeader component.\n */\n StartCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n /**\n * Props to be passed to the start date CalendarDataGrid component.\n */\n StartCalendarDataGridProps?: CalendarDateGridProps;\n\n /**\n * Props to be passed to the end date CalendarNavigation component.\n */\n EndCalendarProps?: Partial<\n Omit<\n CalendarRangeProps,\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectedDateChange\"\n | \"onVisibleMonthChange\"\n >\n >;\n\n /**\n * Props to be passed to the end date CalendarNavigation component.\n */\n EndCalendarNavigationProps?: CalendarNavigationProps;\n /**\n * Props to be passed to the end date CalendarWeekHeader component.\n */\n EndCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n /**\n * Props to be passed to the end date CalendarDataGrid component.\n */\n EndCalendarDataGridProps?: CalendarDateGridProps;\n}\n\nfunction getFallbackVisibleMonths(\n selectedDate: DateRangeSelection | null,\n timeZone: string,\n) {\n const createConsecutiveRange = (date: DateValue) => [\n startOfMonth(date),\n startOfMonth(date).add({ months: 1 }),\n ];\n\n if (selectedDate?.startDate) {\n const { startDate, endDate } = selectedDate;\n if (endDate) {\n return isSameMonth(startDate, endDate)\n ? createConsecutiveRange(startDate)\n : [startOfMonth(startDate), startOfMonth(endDate)];\n }\n return createConsecutiveRange(startDate);\n }\n\n const currentMonth = startOfMonth(today(timeZone));\n return [currentMonth, currentMonth.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerRangePanel = forwardRef<\n HTMLDivElement,\n DatePickerRangePanelProps<DateRangeSelection>\n>(function DatePickerRangePanel(props, ref) {\n const {\n className,\n defaultStartVisibleMonth: defaultStartVisibleMonthProp,\n startVisibleMonth: startVisibleMonthProp,\n onStartVisibleMonthChange,\n defaultEndVisibleMonth: defaultEndVisibleMonthProp,\n endVisibleMonth: endVisibleMonthProp,\n onEndVisibleMonthChange,\n helperText,\n onSelect,\n StartCalendarProps: StartCalendarPropsProp,\n StartCalendarNavigationProps,\n StartCalendarWeekHeaderProps,\n StartCalendarDataGridProps,\n EndCalendarProps: EndCalendarPropsProp,\n EndCalendarNavigationProps,\n EndCalendarWeekHeaderProps,\n EndCalendarDataGridProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-range-panel\",\n css: datePickerPanelCss,\n window: targetWindow,\n });\n\n const {\n state: {\n selectedDate,\n timeZone = getLocalTimeZone(),\n minDate = startOfMonth(today(timeZone)),\n maxDate = minDate.add({ months: 1 }),\n locale = getCurrentLocale(),\n },\n helpers: { setSelectedDate },\n } = useDatePickerContext({ selectionVariant: \"range\" });\n\n const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = useState(() =>\n getFallbackVisibleMonths(selectedDate, timeZone),\n );\n\n const [startVisibleMonth, setStartVisibleMonth] = useControlled({\n controlled: startVisibleMonthProp,\n default: defaultStartVisibleMonthProp || fallbackStartVisibleMonth,\n name: \"DatePickerRangePanel\",\n state: \"startVisibleMonth\",\n });\n\n const [endVisibleMonth, setEndVisibleMonth] = useControlled({\n controlled: endVisibleMonthProp,\n default: defaultEndVisibleMonthProp || fallbackEndVisibleMonth,\n name: \"DatePickerRangePanel\",\n state: \"endVisibleMonth\",\n });\n\n const handleSelectedDateChange = useCallback(\n (event: SyntheticEvent, newDate: DateRangeSelection | null) => {\n setSelectedDate(newDate, { startDate: false, endDate: false });\n onSelect?.(event, newDate);\n },\n [onSelect, setSelectedDate],\n );\n\n const handleHoveredStartDateChange: CalendarProps[\"onHoveredDateChange\"] =\n useCallback(\n (event: SyntheticEvent, newHoveredDate: DateValue | null) => {\n setHoveredDate(newHoveredDate);\n if (newHoveredDate && StartCalendarPropsProp?.onHoveredDateChange) {\n StartCalendarPropsProp.onHoveredDateChange?.(event, newHoveredDate);\n }\n },\n [StartCalendarPropsProp?.onHoveredDateChange],\n );\n const handleHoveredEndDateChange = useCallback(\n (event: SyntheticEvent, newHoveredDate: DateValue | null) => {\n setHoveredDate(newHoveredDate);\n if (newHoveredDate && EndCalendarPropsProp?.onHoveredDateChange) {\n EndCalendarPropsProp.onHoveredDateChange(event, newHoveredDate);\n }\n },\n [EndCalendarPropsProp?.onHoveredDateChange],\n );\n\n const handleStartVisibleMonthChange = useCallback(\n (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n setStartVisibleMonth(newVisibleMonth);\n if (newVisibleMonth.compare(endVisibleMonth) >= 0) {\n setEndVisibleMonth(newVisibleMonth.add({ months: 1 }));\n }\n onStartVisibleMonthChange?.(event, newVisibleMonth);\n },\n [endVisibleMonth, onStartVisibleMonthChange],\n );\n\n const handleEndVisibleMonthChange = useCallback(\n (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n setEndVisibleMonth(newVisibleMonth);\n if (newVisibleMonth.compare(startVisibleMonth) <= 0) {\n setStartVisibleMonth(\n startOfMonth(newVisibleMonth.subtract({ months: 1 })),\n );\n }\n onEndVisibleMonthChange?.(event, newVisibleMonth);\n },\n [startVisibleMonth, onEndVisibleMonthChange],\n );\n\n function getHoveredDate(\n date?: DateValue | null,\n hoveredDate?: DateValue | null,\n ) {\n return date && hoveredDate && hoveredDate?.compare(endOfMonth(date)) > 0\n ? endOfMonth(date)\n : hoveredDate;\n }\n\n const StartCalendarProps = {\n visibleMonth: startVisibleMonth,\n hoveredDate: getHoveredDate(selectedDate?.startDate, hoveredDate),\n selectedDate: selectedDate as DateRangeSelection,\n onHoveredDateChange: handleHoveredStartDateChange,\n onVisibleMonthChange: handleStartVisibleMonthChange,\n onSelectedDateChange: handleSelectedDateChange,\n hideOutOfRangeDates: true,\n minDate,\n maxDate,\n locale,\n timeZone,\n ...StartCalendarPropsProp,\n } as Partial<UseCalendarSelectionRangeProps>;\n const EndCalendarProps = {\n visibleMonth: endVisibleMonth,\n hoveredDate,\n selectedDate: selectedDate as DateRangeSelection,\n onHoveredDateChange: handleHoveredEndDateChange,\n onVisibleMonthChange: handleEndVisibleMonthChange,\n onSelectedDateChange: handleSelectedDateChange,\n hideOutOfRangeDates: true,\n minDate,\n maxDate,\n locale,\n timeZone,\n ...EndCalendarPropsProp,\n } as Partial<UseCalendarSelectionRangeProps>;\n\n return (\n <StackLayout\n separators\n gap={0}\n className={clsx(className, withBaseName(\"container\"))}\n ref={ref}\n {...rest}\n >\n {helperText && (\n <FlexItem className={withBaseName(\"header\")}>\n <FormFieldHelperText>{helperText}</FormFieldHelperText>\n </FlexItem>\n )}\n <FlexLayout gap={0}>\n {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n <Calendar selectionVariant={\"range\"} {...StartCalendarProps}>\n <CalendarNavigation {...StartCalendarNavigationProps} />\n <CalendarWeekHeader {...StartCalendarWeekHeaderProps} />\n <CalendarDateGrid {...StartCalendarDataGridProps} />\n </Calendar>\n <Calendar selectionVariant={\"range\"} {...EndCalendarProps}>\n <CalendarNavigation {...EndCalendarNavigationProps} />\n <CalendarWeekHeader {...EndCalendarWeekHeaderProps} />\n <CalendarDateGrid {...EndCalendarDataGridProps} />\n </Calendar>\n </FormFieldContext.Provider>\n </FlexLayout>\n </StackLayout>\n );\n});\n"],"names":["date","startOfMonth","isSameMonth","today","makePrefixer","forwardRef","DatePickerRangePanel","useWindow","useComponentCssInjection","datePickerPanelCss","getLocalTimeZone","getCurrentLocale","useDatePickerContext","useState","useControlled","useCallback","hoveredDate","endOfMonth","jsxs","StackLayout","jsx","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","CalendarNavigation","CalendarWeekHeader","CalendarDateGrid"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerRangePanel.js","sources":["../src/date-picker/DatePickerRangePanel.tsx"],"sourcesContent":["import {\n FlexItem,\n FlexLayout,\n FormFieldContext,\n type FormFieldContextValue,\n FormFieldHelperText,\n StackLayout,\n makePrefixer,\n useControlled,\n} from \"@salt-ds/core\";\nimport type {\n DateFrameworkType,\n SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useState,\n} from \"react\";\nimport {\n Calendar,\n CalendarGrid,\n type CalendarGridProps,\n CalendarNavigation,\n type CalendarNavigationProps,\n type CalendarOffsetProps,\n type CalendarProps,\n type CalendarRangeProps,\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n type DateRangeSelection,\n type UseCalendarSelectionRangeProps,\n} from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerRangePanel component.\n * @template T - The type of the selected date range.\n */\nexport interface DatePickerRangePanelProps<TDate extends DateFrameworkType>\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Callback fired when a date range is selected.\n * @param event - The synthetic event.\n * @param selectedDate - The selected date range or null.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n selectedDate?: DateRangeSelection<TDate> | null,\n ) => void;\n\n /**\n * Helper text to be displayed below the date picker.\n */\n helperText?: string;\n\n /**\n * The currently visible month for the start date.\n */\n startVisibleMonth?: TDate;\n\n /**\n * The default visible month for the start date.\n */\n defaultStartVisibleMonth?: TDate;\n\n /**\n * Callback fired when the visible month for the start date changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month for the start date.\n */\n onStartVisibleMonthChange?: (\n event: SyntheticEvent,\n visibleMonth: TDate,\n ) => void;\n\n /**\n * The currently visible month for the end date.\n */\n endVisibleMonth?: TDate;\n\n /**\n * The default visible month for the end date.\n */\n defaultEndVisibleMonth?: TDate;\n\n /**\n * Callback fired when the visible month for the end date changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month for the end date.\n */\n onEndVisibleMonthChange?: (\n event: SyntheticEvent,\n visibleMonth: TDate,\n ) => void;\n\n /**\n * Props to be passed to the start date CalendarNavigation component.\n */\n StartCalendarNavigationProps?: CalendarNavigationProps<TDate>;\n\n /**\n * Props to be passed to the start date calendar component.\n */\n StartCalendarProps?: Partial<\n Omit<\n CalendarRangeProps<TDate> | CalendarOffsetProps<TDate>,\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectionChange\"\n | \"onVisibleMonthChange\"\n >\n >;\n /**\n * Props to be passed to the start date CalendarWeekHeader component.\n */\n StartCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n /**\n * Props to be passed to the start date CalendarDataGrid component.\n */\n StartCalendarDataGridProps?: CalendarGridProps<TDate>;\n\n /**\n * Props to be passed to the end date CalendarNavigation component.\n */\n EndCalendarProps?: Partial<\n Omit<\n CalendarRangeProps<TDate>,\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectionChange\"\n | \"onVisibleMonthChange\"\n >\n >;\n\n /**\n * Props to be passed to the end date CalendarNavigation component.\n */\n EndCalendarNavigationProps?: CalendarNavigationProps<TDate>;\n /**\n * Props to be passed to the end date CalendarWeekHeader component.\n */\n EndCalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n /**\n * Props to be passed to the end date CalendarDataGrid component.\n */\n EndCalendarDataGridProps?: CalendarGridProps<TDate>;\n}\n\nfunction getFallbackVisibleMonths<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n selectedDate: DateRangeSelection<TDate> | null,\n) {\n function createConsecutiveRange(date: TDate) {\n const startDate = dateAdapter.startOf(date, \"month\");\n const endDate = dateAdapter.add(startDate, { months: 1 });\n return [startDate, endDate];\n }\n\n if (selectedDate && dateAdapter.isValid(selectedDate?.startDate)) {\n const { startDate, endDate } = selectedDate;\n if (dateAdapter.isValid(endDate)) {\n return dateAdapter.isSame(startDate, endDate, \"month\")\n ? createConsecutiveRange(startDate)\n : [\n dateAdapter.startOf(startDate, \"month\"),\n dateAdapter.startOf(endDate, \"month\"),\n ];\n }\n return createConsecutiveRange(startDate);\n }\n\n const currentMonth = dateAdapter.startOf(dateAdapter.today(), \"month\");\n return [currentMonth, dateAdapter.add(currentMonth, { months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerRangePanel = forwardRef(function DatePickerRangePanel<\n TDate extends DateFrameworkType,\n>(props: DatePickerRangePanelProps<TDate>, ref: React.Ref<HTMLDivElement>) {\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n className,\n defaultStartVisibleMonth: defaultStartVisibleMonthProp,\n startVisibleMonth: startVisibleMonthProp,\n onStartVisibleMonthChange,\n defaultEndVisibleMonth: defaultEndVisibleMonthProp,\n endVisibleMonth: endVisibleMonthProp,\n onEndVisibleMonthChange,\n helperText,\n onSelectionChange,\n StartCalendarProps: StartCalendarPropsProp,\n StartCalendarNavigationProps,\n StartCalendarWeekHeaderProps,\n StartCalendarDataGridProps,\n EndCalendarProps: EndCalendarPropsProp,\n EndCalendarNavigationProps,\n EndCalendarWeekHeaderProps,\n EndCalendarDataGridProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-range-panel\",\n css: datePickerPanelCss,\n window: targetWindow,\n });\n\n const {\n state: {\n selectedDate,\n minDate = dateAdapter.startOf(dateAdapter.today(), \"month\"),\n maxDate = dateAdapter.add(minDate, { months: 1 }),\n },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"range\" });\n\n const [hoveredDate, setHoveredDate] = useState<TDate | null>(null);\n\n const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = useState(() =>\n getFallbackVisibleMonths<TDate>(dateAdapter, selectedDate),\n );\n\n const [startVisibleMonth, setStartVisibleMonth] = useControlled({\n controlled: startVisibleMonthProp,\n default: defaultStartVisibleMonthProp || fallbackStartVisibleMonth,\n name: \"DatePickerRangePanel\",\n state: \"startVisibleMonth\",\n });\n\n const [endVisibleMonth, setEndVisibleMonth] = useControlled({\n controlled: endVisibleMonthProp,\n default: defaultEndVisibleMonthProp || fallbackEndVisibleMonth,\n name: \"DatePickerRangePanel\",\n state: \"endVisibleMonth\",\n });\n\n const handleSelectionChange = useCallback(\n (event: SyntheticEvent, newDate: DateRangeSelection<TDate> | null) => {\n select(event, newDate);\n onSelectionChange?.(event, newDate);\n },\n [select, onSelectionChange],\n );\n\n const handleHoveredStartDateChange: CalendarProps<TDate>[\"onHoveredDateChange\"] =\n useCallback(\n (event: SyntheticEvent, newHoveredDate: TDate | null) => {\n setHoveredDate(newHoveredDate);\n if (newHoveredDate && StartCalendarPropsProp?.onHoveredDateChange) {\n StartCalendarPropsProp.onHoveredDateChange?.(event, newHoveredDate);\n }\n },\n [StartCalendarPropsProp?.onHoveredDateChange],\n );\n const handleHoveredEndDateChange = useCallback(\n (event: SyntheticEvent, newHoveredDate: TDate | null) => {\n setHoveredDate(newHoveredDate);\n if (newHoveredDate && EndCalendarPropsProp?.onHoveredDateChange) {\n EndCalendarPropsProp.onHoveredDateChange(event, newHoveredDate);\n }\n },\n [EndCalendarPropsProp?.onHoveredDateChange],\n );\n\n const handleStartVisibleMonthChange = useCallback(\n (event: SyntheticEvent, newVisibleMonth: TDate) => {\n setStartVisibleMonth(newVisibleMonth);\n if (dateAdapter.compare(newVisibleMonth, endVisibleMonth) >= 0) {\n setEndVisibleMonth(dateAdapter.add(newVisibleMonth, { months: 1 }));\n }\n onStartVisibleMonthChange?.(event, newVisibleMonth);\n },\n [endVisibleMonth, onStartVisibleMonthChange],\n );\n\n const handleEndVisibleMonthChange = useCallback(\n (event: SyntheticEvent, newVisibleMonth: TDate) => {\n setEndVisibleMonth(newVisibleMonth);\n if (dateAdapter.compare(newVisibleMonth, startVisibleMonth) <= 0) {\n setStartVisibleMonth(\n dateAdapter.startOf(\n dateAdapter.subtract(newVisibleMonth, { months: 1 }),\n \"month\",\n ),\n );\n }\n onEndVisibleMonthChange?.(event, newVisibleMonth);\n },\n [startVisibleMonth, onEndVisibleMonthChange],\n );\n\n function getHoveredDate(date?: TDate | null, hoveredDate?: TDate | null) {\n return date &&\n hoveredDate &&\n dateAdapter.compare(hoveredDate, dateAdapter.endOf(date, \"month\")) > 0\n ? dateAdapter.endOf(date, \"month\")\n : hoveredDate;\n }\n\n const calendarSelectedDate = {\n startDate:\n selectedDate && dateAdapter.isValid(selectedDate.startDate)\n ? selectedDate.startDate\n : null,\n endDate:\n selectedDate && dateAdapter.isValid(selectedDate.endDate)\n ? selectedDate.endDate\n : null,\n };\n\n const StartCalendarProps = {\n visibleMonth: startVisibleMonth,\n hoveredDate: getHoveredDate(selectedDate?.startDate, hoveredDate),\n selectedDate: calendarSelectedDate,\n onHoveredDateChange: handleHoveredStartDateChange,\n onVisibleMonthChange: handleStartVisibleMonthChange,\n onSelectionChange: handleSelectionChange,\n hideOutOfRangeDates: true,\n minDate,\n maxDate,\n ...StartCalendarPropsProp,\n } as Partial<UseCalendarSelectionRangeProps<TDate>>;\n const EndCalendarProps = {\n visibleMonth: endVisibleMonth,\n hoveredDate,\n selectedDate: calendarSelectedDate,\n onHoveredDateChange: handleHoveredEndDateChange,\n onVisibleMonthChange: handleEndVisibleMonthChange,\n onSelectionChange: handleSelectionChange,\n hideOutOfRangeDates: true,\n minDate,\n maxDate,\n ...EndCalendarPropsProp,\n } as Partial<UseCalendarSelectionRangeProps<TDate>>;\n\n return (\n <StackLayout\n separators\n gap={0}\n className={clsx(className, withBaseName(\"container\"))}\n ref={ref}\n {...rest}\n >\n {helperText && (\n <FlexItem className={withBaseName(\"header\")}>\n <FormFieldHelperText>{helperText}</FormFieldHelperText>\n </FlexItem>\n )}\n <FlexLayout gap={0}>\n {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n <Calendar selectionVariant={\"range\"} {...StartCalendarProps}>\n <CalendarNavigation {...StartCalendarNavigationProps} />\n <CalendarWeekHeader {...StartCalendarWeekHeaderProps} />\n <CalendarGrid {...StartCalendarDataGridProps} />\n </Calendar>\n <Calendar selectionVariant={\"range\"} {...EndCalendarProps}>\n <CalendarNavigation {...EndCalendarNavigationProps} />\n <CalendarWeekHeader {...EndCalendarWeekHeaderProps} />\n <CalendarGrid {...EndCalendarDataGridProps} />\n </Calendar>\n </FormFieldContext.Provider>\n </FlexLayout>\n </StackLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerRangePanel","useLocalization","useWindow","useComponentCssInjection","datePickerPanelCss","useDatePickerContext","useState","useControlled","useCallback","hoveredDate","jsxs","StackLayout","jsx","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","CalendarNavigation","CalendarWeekHeader","CalendarGrid"],"mappings":"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"}
|
|
@@ -2,101 +2,140 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var core = require('@salt-ds/core');
|
|
5
|
+
var dateAdapters = require('@salt-ds/date-adapters');
|
|
6
|
+
var icons = require('@salt-ds/icons');
|
|
5
7
|
var clsx = require('clsx');
|
|
6
8
|
var react = require('react');
|
|
7
9
|
var DateInputSingle = require('../date-input/DateInputSingle.js');
|
|
8
10
|
require('../date-input/DateInputRange.js');
|
|
9
|
-
require('
|
|
11
|
+
var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
|
|
10
12
|
var DatePickerContext = require('./DatePickerContext.js');
|
|
11
13
|
var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
|
|
12
14
|
|
|
13
15
|
const withBaseName = core.makePrefixer("saltDatePickerSingleInput");
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const [value, setValue] = core.useControlled({
|
|
36
|
-
controlled: valueProp,
|
|
37
|
-
default: defaultValue,
|
|
38
|
-
name: "DatePickerSingleInput",
|
|
39
|
-
state: "value"
|
|
40
|
-
});
|
|
41
|
-
const handleCalendarButton = react.useCallback(() => {
|
|
42
|
-
setOpen(!open);
|
|
43
|
-
}, [open, setOpen]);
|
|
44
|
-
const handleDateChange = react.useCallback(
|
|
45
|
-
(_event, newDate, error) => {
|
|
46
|
-
setSelectedDate(newDate, error);
|
|
47
|
-
},
|
|
48
|
-
[setSelectedDate]
|
|
49
|
-
);
|
|
50
|
-
const handleDateValueChange = (newDateValue, isFormatted) => {
|
|
51
|
-
setValue(newDateValue);
|
|
52
|
-
onDateValueChange == null ? void 0 : onDateValueChange(newDateValue, isFormatted);
|
|
53
|
-
};
|
|
54
|
-
react.useEffect(() => {
|
|
55
|
-
if (open) {
|
|
56
|
-
prevState.current = { date: selectedDate, value };
|
|
16
|
+
function defaultSingleValidation(dateAdapter, date, details, minDate, maxDate) {
|
|
17
|
+
var _a, _b, _c;
|
|
18
|
+
if (!date) {
|
|
19
|
+
details.errors = details.errors ?? [];
|
|
20
|
+
(_a = details.errors) == null ? void 0 : _a.push({
|
|
21
|
+
type: dateAdapters.DateDetailErrorEnum.UNSET,
|
|
22
|
+
message: "no date defined"
|
|
23
|
+
});
|
|
24
|
+
} else {
|
|
25
|
+
if (minDate && dateAdapter.isValid(date) && dateAdapter.compare(date, minDate) < 0) {
|
|
26
|
+
details.errors = details.errors ?? [];
|
|
27
|
+
(_b = details.errors) == null ? void 0 : _b.push({
|
|
28
|
+
type: "min-date",
|
|
29
|
+
message: "is before min date"
|
|
30
|
+
});
|
|
31
|
+
} else if (maxDate && dateAdapter.isValid(date) && dateAdapter.compare(date, maxDate) > 0) {
|
|
32
|
+
details.errors = details.errors ?? [];
|
|
33
|
+
(_c = details.errors) == null ? void 0 : _c.push({
|
|
34
|
+
type: "max-date",
|
|
35
|
+
message: "is after max date"
|
|
36
|
+
});
|
|
57
37
|
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
38
|
+
}
|
|
39
|
+
return details;
|
|
40
|
+
}
|
|
41
|
+
const DatePickerSingleInput = react.forwardRef(
|
|
42
|
+
(props, ref) => {
|
|
43
|
+
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
44
|
+
const {
|
|
45
|
+
className,
|
|
46
|
+
onFocus,
|
|
47
|
+
onBlur,
|
|
48
|
+
value: valueProp,
|
|
49
|
+
validate,
|
|
50
|
+
defaultValue,
|
|
51
|
+
onDateValueChange,
|
|
52
|
+
onKeyDown,
|
|
53
|
+
...rest
|
|
54
|
+
} = props;
|
|
55
|
+
const {
|
|
56
|
+
state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },
|
|
57
|
+
helpers: { select }
|
|
58
|
+
} = DatePickerContext.useDatePickerContext({ selectionVariant: "single" });
|
|
59
|
+
const {
|
|
60
|
+
state: { open },
|
|
61
|
+
helpers: { setOpen }
|
|
62
|
+
} = DatePickerOverlayProvider.useDatePickerOverlay();
|
|
63
|
+
const previousValue = react.useRef();
|
|
64
|
+
const [value, setValue] = core.useControlled({
|
|
65
|
+
controlled: valueProp,
|
|
66
|
+
default: defaultValue,
|
|
67
|
+
name: "DatePickerSingleInput",
|
|
68
|
+
state: "value"
|
|
69
|
+
});
|
|
70
|
+
const handleCalendarButton = react.useCallback(() => {
|
|
71
|
+
setOpen(!open);
|
|
72
|
+
}, [open, setOpen]);
|
|
73
|
+
const handleDateChange = react.useCallback(
|
|
74
|
+
(event, date, details) => {
|
|
75
|
+
const validatedDetails = validate ? validate(date, details) : defaultSingleValidation(
|
|
76
|
+
dateAdapter,
|
|
77
|
+
date,
|
|
78
|
+
details,
|
|
79
|
+
minDate,
|
|
80
|
+
maxDate
|
|
81
|
+
);
|
|
82
|
+
select(event, date, validatedDetails);
|
|
83
|
+
},
|
|
84
|
+
[select, validate]
|
|
85
|
+
);
|
|
86
|
+
const handleDateValueChange = react.useCallback(
|
|
87
|
+
(event, newDateValue) => {
|
|
88
|
+
setValue(newDateValue);
|
|
89
|
+
onDateValueChange == null ? void 0 : onDateValueChange(event, newDateValue);
|
|
90
|
+
},
|
|
91
|
+
[onDateValueChange]
|
|
92
|
+
);
|
|
93
|
+
const handleOnKeyDown = react.useCallback(
|
|
94
|
+
(event) => {
|
|
95
|
+
if (event.key === "ArrowDown") {
|
|
96
|
+
setOpen(true);
|
|
97
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
87
98
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
99
|
+
},
|
|
100
|
+
[onKeyDown]
|
|
101
|
+
);
|
|
102
|
+
react.useEffect(() => {
|
|
103
|
+
if (open) {
|
|
104
|
+
previousValue.current = value;
|
|
105
|
+
}
|
|
106
|
+
}, [open]);
|
|
107
|
+
react.useEffect(() => {
|
|
108
|
+
if (cancelled) {
|
|
109
|
+
setValue(previousValue == null ? void 0 : previousValue.current);
|
|
110
|
+
}
|
|
111
|
+
}, [cancelled]);
|
|
112
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
DateInputSingle.DateInputSingle,
|
|
114
|
+
{
|
|
115
|
+
value: value ?? "",
|
|
116
|
+
className: clsx.clsx(withBaseName(), className),
|
|
117
|
+
date: selectedDate ?? null,
|
|
118
|
+
readOnly,
|
|
119
|
+
ref,
|
|
120
|
+
onDateChange: handleDateChange,
|
|
121
|
+
onDateValueChange: handleDateValueChange,
|
|
122
|
+
endAdornment: /* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
+
core.Button,
|
|
124
|
+
{
|
|
125
|
+
appearance: "transparent",
|
|
126
|
+
sentiment: "neutral",
|
|
127
|
+
onClick: handleCalendarButton,
|
|
128
|
+
disabled,
|
|
129
|
+
"aria-label": "Open Calendar",
|
|
130
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.CalendarIcon, {})
|
|
94
131
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
132
|
+
),
|
|
133
|
+
onKeyDown: handleOnKeyDown,
|
|
134
|
+
...rest
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
);
|
|
100
139
|
|
|
101
140
|
exports.DatePickerSingleInput = DatePickerSingleInput;
|
|
102
141
|
//# sourceMappingURL=DatePickerSingleInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailErrorEnum,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { SingleDateSelection } from \"../calendar\";\nimport {\n DateInputSingle,\n type DateInputSingleDetails,\n type DateInputSingleProps,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps<TDate extends DateFrameworkType>\n extends DateInputSingleProps<TDate> {\n /**\n * Function to validate the entered date\n * @param date - The selected date\n * @param details - The details of date selection, either a valid date or error\n * @returns updated DateInputSingleDetails details\n */\n validate?: (\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => DateInputSingleDetails;\n}\n\nfunction defaultSingleValidation<TDate extends DateFrameworkType>(\n dateAdapter: SaltDateAdapter<TDate>,\n date: TDate,\n details: DateInputSingleDetails,\n minDate: TDate | undefined,\n maxDate: TDate | undefined,\n): DateInputSingleDetails {\n if (!date) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: DateDetailErrorEnum.UNSET,\n message: \"no date defined\",\n });\n } else {\n if (\n minDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, minDate) < 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"min-date\",\n message: \"is before min date\",\n });\n } else if (\n maxDate &&\n dateAdapter.isValid(date) &&\n dateAdapter.compare(date, maxDate) > 0\n ) {\n details.errors = details.errors ?? [];\n details.errors?.push({\n type: \"max-date\",\n message: \"is after max date\",\n });\n }\n }\n return details;\n}\n\nexport const DatePickerSingleInput = forwardRef<\n HTMLDivElement,\n DatePickerSingleInputProps<any>\n>(\n <TDate extends DateFrameworkType>(\n props: DatePickerSingleInputProps<TDate>,\n ref: React.Ref<HTMLDivElement>,\n ) => {\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n className,\n onFocus,\n onBlur,\n value: valueProp,\n validate,\n defaultValue,\n onDateValueChange,\n onKeyDown,\n ...rest\n } = props;\n\n const {\n state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"single\" });\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>();\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerSingleInput\",\n state: \"value\",\n });\n\n const handleCalendarButton = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection<TDate>,\n details: DateInputSingleDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultSingleValidation<TDate>(\n dateAdapter,\n date,\n details,\n minDate,\n maxDate,\n );\n select(event, date, validatedDetails);\n },\n [select, validate],\n );\n\n const handleDateValueChange = useCallback(\n (event: SyntheticEvent | null, newDateValue: string) => {\n setValue(newDateValue);\n onDateValueChange?.(event, newDateValue);\n },\n [onDateValueChange],\n );\n\n const handleOnKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"ArrowDown\") {\n setOpen(true);\n onKeyDown?.(event);\n }\n },\n [onKeyDown],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousValue.current = value;\n }\n }, [open]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setValue(previousValue?.current);\n }\n }, [cancelled]);\n\n return (\n <DateInputSingle\n value={value ?? \"\"}\n className={clsx(withBaseName(), className)}\n date={selectedDate ?? null}\n readOnly={readOnly}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n endAdornment={\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-label=\"Open Calendar\"\n >\n <CalendarIcon />\n </Button>\n }\n onKeyDown={handleOnKeyDown}\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","DateDetailErrorEnum","forwardRef","useLocalization","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputSingle","clsx","Button","CalendarIcon"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var date = require('@internationalized/date');
|
|
5
4
|
var core = require('@salt-ds/core');
|
|
6
5
|
var styles = require('@salt-ds/styles');
|
|
7
6
|
var window = require('@salt-ds/window');
|
|
@@ -10,15 +9,16 @@ var react = require('react');
|
|
|
10
9
|
var Calendar = require('../calendar/Calendar.js');
|
|
11
10
|
var CalendarNavigation = require('../calendar/CalendarNavigation.js');
|
|
12
11
|
var CalendarWeekHeader = require('../calendar/CalendarWeekHeader.js');
|
|
13
|
-
var
|
|
12
|
+
var CalendarGrid = require('../calendar/CalendarGrid.js');
|
|
13
|
+
var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
|
|
14
14
|
require('../calendar/internal/CalendarContext.js');
|
|
15
|
-
var formatDate = require('../calendar/formatDate.js');
|
|
16
15
|
require('../calendar/useCalendarSelection.js');
|
|
17
16
|
var DatePickerContext = require('./DatePickerContext.js');
|
|
18
17
|
var DatePickerPanel = require('./DatePickerPanel.css.js');
|
|
19
18
|
|
|
20
19
|
const withBaseName = core.makePrefixer("saltDatePickerPanel");
|
|
21
20
|
const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(props, ref) {
|
|
21
|
+
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
22
22
|
const {
|
|
23
23
|
CalendarProps,
|
|
24
24
|
CalendarWeekHeaderProps,
|
|
@@ -29,7 +29,7 @@ const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(p
|
|
|
29
29
|
visibleMonth: visibleMonthProp,
|
|
30
30
|
onVisibleMonthChange,
|
|
31
31
|
helperText,
|
|
32
|
-
|
|
32
|
+
onSelectionChange,
|
|
33
33
|
...rest
|
|
34
34
|
} = props;
|
|
35
35
|
const targetWindow = window.useWindow();
|
|
@@ -41,29 +41,28 @@ const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(p
|
|
|
41
41
|
const {
|
|
42
42
|
state: {
|
|
43
43
|
selectedDate,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
maxDate = minDate.add({ months: 1 }),
|
|
47
|
-
locale = formatDate.getCurrentLocale()
|
|
44
|
+
minDate = dateAdapter.startOf(dateAdapter.today(), "month"),
|
|
45
|
+
maxDate = dateAdapter.add(minDate, { months: 1 })
|
|
48
46
|
},
|
|
49
|
-
helpers: {
|
|
47
|
+
helpers: { select }
|
|
50
48
|
} = DatePickerContext.useDatePickerContext({ selectionVariant: "single" });
|
|
51
49
|
const [hoveredDate, setHoveredDate] = react.useState(null);
|
|
52
|
-
const [uncontrolledDefaultVisibleMonth] = react.useState(
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
const [uncontrolledDefaultVisibleMonth] = react.useState(() => {
|
|
51
|
+
const validDate = dateAdapter.isValid(selectedDate) ? selectedDate : dateAdapter.today();
|
|
52
|
+
return defaultVisibleMonth || dateAdapter.startOf(validDate, "month");
|
|
53
|
+
});
|
|
55
54
|
const [visibleMonth, setVisibleMonth] = core.useControlled({
|
|
56
55
|
controlled: visibleMonthProp,
|
|
57
56
|
default: uncontrolledDefaultVisibleMonth,
|
|
58
57
|
name: "DatePickerSinglePanel",
|
|
59
58
|
state: "visibleMonth"
|
|
60
59
|
});
|
|
61
|
-
const
|
|
60
|
+
const handleSelectionChange = react.useCallback(
|
|
62
61
|
(event, newDate) => {
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
select(event, newDate);
|
|
63
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newDate);
|
|
65
64
|
},
|
|
66
|
-
[
|
|
65
|
+
[select, onSelectionChange]
|
|
67
66
|
);
|
|
68
67
|
const handleHoveredDateChange = react.useCallback(
|
|
69
68
|
(event, newHoveredDate) => {
|
|
@@ -89,13 +88,11 @@ const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(p
|
|
|
89
88
|
hoveredDate,
|
|
90
89
|
onHoveredDateChange: handleHoveredDateChange,
|
|
91
90
|
onVisibleMonthChange: handleVisibleMonthChange,
|
|
92
|
-
|
|
91
|
+
onSelectionChange: handleSelectionChange,
|
|
93
92
|
hideOutOfRangeDates: true,
|
|
94
93
|
selectedDate,
|
|
95
94
|
minDate,
|
|
96
95
|
maxDate,
|
|
97
|
-
locale,
|
|
98
|
-
timeZone,
|
|
99
96
|
...CalendarProps
|
|
100
97
|
};
|
|
101
98
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -111,7 +108,7 @@ const DatePickerSinglePanel = react.forwardRef(function DatePickerSinglePanel2(p
|
|
|
111
108
|
/* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, { gap: 0, children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldContext.Provider, { value: {}, children: /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, { selectionVariant: "single", ...baseCalendarProps, children: [
|
|
112
109
|
/* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, { ...CalendarNavigationProps }),
|
|
113
110
|
/* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, { ...CalendarWeekHeaderProps }),
|
|
114
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
111
|
+
/* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { ...CalendarDataGridProps })
|
|
115
112
|
] }) }) })
|
|
116
113
|
]
|
|
117
114
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n type DateValue,\n getLocalTimeZone,\n startOfMonth,\n today,\n} from \"@internationalized/date\";\nimport {\n FlexItem,\n FlexLayout,\n FormFieldContext,\n type FormFieldContextValue,\n FormFieldHelperText,\n StackLayout,\n makePrefixer,\n useControlled,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useState,\n} from \"react\";\nimport {\n CalendarDateGrid,\n type CalendarDateGridProps,\n CalendarNavigation,\n type CalendarNavigationProps,\n type CalendarSingleProps,\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n getCurrentLocale,\n} from \"../calendar\";\nimport { Calendar, type SingleDateSelection } from \"../calendar\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerSinglePanel component.\n * @template T - The type of the selected date.\n */\nexport interface DatePickerSinglePanelProps<T>\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Callback fired when a date is selected.\n * @param event - The synthetic event.\n * @param selectedDate - The selected date or null.\n */\n onSelect?: (event: SyntheticEvent, selectedDate?: T | null) => void;\n\n /**\n * Helper text to be displayed below the date picker.\n */\n helperText?: string;\n\n /**\n * The currently visible month.\n */\n visibleMonth?: DateValue;\n\n /**\n * The default visible month.\n */\n defaultVisibleMonth?: DateValue;\n\n /**\n * Callback fired when the visible month changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month.\n */\n onVisibleMonthChange?: (\n event: SyntheticEvent,\n visibleMonth: DateValue,\n ) => void;\n\n /**\n * Props to be passed to the Calendar component.\n */\n CalendarProps?: Partial<\n Omit<\n CalendarSingleProps,\n | \"selectionVariant\"\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectedDateChange\"\n | \"onVisibleMonthChange\"\n >\n >;\n /**\n * Props to be passed to the CalendarNavigation component.\n */\n CalendarNavigationProps?: CalendarNavigationProps;\n /**\n * Props to be passed to the CalendarWeekHeader component.\n */\n CalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n /**\n * Props to be passed to the CalendarDataGrid component.\n */\n CalendarDataGridProps?: CalendarDateGridProps;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerSinglePanel = forwardRef<\n HTMLDivElement,\n DatePickerSinglePanelProps<SingleDateSelection>\n>(function DatePickerSinglePanel(props, ref) {\n const {\n CalendarProps,\n CalendarWeekHeaderProps,\n CalendarNavigationProps,\n CalendarDataGridProps,\n className,\n defaultVisibleMonth,\n visibleMonth: visibleMonthProp,\n onVisibleMonthChange,\n helperText,\n onSelect,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-single-panel\",\n css: datePickerPanelCss,\n window: targetWindow,\n });\n\n const {\n state: {\n selectedDate,\n timeZone = getLocalTimeZone(),\n minDate = startOfMonth(today(timeZone)),\n maxDate = minDate.add({ months: 1 }),\n locale = getCurrentLocale(),\n },\n helpers: { setSelectedDate },\n } = useDatePickerContext({ selectionVariant: \"single\" });\n\n const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n const [uncontrolledDefaultVisibleMonth] = useState(\n () => defaultVisibleMonth || startOfMonth(selectedDate || today(timeZone)),\n );\n const [visibleMonth, setVisibleMonth] = useControlled({\n controlled: visibleMonthProp,\n default: uncontrolledDefaultVisibleMonth,\n name: \"DatePickerSinglePanel\",\n state: \"visibleMonth\",\n });\n\n const handleSelectedDateChange = useCallback(\n (event: SyntheticEvent, newDate: SingleDateSelection | null) => {\n setSelectedDate(newDate, false);\n onSelect?.(event, newDate);\n },\n [setSelectedDate, onSelect],\n );\n\n const handleHoveredDateChange = useCallback(\n (event: SyntheticEvent, newHoveredDate: SingleDateSelection | null) => {\n setHoveredDate(newHoveredDate);\n if (newHoveredDate && CalendarProps?.onHoveredDateChange) {\n CalendarProps.onHoveredDateChange(event, newHoveredDate);\n }\n },\n [CalendarProps?.onHoveredDateChange],\n );\n\n const handleVisibleMonthChange = useCallback(\n (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n setVisibleMonth(newVisibleMonth);\n if (onVisibleMonthChange) {\n onVisibleMonthChange(event, newVisibleMonth);\n }\n },\n [onVisibleMonthChange],\n );\n\n const baseCalendarProps: Partial<CalendarSingleProps> = {\n selectionVariant: \"single\",\n visibleMonth,\n hoveredDate,\n onHoveredDateChange: handleHoveredDateChange,\n onVisibleMonthChange: handleVisibleMonthChange,\n onSelectedDateChange: handleSelectedDateChange,\n hideOutOfRangeDates: true,\n selectedDate,\n minDate,\n maxDate,\n locale,\n timeZone,\n ...CalendarProps,\n };\n\n return (\n <StackLayout\n separators\n gap={0}\n className={clsx(className, withBaseName(\"container\"))}\n ref={ref}\n {...rest}\n >\n {helperText && (\n <FlexItem className={withBaseName(\"header\")}>\n <FormFieldHelperText>{helperText}</FormFieldHelperText>\n </FlexItem>\n )}\n <FlexLayout gap={0}>\n {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n <Calendar selectionVariant=\"single\" {...baseCalendarProps}>\n <CalendarNavigation {...CalendarNavigationProps} />\n <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n <CalendarDateGrid {...CalendarDataGridProps} />\n </Calendar>\n </FormFieldContext.Provider>\n </FlexLayout>\n </StackLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerSinglePanel","useWindow","useComponentCssInjection","datePickerPanelCss","getLocalTimeZone","startOfMonth","today","getCurrentLocale","useDatePickerContext","useState","useControlled","useCallback","jsxs","StackLayout","jsx","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","CalendarNavigation","CalendarWeekHeader","CalendarDateGrid"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n FlexItem,\n FlexLayout,\n FormFieldContext,\n type FormFieldContextValue,\n FormFieldHelperText,\n StackLayout,\n makePrefixer,\n useControlled,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useCallback,\n useState,\n} from \"react\";\nimport {\n CalendarGrid,\n type CalendarGridProps,\n CalendarNavigation,\n type CalendarNavigationProps,\n type CalendarSingleProps,\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n} from \"../calendar\";\nimport { Calendar, type SingleDateSelection } from \"../calendar\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\n\n/**\n * Props for the DatePickerSinglePanel component.\n * @template T - The type of the selected date.\n */\nexport interface DatePickerSinglePanelProps<TDate extends DateFrameworkType>\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Callback fired when a date is selected.\n * @param event - The synthetic event.\n * @param selectedDate - The selected date or null.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n selectedDate?: TDate | null,\n ) => void;\n\n /**\n * Helper text to be displayed below the date picker.\n */\n helperText?: string;\n\n /**\n * The currently visible month.\n */\n visibleMonth?: TDate;\n\n /**\n * The default visible month.\n */\n defaultVisibleMonth?: TDate;\n\n /**\n * Callback fired when the visible month changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month.\n */\n onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: TDate) => void;\n\n /**\n * Props to be passed to the Calendar component.\n */\n CalendarProps?: Partial<\n Omit<\n CalendarSingleProps<TDate>,\n | \"selectionVariant\"\n | \"selectedDate\"\n | \"defaultSelectedDate\"\n | \"onSelectionChange\"\n | \"onVisibleMonthChange\"\n >\n >;\n /**\n * Props to be passed to the CalendarNavigation component.\n */\n CalendarNavigationProps?: CalendarNavigationProps<TDate>;\n /**\n * Props to be passed to the CalendarWeekHeader component.\n */\n CalendarWeekHeaderProps?: CalendarWeekHeaderProps;\n /**\n * Props to be passed to the CalendarDataGrid component.\n */\n CalendarDataGridProps?: CalendarGridProps<TDate>;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel<\n TDate extends DateFrameworkType,\n>(\n props: DatePickerSinglePanelProps<SingleDateSelection<TDate>>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const { dateAdapter } = useLocalization<TDate>();\n\n const {\n CalendarProps,\n CalendarWeekHeaderProps,\n CalendarNavigationProps,\n CalendarDataGridProps,\n className,\n defaultVisibleMonth,\n visibleMonth: visibleMonthProp,\n onVisibleMonthChange,\n helperText,\n onSelectionChange,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-date-picker-single-panel\",\n css: datePickerPanelCss,\n window: targetWindow,\n });\n\n const {\n state: {\n selectedDate,\n minDate = dateAdapter.startOf(dateAdapter.today(), \"month\"),\n maxDate = dateAdapter.add(minDate, { months: 1 }),\n },\n helpers: { select },\n } = useDatePickerContext<TDate>({ selectionVariant: \"single\" });\n\n const [hoveredDate, setHoveredDate] = useState<TDate | null>(null);\n\n const [uncontrolledDefaultVisibleMonth] = useState(() => {\n const validDate = dateAdapter.isValid(selectedDate)\n ? selectedDate\n : dateAdapter.today();\n return defaultVisibleMonth || dateAdapter.startOf(validDate, \"month\");\n });\n const [visibleMonth, setVisibleMonth] = useControlled({\n controlled: visibleMonthProp,\n default: uncontrolledDefaultVisibleMonth,\n name: \"DatePickerSinglePanel\",\n state: \"visibleMonth\",\n });\n\n const handleSelectionChange = useCallback(\n (event: SyntheticEvent, newDate: SingleDateSelection<TDate> | null) => {\n select(event, newDate);\n onSelectionChange?.(event, newDate);\n },\n [select, onSelectionChange],\n );\n\n const handleHoveredDateChange = useCallback(\n (\n event: SyntheticEvent,\n newHoveredDate: SingleDateSelection<TDate> | null,\n ) => {\n setHoveredDate(newHoveredDate);\n if (newHoveredDate && CalendarProps?.onHoveredDateChange) {\n CalendarProps.onHoveredDateChange(event, newHoveredDate);\n }\n },\n [CalendarProps?.onHoveredDateChange],\n );\n\n const handleVisibleMonthChange = useCallback(\n (event: SyntheticEvent, newVisibleMonth: TDate) => {\n setVisibleMonth(newVisibleMonth);\n if (onVisibleMonthChange) {\n onVisibleMonthChange(event, newVisibleMonth);\n }\n },\n [onVisibleMonthChange],\n );\n\n const baseCalendarProps: Partial<CalendarSingleProps<TDate>> = {\n selectionVariant: \"single\",\n visibleMonth,\n hoveredDate,\n onHoveredDateChange: handleHoveredDateChange,\n onVisibleMonthChange: handleVisibleMonthChange,\n onSelectionChange: handleSelectionChange,\n hideOutOfRangeDates: true,\n selectedDate,\n minDate,\n maxDate,\n ...CalendarProps,\n };\n\n return (\n <StackLayout\n separators\n gap={0}\n className={clsx(className, withBaseName(\"container\"))}\n ref={ref}\n {...rest}\n >\n {helperText && (\n <FlexItem className={withBaseName(\"header\")}>\n <FormFieldHelperText>{helperText}</FormFieldHelperText>\n </FlexItem>\n )}\n <FlexLayout gap={0}>\n {/* Avoid Dropdowns in Calendar inheriting the FormField's state */}\n <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n <Calendar selectionVariant=\"single\" {...baseCalendarProps}>\n <CalendarNavigation {...CalendarNavigationProps} />\n <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n <CalendarGrid {...CalendarDataGridProps} />\n </Calendar>\n </FormFieldContext.Provider>\n </FlexLayout>\n </StackLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","DatePickerSinglePanel","useLocalization","useWindow","useComponentCssInjection","datePickerPanelCss","useDatePickerContext","useState","useControlled","useCallback","jsxs","StackLayout","jsx","FlexItem","FormFieldHelperText","FlexLayout","FormFieldContext","Calendar","CalendarNavigation","CalendarWeekHeader","CalendarGrid"],"mappings":";;;;;;;;;;;;;;;;;;AAoGA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,MAAM,qBAAwB,GAAAC,gBAAA,CAAW,SAASC,sBAAAA,CAGvD,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,oCAAuB,EAAA;AAE/C,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,uBAAA;AAAA,IACA,uBAAA;AAAA,IACA,qBAAA;AAAA,IACA,SAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,oBAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,+BAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA;AAAA,MACL,YAAA;AAAA,MACA,UAAU,WAAY,CAAA,OAAA,CAAQ,WAAY,CAAA,KAAA,IAAS,OAAO,CAAA;AAAA,MAC1D,UAAU,WAAY,CAAA,GAAA,CAAI,SAAS,EAAE,MAAA,EAAQ,GAAG;AAAA,KAClD;AAAA,IACA,OAAA,EAAS,EAAE,MAAO;AAAA,GAChB,GAAAC,sCAAA,CAA4B,EAAE,gBAAA,EAAkB,UAAU,CAAA;AAE9D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAuB,IAAI,CAAA;AAEjE,EAAA,MAAM,CAAC,+BAA+B,CAAI,GAAAA,cAAA,CAAS,MAAM;AACvD,IAAA,MAAM,YAAY,WAAY,CAAA,OAAA,CAAQ,YAAY,CAC9C,GAAA,YAAA,GACA,YAAY,KAAM,EAAA;AACtB,IAAA,OAAO,mBAAuB,IAAA,WAAA,CAAY,OAAQ,CAAA,SAAA,EAAW,OAAO,CAAA;AAAA,GACrE,CAAA;AACD,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACpD,UAAY,EAAA,gBAAA;AAAA,IACZ,OAAS,EAAA,+BAAA;AAAA,IACT,IAAM,EAAA,uBAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAAC,iBAAA;AAAA,IAC5B,CAAC,OAAuB,OAA+C,KAAA;AACrE,MAAA,MAAA,CAAO,OAAO,OAAO,CAAA;AACrB,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,OAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,QAAQ,iBAAiB;AAAA,GAC5B;AAEA,EAAA,MAAM,uBAA0B,GAAAA,iBAAA;AAAA,IAC9B,CACE,OACA,cACG,KAAA;AACH,MAAA,cAAA,CAAe,cAAc,CAAA;AAC7B,MAAI,IAAA,cAAA,KAAkB,+CAAe,mBAAqB,CAAA,EAAA;AACxD,QAAc,aAAA,CAAA,mBAAA,CAAoB,OAAO,cAAc,CAAA;AAAA;AACzD,KACF;AAAA,IACA,CAAC,+CAAe,mBAAmB;AAAA,GACrC;AAEA,EAAA,MAAM,wBAA2B,GAAAA,iBAAA;AAAA,IAC/B,CAAC,OAAuB,eAA2B,KAAA;AACjD,MAAA,eAAA,CAAgB,eAAe,CAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAO,eAAe,CAAA;AAAA;AAC7C,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,iBAAyD,GAAA;AAAA,IAC7D,gBAAkB,EAAA,QAAA;AAAA,IAClB,YAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAqB,EAAA,uBAAA;AAAA,IACrB,oBAAsB,EAAA,wBAAA;AAAA,IACtB,iBAAmB,EAAA,qBAAA;AAAA,IACnB,mBAAqB,EAAA,IAAA;AAAA,IACrB,YAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EACE,uBAAAC,eAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,UAAU,EAAA,IAAA;AAAA,MACV,GAAK,EAAA,CAAA;AAAA,MACL,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,WAAW,CAAC,CAAA;AAAA,MACpD,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QACC,UAAA,oBAAAC,cAAA,CAACC,iBAAS,SAAW,EAAA,YAAA,CAAa,QAAQ,CACxC,EAAA,QAAA,kBAAAD,cAAA,CAACE,wBAAqB,EAAA,EAAA,QAAA,EAAA,UAAA,EAAW,CACnC,EAAA,CAAA;AAAA,uCAEDC,eAAW,EAAA,EAAA,GAAA,EAAK,CAEf,EAAA,QAAA,kBAAAH,cAAA,CAACI,sBAAiB,QAAjB,EAAA,EAA0B,KAAO,EAAA,IAChC,QAAC,kBAAAN,eAAA,CAAAO,iBAAA,EAAA,EAAS,gBAAiB,EAAA,QAAA,EAAU,GAAG,iBACtC,EAAA,QAAA,EAAA;AAAA,0BAACL,cAAA,CAAAM,qCAAA,EAAA,EAAoB,GAAG,uBAAyB,EAAA,CAAA;AAAA,0BACjDN,cAAA,CAACO,qCAAoB,EAAA,EAAA,GAAG,uBAAyB,EAAA,CAAA;AAAA,0BACjDP,cAAA,CAACQ,yBAAc,EAAA,EAAA,GAAG,qBAAuB,EAAA;AAAA,SAAA,EAC3C,GACF,CACF,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var clsx = require('clsx');
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
|
|
8
|
+
|
|
9
|
+
const withBaseName = core.makePrefixer("saltDatePickerTrigger");
|
|
10
|
+
const DatePickerTrigger = react.forwardRef((props, ref) => {
|
|
11
|
+
const { children, className, ...rest } = props;
|
|
12
|
+
const {
|
|
13
|
+
state: { floatingUIResult },
|
|
14
|
+
helpers: { getReferenceProps }
|
|
15
|
+
} = DatePickerOverlayProvider.useDatePickerOverlay();
|
|
16
|
+
const triggerRef = core.useForkRef(
|
|
17
|
+
ref,
|
|
18
|
+
floatingUIResult == null ? void 0 : floatingUIResult.reference
|
|
19
|
+
);
|
|
20
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: clsx.clsx(withBaseName(), className),
|
|
24
|
+
ref: triggerRef,
|
|
25
|
+
...getReferenceProps(rest),
|
|
26
|
+
children
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
exports.DatePickerTrigger = DatePickerTrigger;
|
|
32
|
+
//# sourceMappingURL=DatePickerTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePickerTrigger.js","sources":["../src/date-picker/DatePickerTrigger.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerTrigger\");\n\n/**\n * Props for the DatePickerTrigger component.\n */\nexport interface DatePickerTriggerProps {\n className?: string;\n children?: ReactNode;\n}\n\nexport const DatePickerTrigger = forwardRef<\n HTMLDivElement,\n DatePickerTriggerProps\n>((props: DatePickerTriggerProps, ref: React.Ref<HTMLDivElement>) => {\n const { children, className, ...rest } = props;\n\n const {\n state: { floatingUIResult },\n helpers: { getReferenceProps },\n } = useDatePickerOverlay();\n\n const triggerRef = useForkRef<HTMLDivElement>(\n ref,\n floatingUIResult?.reference,\n );\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={triggerRef}\n {...getReferenceProps(rest)}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","useDatePickerOverlay","useForkRef","jsx","clsx"],"mappings":";;;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAUlD,MAAM,iBAAoB,GAAAC,gBAAA,CAG/B,CAAC,KAAA,EAA+B,GAAmC,KAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzC,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,gBAAiB,EAAA;AAAA,IAC1B,OAAA,EAAS,EAAE,iBAAkB;AAAA,MAC3BC,8CAAqB,EAAA;AAEzB,EAAA,MAAM,UAAa,GAAAC,eAAA;AAAA,IACjB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,UAAA;AAAA,MACJ,GAAG,kBAAkB,IAAI,CAAA;AAAA,MAEzB;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|