@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
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,93 @@
|
|
|
1
1
|
# @salt-ds/date-components
|
|
2
2
|
|
|
3
|
+
## 1.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- e466542: `DateParserField` is now a const object with a matching union type instead of an enum. `DateParserField.START` and `DateParserField.END` work as before, as values and as types, and `"start"` or `"end"` can now be used wherever a `DateParserField` is expected.
|
|
8
|
+
- 825f63d: Renamed the `small` and `strong` font weight tokens to `lighter` and `bolder`, to match the new `fontWeight` prop on `Text`. The old tokens still work as aliases but are deprecated and will be removed in a future major version. Salt components now use the new tokens, so if you override an old token, override the new one instead.
|
|
9
|
+
|
|
10
|
+
```diff
|
|
11
|
+
- font-weight: var(--salt-text-fontWeight-strong);
|
|
12
|
+
+ font-weight: var(--salt-text-fontWeight-bolder);
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
| Deprecated token | Use instead |
|
|
16
|
+
| ---------------------------------------- | ----------------------------------------- |
|
|
17
|
+
| `--salt-text-fontWeight-small` | `--salt-text-fontWeight-lighter` |
|
|
18
|
+
| `--salt-text-fontWeight-strong` | `--salt-text-fontWeight-bolder` |
|
|
19
|
+
| `--salt-text-action-fontWeight-small` | `--salt-text-action-fontWeight-lighter` |
|
|
20
|
+
| `--salt-text-action-fontWeight-strong` | `--salt-text-action-fontWeight-bolder` |
|
|
21
|
+
| `--salt-text-display-fontWeight-small` | `--salt-text-display-fontWeight-lighter` |
|
|
22
|
+
| `--salt-text-display-fontWeight-strong` | `--salt-text-display-fontWeight-bolder` |
|
|
23
|
+
| `--salt-text-heading-fontWeight-small` | `--salt-text-heading-fontWeight-lighter` |
|
|
24
|
+
| `--salt-text-heading-fontWeight-strong` | `--salt-text-heading-fontWeight-bolder` |
|
|
25
|
+
| `--salt-text-label-fontWeight-small` | `--salt-text-label-fontWeight-lighter` |
|
|
26
|
+
| `--salt-text-label-fontWeight-strong` | `--salt-text-label-fontWeight-bolder` |
|
|
27
|
+
| `--salt-text-notation-fontWeight-small` | `--salt-text-notation-fontWeight-lighter` |
|
|
28
|
+
| `--salt-text-notation-fontWeight-strong` | `--salt-text-notation-fontWeight-bolder` |
|
|
29
|
+
|
|
30
|
+
The deprecated `--salt-text-h{1-4}-fontWeight-small`, `--salt-text-h{1-4}-fontWeight-strong`, `--salt-text-display{1-4}-fontWeight-small` and `--salt-text-display{1-4}-fontWeight-strong` tokens now alias the new tokens.
|
|
31
|
+
|
|
32
|
+
The `small` and `strong` font weight tokens have been removed from the experimental Salt (Interim) theme without aliases. If you use the interim theme and reference them, switch to the matching `lighter` and `bolder` tokens in the table above.
|
|
33
|
+
|
|
34
|
+
See [font weight](https://www.saltdesignsystem.com/salt/foundations/typography#font-weight) for how each text style uses these weights.
|
|
35
|
+
|
|
36
|
+
- 55f27de: The calendar, date input and date picker components now show their names in React DevTools instead of being anonymous.
|
|
37
|
+
- Updated dependencies [fd5ae98]
|
|
38
|
+
- Updated dependencies [4f1b504]
|
|
39
|
+
- Updated dependencies [75f2d7d]
|
|
40
|
+
- Updated dependencies [61228a7]
|
|
41
|
+
- Updated dependencies [f8925a2]
|
|
42
|
+
- Updated dependencies [825f63d]
|
|
43
|
+
- Updated dependencies [4aa4585]
|
|
44
|
+
- Updated dependencies [55f27de]
|
|
45
|
+
- Updated dependencies [602ddb5]
|
|
46
|
+
- Updated dependencies [fd1bf44]
|
|
47
|
+
- Updated dependencies [75f2d7d]
|
|
48
|
+
- Updated dependencies [7182ee8]
|
|
49
|
+
- Updated dependencies [7182ee8]
|
|
50
|
+
- Updated dependencies [825f63d]
|
|
51
|
+
- Updated dependencies [825f63d]
|
|
52
|
+
- Updated dependencies [825f63d]
|
|
53
|
+
- Updated dependencies [825f63d]
|
|
54
|
+
- Updated dependencies [cb2e335]
|
|
55
|
+
- @salt-ds/core@1.73.0
|
|
56
|
+
- @salt-ds/styles@0.4.2
|
|
57
|
+
- @salt-ds/icons@1.18.4
|
|
58
|
+
|
|
59
|
+
## 1.1.1
|
|
60
|
+
|
|
61
|
+
### Patch Changes
|
|
62
|
+
|
|
63
|
+
- d578674: Applied typography letter spacing tokens consistently to text-owning components and inherited typography roots, and applied the display text transform token to display text.
|
|
64
|
+
- e990c46: Simplified the disabled appearance of `Calendar` days for a more consistent look across Salt components.
|
|
65
|
+
- Updated dependencies [ff312fb]
|
|
66
|
+
- Updated dependencies [d578674]
|
|
67
|
+
- Updated dependencies [24b5b04]
|
|
68
|
+
- Updated dependencies [83d7f9c]
|
|
69
|
+
- Updated dependencies [f9f5198]
|
|
70
|
+
- Updated dependencies [fbe1e48]
|
|
71
|
+
- Updated dependencies [394af0d]
|
|
72
|
+
- Updated dependencies [d578674]
|
|
73
|
+
- Updated dependencies [d578674]
|
|
74
|
+
- Updated dependencies [8e59c5d]
|
|
75
|
+
- Updated dependencies [cf3afb3]
|
|
76
|
+
- Updated dependencies [0b65f84]
|
|
77
|
+
- Updated dependencies [8e59c5d]
|
|
78
|
+
- Updated dependencies [8e59c5d]
|
|
79
|
+
- Updated dependencies [b434b9e]
|
|
80
|
+
- Updated dependencies [e75a32d]
|
|
81
|
+
- Updated dependencies [59a14d2]
|
|
82
|
+
- Updated dependencies [e990c46]
|
|
83
|
+
- Updated dependencies [550c4c1]
|
|
84
|
+
- Updated dependencies [8e59c5d]
|
|
85
|
+
- Updated dependencies [2a5cb0d]
|
|
86
|
+
- @salt-ds/core@1.72.0
|
|
87
|
+
- @salt-ds/styles@0.4.1
|
|
88
|
+
- @salt-ds/window@0.1.2
|
|
89
|
+
- @salt-ds/icons@1.18.3
|
|
90
|
+
|
|
3
91
|
## 1.1.0
|
|
4
92
|
|
|
5
93
|
### Minor Changes
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
font-weight: var(--salt-text-fontWeight);
|
|
66
66
|
font-size: var(--salt-text-fontSize);
|
|
67
67
|
line-height: var(--salt-text-lineHeight);
|
|
68
|
+
letter-spacing: var(--salt-text-letterSpacing);
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
/* src/date-input/DateInput.css */
|
|
@@ -243,7 +244,7 @@
|
|
|
243
244
|
display: block;
|
|
244
245
|
font: inherit;
|
|
245
246
|
height: 100%;
|
|
246
|
-
letter-spacing: var(--saltDateInput-letterSpacing,
|
|
247
|
+
letter-spacing: var(--saltDateInput-letterSpacing, var(--salt-text-letterSpacing));
|
|
247
248
|
margin: 0;
|
|
248
249
|
min-width: 0;
|
|
249
250
|
overflow: hidden;
|
|
@@ -259,7 +260,7 @@
|
|
|
259
260
|
}
|
|
260
261
|
.saltDateInput-input::placeholder {
|
|
261
262
|
color: var(--salt-content-secondary-foreground);
|
|
262
|
-
font-weight: var(--salt-text-fontWeight-
|
|
263
|
+
font-weight: var(--salt-text-fontWeight-lighter);
|
|
263
264
|
}
|
|
264
265
|
.saltDateInput-dash {
|
|
265
266
|
margin: 0 var(--salt-spacing-50);
|
|
@@ -355,6 +356,7 @@
|
|
|
355
356
|
font-weight: var(--salt-text-fontWeight);
|
|
356
357
|
line-height: var(--salt-text-lineHeight);
|
|
357
358
|
font-size: var(--salt-text-fontSize);
|
|
359
|
+
letter-spacing: var(--salt-text-letterSpacing);
|
|
358
360
|
width: var(--salt-size-base);
|
|
359
361
|
height: var(--salt-size-base);
|
|
360
362
|
color: var(--salt-content-primary-foreground);
|
|
@@ -549,7 +551,7 @@
|
|
|
549
551
|
}
|
|
550
552
|
.saltCalendarDay-unselectable,
|
|
551
553
|
.saltCalendarDay-unselectable:hover {
|
|
552
|
-
background: var(--salt-selectable-background
|
|
554
|
+
background: var(--salt-selectable-background);
|
|
553
555
|
cursor: var(--salt-cursor-disabled);
|
|
554
556
|
}
|
|
555
557
|
.saltCalendarDay-highlighted {
|
|
@@ -640,4 +642,4 @@
|
|
|
640
642
|
box-sizing: border-box;
|
|
641
643
|
}
|
|
642
644
|
|
|
643
|
-
/* src/
|
|
645
|
+
/* src/611fa1e5-d068-498d-9f29-118c26cfc712.css */
|
|
@@ -26,7 +26,7 @@ function getStartOrEndDate(dateRange, isMultiselect2) {
|
|
|
26
26
|
}
|
|
27
27
|
let warnedOnce = false;
|
|
28
28
|
const Calendar = react.forwardRef(
|
|
29
|
-
(props, ref)
|
|
29
|
+
function Calendar2(props, ref) {
|
|
30
30
|
const targetWindow = window.useWindow();
|
|
31
31
|
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
32
32
|
styles.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":["makePrefixer","isMultiselect","forwardRef","useWindow","useLocalization","useComponentCssInjection","calendarCss","useRef","useCalendar","jsx","CalendarContext","clsx"],"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":["makePrefixer","isMultiselect","forwardRef","Calendar","useWindow","useLocalization","useComponentCssInjection","calendarCss","useRef","useCalendar","jsx","CalendarContext","clsx"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ var CalendarContext = require('./internal/CalendarContext.js');
|
|
|
10
10
|
var CalendarMonth = require('./internal/CalendarMonth.js');
|
|
11
11
|
|
|
12
12
|
const CalendarGrid = react.forwardRef(
|
|
13
|
-
(props, ref)
|
|
13
|
+
function CalendarGrid2(props, ref) {
|
|
14
14
|
const {
|
|
15
15
|
CalendarDayProps,
|
|
16
16
|
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":["forwardRef","CalendarGrid","useLocalization","useCalendarContext","useRef","useForkRef","useMemo","jsx","GridLayout","jsxs","GridItem","CalendarMonthHeader","CalendarWeekHeader","CalendarMonth"],"mappings":";;;;;;;;;;;AAgDO,MAAM,YAAA,GAAeA,gBAAA;AAAA,EAC1B,SAASC,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,GAAIC,oCAAA,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/CC,kCAAA,EAAmB;AACvB,IAAA,MAAM,eAAA,GAAkBC,aAAuB,IAAI,CAAA;AACnD,IAAA,MAAM,YAAA,GAAeC,eAAA,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,GAAgBC,aAAA;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,uBACEC,cAAA;AAAA,MAACC,eAAA;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,qBAClBC,eAAA;AAAA,UAACC,aAAA;AAAA,UAAA;AAAA,YAGE,QAAA,EAAA;AAAA,cAAA,qBAAA,GAAwB,CAAA,mBACvBH,cAAA;AAAA,gBAACI,uCAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,wBAAA;AAAA,kBACJ,KAAA,EAAO;AAAA;AAAA,eACT,GACE,IAAA;AAAA,8BACJJ,cAAA,CAACK,qCAAA,EAAA,EAAoB,GAAG,uBAAA,EAAyB,CAAA;AAAA,8BACjDL,cAAA;AAAA,gBAACM,2BAAA;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;;;;"}
|
|
@@ -10,7 +10,7 @@ var LocalizationProvider = require('../localization-provider/LocalizationProvide
|
|
|
10
10
|
var CalendarMonthHeader$1 = require('./CalendarMonthHeader.css.js');
|
|
11
11
|
|
|
12
12
|
const withBaseName = core.makePrefixer("saltCalendarMonthHeader");
|
|
13
|
-
const CalendarMonthHeader = react.forwardRef((props, ref)
|
|
13
|
+
const CalendarMonthHeader = react.forwardRef(function CalendarMonthHeader2(props, ref) {
|
|
14
14
|
const { className, format: formatMonthProp = "MMMM", month, ...rest } = props;
|
|
15
15
|
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
16
16
|
const targetWindow = window.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":["makePrefixer","forwardRef","CalendarMonthHeader","useLocalization","useWindow","useComponentCssInjection","calendarMonthHeaderCss","useCallback","jsx","clsx","Text"],"mappings":";;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA;AAEpD,MAAM,mBAAA,GAAsBC,gBAAA,CAGjC,SAASC,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,GAAIC,oCAAA,EAAgB;AAExC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,qBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAcC,iBAAA;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,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,qBAAA;AAAA,MACZ,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAACE,SAAA,EAAA,EAAM,QAAA,EAAA,WAAA,CAAY,KAAK,CAAA,EAAE;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}
|
|
@@ -155,7 +155,7 @@ function OptionWithTooltip({
|
|
|
155
155
|
}
|
|
156
156
|
);
|
|
157
157
|
}
|
|
158
|
-
const CalendarNavigation = react.forwardRef((props, ref)
|
|
158
|
+
const CalendarNavigation = react.forwardRef(function CalendarNavigation2(props, ref) {
|
|
159
159
|
const {
|
|
160
160
|
className,
|
|
161
161
|
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":["makePrefixer","jsx","Tooltip","useCalendarContext","useLocalization","useCallback","generateMonthsForYear","monthDiff","useMemo","useListControlContext","Option","forwardRef","useWindow","useComponentCssInjection","calendarNavigationCss","useIcon","jsxs","clsx","Button","Dropdown"],"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":["makePrefixer","jsx","Tooltip","useCalendarContext","useLocalization","useCallback","generateMonthsForYear","monthDiff","useMemo","useListControlContext","Option","forwardRef","CalendarNavigation","useWindow","useComponentCssInjection","calendarNavigationCss","useIcon","jsxs","clsx","Button","Dropdown"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
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";
|
|
3
|
+
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";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CalendarWeekHeader.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
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";
|
|
3
|
+
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";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CalendarDay.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
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,
|
|
3
|
+
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";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=DateInput.css.js.map
|
|
@@ -10,13 +10,12 @@ var LocalizationProvider = require('../localization-provider/LocalizationProvide
|
|
|
10
10
|
var DateInput = require('./DateInput.css.js');
|
|
11
11
|
|
|
12
12
|
const withBaseName = core.makePrefixer("saltDateInput");
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
})(DateParserField || {});
|
|
13
|
+
const DateParserField = {
|
|
14
|
+
START: "start",
|
|
15
|
+
END: "end"
|
|
16
|
+
};
|
|
18
17
|
const DateInputRange = react.forwardRef(
|
|
19
|
-
(props, ref)
|
|
18
|
+
function DateInputRange2(props, ref) {
|
|
20
19
|
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
21
20
|
const {
|
|
22
21
|
"aria-label": ariaLabel,
|
|
@@ -88,8 +87,8 @@ const DateInputRange = react.forwardRef(
|
|
|
88
87
|
if (!defaultValue) {
|
|
89
88
|
return void 0;
|
|
90
89
|
}
|
|
91
|
-
const { date: startDate = void 0 } = parseDateValue(defaultValue == null ? void 0 : defaultValue.startDate,
|
|
92
|
-
const { date: endDate = void 0 } = parseDateValue(defaultValue == null ? void 0 : defaultValue.endDate,
|
|
90
|
+
const { date: startDate = void 0 } = parseDateValue(defaultValue == null ? void 0 : defaultValue.startDate, DateParserField.START) ?? {};
|
|
91
|
+
const { date: endDate = void 0 } = parseDateValue(defaultValue == null ? void 0 : defaultValue.endDate, DateParserField.END) ?? {};
|
|
93
92
|
return {
|
|
94
93
|
startDate,
|
|
95
94
|
endDate
|
|
@@ -206,8 +205,8 @@ const DateInputRange = react.forwardRef(
|
|
|
206
205
|
const endInputIsRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : endInputPropsRequired;
|
|
207
206
|
const apply = (event) => {
|
|
208
207
|
var _a, _b;
|
|
209
|
-
const { date: startDate = void 0, ...startDateParseDetails } = parseDateValue(dateValue == null ? void 0 : dateValue.startDate,
|
|
210
|
-
const { date: endDate = void 0, ...endDateParseDetails } = parseDateValue(dateValue == null ? void 0 : dateValue.endDate,
|
|
208
|
+
const { date: startDate = void 0, ...startDateParseDetails } = parseDateValue(dateValue == null ? void 0 : dateValue.startDate, DateParserField.START) ?? {};
|
|
209
|
+
const { date: endDate = void 0, ...endDateParseDetails } = parseDateValue(dateValue == null ? void 0 : dateValue.endDate, DateParserField.END) ?? {};
|
|
211
210
|
const updatedDateRange = {
|
|
212
211
|
startDate: ((_a = dateValue == null ? void 0 : dateValue.startDate) == null ? void 0 : _a.length) ? startDate : null,
|
|
213
212
|
endDate: ((_b = dateValue == null ? void 0 : dateValue.endDate) == null ? void 0 : _b.length) ? endDate : null
|