@salt-ds/date-components 1.1.0 → 1.1.2
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 +88 -0
- package/css/salt-date-components.css +6 -4
- package/dist-cjs/calendar/Calendar.js +1 -1
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarGrid.js +1 -1
- package/dist-cjs/calendar/CalendarGrid.js.map +1 -1
- package/dist-cjs/calendar/CalendarMonthHeader.js +1 -1
- package/dist-cjs/calendar/CalendarMonthHeader.js.map +1 -1
- package/dist-cjs/calendar/CalendarNavigation.js +1 -1
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/CalendarWeekHeader.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +9 -10
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +1 -1
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +1 -1
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +3 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +2 -2
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +2 -2
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerTrigger.js +1 -1
- package/dist-cjs/date-picker/DatePickerTrigger.js.map +1 -1
- package/dist-cjs/date-picker/useDatePicker.js +1 -1
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/calendar/Calendar.js +1 -1
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarGrid.js +1 -1
- package/dist-es/calendar/CalendarGrid.js.map +1 -1
- package/dist-es/calendar/CalendarMonthHeader.js +1 -1
- package/dist-es/calendar/CalendarMonthHeader.js.map +1 -1
- package/dist-es/calendar/CalendarNavigation.js +1 -1
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/CalendarWeekHeader.css.js +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +9 -10
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +1 -1
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +1 -1
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +3 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +2 -2
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +2 -2
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerTrigger.js +1 -1
- package/dist-es/date-picker/DatePickerTrigger.js.map +1 -1
- package/dist-es/date-picker/useDatePicker.js +1 -1
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-types/date-input/DateInputRange.d.ts +9 -4
- package/dist-types/localization-provider/LocalizationProvider.d.ts +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailError,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type MouseEventHandler,\n type SyntheticEvent,\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 {\n type SingleDatePickerState,\n useDatePickerContext,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps extends DateInputSingleProps {\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 | null | undefined,\n details: DateInputSingleDetails,\n ) => DateInputSingleDetails;\n}\n\nfunction defaultSingleValidation(\n dateAdapter: SaltDateAdapter,\n date: DateFrameworkType | null | undefined,\n details: DateInputSingleDetails,\n minDate?: DateFrameworkType,\n maxDate?: DateFrameworkType,\n): DateInputSingleDetails {\n if (!date) {\n details.errors = details.errors ?? [];\n const hasUnsetError = details.errors.some(\n (err) => err.type === DateDetailError.UNSET,\n );\n if (!hasUnsetError) {\n details.errors.push({\n type: DateDetailError.UNSET,\n message: \"no date defined\",\n });\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\n>((props
|
|
1
|
+
{"version":3,"file":"DatePickerSingleInput.js","sources":["../src/date-picker/DatePickerSingleInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport {\n DateDetailError,\n type DateFrameworkType,\n type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { CalendarIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type MouseEventHandler,\n type SyntheticEvent,\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 {\n type SingleDatePickerState,\n useDatePickerContext,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerSingleInput\");\n\n/**\n * Props for the DatePickerSingleInput component.\n */\nexport interface DatePickerSingleInputProps extends DateInputSingleProps {\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 | null | undefined,\n details: DateInputSingleDetails,\n ) => DateInputSingleDetails;\n}\n\nfunction defaultSingleValidation(\n dateAdapter: SaltDateAdapter,\n date: DateFrameworkType | null | undefined,\n details: DateInputSingleDetails,\n minDate?: DateFrameworkType,\n maxDate?: DateFrameworkType,\n): DateInputSingleDetails {\n if (!date) {\n details.errors = details.errors ?? [];\n const hasUnsetError = details.errors.some(\n (err) => err.type === DateDetailError.UNSET,\n );\n if (!hasUnsetError) {\n details.errors.push({\n type: DateDetailError.UNSET,\n message: \"no date defined\",\n });\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\n>(function DatePickerSingleInput(props, ref) {\n const { dateAdapter } = useLocalization();\n\n const {\n className,\n value: valueProp,\n validate,\n defaultValue,\n onDateValueChange,\n ...rest\n } = props;\n\n const {\n state: {\n selectedDate,\n disabled,\n readOnly,\n cancelled,\n minDate,\n maxDate,\n timezone,\n },\n helpers: { select },\n } = useDatePickerContext({\n selectionVariant: \"single\",\n }) as SingleDatePickerState;\n const {\n state: { open },\n helpers: { setOpen },\n } = useDatePickerOverlay();\n\n const previousValue = useRef<typeof valueProp>(undefined);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"DatePickerSingleInput\",\n state: \"value\",\n });\n\n const handleCalendarButton: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n event.persist();\n setOpen(!open, event.nativeEvent, \"click\");\n event.stopPropagation();\n },\n [open, setOpen],\n );\n\n const handleDateChange = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection | null | undefined,\n details: DateInputSingleDetails,\n ) => {\n const validatedDetails = validate\n ? validate(date, details)\n : defaultSingleValidation(dateAdapter, date, details, minDate, maxDate);\n select(event, date ?? null, validatedDetails);\n },\n [dateAdapter, minDate, maxDate, 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 // 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 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 disabled={disabled}\n ref={ref}\n onDateChange={handleDateChange}\n onDateValueChange={handleDateValueChange}\n endAdornment={\n !readOnly && (\n <Button\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleCalendarButton}\n disabled={disabled}\n aria-haspopup=\"dialog\"\n aria-label=\"Open Calendar\"\n aria-expanded={open}\n >\n <CalendarIcon aria-hidden />\n </Button>\n )\n }\n timezone={timezone}\n {...rest}\n />\n );\n});\n"],"names":["makePrefixer","DateDetailError","forwardRef","DatePickerSingleInput","useLocalization","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useCallback","useEffect","jsx","DateInputSingle","clsx","Button","CalendarIcon"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ var react = require('react');
|
|
|
7
7
|
var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
|
|
8
8
|
|
|
9
9
|
const withBaseName = core.makePrefixer("saltDatePickerTrigger");
|
|
10
|
-
const DatePickerTrigger = react.forwardRef((props, ref)
|
|
10
|
+
const DatePickerTrigger = react.forwardRef(function DatePickerTrigger2(props, ref) {
|
|
11
11
|
const { children, className, ...rest } = props;
|
|
12
12
|
const {
|
|
13
13
|
state: { floatingUIResult },
|
|
@@ -1 +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 { forwardRef, type ReactNode } 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
|
|
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 { forwardRef, type ReactNode } 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>(function DatePickerTrigger(props, ref) {\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","DatePickerTrigger","useDatePickerOverlay","useForkRef","jsx","clsx"],"mappings":";;;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAUlD,MAAM,iBAAA,GAAoBC,gBAAA,CAG/B,SAASC,kBAAAA,CAAkB,OAAO,GAAA,EAAK;AACvC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,EAAE,gBAAA,EAAiB;AAAA,IAC1B,OAAA,EAAS,EAAE,iBAAA;AAAkB,MAC3BC,8CAAA,EAAqB;AAEzB,EAAA,MAAM,UAAA,GAAaC,eAAA;AAAA,IACjB,GAAA;AAAA,IACA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB;AAAA,GACpB;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA,EAAK,UAAA;AAAA,MACJ,GAAG,kBAAkB,IAAI,CAAA;AAAA,MAEzB;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -30,7 +30,7 @@ function useDatePicker(props, ref) {
|
|
|
30
30
|
onCancel,
|
|
31
31
|
timezone
|
|
32
32
|
} = props;
|
|
33
|
-
const previousSelectedDate = react.useRef();
|
|
33
|
+
const previousSelectedDate = react.useRef(void 0);
|
|
34
34
|
const incompleteRangeAnnouncementKeyRef = react.useRef(null);
|
|
35
35
|
const datePickerRef = react.useRef(null);
|
|
36
36
|
const containerRef = core.useForkRef(ref, datePickerRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n createRangeSelectionAnnouncement,\n createSingleSelectionAnnouncement,\n} from \"../calendar/internal/createAnnouncement\";\nimport {\n type CreateAnnouncement,\n useDateSelectionAnnouncer,\n} from \"../calendar/useDateSelectionAnnouncer\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { DATE_PICKER_OVERLAY_ANNOUNCER_TARGET } from \"./DatePickerOverlay\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps {\n /**\n * Factory method for date selection live announcements or null to silence announcements\n */\n createAnnouncement?: CreateAnnouncement | null;\n /**\n * If `true`, the component is disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, enables apply mode where selections are not committed until explicitly applied.\n * When using `DatePickerActions`, this is automatically set to `true`.\n */\n enableApply?: boolean;\n /**\n * Function to determine if a day is highlighted.\n * @param date - The date to check.\n * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n */\n isDayHighlighted?: (date: DateFrameworkType) => string | false | undefined;\n /**\n * Function to determine if a day is unselectable.\n * @param date - The date to check.\n * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n */\n isDayUnselectable?: (date: DateFrameworkType) => string | false | undefined;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: DateFrameworkType;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: DateFrameworkType;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n /**\n * Timezone, if un-defined will take the timezone from passed date (or defaultSelectedDate/selectedDate)\n * Can also be set to \"default\" to use the default timezone of the date library\n * Can also be set to \"system\" to take the timezone of the local system.\n */\n timezone?: Timezone;\n}\n\n/**\n * Props for single date selection.\n */\nexport interface UseDatePickerSingleProps extends UseDatePickerBaseProps {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (event: SyntheticEvent, date: SingleDateSelection | null) => void;\n}\n\n/**\n * Props for date range selection.\n */\nexport interface UseDatePickerRangeProps extends UseDatePickerBaseProps {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (event: SyntheticEvent, date: DateRangeSelection | null) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n */\nexport type UseDatePickerProps =\n | UseDatePickerSingleProps\n | UseDatePickerRangeProps;\n\n/**\n * Custom hook for managing date picker state.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker(\n props: UseDatePickerProps,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState | RangeDatePickerState {\n const {\n dateAdapter,\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<DateFrameworkType>();\n const {\n createAnnouncement,\n readOnly = false,\n disabled,\n enableApply = false,\n selectionVariant,\n defaultSelectedDate,\n isDayHighlighted,\n isDayUnselectable,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n timezone,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>();\n const incompleteRangeAnnouncementKeyRef = useRef<string | null>(null);\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const { announce } = useDateSelectionAnnouncer(\n createAnnouncement ??\n (selectionVariant === \"single\"\n ? createSingleSelectionAnnouncement\n : createRangeSelectionAnnouncement),\n dateAdapter,\n );\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const overlayAnnounceOptions = open\n ? { target: DATE_PICKER_OVERLAY_ANNOUNCER_TARGET }\n : undefined;\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n announce(\n \"dateSelected\",\n {\n multiselect: false,\n selectedDate: date,\n },\n overlayAnnounceOptions,\n );\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [announce, overlayAnnounceOptions, selectionVariant, setOpen, onApply],\n );\n\n const checkAndAddError = useCallback(\n (\n date: DateFrameworkType | null | undefined,\n checkFunction:\n | ((date: DateFrameworkType) => string | false | undefined)\n | undefined,\n errorType: string,\n details: {\n errors?: { type: string; message: string | false | undefined }[];\n } = {},\n ) => {\n const errorMessage = date ? checkFunction?.(date) : false;\n if (errorMessage) {\n details.errors = details.errors ?? [];\n details.errors.push({\n type: errorType,\n message: errorMessage,\n });\n }\n },\n [],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection | null,\n details: DateInputSingleDetails,\n ) => {\n setSelectedDate(date);\n checkAndAddError(date, isDayUnselectable, \"unselectable\", details);\n const canBeApplied =\n dateAdapter.isValid(date) && !details?.errors?.length;\n\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && canBeApplied) {\n applySingle(event, date);\n }\n },\n [\n checkAndAddError,\n dateAdapter,\n applySingle,\n isDayUnselectable,\n enableApply,\n onSelectionChange,\n selectionVariant,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n announce(\n \"dateSelected\",\n {\n multiselect: false,\n selectedDate: date\n ? {\n startDate: date.startDate ?? undefined,\n endDate: date.endDate ?? undefined,\n }\n : null,\n },\n overlayAnnounceOptions,\n );\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [announce, overlayAnnounceOptions, onApply, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n checkAndAddError(\n date?.startDate,\n isDayUnselectable,\n \"unselectable\",\n details?.startDate,\n );\n checkAndAddError(\n date?.endDate,\n isDayUnselectable,\n \"unselectable\",\n details?.endDate,\n );\n\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n\n const hasValidStartDate = dateAdapter.isValid(date?.startDate);\n const hasValidEndDate = dateAdapter.isValid(date?.endDate);\n const hasStartDateErrors = Boolean(details?.startDate?.errors?.length);\n const hasEndDateErrors = Boolean(details?.endDate?.errors?.length);\n\n let incompleteRangeAnnouncementKey: string | null = null;\n let incompleteRangeSelection:\n | { startDate?: DateFrameworkType; endDate?: DateFrameworkType }\n | undefined;\n\n if (hasValidStartDate && !hasValidEndDate && !hasStartDateErrors) {\n incompleteRangeAnnouncementKey = `start:${dateAdapter.format(\n date?.startDate as DateFrameworkType,\n \"YYYY-MM-DD\",\n )}`;\n incompleteRangeSelection = {\n startDate: date?.startDate ?? undefined,\n endDate: undefined,\n };\n } else if (!hasValidStartDate && hasValidEndDate && !hasEndDateErrors) {\n incompleteRangeAnnouncementKey = `end:${dateAdapter.format(\n date?.endDate as DateFrameworkType,\n \"YYYY-MM-DD\",\n )}`;\n incompleteRangeSelection = {\n startDate: undefined,\n endDate: date?.endDate ?? undefined,\n };\n }\n\n if (incompleteRangeAnnouncementKey && incompleteRangeSelection) {\n if (\n incompleteRangeAnnouncementKeyRef.current !==\n incompleteRangeAnnouncementKey\n ) {\n announce(\n \"dateSelected\",\n {\n multiselect: false,\n selectedDate: incompleteRangeSelection,\n },\n overlayAnnounceOptions,\n );\n incompleteRangeAnnouncementKeyRef.current =\n incompleteRangeAnnouncementKey;\n }\n } else {\n incompleteRangeAnnouncementKeyRef.current = null;\n }\n\n const isAValidRange =\n dateAdapter.isValid(date?.startDate) &&\n dateAdapter.isValid(date?.endDate);\n const isValidSelection =\n !details?.startDate?.errors?.length &&\n !details?.endDate?.errors?.length;\n const canBeApplied = isAValidRange && isValidSelection;\n if (!enableApply && canBeApplied) {\n applyRange(event, date);\n }\n },\n [\n checkAndAddError,\n announce,\n overlayAnnounceOptions,\n dateAdapter,\n applyRange,\n isDayUnselectable,\n enableApply,\n onSelectionChange,\n selectionVariant,\n ],\n );\n\n const cancel = useCallback(\n (event?: Event) => {\n setCancelled(true);\n setOpen(false, event, \"cancel\");\n onCancel?.();\n },\n [setOpen, onCancel],\n );\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n timezone,\n },\n helpers: {\n cancel,\n isDayHighlighted,\n isDayUnselectable,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState;\n}\n"],"names":["useLocalization","createAnnouncement","useRef","useForkRef","useDateSelectionAnnouncer","createSingleSelectionAnnouncement","createRangeSelectionAnnouncement","useDatePickerOverlay","DATE_PICKER_OVERLAY_ANNOUNCER_TARGET","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n createRangeSelectionAnnouncement,\n createSingleSelectionAnnouncement,\n} from \"../calendar/internal/createAnnouncement\";\nimport {\n type CreateAnnouncement,\n useDateSelectionAnnouncer,\n} from \"../calendar/useDateSelectionAnnouncer\";\nimport type {\n DateInputRangeDetails,\n DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n RangeDatePickerState,\n SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { DATE_PICKER_OVERLAY_ANNOUNCER_TARGET } from \"./DatePickerOverlay\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps {\n /**\n * Factory method for date selection live announcements or null to silence announcements\n */\n createAnnouncement?: CreateAnnouncement | null;\n /**\n * If `true`, the component is disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, enables apply mode where selections are not committed until explicitly applied.\n * When using `DatePickerActions`, this is automatically set to `true`.\n */\n enableApply?: boolean;\n /**\n * Function to determine if a day is highlighted.\n * @param date - The date to check.\n * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n */\n isDayHighlighted?: (date: DateFrameworkType) => string | false | undefined;\n /**\n * Function to determine if a day is unselectable.\n * @param date - The date to check.\n * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n */\n isDayUnselectable?: (date: DateFrameworkType) => string | false | undefined;\n /** If `true`, the component is read-only. */\n readOnly?: boolean;\n /**\n * The minimum date for the range, default is 1900.\n */\n minDate?: DateFrameworkType;\n /**\n * The maximum date for the range, default is 2100.\n */\n maxDate?: DateFrameworkType;\n /**\n * Handler for when the date selection is cancelled.\n */\n onCancel?: () => void;\n /**\n * Timezone, if un-defined will take the timezone from passed date (or defaultSelectedDate/selectedDate)\n * Can also be set to \"default\" to use the default timezone of the date library\n * Can also be set to \"system\" to take the timezone of the local system.\n */\n timezone?: Timezone;\n}\n\n/**\n * Props for single date selection.\n */\nexport interface UseDatePickerSingleProps extends UseDatePickerBaseProps {\n /**\n * Single date selection.\n */\n selectionVariant: \"single\";\n /**\n * The selected date. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: SingleDateSelection | null;\n /**\n * The initial selected date, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: SingleDateSelection | null;\n /**\n * Handler called when the selected date changes.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n * @param details - The selected date details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: SingleDateSelection | null,\n details?: DateInputSingleDetails,\n ) => void;\n /**\n * Handler called when the selected date is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date or null.\n */\n onApply?: (event: SyntheticEvent, date: SingleDateSelection | null) => void;\n}\n\n/**\n * Props for date range selection.\n */\nexport interface UseDatePickerRangeProps extends UseDatePickerBaseProps {\n /**\n * Date range selection.\n */\n selectionVariant: \"range\";\n /**\n * The selected date range. The selected date will be controlled when this prop is provided.\n */\n selectedDate?: DateRangeSelection | null;\n /**\n * The initial selected date range, when the selected date is uncontrolled.\n */\n defaultSelectedDate?: DateRangeSelection | null;\n /**\n * Handler called when the selected date range changes.\n * @param event - The synthetic event.\n * @param date - The selected date range or null.\n * @param details - The selected date range details.\n */\n onSelectionChange?: (\n event: SyntheticEvent,\n date: DateRangeSelection | null,\n details?: DateInputRangeDetails,\n ) => void;\n /**\n * Handler called when the selected date range is confirmed/applied.\n * @param event - The synthetic event.\n * @param date - The selected date range.\n */\n onApply?: (event: SyntheticEvent, date: DateRangeSelection | null) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n */\nexport type UseDatePickerProps =\n | UseDatePickerSingleProps\n | UseDatePickerRangeProps;\n\n/**\n * Custom hook for managing date picker state.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker(\n props: UseDatePickerProps,\n ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState | RangeDatePickerState {\n const {\n dateAdapter,\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<DateFrameworkType>();\n const {\n createAnnouncement,\n readOnly = false,\n disabled,\n enableApply = false,\n selectionVariant,\n defaultSelectedDate,\n isDayHighlighted,\n isDayUnselectable,\n selectedDate: selectedDateProp,\n onSelectionChange,\n onApply,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n onCancel,\n timezone,\n } = props;\n\n const previousSelectedDate = useRef<typeof selectedDateProp>(undefined);\n const incompleteRangeAnnouncementKeyRef = useRef<string | null>(null);\n const datePickerRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, datePickerRef);\n\n const { announce } = useDateSelectionAnnouncer(\n createAnnouncement ??\n (selectionVariant === \"single\"\n ? createSingleSelectionAnnouncement\n : createRangeSelectionAnnouncement),\n dateAdapter,\n );\n\n const {\n state: { open },\n helpers: { setOpen, setOnDismiss },\n } = useDatePickerOverlay();\n\n const overlayAnnounceOptions = open\n ? { target: DATE_PICKER_OVERLAY_ANNOUNCER_TARGET }\n : undefined;\n\n const [selectedDate, setSelectedDate] = useControlled({\n controlled: selectedDateProp,\n default: defaultSelectedDate,\n name: \"DatePicker\",\n state: \"selectedDate\",\n });\n\n const [cancelled, setCancelled] = useState<boolean>(false);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n useEffect(() => {\n if (open) {\n previousSelectedDate.current = selectedDate;\n if (enableApply) {\n setOnDismiss(cancel);\n }\n setCancelled(false);\n }\n }, [enableApply, open, setOnDismiss, setCancelled]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n useEffect(() => {\n if (cancelled) {\n setSelectedDate(previousSelectedDate?.current);\n }\n }, [cancelled, setSelectedDate]);\n\n const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n useFormFieldProps();\n const isReadOnly = readOnly || formFieldReadOnly || false;\n const isDisabled = disabled || formFieldDisabled || false;\n\n const applySingle = useCallback(\n (event: SyntheticEvent, date: SingleDateSelection | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n announce(\n \"dateSelected\",\n {\n multiselect: false,\n selectedDate: date,\n },\n overlayAnnounceOptions,\n );\n if (selectionVariant === \"single\") {\n onApply?.(event, date);\n }\n },\n [announce, overlayAnnounceOptions, selectionVariant, setOpen, onApply],\n );\n\n const checkAndAddError = useCallback(\n (\n date: DateFrameworkType | null | undefined,\n checkFunction:\n | ((date: DateFrameworkType) => string | false | undefined)\n | undefined,\n errorType: string,\n details: {\n errors?: { type: string; message: string | false | undefined }[];\n } = {},\n ) => {\n const errorMessage = date ? checkFunction?.(date) : false;\n if (errorMessage) {\n details.errors = details.errors ?? [];\n details.errors.push({\n type: errorType,\n message: errorMessage,\n });\n }\n },\n [],\n );\n\n const selectSingle = useCallback(\n (\n event: SyntheticEvent,\n date: SingleDateSelection | null,\n details: DateInputSingleDetails,\n ) => {\n setSelectedDate(date);\n checkAndAddError(date, isDayUnselectable, \"unselectable\", details);\n const canBeApplied =\n dateAdapter.isValid(date) && !details?.errors?.length;\n\n if (selectionVariant === \"single\") {\n onSelectionChange?.(event, date, details);\n }\n if (!enableApply && canBeApplied) {\n applySingle(event, date);\n }\n },\n [\n checkAndAddError,\n dateAdapter,\n applySingle,\n isDayUnselectable,\n enableApply,\n onSelectionChange,\n selectionVariant,\n ],\n );\n\n const applyRange = useCallback(\n (event: SyntheticEvent, date: DateRangeSelection | null): void => {\n setCancelled(false);\n setOpen(false, event.nativeEvent, \"apply\");\n announce(\n \"dateSelected\",\n {\n multiselect: false,\n selectedDate: date\n ? {\n startDate: date.startDate ?? undefined,\n endDate: date.endDate ?? undefined,\n }\n : null,\n },\n overlayAnnounceOptions,\n );\n if (selectionVariant === \"range\") {\n onApply?.(event, date);\n }\n },\n [announce, overlayAnnounceOptions, onApply, setOpen, selectionVariant],\n );\n\n const selectRange = useCallback(\n (\n event: SyntheticEvent,\n date: DateRangeSelection | null,\n details: DateInputRangeDetails,\n ) => {\n setSelectedDate(date);\n checkAndAddError(\n date?.startDate,\n isDayUnselectable,\n \"unselectable\",\n details?.startDate,\n );\n checkAndAddError(\n date?.endDate,\n isDayUnselectable,\n \"unselectable\",\n details?.endDate,\n );\n\n if (selectionVariant === \"range\") {\n onSelectionChange?.(event, date, details);\n }\n\n const hasValidStartDate = dateAdapter.isValid(date?.startDate);\n const hasValidEndDate = dateAdapter.isValid(date?.endDate);\n const hasStartDateErrors = Boolean(details?.startDate?.errors?.length);\n const hasEndDateErrors = Boolean(details?.endDate?.errors?.length);\n\n let incompleteRangeAnnouncementKey: string | null = null;\n let incompleteRangeSelection:\n | { startDate?: DateFrameworkType; endDate?: DateFrameworkType }\n | undefined;\n\n if (hasValidStartDate && !hasValidEndDate && !hasStartDateErrors) {\n incompleteRangeAnnouncementKey = `start:${dateAdapter.format(\n date?.startDate as DateFrameworkType,\n \"YYYY-MM-DD\",\n )}`;\n incompleteRangeSelection = {\n startDate: date?.startDate ?? undefined,\n endDate: undefined,\n };\n } else if (!hasValidStartDate && hasValidEndDate && !hasEndDateErrors) {\n incompleteRangeAnnouncementKey = `end:${dateAdapter.format(\n date?.endDate as DateFrameworkType,\n \"YYYY-MM-DD\",\n )}`;\n incompleteRangeSelection = {\n startDate: undefined,\n endDate: date?.endDate ?? undefined,\n };\n }\n\n if (incompleteRangeAnnouncementKey && incompleteRangeSelection) {\n if (\n incompleteRangeAnnouncementKeyRef.current !==\n incompleteRangeAnnouncementKey\n ) {\n announce(\n \"dateSelected\",\n {\n multiselect: false,\n selectedDate: incompleteRangeSelection,\n },\n overlayAnnounceOptions,\n );\n incompleteRangeAnnouncementKeyRef.current =\n incompleteRangeAnnouncementKey;\n }\n } else {\n incompleteRangeAnnouncementKeyRef.current = null;\n }\n\n const isAValidRange =\n dateAdapter.isValid(date?.startDate) &&\n dateAdapter.isValid(date?.endDate);\n const isValidSelection =\n !details?.startDate?.errors?.length &&\n !details?.endDate?.errors?.length;\n const canBeApplied = isAValidRange && isValidSelection;\n if (!enableApply && canBeApplied) {\n applyRange(event, date);\n }\n },\n [\n checkAndAddError,\n announce,\n overlayAnnounceOptions,\n dateAdapter,\n applyRange,\n isDayUnselectable,\n enableApply,\n onSelectionChange,\n selectionVariant,\n ],\n );\n\n const cancel = useCallback(\n (event?: Event) => {\n setCancelled(true);\n setOpen(false, event, \"cancel\");\n onCancel?.();\n },\n [setOpen, onCancel],\n );\n\n const returnValue = {\n state: {\n selectionVariant,\n selectedDate,\n cancelled,\n enableApply,\n disabled: isDisabled,\n readOnly: isReadOnly,\n containerRef,\n minDate,\n maxDate,\n timezone,\n },\n helpers: {\n cancel,\n isDayHighlighted,\n isDayUnselectable,\n },\n };\n if (props.selectionVariant === \"range\") {\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applyRange,\n select: selectRange,\n },\n } as RangeDatePickerState;\n }\n return {\n ...returnValue,\n helpers: {\n ...returnValue.helpers,\n apply: applySingle,\n select: selectSingle,\n },\n } as SingleDatePickerState;\n}\n"],"names":["useLocalization","createAnnouncement","useRef","useForkRef","useDateSelectionAnnouncer","createSingleSelectionAnnouncement","createRangeSelectionAnnouncement","useDatePickerOverlay","DATE_PICKER_OVERLAY_ANNOUNCER_TARGET","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":"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"}
|
|
@@ -24,7 +24,7 @@ function getStartOrEndDate(dateRange, isMultiselect2) {
|
|
|
24
24
|
}
|
|
25
25
|
let warnedOnce = false;
|
|
26
26
|
const Calendar = forwardRef(
|
|
27
|
-
(props, ref)
|
|
27
|
+
function Calendar2(props, ref) {
|
|
28
28
|
const targetWindow = useWindow();
|
|
29
29
|
const { dateAdapter } = useLocalization();
|
|
30
30
|
useComponentCssInjection({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer, type ResponsiveProp } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } 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 forwardRef,\n type ReactNode,\n useRef,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarCss from \"./Calendar.css\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n type UseCalendarMultiselectOffsetProps,\n type UseCalendarMultiselectRangeProps,\n type UseCalendarMultiselectSingleProps,\n type UseCalendarOffsetProps,\n type UseCalendarRangeProps,\n type UseCalendarSingleProps,\n useCalendar,\n} from \"./useCalendar\";\nimport type { DateRangeSelection } from \"./useCalendarSelection\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content to be rendered inside the Calendar.\n */\n children: ReactNode;\n /**\n * If `true`, hides dates that are out of the selectable range.\n */\n hideOutOfRangeDates?: boolean;\n /**\n * Ref to attach to the focused element,enabling focus to be controlled.\n */\n focusedDateRef?: React.MutableRefObject<HTMLElement | null>;\n /**\n * Number of visible months, maximum 12, defaults to 1\n */\n numberOfVisibleMonths?: ResponsiveProp<\n 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n >;\n /**\n * Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n */\n timezone?: Timezone;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps\n extends CalendarBaseProps,\n UseCalendarSingleProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with multi-select, date selection.\n */\nexport interface CalendarMultiselectSingleProps\n extends CalendarBaseProps,\n UseCalendarMultiselectSingleProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n /**\n * Multiple selection\n */\n multiselect: true;\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps\n extends CalendarBaseProps,\n UseCalendarRangeProps {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select, date range selection.\n */\nexport interface CalendarMultiselectRangeProps\n extends CalendarBaseProps,\n UseCalendarMultiselectRangeProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"range\";\n /**\n * Multiple selection\n */\n multiselect: true;\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps\n extends CalendarBaseProps,\n UseCalendarOffsetProps {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n}\n\n/**\n * Props for the Calendar component with multi-select, offset date selection.\n */\nexport interface CalendarMultiselectOffsetProps\n extends CalendarBaseProps,\n UseCalendarMultiselectOffsetProps {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n /**\n * Multiple selection\n */\n multiselect: true;\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps =\n | CalendarSingleProps\n | CalendarMultiselectSingleProps\n | CalendarRangeProps\n | CalendarMultiselectRangeProps\n | CalendarOffsetProps\n | CalendarMultiselectOffsetProps;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nfunction isMultiselect(\n props: CalendarProps,\n): props is\n | CalendarMultiselectSingleProps\n | CalendarMultiselectRangeProps\n | CalendarMultiselectOffsetProps {\n return props.multiselect === true;\n}\n\nfunction getStartOrEndDate(\n dateRange: DateRangeSelection | DateRangeSelection[] | undefined,\n isMultiselect: boolean,\n): DateFrameworkType | null | undefined {\n if (isMultiselect) {\n const rangeArray = dateRange as DateRangeSelection[];\n return rangeArray?.[0]?.startDate ?? rangeArray?.[0]?.endDate;\n }\n const range = dateRange as DateRangeSelection;\n return range?.startDate ?? range?.endDate;\n}\n\nlet warnedOnce = false;\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n (props: CalendarProps, ref: React.Ref<HTMLDivElement>) => {\n const targetWindow = useWindow();\n const { dateAdapter } = useLocalization();\n useComponentCssInjection({\n testId: \"salt-calendar\",\n css: calendarCss,\n window: targetWindow,\n });\n const {\n createAnnouncement,\n children,\n className,\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n defaultVisibleMonth,\n onFocusedDateChange,\n onSelectionChange,\n onVisibleMonthChange,\n hideOutOfRangeDates,\n focusedDate,\n focusedDateRef,\n isDayUnselectable,\n isDayHighlighted,\n minDate,\n maxDate,\n multiselect,\n numberOfVisibleMonths = 1,\n select,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n timezone: timezoneProp,\n ...propsRest\n } = props;\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n !warnedOnce &&\n multiselect &&\n selectionVariant !== \"single\"\n ) {\n console.warn(\n `'multiselect' with selection variant '${selectionVariant}' is experimental and not for production use.`,\n );\n warnedOnce = true;\n }\n\n let timezone: Timezone = \"default\";\n if (timezoneProp) {\n timezone = timezoneProp;\n } else {\n let defaultTimezoneDate: DateFrameworkType | null | undefined;\n\n if (selectionVariant === \"range\" || selectionVariant === \"offset\") {\n const shouldExtractFromList = isMultiselect(props);\n defaultTimezoneDate =\n getStartOrEndDate(selectedDate, shouldExtractFromList) ??\n getStartOrEndDate(defaultSelectedDate, shouldExtractFromList);\n } else if (selectionVariant === \"single\") {\n if (isMultiselect(props)) {\n defaultTimezoneDate =\n (defaultSelectedDate as DateFrameworkType[])?.[0] ?? undefined;\n } else {\n defaultTimezoneDate =\n (selectedDate as DateFrameworkType | null) ??\n (defaultSelectedDate as DateFrameworkType | null);\n }\n }\n if (defaultTimezoneDate) {\n timezone = dateAdapter.getTimezone(defaultTimezoneDate);\n }\n }\n\n let startDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n let endDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n let rest: Partial<typeof props>;\n if (selectionVariant === \"offset\") {\n ({ startDateOffset, endDateOffset, ...rest } =\n propsRest as CalendarOffsetProps);\n } else {\n rest = propsRest;\n }\n const defaultFocusedDateRef = useRef(null);\n\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useCalendarProps: any = {\n createAnnouncement,\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n defaultVisibleMonth,\n onSelectionChange,\n onVisibleMonthChange,\n focusedDate,\n focusedDateRef:\n focusedDateRef !== undefined ? focusedDateRef : defaultFocusedDateRef,\n isDayUnselectable,\n isDayHighlighted,\n multiselect,\n minDate,\n maxDate,\n numberOfVisibleMonths,\n select,\n selectionVariant,\n onFocusedDateChange,\n onHoveredDateChange,\n hideOutOfRangeDates,\n hoveredDate,\n startDateOffset,\n endDateOffset,\n timezone,\n };\n const { state, helpers } = useCalendar(useCalendarProps);\n const calendarLabel = dateAdapter.format(state.visibleMonth, \"MMMM YYYY\");\n\n return (\n <CalendarContext.Provider\n value={{\n state,\n helpers,\n }}\n >\n <div\n className={clsx(withBaseName(), className)}\n role=\"application\"\n aria-label={calendarLabel}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </CalendarContext.Provider>\n );\n },\n);\n"],"names":["isMultiselect","calendarCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer, type ResponsiveProp } from \"@salt-ds/core\";\nimport type { DateFrameworkType, Timezone } 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 forwardRef,\n type ReactNode,\n useRef,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarCss from \"./Calendar.css\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n type UseCalendarMultiselectOffsetProps,\n type UseCalendarMultiselectRangeProps,\n type UseCalendarMultiselectSingleProps,\n type UseCalendarOffsetProps,\n type UseCalendarRangeProps,\n type UseCalendarSingleProps,\n useCalendar,\n} from \"./useCalendar\";\nimport type { DateRangeSelection } from \"./useCalendarSelection\";\n\n/**\n * Base props for the Calendar component.\n */\nexport interface CalendarBaseProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content to be rendered inside the Calendar.\n */\n children: ReactNode;\n /**\n * If `true`, hides dates that are out of the selectable range.\n */\n hideOutOfRangeDates?: boolean;\n /**\n * Ref to attach to the focused element,enabling focus to be controlled.\n */\n focusedDateRef?: React.MutableRefObject<HTMLElement | null>;\n /**\n * Number of visible months, maximum 12, defaults to 1\n */\n numberOfVisibleMonths?: ResponsiveProp<\n 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n >;\n /**\n * Specifies the timezone behavior:\n * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`.\n * - If set to \"default\", the default timezone of the date library will be used.\n * - If set to \"system\", the local system's timezone will be applied.\n * - If set to \"UTC\", the time will be returned in UTC.\n * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.\n */\n timezone?: Timezone;\n}\n\n/**\n * Props for the Calendar component with single date selection.\n */\nexport interface CalendarSingleProps\n extends CalendarBaseProps,\n UseCalendarSingleProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n}\n\n/**\n * Props for the Calendar component with multi-select, date selection.\n */\nexport interface CalendarMultiselectSingleProps\n extends CalendarBaseProps,\n UseCalendarMultiselectSingleProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n /**\n * Multiple selection\n */\n multiselect: true;\n}\n\n/**\n * Props for the Calendar component with date range selection.\n */\nexport interface CalendarRangeProps\n extends CalendarBaseProps,\n UseCalendarRangeProps {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n}\n\n/**\n * Props for the Calendar component with multi-select, date range selection.\n */\nexport interface CalendarMultiselectRangeProps\n extends CalendarBaseProps,\n UseCalendarMultiselectRangeProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"range\";\n /**\n * Multiple selection\n */\n multiselect: true;\n}\n\n/**\n * Props for the Calendar component with offset date selection.\n */\nexport interface CalendarOffsetProps\n extends CalendarBaseProps,\n UseCalendarOffsetProps {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n}\n\n/**\n * Props for the Calendar component with multi-select, offset date selection.\n */\nexport interface CalendarMultiselectOffsetProps\n extends CalendarBaseProps,\n UseCalendarMultiselectOffsetProps {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n /**\n * Multiple selection\n */\n multiselect: true;\n}\n\n/**\n * Type representing the props for the Calendar component with various selection variants.\n */\nexport type CalendarProps =\n | CalendarSingleProps\n | CalendarMultiselectSingleProps\n | CalendarRangeProps\n | CalendarMultiselectRangeProps\n | CalendarOffsetProps\n | CalendarMultiselectOffsetProps;\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nfunction isMultiselect(\n props: CalendarProps,\n): props is\n | CalendarMultiselectSingleProps\n | CalendarMultiselectRangeProps\n | CalendarMultiselectOffsetProps {\n return props.multiselect === true;\n}\n\nfunction getStartOrEndDate(\n dateRange: DateRangeSelection | DateRangeSelection[] | undefined,\n isMultiselect: boolean,\n): DateFrameworkType | null | undefined {\n if (isMultiselect) {\n const rangeArray = dateRange as DateRangeSelection[];\n return rangeArray?.[0]?.startDate ?? rangeArray?.[0]?.endDate;\n }\n const range = dateRange as DateRangeSelection;\n return range?.startDate ?? range?.endDate;\n}\n\nlet warnedOnce = false;\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n function Calendar(props, ref) {\n const targetWindow = useWindow();\n const { dateAdapter } = useLocalization();\n useComponentCssInjection({\n testId: \"salt-calendar\",\n css: calendarCss,\n window: targetWindow,\n });\n const {\n createAnnouncement,\n children,\n className,\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n defaultVisibleMonth,\n onFocusedDateChange,\n onSelectionChange,\n onVisibleMonthChange,\n hideOutOfRangeDates,\n focusedDate,\n focusedDateRef,\n isDayUnselectable,\n isDayHighlighted,\n minDate,\n maxDate,\n multiselect,\n numberOfVisibleMonths = 1,\n select,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n timezone: timezoneProp,\n ...propsRest\n } = props;\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n !warnedOnce &&\n multiselect &&\n selectionVariant !== \"single\"\n ) {\n console.warn(\n `'multiselect' with selection variant '${selectionVariant}' is experimental and not for production use.`,\n );\n warnedOnce = true;\n }\n\n let timezone: Timezone = \"default\";\n if (timezoneProp) {\n timezone = timezoneProp;\n } else {\n let defaultTimezoneDate: DateFrameworkType | null | undefined;\n\n if (selectionVariant === \"range\" || selectionVariant === \"offset\") {\n const shouldExtractFromList = isMultiselect(props);\n defaultTimezoneDate =\n getStartOrEndDate(selectedDate, shouldExtractFromList) ??\n getStartOrEndDate(defaultSelectedDate, shouldExtractFromList);\n } else if (selectionVariant === \"single\") {\n if (isMultiselect(props)) {\n defaultTimezoneDate =\n (defaultSelectedDate as DateFrameworkType[])?.[0] ?? undefined;\n } else {\n defaultTimezoneDate =\n (selectedDate as DateFrameworkType | null) ??\n (defaultSelectedDate as DateFrameworkType | null);\n }\n }\n if (defaultTimezoneDate) {\n timezone = dateAdapter.getTimezone(defaultTimezoneDate);\n }\n }\n\n let startDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n let endDateOffset: CalendarOffsetProps[\"startDateOffset\"];\n let rest: Partial<typeof props>;\n if (selectionVariant === \"offset\") {\n ({ startDateOffset, endDateOffset, ...rest } =\n propsRest as CalendarOffsetProps);\n } else {\n rest = propsRest;\n }\n const defaultFocusedDateRef = useRef(null);\n\n // biome-ignore lint/suspicious/noExplicitAny: type guard\n const useCalendarProps: any = {\n createAnnouncement,\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n defaultVisibleMonth,\n onSelectionChange,\n onVisibleMonthChange,\n focusedDate,\n focusedDateRef:\n focusedDateRef !== undefined ? focusedDateRef : defaultFocusedDateRef,\n isDayUnselectable,\n isDayHighlighted,\n multiselect,\n minDate,\n maxDate,\n numberOfVisibleMonths,\n select,\n selectionVariant,\n onFocusedDateChange,\n onHoveredDateChange,\n hideOutOfRangeDates,\n hoveredDate,\n startDateOffset,\n endDateOffset,\n timezone,\n };\n const { state, helpers } = useCalendar(useCalendarProps);\n const calendarLabel = dateAdapter.format(state.visibleMonth, \"MMMM YYYY\");\n\n return (\n <CalendarContext.Provider\n value={{\n state,\n helpers,\n }}\n >\n <div\n className={clsx(withBaseName(), className)}\n role=\"application\"\n aria-label={calendarLabel}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n </CalendarContext.Provider>\n );\n },\n);\n"],"names":["isMultiselect","Calendar","calendarCss"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ import { useCalendarContext } from './internal/CalendarContext.js';
|
|
|
8
8
|
import { CalendarMonth } from './internal/CalendarMonth.js';
|
|
9
9
|
|
|
10
10
|
const CalendarGrid = forwardRef(
|
|
11
|
-
(props, ref)
|
|
11
|
+
function CalendarGrid2(props, ref) {
|
|
12
12
|
const {
|
|
13
13
|
CalendarDayProps,
|
|
14
14
|
CalendarWeekHeaderProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import {\n GridItem,\n GridLayout,\n type ResponsiveProp,\n useForkRef,\n} from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n useMemo,\n useRef,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n CalendarMonthHeader,\n type CalendarMonthHeaderProps,\n} from \"./CalendarMonthHeader\";\nimport {\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n} from \"./CalendarWeekHeader\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport type { CalendarDayProps } from \"./internal/CalendarDay\";\nimport { CalendarMonth } from \"./internal/CalendarMonth\";\n\n/**\n * Props for the CalendarGrid component.\n */\nexport interface CalendarGridProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Number of columns\n */\n columns?: ResponsiveProp<number | string>;\n /**\n * Props for `CalendarWeekHeader`\n */\n CalendarWeekHeaderProps?: Partial<CalendarWeekHeaderProps>;\n /**\n * Props for `CalendarMonthHeader`\n */\n CalendarMonthHeaderProps?: Partial<CalendarMonthHeaderProps>;\n /**\n * Props for `CalendarDay`\n */\n CalendarDayProps?: Partial<CalendarDayProps>;\n}\n\nexport const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(\n (props
|
|
1
|
+
{"version":3,"file":"CalendarGrid.js","sources":["../src/calendar/CalendarGrid.tsx"],"sourcesContent":["import {\n GridItem,\n GridLayout,\n type ResponsiveProp,\n useForkRef,\n} from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n useMemo,\n useRef,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n CalendarMonthHeader,\n type CalendarMonthHeaderProps,\n} from \"./CalendarMonthHeader\";\nimport {\n CalendarWeekHeader,\n type CalendarWeekHeaderProps,\n} from \"./CalendarWeekHeader\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport type { CalendarDayProps } from \"./internal/CalendarDay\";\nimport { CalendarMonth } from \"./internal/CalendarMonth\";\n\n/**\n * Props for the CalendarGrid component.\n */\nexport interface CalendarGridProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Number of columns\n */\n columns?: ResponsiveProp<number | string>;\n /**\n * Props for `CalendarWeekHeader`\n */\n CalendarWeekHeaderProps?: Partial<CalendarWeekHeaderProps>;\n /**\n * Props for `CalendarMonthHeader`\n */\n CalendarMonthHeaderProps?: Partial<CalendarMonthHeaderProps>;\n /**\n * Props for `CalendarDay`\n */\n CalendarDayProps?: Partial<CalendarDayProps>;\n}\n\nexport const CalendarGrid = forwardRef<HTMLDivElement, CalendarGridProps>(\n function CalendarGrid(props, ref) {\n const {\n CalendarDayProps,\n CalendarWeekHeaderProps,\n CalendarMonthHeaderProps,\n columns = 1,\n onBlur,\n ...rest\n } = props;\n\n const { dateAdapter } = useLocalization();\n\n const {\n helpers: { setFocusedDate, setHoveredDate },\n state: { visibleMonth, numberOfVisibleMonths = 1 },\n } = useCalendarContext();\n const calendarGridRef = useRef<HTMLDivElement>(null);\n const containerRef = useForkRef(ref, calendarGridRef);\n\n const handleCalendarGridBlur: FocusEventHandler<HTMLDivElement> = (\n event,\n ) => {\n event.stopPropagation();\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (\n calendarGridRef.current &&\n relatedTarget &&\n calendarGridRef.current.contains(relatedTarget)\n ) {\n return;\n }\n setFocusedDate(event, null);\n setHoveredDate(event, null);\n onBlur?.(event);\n };\n\n const visibleMonths = useMemo(\n () =>\n Array.from({ length: numberOfVisibleMonths }, (_value, index) =>\n dateAdapter.add(visibleMonth, {\n months: index,\n }),\n ),\n [dateAdapter, numberOfVisibleMonths, visibleMonth],\n );\n\n return (\n <GridLayout\n columns={columns}\n gap={1}\n ref={containerRef}\n onBlur={handleCalendarGridBlur}\n {...rest}\n >\n {visibleMonths.map((gridItemVisibleMonth) => (\n <GridItem\n key={`calendar-grid-item-${dateAdapter.format(gridItemVisibleMonth, \"MMMM YYYY\")}`}\n >\n {numberOfVisibleMonths > 1 ? (\n <CalendarMonthHeader\n {...CalendarMonthHeaderProps}\n month={gridItemVisibleMonth}\n />\n ) : null}\n <CalendarWeekHeader {...CalendarWeekHeaderProps} />\n <CalendarMonth\n date={gridItemVisibleMonth}\n CalendarDayProps={CalendarDayProps}\n />\n </GridItem>\n ))}\n </GridLayout>\n );\n },\n);\n"],"names":["CalendarGrid"],"mappings":";;;;;;;;;AAgDO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,gBAAA;AAAA,MACA,uBAAA;AAAA,MACA,wBAAA;AAAA,MACA,OAAA,GAAU,CAAA;AAAA,MACV,MAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAgB;AAExC,IAAA,MAAM;AAAA,MACJ,OAAA,EAAS,EAAE,cAAA,EAAgB,cAAA,EAAe;AAAA,MAC1C,KAAA,EAAO,EAAE,YAAA,EAAc,qBAAA,GAAwB,CAAA;AAAE,QAC/C,kBAAA,EAAmB;AACvB,IAAA,MAAM,eAAA,GAAkB,OAAuB,IAAI,CAAA;AACnD,IAAA,MAAM,YAAA,GAAe,UAAA,CAAW,GAAA,EAAK,eAAe,CAAA;AAEpD,IAAA,MAAM,sBAAA,GAA4D,CAChE,KAAA,KACG;AACH,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,MAAM,gBAAgB,KAAA,CAAM,aAAA;AAC5B,MAAA,IACE,gBAAgB,OAAA,IAChB,aAAA,IACA,gBAAgB,OAAA,CAAQ,QAAA,CAAS,aAAa,CAAA,EAC9C;AACA,QAAA;AAAA,MACF;AACA,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA;AAC1B,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,IACX,CAAA;AAEA,IAAA,MAAM,aAAA,GAAgB,OAAA;AAAA,MACpB,MACE,KAAA,CAAM,IAAA;AAAA,QAAK,EAAE,QAAQ,qBAAA,EAAsB;AAAA,QAAG,CAAC,MAAA,EAAQ,KAAA,KACrD,WAAA,CAAY,IAAI,YAAA,EAAc;AAAA,UAC5B,MAAA,EAAQ;AAAA,SACT;AAAA,OACH;AAAA,MACF,CAAC,WAAA,EAAa,qBAAA,EAAuB,YAAY;AAAA,KACnD;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,GAAA,EAAK,CAAA;AAAA,QACL,GAAA,EAAK,YAAA;AAAA,QACL,MAAA,EAAQ,sBAAA;AAAA,QACP,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,aAAA,CAAc,GAAA,CAAI,CAAC,oBAAA,qBAClB,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAGE,QAAA,EAAA;AAAA,cAAA,qBAAA,GAAwB,CAAA,mBACvB,GAAA;AAAA,gBAAC,mBAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,wBAAA;AAAA,kBACJ,KAAA,EAAO;AAAA;AAAA,eACT,GACE,IAAA;AAAA,8BACJ,GAAA,CAAC,kBAAA,EAAA,EAAoB,GAAG,uBAAA,EAAyB,CAAA;AAAA,8BACjD,GAAA;AAAA,gBAAC,aAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,oBAAA;AAAA,kBACN;AAAA;AAAA;AACF;AAAA,WAAA;AAAA,UAZK,CAAA,mBAAA,EAAsB,WAAA,CAAY,MAAA,CAAO,oBAAA,EAAsB,WAAW,CAAC,CAAA;AAAA,SAcnF;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -8,7 +8,7 @@ import { useLocalization } from '../localization-provider/LocalizationProvider.j
|
|
|
8
8
|
import css_248z from './CalendarMonthHeader.css.js';
|
|
9
9
|
|
|
10
10
|
const withBaseName = makePrefixer("saltCalendarMonthHeader");
|
|
11
|
-
const CalendarMonthHeader = forwardRef((props, ref)
|
|
11
|
+
const CalendarMonthHeader = forwardRef(function CalendarMonthHeader2(props, ref) {
|
|
12
12
|
const { className, format: formatMonthProp = "MMMM", month, ...rest } = props;
|
|
13
13
|
const { dateAdapter } = useLocalization();
|
|
14
14
|
const targetWindow = useWindow();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonthHeader.js","sources":["../src/calendar/CalendarMonthHeader.tsx"],"sourcesContent":["import { makePrefixer, Text } 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 { type ComponentPropsWithRef, forwardRef, useCallback } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarMonthHeaderCss from \"./CalendarMonthHeader.css\";\n\n/**\n * Props for the CalendarMonthHeader component.\n */\nexport interface CalendarMonthHeaderProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Month value\n */\n month: DateFrameworkType;\n /**\n * Format the month value\n * @param date\n */\n format?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonthHeader\");\n\nexport const CalendarMonthHeader = forwardRef<\n HTMLDivElement,\n CalendarMonthHeaderProps\n>((props
|
|
1
|
+
{"version":3,"file":"CalendarMonthHeader.js","sources":["../src/calendar/CalendarMonthHeader.tsx"],"sourcesContent":["import { makePrefixer, Text } 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 { type ComponentPropsWithRef, forwardRef, useCallback } from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarMonthHeaderCss from \"./CalendarMonthHeader.css\";\n\n/**\n * Props for the CalendarMonthHeader component.\n */\nexport interface CalendarMonthHeaderProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Month value\n */\n month: DateFrameworkType;\n /**\n * Format the month value\n * @param date\n */\n format?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonthHeader\");\n\nexport const CalendarMonthHeader = forwardRef<\n HTMLDivElement,\n CalendarMonthHeaderProps\n>(function CalendarMonthHeader(props, ref) {\n const { className, format: formatMonthProp = \"MMMM\", month, ...rest } = props;\n const { dateAdapter } = useLocalization();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-month-header\",\n css: calendarMonthHeaderCss,\n window: targetWindow,\n });\n\n const formatMonth = useCallback(\n (date?: DateFrameworkType) => {\n return dateAdapter.format(date, formatMonthProp);\n },\n [dateAdapter, formatMonthProp],\n );\n\n return (\n <div\n data-testid=\"CalendarMonthHeader\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n >\n <Text>{formatMonth(month)}</Text>\n </div>\n );\n});\n"],"names":["CalendarMonthHeader","calendarMonthHeaderCss"],"mappings":";;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAEpD,MAAM,mBAAA,GAAsB,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,EAAE,WAAW,MAAA,EAAQ,eAAA,GAAkB,QAAQ,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AACxE,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAgB;AAExC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,IAAA,KAA6B;AAC5B,MAAA,OAAO,WAAA,CAAY,MAAA,CAAO,IAAA,EAAM,eAAe,CAAA;AAAA,IACjD,CAAA;AAAA,IACA,CAAC,aAAa,eAAe;AAAA,GAC/B;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,qBAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAM,QAAA,EAAA,WAAA,CAAY,KAAK,CAAA,EAAE;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}
|
|
@@ -153,7 +153,7 @@ function OptionWithTooltip({
|
|
|
153
153
|
}
|
|
154
154
|
);
|
|
155
155
|
}
|
|
156
|
-
const CalendarNavigation = forwardRef((props, ref)
|
|
156
|
+
const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
|
|
157
157
|
const {
|
|
158
158
|
className,
|
|
159
159
|
formatMonth: formatMonthProp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n Dropdown,\n type DropdownProps,\n makePrefixer,\n Option,\n type OptionProps,\n Tooltip,\n type TooltipProps,\n useIcon,\n useListControlContext,\n} from \"@salt-ds/core\";\nimport type {\n DateFrameworkType,\n SaltDateAdapter,\n Timezone,\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 ComponentPropsWithRef,\n forwardRef,\n type MouseEventHandler,\n type SyntheticEvent,\n useCallback,\n useMemo,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { generateMonthsForYear, monthDiff } from \"./internal/utils\";\n\n/**\n * Props for the CalendarNavigation component.\n */\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Props for the month dropdown component.\n */\n MonthDropdownProps?: DropdownProps<DateFrameworkType>;\n /**\n * Props for the year dropdown component.\n */\n YearDropdownProps?: DropdownProps<DateFrameworkType>;\n /**\n * Additional props for Previous button.\n */\n PreviousButtonProps?: ButtonProps;\n /**\n * Additional props for Next button.\n */\n NextButtonProps?: ButtonProps;\n /**\n * If `true`, hides the year dropdown.\n */\n hideYearDropdown?: boolean;\n /**\n * The step value for navigation. Defaults to 1.\n */\n step?: number;\n /**\n * Format the month dropdown values\n * @param date\n */\n formatMonth?: string;\n /**\n * Format the year dropdown values\n * @param date\n */\n formatYear?: string;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateFrameworkType;\n tooltipContent?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nconst ConditionalTooltip: React.FC<TooltipProps> = ({\n children,\n disabled = true,\n ...rest\n}) => {\n if (disabled) {\n return <>{children}</>;\n }\n return <Tooltip {...rest}>{children}</Tooltip>;\n};\n\nfunction generateYearsBetweenRange(\n dateAdapter: SaltDateAdapter,\n minYear: number,\n maxYear: number,\n timezone: Timezone = \"default\",\n): DateFrameworkType[] {\n const years: DateFrameworkType[] = [];\n let startOfYear = dateAdapter.today(timezone);\n for (let year = minYear; year <= maxYear; year++) {\n startOfYear = dateAdapter.set(startOfYear, { day: 1, month: 1, year });\n years.push(startOfYear);\n }\n return years;\n}\n\nfunction useCalendarNavigation() {\n const {\n state: {\n visibleMonth,\n timezone,\n minDate,\n maxDate,\n numberOfVisibleMonths = 1,\n },\n helpers: { setVisibleMonth, isDayVisible, isOutsideAllowedMonths },\n } = useCalendarContext();\n\n const { dateAdapter } = useLocalization();\n\n const disableNavigatePrevious = isDayVisible(minDate);\n const disableNavigateNext = isDayVisible(maxDate);\n\n const moveToNextMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(event, dateAdapter.add(visibleMonth, { months: step }));\n },\n [dateAdapter, setVisibleMonth, visibleMonth],\n );\n\n const moveToPreviousMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(\n event,\n dateAdapter.subtract(visibleMonth, { months: step }),\n );\n },\n [dateAdapter, setVisibleMonth, visibleMonth],\n );\n\n const moveToMonth = useCallback(\n (event: SyntheticEvent, month: DateFrameworkType) => {\n let newMonth = month;\n\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month based on the new selection\n const navigableMonths = generateMonthsForYear(\n dateAdapter,\n newMonth,\n ).filter((n) => !isOutsideAllowedMonths(n));\n newMonth = navigableMonths.reduce(\n (closestMonth, currentMonth) =>\n Math.abs(monthDiff(dateAdapter, currentMonth, newMonth)) <\n Math.abs(monthDiff(dateAdapter, closestMonth, newMonth))\n ? currentMonth\n : closestMonth,\n minDate,\n );\n }\n setVisibleMonth(event, newMonth);\n },\n [dateAdapter, isOutsideAllowedMonths, setVisibleMonth, minDate],\n );\n\n const months: DateFrameworkType[] = useMemo(\n () => generateMonthsForYear(dateAdapter, visibleMonth),\n [dateAdapter, visibleMonth],\n );\n\n const years: DateFrameworkType[] = useMemo(\n () =>\n generateYearsBetweenRange(\n dateAdapter,\n Math.min(\n dateAdapter.getYear(minDate),\n dateAdapter.getYear(visibleMonth),\n ),\n Math.max(\n dateAdapter.getYear(maxDate),\n dateAdapter.getYear(visibleMonth),\n ),\n timezone,\n ),\n [dateAdapter, minDate, maxDate, visibleMonth, timezone],\n );\n\n const selectedMonth: DateFrameworkType | undefined = months.find(\n (month: DateFrameworkType) =>\n dateAdapter.isSame(month, visibleMonth, \"month\"),\n );\n const selectedYear: DateFrameworkType | undefined = years.find(\n (year: DateFrameworkType) => dateAdapter.isSame(year, visibleMonth, \"year\"),\n );\n\n return useMemo(\n () => ({\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n disableNavigateNext,\n disableNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n numberOfVisibleMonths,\n }),\n [\n months,\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n visibleMonth,\n years,\n disableNavigateNext,\n disableNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n numberOfVisibleMonths,\n ],\n );\n}\n\nfunction OptionWithTooltip({\n value,\n children,\n disabled = false,\n tooltipContent,\n ...rest\n}: OptionWithTooltipProps) {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n return (\n <ConditionalTooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled} {...rest}>\n {children}\n </Option>\n </ConditionalTooltip>\n );\n}\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>((props: CalendarNavigationProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n className,\n formatMonth: formatMonthProp,\n formatYear: formatYearProp,\n MonthDropdownProps,\n NextButtonProps,\n PreviousButtonProps,\n YearDropdownProps,\n hideYearDropdown,\n step = 1,\n ...rest\n } = props;\n\n const { dateAdapter } = useLocalization();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const { NextIcon, PreviousIcon } = useIcon();\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n disableNavigateNext,\n disableNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n visibleMonth,\n numberOfVisibleMonths,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n moveToPreviousMonth(event, step);\n },\n [moveToPreviousMonth, step],\n );\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (event) => {\n moveToNextMonth(event, step);\n },\n [moveToNextMonth, step],\n );\n\n const handleMonthSelect = useCallback(\n (event: SyntheticEvent, month: DateFrameworkType[]) => {\n moveToMonth(event, month[0]);\n },\n [moveToMonth],\n );\n\n const handleYearSelect = useCallback(\n (event: SyntheticEvent, year: DateFrameworkType[]) => {\n let newVisibleMonth = dateAdapter.clone(visibleMonth);\n newVisibleMonth = dateAdapter.set(newVisibleMonth, {\n year: dateAdapter.getYear(year[0]),\n });\n moveToMonth(event, newVisibleMonth);\n },\n [dateAdapter, moveToMonth, visibleMonth],\n );\n\n const formatMonth = useCallback(\n (date?: DateFrameworkType, formatString?: string) => {\n const format = formatString || formatMonthProp || \"MMM\";\n if (date) {\n return dateAdapter.format(date, format);\n }\n return \"\";\n },\n [dateAdapter, formatMonthProp],\n );\n\n const formatYear = useCallback(\n (date?: DateFrameworkType) => {\n if (date && formatYearProp) {\n return dateAdapter.format(date, formatYearProp);\n }\n return !date ? \"\" : `${dateAdapter.format(date, \"YYYY\")}`;\n },\n [dateAdapter, formatYearProp],\n );\n\n const isPreviousMonthDisabled =\n PreviousButtonProps?.disabled || disableNavigatePrevious;\n const isNextMonthDisabled = NextButtonProps?.disabled || disableNavigateNext;\n\n // Constrain to a max of 2 calendar widths + gap when showing multiple months\n const navStyle =\n numberOfVisibleMonths >= 2\n ? ({\n \"--calendarNavigation-maxWidth\":\n \"calc(var(--calendarNavigation-calendarWidth) * 2 + var(--salt-spacing-100))\",\n ...rest.style,\n } as React.CSSProperties)\n : rest.style;\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className,\n )}\n ref={ref}\n {...rest}\n style={navStyle}\n >\n <ConditionalTooltip\n placement=\"top\"\n disabled={!isPreviousMonthDisabled}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n aria-label={\n isPreviousMonthDisabled\n ? \"Past dates are out of range\"\n : \"Previous Month\"\n }\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n {...PreviousButtonProps}\n disabled={isPreviousMonthDisabled}\n >\n <PreviousIcon aria-hidden />\n </Button>\n </ConditionalTooltip>\n <div className={clsx({ [withBaseName(\"dropdowns\")]: !hideYearDropdown })}>\n <Dropdown\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n aria-label={formatMonth(month, \"MMMM\")}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n {!hideYearDropdown ? (\n <Dropdown\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n {...YearDropdownProps}\n className={clsx(\n withBaseName(\"yearDropdown\"),\n YearDropdownProps?.className,\n )}\n >\n {years.map((year) => (\n <OptionWithTooltip key={formatYear(year)} value={year}>\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n ) : null}\n </div>\n <ConditionalTooltip\n placement=\"top\"\n disabled={!isNextMonthDisabled}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n aria-label={\n isNextMonthDisabled ? \"Future dates are out of range\" : \"Next Month\"\n }\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n {...NextButtonProps}\n disabled={isNextMonthDisabled}\n >\n <NextIcon aria-hidden />\n </Button>\n </ConditionalTooltip>\n </div>\n );\n});\n"],"names":["calendarNavigationCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n Dropdown,\n type DropdownProps,\n makePrefixer,\n Option,\n type OptionProps,\n Tooltip,\n type TooltipProps,\n useIcon,\n useListControlContext,\n} from \"@salt-ds/core\";\nimport type {\n DateFrameworkType,\n SaltDateAdapter,\n Timezone,\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 ComponentPropsWithRef,\n forwardRef,\n type MouseEventHandler,\n type SyntheticEvent,\n useCallback,\n useMemo,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { generateMonthsForYear, monthDiff } from \"./internal/utils\";\n\n/**\n * Props for the CalendarNavigation component.\n */\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Props for the month dropdown component.\n */\n MonthDropdownProps?: DropdownProps<DateFrameworkType>;\n /**\n * Props for the year dropdown component.\n */\n YearDropdownProps?: DropdownProps<DateFrameworkType>;\n /**\n * Additional props for Previous button.\n */\n PreviousButtonProps?: ButtonProps;\n /**\n * Additional props for Next button.\n */\n NextButtonProps?: ButtonProps;\n /**\n * If `true`, hides the year dropdown.\n */\n hideYearDropdown?: boolean;\n /**\n * The step value for navigation. Defaults to 1.\n */\n step?: number;\n /**\n * Format the month dropdown values\n * @param date\n */\n formatMonth?: string;\n /**\n * Format the year dropdown values\n * @param date\n */\n formatYear?: string;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateFrameworkType;\n tooltipContent?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nconst ConditionalTooltip: React.FC<TooltipProps> = ({\n children,\n disabled = true,\n ...rest\n}) => {\n if (disabled) {\n return <>{children}</>;\n }\n return <Tooltip {...rest}>{children}</Tooltip>;\n};\n\nfunction generateYearsBetweenRange(\n dateAdapter: SaltDateAdapter,\n minYear: number,\n maxYear: number,\n timezone: Timezone = \"default\",\n): DateFrameworkType[] {\n const years: DateFrameworkType[] = [];\n let startOfYear = dateAdapter.today(timezone);\n for (let year = minYear; year <= maxYear; year++) {\n startOfYear = dateAdapter.set(startOfYear, { day: 1, month: 1, year });\n years.push(startOfYear);\n }\n return years;\n}\n\nfunction useCalendarNavigation() {\n const {\n state: {\n visibleMonth,\n timezone,\n minDate,\n maxDate,\n numberOfVisibleMonths = 1,\n },\n helpers: { setVisibleMonth, isDayVisible, isOutsideAllowedMonths },\n } = useCalendarContext();\n\n const { dateAdapter } = useLocalization();\n\n const disableNavigatePrevious = isDayVisible(minDate);\n const disableNavigateNext = isDayVisible(maxDate);\n\n const moveToNextMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(event, dateAdapter.add(visibleMonth, { months: step }));\n },\n [dateAdapter, setVisibleMonth, visibleMonth],\n );\n\n const moveToPreviousMonth = useCallback(\n (event: SyntheticEvent, step = 1) => {\n setVisibleMonth(\n event,\n dateAdapter.subtract(visibleMonth, { months: step }),\n );\n },\n [dateAdapter, setVisibleMonth, visibleMonth],\n );\n\n const moveToMonth = useCallback(\n (event: SyntheticEvent, month: DateFrameworkType) => {\n let newMonth = month;\n\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month based on the new selection\n const navigableMonths = generateMonthsForYear(\n dateAdapter,\n newMonth,\n ).filter((n) => !isOutsideAllowedMonths(n));\n newMonth = navigableMonths.reduce(\n (closestMonth, currentMonth) =>\n Math.abs(monthDiff(dateAdapter, currentMonth, newMonth)) <\n Math.abs(monthDiff(dateAdapter, closestMonth, newMonth))\n ? currentMonth\n : closestMonth,\n minDate,\n );\n }\n setVisibleMonth(event, newMonth);\n },\n [dateAdapter, isOutsideAllowedMonths, setVisibleMonth, minDate],\n );\n\n const months: DateFrameworkType[] = useMemo(\n () => generateMonthsForYear(dateAdapter, visibleMonth),\n [dateAdapter, visibleMonth],\n );\n\n const years: DateFrameworkType[] = useMemo(\n () =>\n generateYearsBetweenRange(\n dateAdapter,\n Math.min(\n dateAdapter.getYear(minDate),\n dateAdapter.getYear(visibleMonth),\n ),\n Math.max(\n dateAdapter.getYear(maxDate),\n dateAdapter.getYear(visibleMonth),\n ),\n timezone,\n ),\n [dateAdapter, minDate, maxDate, visibleMonth, timezone],\n );\n\n const selectedMonth: DateFrameworkType | undefined = months.find(\n (month: DateFrameworkType) =>\n dateAdapter.isSame(month, visibleMonth, \"month\"),\n );\n const selectedYear: DateFrameworkType | undefined = years.find(\n (year: DateFrameworkType) => dateAdapter.isSame(year, visibleMonth, \"year\"),\n );\n\n return useMemo(\n () => ({\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n disableNavigateNext,\n disableNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n numberOfVisibleMonths,\n }),\n [\n months,\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n visibleMonth,\n years,\n disableNavigateNext,\n disableNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n numberOfVisibleMonths,\n ],\n );\n}\n\nfunction OptionWithTooltip({\n value,\n children,\n disabled = false,\n tooltipContent,\n ...rest\n}: OptionWithTooltipProps) {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n return (\n <ConditionalTooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled} {...rest}>\n {children}\n </Option>\n </ConditionalTooltip>\n );\n}\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n formatMonth: formatMonthProp,\n formatYear: formatYearProp,\n MonthDropdownProps,\n NextButtonProps,\n PreviousButtonProps,\n YearDropdownProps,\n hideYearDropdown,\n step = 1,\n ...rest\n } = props;\n\n const { dateAdapter } = useLocalization();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const { NextIcon, PreviousIcon } = useIcon();\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n disableNavigateNext,\n disableNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n visibleMonth,\n numberOfVisibleMonths,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> =\n useCallback(\n (event) => {\n moveToPreviousMonth(event, step);\n },\n [moveToPreviousMonth, step],\n );\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (event) => {\n moveToNextMonth(event, step);\n },\n [moveToNextMonth, step],\n );\n\n const handleMonthSelect = useCallback(\n (event: SyntheticEvent, month: DateFrameworkType[]) => {\n moveToMonth(event, month[0]);\n },\n [moveToMonth],\n );\n\n const handleYearSelect = useCallback(\n (event: SyntheticEvent, year: DateFrameworkType[]) => {\n let newVisibleMonth = dateAdapter.clone(visibleMonth);\n newVisibleMonth = dateAdapter.set(newVisibleMonth, {\n year: dateAdapter.getYear(year[0]),\n });\n moveToMonth(event, newVisibleMonth);\n },\n [dateAdapter, moveToMonth, visibleMonth],\n );\n\n const formatMonth = useCallback(\n (date?: DateFrameworkType, formatString?: string) => {\n const format = formatString || formatMonthProp || \"MMM\";\n if (date) {\n return dateAdapter.format(date, format);\n }\n return \"\";\n },\n [dateAdapter, formatMonthProp],\n );\n\n const formatYear = useCallback(\n (date?: DateFrameworkType) => {\n if (date && formatYearProp) {\n return dateAdapter.format(date, formatYearProp);\n }\n return !date ? \"\" : `${dateAdapter.format(date, \"YYYY\")}`;\n },\n [dateAdapter, formatYearProp],\n );\n\n const isPreviousMonthDisabled =\n PreviousButtonProps?.disabled || disableNavigatePrevious;\n const isNextMonthDisabled = NextButtonProps?.disabled || disableNavigateNext;\n\n // Constrain to a max of 2 calendar widths + gap when showing multiple months\n const navStyle =\n numberOfVisibleMonths >= 2\n ? ({\n \"--calendarNavigation-maxWidth\":\n \"calc(var(--calendarNavigation-calendarWidth) * 2 + var(--salt-spacing-100))\",\n ...rest.style,\n } as React.CSSProperties)\n : rest.style;\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className,\n )}\n ref={ref}\n {...rest}\n style={navStyle}\n >\n <ConditionalTooltip\n placement=\"top\"\n disabled={!isPreviousMonthDisabled}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n aria-label={\n isPreviousMonthDisabled\n ? \"Past dates are out of range\"\n : \"Previous Month\"\n }\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n {...PreviousButtonProps}\n disabled={isPreviousMonthDisabled}\n >\n <PreviousIcon aria-hidden />\n </Button>\n </ConditionalTooltip>\n <div className={clsx({ [withBaseName(\"dropdowns\")]: !hideYearDropdown })}>\n <Dropdown\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n aria-label={formatMonth(month, \"MMMM\")}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n {!hideYearDropdown ? (\n <Dropdown\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n {...YearDropdownProps}\n className={clsx(\n withBaseName(\"yearDropdown\"),\n YearDropdownProps?.className,\n )}\n >\n {years.map((year) => (\n <OptionWithTooltip key={formatYear(year)} value={year}>\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n ) : null}\n </div>\n <ConditionalTooltip\n placement=\"top\"\n disabled={!isNextMonthDisabled}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n aria-label={\n isNextMonthDisabled ? \"Future dates are out of range\" : \"Next Month\"\n }\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n {...NextButtonProps}\n disabled={isNextMonthDisabled}\n >\n <NextIcon aria-hidden />\n </Button>\n </ConditionalTooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCalendarWeekHeader {\n display: flex;\n text-align: center;\n align-items: center;\n height: var(--salt-size-base);\n gap: var(--calendar-gap);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n width: var(--calendar-day-size);\n color: var(--salt-content-secondary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n}\n";
|
|
1
|
+
var css_248z = ".saltCalendarWeekHeader {\n display: flex;\n text-align: center;\n align-items: center;\n height: var(--salt-size-base);\n gap: var(--calendar-gap);\n}\n\n.saltCalendarWeekHeader-dayOfWeek {\n width: var(--calendar-day-size);\n color: var(--salt-content-secondary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CalendarWeekHeader.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: -1px;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted {\n right: 0;\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-sentiment-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-sentiment-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
1
|
+
var css_248z = ".salt-density-touch {\n --calendar-day-highlight-size: 14px;\n}\n.salt-density-low {\n --calendar-day-highlight-size: 12px;\n}\n.salt-density-medium {\n --calendar-day-highlight-size: 10px;\n}\n.salt-density-high {\n --calendar-day-highlight-size: 8px;\n}\n\n.saltCalendarDay {\n --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);\n --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n letter-spacing: var(--salt-text-letterSpacing);\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n border: none;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.saltCalendarDay-content {\n margin: 0 var(--salt-spacing-50);\n width: 100%;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay:hover {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n border-radius: 0;\n}\n\n.saltCalendarDay-focused,\n.saltCalendarDay:focus,\n.saltCalendarDay:focus-visible {\n outline: none;\n z-index: var(--calendar-day-zIndex-content);\n}\n\n.saltCalendarDay-focused:focus-visible::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-focused-outlineWidth) * -1);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected .saltCalendarDay-content,\n.saltCalendarDay-selected:hover .saltCalendarDay-content,\n.saltCalendarDay-selectedStart .saltCalendarDay-content,\n.saltCalendarDay-hoveredStart .saltCalendarDay-content,\n.saltCalendarDay-selectedSpan .saltCalendarDay-content,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-content,\n.saltCalendarDay-selectedEnd .saltCalendarDay-content,\n.saltCalendarDay-hoveredEnd .saltCalendarDay-content {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,\n.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: calc(var(--calendar-gap) * -1);\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-selectedEnd::before {\n content: \"\";\n position: absolute;\n box-sizing: border-box;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart::before,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart,\n.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),\n.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,\n.saltCalendarDay-selectedSameDay,\n.saltCalendarDay-selectedSameDay::before {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Single selection styles */\n\n.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-single .saltCalendarDay-selected::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-selected);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n/** Range selection styles */\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {\n outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,\n.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,\n.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {\n border-radius: 0;\n}\n\n.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--calendar-gap) * -1);\n right: 0;\n bottom: 0;\n background: var(--salt-selectable-background-hover);\n border-radius: 0;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n}\n\n/** Offset range styles */\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),\n.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),\n.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart {\n border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,\n.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {\n border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,\n.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {\n border-radius: 0;\n}\n\n.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n color: var(--salt-content-primary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {\n border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {\n background: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted {\n position: absolute;\n left: 0;\n right: -1px;\n height: 100%;\n overflow: hidden;\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted {\n right: 0;\n}\n\n.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {\n right: 1px;\n}\n\n.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,\n.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,\n.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {\n border-radius: 0;\n}\n\n.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {\n border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-highlighted::after {\n content: \"\";\n top: 0;\n right: 0;\n box-sizing: border-box;\n height: var(--calendar-day-highlight-size); /* TODO: change for size-modifier when available */\n width: var(--calendar-day-highlight-size);\n background: var(--salt-sentiment-accent-background);\n position: absolute;\n clip-path: polygon(100% 0, 100% 100%, 0 0);\n z-index: var(--calendar-day-zIndex-highlight);\n}\n.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {\n border: var(--salt-focused-outline);\n}\n\n.saltCalendarDay-unselectable::after {\n content: \"\";\n height: var(--salt-size-fixed-100);\n width: calc(100% - var(--salt-spacing-100));\n background: var(--salt-content-secondary-foreground);\n position: absolute;\n}\n\n.saltCalendarDay-today > span:last-of-type::after {\n content: \"\";\n display: block;\n width: calc(100% - calc(var(--salt-spacing-50) * 2));\n height: var(--salt-size-indicator);\n background: var(--salt-sentiment-accent-borderColor);\n border-radius: var(--salt-palette-corner-weak);\n position: absolute;\n bottom: var(--salt-spacing-50);\n left: var(--salt-spacing-50);\n right: var(--salt-spacing-50);\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CalendarDay.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n align-items: center;\n background: var(--saltDateInput-background, var(--input-background));\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--salt-text-letterSpacing);\n height: var(--saltDateInput-height, var(--salt-size-base));\n min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n min-width: var(--saltDateInput-minWidth, 4em);\n padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\n\n.saltDateInput:hover {\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltDateInput-tertiary {\n --input-background: var(--salt-editable-tertiary-background);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n --input-background: var(--salt-status-error-background);\n --input-background-readonly: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-borderColor-active: var(--salt-status-error-borderColor);\n --input-borderColor-hover: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n --input-background: var(--salt-status-warning-background);\n --input-background-readonly: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-borderColor-active: var(--salt-status-warning-borderColor);\n --input-borderColor-hover: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n --input-background: var(--salt-status-success-background);\n --input-background-readonly: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-borderColor-active: var(--salt-status-success-borderColor);\n --input-borderColor-hover: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n cursor: var(--salt-cursor-text);\n outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n background: var(--input-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n background: var(--input-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n display: inline-flex;\n column-gap: var(--salt-spacing-50);\n align-items: flex-end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltDateInput-letterSpacing,
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n align-items: center;\n background: var(--saltDateInput-background, var(--input-background));\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--salt-text-letterSpacing);\n height: var(--saltDateInput-height, var(--salt-size-base));\n min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n min-width: var(--saltDateInput-minWidth, 4em);\n padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n width: 100%;\n}\n\n.saltDateInput:hover {\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltDateInput-tertiary {\n --input-background: var(--salt-editable-tertiary-background);\n --input-background-readonly: var(--salt-editable-background-readonly);\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderColor-active: var(--salt-editable-borderColor-active);\n --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n --input-background: var(--salt-status-error-background);\n --input-background-readonly: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-borderColor-active: var(--salt-status-error-borderColor);\n --input-borderColor-hover: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n --input-background: var(--salt-status-warning-background);\n --input-background-readonly: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-borderColor-active: var(--salt-status-warning-borderColor);\n --input-borderColor-hover: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n --input-background: var(--salt-status-success-background);\n --input-background-readonly: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-borderColor-active: var(--salt-status-success-borderColor);\n --input-borderColor-hover: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n cursor: var(--salt-cursor-text);\n outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n background: var(--input-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n background: var(--input-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n display: inline-flex;\n column-gap: var(--salt-spacing-50);\n align-items: flex-end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltDateInput-letterSpacing, var(--salt-text-letterSpacing));\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: left;\n width: 100%;\n}\n\n/* Reset in the class */\n.saltDateInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n background: none;\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Style applied to the dash between two inputs in range date input */\n.saltDateInput-dash {\n margin: 0 var(--salt-spacing-50);\n}\n\n/* Visually hidden but still announced by screen readers */\n.saltDateInput-visuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=DateInput.css.js.map
|