@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.57
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 +167 -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 +77 -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 +78 -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":["DatePickerRangePanel","datePickerPanelCss","hoveredDate"],"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":["DatePickerRangePanel","datePickerPanelCss","hoveredDate"],"mappings":"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"}
|
|
@@ -1,100 +1,139 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer,
|
|
2
|
+
import { makePrefixer, useControlled, Button } from '@salt-ds/core';
|
|
3
|
+
import { DateDetailErrorEnum } from '@salt-ds/date-adapters';
|
|
4
|
+
import { CalendarIcon } from '@salt-ds/icons';
|
|
3
5
|
import { clsx } from 'clsx';
|
|
4
6
|
import { forwardRef, useRef, useCallback, useEffect } from 'react';
|
|
5
7
|
import { DateInputSingle } from '../date-input/DateInputSingle.js';
|
|
6
8
|
import '../date-input/DateInputRange.js';
|
|
7
|
-
import '
|
|
9
|
+
import { useLocalization } from '../localization-provider/LocalizationProvider.js';
|
|
8
10
|
import { useDatePickerContext } from './DatePickerContext.js';
|
|
9
11
|
import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
|
|
10
12
|
|
|
11
13
|
const withBaseName = makePrefixer("saltDatePickerSingleInput");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const [value, setValue] = useControlled({
|
|
34
|
-
controlled: valueProp,
|
|
35
|
-
default: defaultValue,
|
|
36
|
-
name: "DatePickerSingleInput",
|
|
37
|
-
state: "value"
|
|
38
|
-
});
|
|
39
|
-
const handleCalendarButton = useCallback(() => {
|
|
40
|
-
setOpen(!open);
|
|
41
|
-
}, [open, setOpen]);
|
|
42
|
-
const handleDateChange = useCallback(
|
|
43
|
-
(_event, newDate, error) => {
|
|
44
|
-
setSelectedDate(newDate, error);
|
|
45
|
-
},
|
|
46
|
-
[setSelectedDate]
|
|
47
|
-
);
|
|
48
|
-
const handleDateValueChange = (newDateValue, isFormatted) => {
|
|
49
|
-
setValue(newDateValue);
|
|
50
|
-
onDateValueChange == null ? void 0 : onDateValueChange(newDateValue, isFormatted);
|
|
51
|
-
};
|
|
52
|
-
useEffect(() => {
|
|
53
|
-
if (open) {
|
|
54
|
-
prevState.current = { date: selectedDate, value };
|
|
14
|
+
function defaultSingleValidation(dateAdapter, date, details, minDate, maxDate) {
|
|
15
|
+
var _a, _b, _c;
|
|
16
|
+
if (!date) {
|
|
17
|
+
details.errors = details.errors ?? [];
|
|
18
|
+
(_a = details.errors) == null ? void 0 : _a.push({
|
|
19
|
+
type: DateDetailErrorEnum.UNSET,
|
|
20
|
+
message: "no date defined"
|
|
21
|
+
});
|
|
22
|
+
} else {
|
|
23
|
+
if (minDate && dateAdapter.isValid(date) && dateAdapter.compare(date, minDate) < 0) {
|
|
24
|
+
details.errors = details.errors ?? [];
|
|
25
|
+
(_b = details.errors) == null ? void 0 : _b.push({
|
|
26
|
+
type: "min-date",
|
|
27
|
+
message: "is before min date"
|
|
28
|
+
});
|
|
29
|
+
} else if (maxDate && dateAdapter.isValid(date) && dateAdapter.compare(date, maxDate) > 0) {
|
|
30
|
+
details.errors = details.errors ?? [];
|
|
31
|
+
(_c = details.errors) == null ? void 0 : _c.push({
|
|
32
|
+
type: "max-date",
|
|
33
|
+
message: "is after max date"
|
|
34
|
+
});
|
|
55
35
|
}
|
|
56
|
-
}
|
|
57
|
-
|
|
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
|
-
|
|
36
|
+
}
|
|
37
|
+
return details;
|
|
38
|
+
}
|
|
39
|
+
const DatePickerSingleInput = forwardRef(
|
|
40
|
+
(props, ref) => {
|
|
41
|
+
const { dateAdapter } = useLocalization();
|
|
42
|
+
const {
|
|
43
|
+
className,
|
|
44
|
+
onFocus,
|
|
45
|
+
onBlur,
|
|
46
|
+
value: valueProp,
|
|
47
|
+
validate,
|
|
48
|
+
defaultValue,
|
|
49
|
+
onDateValueChange,
|
|
50
|
+
onKeyDown,
|
|
51
|
+
...rest
|
|
52
|
+
} = props;
|
|
53
|
+
const {
|
|
54
|
+
state: { selectedDate, disabled, readOnly, cancelled, minDate, maxDate },
|
|
55
|
+
helpers: { select }
|
|
56
|
+
} = useDatePickerContext({ selectionVariant: "single" });
|
|
57
|
+
const {
|
|
58
|
+
state: { open },
|
|
59
|
+
helpers: { setOpen }
|
|
60
|
+
} = useDatePickerOverlay();
|
|
61
|
+
const previousValue = useRef();
|
|
62
|
+
const [value, setValue] = useControlled({
|
|
63
|
+
controlled: valueProp,
|
|
64
|
+
default: defaultValue,
|
|
65
|
+
name: "DatePickerSingleInput",
|
|
66
|
+
state: "value"
|
|
67
|
+
});
|
|
68
|
+
const handleCalendarButton = useCallback(() => {
|
|
69
|
+
setOpen(!open);
|
|
70
|
+
}, [open, setOpen]);
|
|
71
|
+
const handleDateChange = useCallback(
|
|
72
|
+
(event, date, details) => {
|
|
73
|
+
const validatedDetails = validate ? validate(date, details) : defaultSingleValidation(
|
|
74
|
+
dateAdapter,
|
|
75
|
+
date,
|
|
76
|
+
details,
|
|
77
|
+
minDate,
|
|
78
|
+
maxDate
|
|
79
|
+
);
|
|
80
|
+
select(event, date, validatedDetails);
|
|
81
|
+
},
|
|
82
|
+
[select, validate]
|
|
83
|
+
);
|
|
84
|
+
const handleDateValueChange = useCallback(
|
|
85
|
+
(event, newDateValue) => {
|
|
86
|
+
setValue(newDateValue);
|
|
87
|
+
onDateValueChange == null ? void 0 : onDateValueChange(event, newDateValue);
|
|
88
|
+
},
|
|
89
|
+
[onDateValueChange]
|
|
90
|
+
);
|
|
91
|
+
const handleOnKeyDown = useCallback(
|
|
92
|
+
(event) => {
|
|
93
|
+
if (event.key === "ArrowDown") {
|
|
94
|
+
setOpen(true);
|
|
95
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
85
96
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
97
|
+
},
|
|
98
|
+
[onKeyDown]
|
|
99
|
+
);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
if (open) {
|
|
102
|
+
previousValue.current = value;
|
|
103
|
+
}
|
|
104
|
+
}, [open]);
|
|
105
|
+
useEffect(() => {
|
|
106
|
+
if (cancelled) {
|
|
107
|
+
setValue(previousValue == null ? void 0 : previousValue.current);
|
|
108
|
+
}
|
|
109
|
+
}, [cancelled]);
|
|
110
|
+
return /* @__PURE__ */ jsx(
|
|
111
|
+
DateInputSingle,
|
|
112
|
+
{
|
|
113
|
+
value: value ?? "",
|
|
114
|
+
className: clsx(withBaseName(), className),
|
|
115
|
+
date: selectedDate ?? null,
|
|
116
|
+
readOnly,
|
|
117
|
+
ref,
|
|
118
|
+
onDateChange: handleDateChange,
|
|
119
|
+
onDateValueChange: handleDateValueChange,
|
|
120
|
+
endAdornment: /* @__PURE__ */ jsx(
|
|
121
|
+
Button,
|
|
122
|
+
{
|
|
123
|
+
appearance: "transparent",
|
|
124
|
+
sentiment: "neutral",
|
|
125
|
+
onClick: handleCalendarButton,
|
|
126
|
+
disabled,
|
|
127
|
+
"aria-label": "Open Calendar",
|
|
128
|
+
children: /* @__PURE__ */ jsx(CalendarIcon, {})
|
|
92
129
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
130
|
+
),
|
|
131
|
+
onKeyDown: handleOnKeyDown,
|
|
132
|
+
...rest
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
);
|
|
98
137
|
|
|
99
138
|
export { DatePickerSingleInput };
|
|
100
139
|
//# 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":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { getLocalTimeZone, startOfMonth, today } from '@internationalized/date';
|
|
3
2
|
import { makePrefixer, useControlled, StackLayout, FlexItem, FormFieldHelperText, FlexLayout, FormFieldContext } from '@salt-ds/core';
|
|
4
3
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
4
|
import { useWindow } from '@salt-ds/window';
|
|
@@ -8,15 +7,16 @@ import { forwardRef, useState, useCallback } from 'react';
|
|
|
8
7
|
import { Calendar } from '../calendar/Calendar.js';
|
|
9
8
|
import { CalendarNavigation } from '../calendar/CalendarNavigation.js';
|
|
10
9
|
import { CalendarWeekHeader } from '../calendar/CalendarWeekHeader.js';
|
|
11
|
-
import {
|
|
10
|
+
import { CalendarGrid } from '../calendar/CalendarGrid.js';
|
|
11
|
+
import { useLocalization } from '../localization-provider/LocalizationProvider.js';
|
|
12
12
|
import '../calendar/internal/CalendarContext.js';
|
|
13
|
-
import { getCurrentLocale } from '../calendar/formatDate.js';
|
|
14
13
|
import '../calendar/useCalendarSelection.js';
|
|
15
14
|
import { useDatePickerContext } from './DatePickerContext.js';
|
|
16
15
|
import css_248z from './DatePickerPanel.css.js';
|
|
17
16
|
|
|
18
17
|
const withBaseName = makePrefixer("saltDatePickerPanel");
|
|
19
18
|
const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props, ref) {
|
|
19
|
+
const { dateAdapter } = useLocalization();
|
|
20
20
|
const {
|
|
21
21
|
CalendarProps,
|
|
22
22
|
CalendarWeekHeaderProps,
|
|
@@ -27,7 +27,7 @@ const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props,
|
|
|
27
27
|
visibleMonth: visibleMonthProp,
|
|
28
28
|
onVisibleMonthChange,
|
|
29
29
|
helperText,
|
|
30
|
-
|
|
30
|
+
onSelectionChange,
|
|
31
31
|
...rest
|
|
32
32
|
} = props;
|
|
33
33
|
const targetWindow = useWindow();
|
|
@@ -39,29 +39,28 @@ const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props,
|
|
|
39
39
|
const {
|
|
40
40
|
state: {
|
|
41
41
|
selectedDate,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
maxDate = minDate.add({ months: 1 }),
|
|
45
|
-
locale = getCurrentLocale()
|
|
42
|
+
minDate = dateAdapter.startOf(dateAdapter.today(), "month"),
|
|
43
|
+
maxDate = dateAdapter.add(minDate, { months: 1 })
|
|
46
44
|
},
|
|
47
|
-
helpers: {
|
|
45
|
+
helpers: { select }
|
|
48
46
|
} = useDatePickerContext({ selectionVariant: "single" });
|
|
49
47
|
const [hoveredDate, setHoveredDate] = useState(null);
|
|
50
|
-
const [uncontrolledDefaultVisibleMonth] = useState(
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
const [uncontrolledDefaultVisibleMonth] = useState(() => {
|
|
49
|
+
const validDate = dateAdapter.isValid(selectedDate) ? selectedDate : dateAdapter.today();
|
|
50
|
+
return defaultVisibleMonth || dateAdapter.startOf(validDate, "month");
|
|
51
|
+
});
|
|
53
52
|
const [visibleMonth, setVisibleMonth] = useControlled({
|
|
54
53
|
controlled: visibleMonthProp,
|
|
55
54
|
default: uncontrolledDefaultVisibleMonth,
|
|
56
55
|
name: "DatePickerSinglePanel",
|
|
57
56
|
state: "visibleMonth"
|
|
58
57
|
});
|
|
59
|
-
const
|
|
58
|
+
const handleSelectionChange = useCallback(
|
|
60
59
|
(event, newDate) => {
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
select(event, newDate);
|
|
61
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newDate);
|
|
63
62
|
},
|
|
64
|
-
[
|
|
63
|
+
[select, onSelectionChange]
|
|
65
64
|
);
|
|
66
65
|
const handleHoveredDateChange = useCallback(
|
|
67
66
|
(event, newHoveredDate) => {
|
|
@@ -87,13 +86,11 @@ const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props,
|
|
|
87
86
|
hoveredDate,
|
|
88
87
|
onHoveredDateChange: handleHoveredDateChange,
|
|
89
88
|
onVisibleMonthChange: handleVisibleMonthChange,
|
|
90
|
-
|
|
89
|
+
onSelectionChange: handleSelectionChange,
|
|
91
90
|
hideOutOfRangeDates: true,
|
|
92
91
|
selectedDate,
|
|
93
92
|
minDate,
|
|
94
93
|
maxDate,
|
|
95
|
-
locale,
|
|
96
|
-
timeZone,
|
|
97
94
|
...CalendarProps
|
|
98
95
|
};
|
|
99
96
|
return /* @__PURE__ */ jsxs(
|
|
@@ -109,7 +106,7 @@ const DatePickerSinglePanel = forwardRef(function DatePickerSinglePanel2(props,
|
|
|
109
106
|
/* @__PURE__ */ jsx(FlexLayout, { gap: 0, children: /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: {}, children: /* @__PURE__ */ jsxs(Calendar, { selectionVariant: "single", ...baseCalendarProps, children: [
|
|
110
107
|
/* @__PURE__ */ jsx(CalendarNavigation, { ...CalendarNavigationProps }),
|
|
111
108
|
/* @__PURE__ */ jsx(CalendarWeekHeader, { ...CalendarWeekHeaderProps }),
|
|
112
|
-
/* @__PURE__ */ jsx(
|
|
109
|
+
/* @__PURE__ */ jsx(CalendarGrid, { ...CalendarDataGridProps })
|
|
113
110
|
] }) }) })
|
|
114
111
|
]
|
|
115
112
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerSinglePanel.js","sources":["../src/date-picker/DatePickerSinglePanel.tsx"],"sourcesContent":["import {\n
|
|
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":["DatePickerSinglePanel","datePickerPanelCss"],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, useForkRef } from '@salt-ds/core';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
|
|
6
|
+
|
|
7
|
+
const withBaseName = makePrefixer("saltDatePickerTrigger");
|
|
8
|
+
const DatePickerTrigger = forwardRef((props, ref) => {
|
|
9
|
+
const { children, className, ...rest } = props;
|
|
10
|
+
const {
|
|
11
|
+
state: { floatingUIResult },
|
|
12
|
+
helpers: { getReferenceProps }
|
|
13
|
+
} = useDatePickerOverlay();
|
|
14
|
+
const triggerRef = useForkRef(
|
|
15
|
+
ref,
|
|
16
|
+
floatingUIResult == null ? void 0 : floatingUIResult.reference
|
|
17
|
+
);
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
"div",
|
|
20
|
+
{
|
|
21
|
+
className: clsx(withBaseName(), className),
|
|
22
|
+
ref: triggerRef,
|
|
23
|
+
...getReferenceProps(rest),
|
|
24
|
+
children
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export { DatePickerTrigger };
|
|
30
|
+
//# 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":[],"mappings":";;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAUlD,MAAM,iBAAoB,GAAA,UAAA,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,MAC3B,oBAAqB,EAAA;AAEzB,EAAA,MAAM,UAAa,GAAA,UAAA;AAAA,IACjB,GAAA;AAAA,IACA,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,GACpB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,UAAA;AAAA,MACJ,GAAG,kBAAkB,IAAI,CAAA;AAAA,MAEzB;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|