@react-spectrum/s2 0.10.0 → 0.11.0
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/dist/Accordion.cjs +2 -2
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +2 -2
- package/dist/ActionBar.cjs +62 -62
- package/dist/ActionBar.css +61 -61
- package/dist/ActionBar.mjs +62 -62
- package/dist/ActionButton.cjs +202 -202
- package/dist/ActionButton.css +138 -138
- package/dist/ActionButton.mjs +202 -202
- package/dist/ActionButtonGroup.cjs +15 -15
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +15 -15
- package/dist/Add.cjs +10 -10
- package/dist/Add.css +6 -6
- package/dist/Add.mjs +10 -10
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Asterisk.cjs +6 -6
- package/dist/Asterisk.css +4 -4
- package/dist/Asterisk.mjs +6 -6
- package/dist/Avatar.cjs +14 -14
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +14 -14
- package/dist/AvatarGroup.cjs +134 -134
- package/dist/AvatarGroup.css +33 -33
- package/dist/AvatarGroup.mjs +134 -134
- package/dist/Badge.cjs +206 -206
- package/dist/Badge.css +127 -127
- package/dist/Badge.mjs +206 -206
- package/dist/Breadcrumbs.cjs +254 -254
- package/dist/Breadcrumbs.css +109 -109
- package/dist/Breadcrumbs.mjs +254 -254
- package/dist/Button.cjs +341 -341
- package/dist/Button.css +177 -177
- package/dist/Button.mjs +341 -341
- package/dist/ButtonGroup.cjs +20 -20
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +20 -20
- package/dist/Calendar.cjs +151 -139
- package/dist/Calendar.cjs.map +1 -1
- package/dist/Calendar.css +134 -134
- package/dist/Calendar.css.map +1 -1
- package/dist/Calendar.mjs +153 -141
- package/dist/Calendar.mjs.map +1 -1
- package/dist/Card.cjs +304 -304
- package/dist/Card.css +209 -209
- package/dist/Card.mjs +304 -304
- package/dist/CardView.cjs +16 -16
- package/dist/CardView.css +16 -16
- package/dist/CardView.mjs +16 -16
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +170 -170
- package/dist/Checkbox.css +92 -92
- package/dist/Checkbox.mjs +170 -170
- package/dist/CheckboxGroup.cjs +45 -45
- package/dist/CheckboxGroup.css +38 -38
- package/dist/CheckboxGroup.mjs +45 -45
- package/dist/Checkmark.cjs +12 -12
- package/dist/Checkmark.css +8 -8
- package/dist/Checkmark.mjs +12 -12
- package/dist/Chevron.cjs +12 -12
- package/dist/Chevron.css +10 -10
- package/dist/Chevron.mjs +12 -12
- package/dist/ClearButton.cjs +29 -29
- package/dist/ClearButton.css +29 -29
- package/dist/ClearButton.mjs +29 -29
- package/dist/CloseButton.cjs +54 -54
- package/dist/CloseButton.css +46 -46
- package/dist/CloseButton.mjs +54 -54
- package/dist/ColorArea.cjs +16 -16
- package/dist/ColorArea.css +16 -16
- package/dist/ColorArea.mjs +16 -16
- package/dist/ColorField.cjs +32 -32
- package/dist/ColorField.css +28 -28
- package/dist/ColorField.mjs +32 -32
- package/dist/ColorHandle.cjs +27 -27
- package/dist/ColorHandle.css +42 -42
- package/dist/ColorHandle.mjs +27 -27
- package/dist/ColorSlider.cjs +118 -118
- package/dist/ColorSlider.css +54 -54
- package/dist/ColorSlider.mjs +118 -118
- package/dist/ColorSwatch.cjs +29 -29
- package/dist/ColorSwatch.css +29 -29
- package/dist/ColorSwatch.mjs +29 -29
- package/dist/ColorSwatchPicker.cjs +27 -27
- package/dist/ColorSwatchPicker.css +46 -46
- package/dist/ColorSwatchPicker.mjs +27 -27
- package/dist/ColorWheel.cjs +26 -26
- package/dist/ColorWheel.css +17 -17
- package/dist/ColorWheel.mjs +26 -26
- package/dist/ComboBox.cjs +415 -400
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +181 -181
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +415 -400
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +60 -60
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/Cross.cjs +14 -14
- package/dist/Cross.css +10 -10
- package/dist/Cross.mjs +14 -14
- package/dist/CustomDialog.cjs +25 -25
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +25 -25
- package/dist/Dash.cjs +10 -10
- package/dist/Dash.css +6 -6
- package/dist/Dash.mjs +10 -10
- package/dist/DateField.cjs +73 -73
- package/dist/DateField.css +77 -77
- package/dist/DateField.mjs +73 -73
- package/dist/DatePicker.cjs +182 -185
- package/dist/DatePicker.cjs.map +1 -1
- package/dist/DatePicker.css +126 -126
- package/dist/DatePicker.css.map +1 -1
- package/dist/DatePicker.mjs +182 -185
- package/dist/DatePicker.mjs.map +1 -1
- package/dist/DateRangePicker.cjs +58 -61
- package/dist/DateRangePicker.cjs.map +1 -1
- package/dist/DateRangePicker.css +60 -60
- package/dist/DateRangePicker.css.map +1 -1
- package/dist/DateRangePicker.mjs +58 -61
- package/dist/DateRangePicker.mjs.map +1 -1
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +82 -82
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +135 -135
- package/dist/Disclosure.css +106 -106
- package/dist/Disclosure.mjs +135 -135
- package/dist/Divider.cjs +25 -25
- package/dist/Divider.css +25 -25
- package/dist/Divider.mjs +25 -25
- package/dist/DropZone.cjs +62 -62
- package/dist/DropZone.css +58 -58
- package/dist/DropZone.mjs +62 -62
- package/dist/Field.cjs +370 -370
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +142 -142
- package/dist/Field.mjs +370 -370
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +9 -9
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +9 -9
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +91 -91
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +256 -256
- package/dist/IllustratedMessage.css +78 -78
- package/dist/IllustratedMessage.mjs +256 -256
- package/dist/Image.cjs +13 -13
- package/dist/Image.css +14 -14
- package/dist/Image.mjs +13 -13
- package/dist/InlineAlert.cjs +117 -117
- package/dist/InlineAlert.css +98 -98
- package/dist/InlineAlert.mjs +117 -117
- package/dist/Link.cjs +54 -54
- package/dist/Link.css +46 -46
- package/dist/Link.mjs +54 -54
- package/dist/LinkOut.cjs +8 -8
- package/dist/LinkOut.css +8 -8
- package/dist/LinkOut.mjs +8 -8
- package/dist/Menu.cjs +459 -459
- package/dist/Menu.css +185 -185
- package/dist/Menu.mjs +459 -459
- package/dist/Meter.cjs +163 -163
- package/dist/Meter.css +93 -93
- package/dist/Meter.mjs +163 -163
- package/dist/Modal.cjs +58 -58
- package/dist/Modal.css +50 -50
- package/dist/Modal.mjs +58 -58
- package/dist/NotificationBadge.cjs +58 -58
- package/dist/NotificationBadge.css +51 -51
- package/dist/NotificationBadge.mjs +58 -58
- package/dist/NumberField.cjs +115 -115
- package/dist/NumberField.css +100 -100
- package/dist/NumberField.mjs +115 -115
- package/dist/Picker.cjs +283 -283
- package/dist/Picker.css +169 -169
- package/dist/Picker.mjs +283 -283
- package/dist/Popover.cjs +86 -86
- package/dist/Popover.css +66 -66
- package/dist/Popover.mjs +86 -86
- package/dist/ProgressBar.cjs +173 -173
- package/dist/ProgressBar.css +101 -101
- package/dist/ProgressBar.mjs +173 -173
- package/dist/ProgressCircle.cjs +31 -31
- package/dist/ProgressCircle.css +24 -24
- package/dist/ProgressCircle.mjs +31 -31
- package/dist/Provider.cjs +11 -11
- package/dist/Provider.css +10 -10
- package/dist/Provider.mjs +11 -11
- package/dist/Radio.cjs +154 -154
- package/dist/Radio.css +79 -79
- package/dist/Radio.mjs +154 -154
- package/dist/RadioGroup.cjs +42 -42
- package/dist/RadioGroup.css +38 -38
- package/dist/RadioGroup.mjs +42 -42
- package/dist/RangeCalendar.cjs +32 -20
- package/dist/RangeCalendar.cjs.map +1 -1
- package/dist/RangeCalendar.css +10 -10
- package/dist/RangeCalendar.css.map +1 -1
- package/dist/RangeCalendar.mjs +34 -22
- package/dist/RangeCalendar.mjs.map +1 -1
- package/dist/SearchField.cjs +42 -42
- package/dist/SearchField.css +46 -46
- package/dist/SearchField.mjs +42 -42
- package/dist/SegmentedControl.cjs +181 -181
- package/dist/SegmentedControl.css +118 -118
- package/dist/SegmentedControl.mjs +181 -181
- package/dist/SelectBoxGroup.cjs +342 -0
- package/dist/SelectBoxGroup.cjs.map +1 -0
- package/dist/SelectBoxGroup.css +503 -0
- package/dist/SelectBoxGroup.css.map +1 -0
- package/dist/SelectBoxGroup.mjs +335 -0
- package/dist/SelectBoxGroup.mjs.map +1 -0
- package/dist/SkeletonCollection.cjs +6 -1
- package/dist/SkeletonCollection.cjs.map +1 -1
- package/dist/SkeletonCollection.mjs +7 -2
- package/dist/SkeletonCollection.mjs.map +1 -1
- package/dist/Slider.cjs +299 -299
- package/dist/Slider.css +151 -151
- package/dist/Slider.mjs +299 -299
- package/dist/StatusLight.cjs +125 -125
- package/dist/StatusLight.css +61 -61
- package/dist/StatusLight.mjs +125 -125
- package/dist/Switch.cjs +162 -162
- package/dist/Switch.css +74 -74
- package/dist/Switch.mjs +162 -162
- package/dist/TableView.cjs +319 -319
- package/dist/TableView.css +172 -172
- package/dist/TableView.mjs +319 -319
- package/dist/Tabs.cjs +213 -188
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +105 -101
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +213 -188
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +127 -127
- package/dist/TabsPicker.css +111 -111
- package/dist/TabsPicker.mjs +127 -127
- package/dist/TagGroup.cjs +213 -213
- package/dist/TagGroup.css +147 -147
- package/dist/TagGroup.mjs +213 -213
- package/dist/TextField.cjs +59 -59
- package/dist/TextField.css +54 -54
- package/dist/TextField.mjs +59 -59
- package/dist/TimeField.cjs +52 -52
- package/dist/TimeField.css +48 -48
- package/dist/TimeField.mjs +52 -52
- package/dist/Toast.cjs +120 -120
- package/dist/Toast.css +107 -107
- package/dist/Toast.mjs +120 -120
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +83 -83
- package/dist/Tooltip.css +70 -70
- package/dist/Tooltip.mjs +83 -83
- package/dist/TreeView.cjs +146 -146
- package/dist/TreeView.css +147 -147
- package/dist/TreeView.mjs +146 -146
- package/dist/main.cjs +5 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +43 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Icon.cjs +10 -10
- package/icons/Icon.css +9 -9
- package/icons/Icon.mjs +10 -10
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.mjs +2 -2
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +21 -21
- package/src/Calendar.tsx +13 -6
- package/src/ComboBox.tsx +20 -5
- package/src/DatePicker.tsx +1 -7
- package/src/DateRangePicker.tsx +1 -7
- package/src/RangeCalendar.tsx +13 -6
- package/src/SelectBoxGroup.tsx +408 -0
- package/src/SkeletonCollection.tsx +6 -2
- package/src/Tabs.tsx +49 -24
- package/src/index.ts +2 -0
- package/style/__tests__/style-macro.test.js +162 -166
- package/style/dist/main.cjs +24 -24
- package/style/dist/module.mjs +13 -13
- package/style/dist/properties.mjs +3 -3
- package/style/dist/spectrum-theme.cjs +219 -219
- package/style/dist/spectrum-theme.mjs +210 -210
- package/style/dist/style-macro.cjs +80 -80
- package/style/dist/style-macro.mjs +75 -75
package/dist/Calendar.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACoEuB;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqDH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BR;;;;EAAA;;;;EAAA;;;;EAkEa;;;;EACA;;;;EAAA;;;;EAetB;;;;EAAA;;;;EAAA;;;;EA8ES;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxZG;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CD;;;;EAAA;;;;;AAtDJ;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CD;;;;;AAtDJ;EASK;;;;EAAA;;;;EAAA;;;;EA6CD;;;;;AAtDJ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAsDI;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkHI;;;;IAAA","sources":["2295035483c3fe80","packages/@react-spectrum/s2/src/Calendar.tsx"],"sourcesContent":["@import \"a4515f5bffb5f062\";\n@import \"92a594e88a8aef1b\";\n@import \"690c8ff771746c3e\";\n@import \"61eae6535d6fcdf4\";\n@import \"45a026ed74f55e85\";\n@import \"948f79e4cbbbc206\";\n@import \"6fbf78b81e66a464\";\n@import \"98b3aa52e9389b9d\";\n@import \"b5160d992ac49c4a\";\n@import \"84221aa63b6aa322\";\n@import \"898fc73cd9eb6ae4\";\n@import \"b3de9a7ca57d6dcd\";\n@import \"630d2c7b496b99dc\";\n@import \"4ba51db32e5676ac\";\n@import \"956185cd03a3f917\";\n@import \"b1221915ab95cea2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, Header, Heading, pressScale} from './';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarGrid as AriaCalendarGrid,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarProps as AriaCalendarProps,\n ButtonProps,\n CalendarCellProps,\n CalendarCellRenderProps,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCellProps,\n CalendarState,\n CalendarStateContext,\n ContextValue,\n DateValue,\n RangeCalendarState,\n RangeCalendarStateContext,\n Text\n} from 'react-aria-components';\nimport {AriaCalendarGridProps} from '@react-aria/calendar';\nimport {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n CalendarDate,\n getDayOfWeek,\n startOfMonth\n} from '@internationalized/date';\nimport ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';\nimport ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {helpTextStyles} from './Field';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface CalendarProps<T extends DateValue>\n extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,\n StyleProps {\n /**\n * The error message to display when the calendar is invalid.\n */\n errorMessage?: ReactNode,\n /**\n * The number of months to display at once.\n * @default 1\n */\n visibleMonths?: number\n}\n\nexport const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);\n\nconst calendarStyles = style({\n display: 'flex',\n flexDirection: 'column',\n gap: 24,\n width: 'fit',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst headerStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: 'full'\n});\n\nconst headingStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n margin: 0,\n width: 'full'\n});\n\nconst titleStyles = style({\n font: 'title-lg',\n textAlign: 'center',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: '0%',\n minWidth: 0\n});\n\nconst headerCellStyles = style({\n font: 'title-sm',\n cursor: 'default',\n textAlign: 'center',\n paddingStart: {\n default: 4,\n ':first-child': 0\n },\n paddingEnd: {\n default: 4,\n ':last-child': 0\n },\n paddingBottom: 12\n});\n\nconst cellStyles = style({\n outlineStyle: 'none',\n '--cell-gap': {\n type: 'paddingStart',\n value: 4\n },\n paddingStart: {\n default: 4,\n isFirstChild: 0\n },\n paddingEnd: {\n default: 4,\n isLastChild: 0\n },\n paddingTop: {\n default: 2,\n isFirstWeek: 0\n },\n paddingBottom: 2,\n position: 'relative',\n width: 32,\n height: 32,\n display: {\n default: 'flex',\n isOutsideMonth: 'none'\n },\n alignItems: 'center',\n justifyContent: 'center'\n});\n\nconst cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({\n ...focusRing(),\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n outlineOffset: {\n default: -2,\n isToday: 2,\n isSelected: {\n selectionMode: {\n single: 2,\n range: -2\n }\n },\n isSelectionStart: 2,\n isSelectionEnd: 2\n },\n position: 'relative',\n font: 'body-sm',\n cursor: 'default',\n width: 'full',\n height: 32,\n borderRadius: 'full',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isDisabled: 'transparent',\n isToday: {\n default: baseColor('gray-300'),\n isDisabled: 'disabled'\n },\n isSelected: {\n selectionMode: {\n single: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600'),\n isDisabled: 'transparent'\n },\n range: {\n isHovered: 'blue-500'\n }\n }\n },\n isSelectionStart: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isSelectionEnd: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isUnavailable: 'transparent',\n forcedColors: {\n default: 'transparent',\n isToday: 'ButtonFace',\n isHovered: 'Highlight',\n isSelected: {\n selectionMode: {\n single: 'Highlight',\n range: {\n isHovered: 'Highlight'\n }\n }\n },\n isSelectionStart: 'Highlight',\n isSelectionEnd: 'Highlight',\n isUnavailable: 'transparent'\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'white',\n selectionMode: {\n range: 'neutral'\n }\n },\n isSelectionStart: 'white',\n isSelectionEnd: 'white',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isToday: 'ButtonFace',\n isSelected: 'HighlightText',\n isSelectionStart: 'HighlightText',\n isSelectionEnd: 'HighlightText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nconst unavailableStyles = style({\n position: 'absolute',\n top: 'calc(50% - 1px)',\n left: 'calc(25% - 1px)',\n right: 'calc(25% - 1px)',\n height: 2,\n transform: 'rotate(-16deg)',\n borderRadius: 'full',\n backgroundColor: '[currentColor]'\n});\n\nconst selectionSpanStyles = style({\n position: 'absolute',\n zIndex: -1,\n top: 0,\n insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',\n insetEnd: 0,\n bottom: 0,\n borderWidth: 2,\n borderStyle: 'dashed',\n borderColor: {\n default: 'blue-800', // focus-indicator-color\n forcedColors: {\n default: 'ButtonText'\n }\n },\n borderStartRadius: 'full',\n borderEndRadius: 'full',\n backgroundColor: {\n default: 'blue-subtle',\n forcedColors: {\n default: 'Highlight'\n }\n },\n forcedColorAdjust: 'none'\n});\n\nexport const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);\n let {\n visibleMonths = 1,\n errorMessage,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n ...otherProps\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <AriaCalendar\n {...otherProps}\n ref={ref}\n visibleDuration={{months: visibleMonths}}\n style={UNSAFE_style}\n className={(UNSAFE_className || '') + calendarStyles(null, styles)}>\n {({isInvalid, isDisabled}) => {\n return (\n <>\n <Header styles={headerStyles}>\n <CalendarButton slot=\"previous\"><ChevronLeftIcon /></CalendarButton>\n <CalendarHeading />\n <CalendarButton slot=\"next\"><ChevronRightIcon /></CalendarButton>\n </Header>\n <div\n className={style({\n display: 'flex',\n flexDirection: 'row',\n gap: 24,\n width: 'full',\n alignItems: 'start'\n })}>\n {Array.from({length: visibleMonths}).map((_, i) => (\n <CalendarGrid months={i} key={i} />\n ))}\n </div>\n {isInvalid && (\n <Text slot=\"errorMessage\" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>\n {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}\n </Text>\n )}\n </>\n );\n }}\n </AriaCalendar>\n );\n});\n\nexport const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {\n // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.\n return (\n <AriaCalendarGrid\n className={style({\n borderCollapse: 'collapse',\n borderSpacing: 0,\n isolation: 'isolate'\n })}\n offset={{months: props.months}}>\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell>\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell date={date} firstDayOfWeek={props.firstDayOfWeek} />\n )}\n </CalendarGridBody>\n </AriaCalendarGrid>\n );\n};\n\n// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.\n// However, we want to show each month individually.\nexport const CalendarHeading = (): ReactElement => {\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};\n let currentMonth = visibleRange?.start ?? visibleRange?.end;\n let monthFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,\n calendar: visibleRange?.start.calendar.identifier,\n timeZone\n });\n let months = useMemo(() => {\n if (!visibleRange) {\n return [];\n }\n let months: string[] = [];\n for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {\n // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.\n // there has to be a better way to do this...\n if (i.month === visibleRange.start.month) {\n i = i.add({weeks: 1});\n }\n months.push(monthFormatter.format(i.toDate(timeZone!)));\n }\n return months;\n }, [visibleRange, monthFormatter, timeZone]);\n\n return (\n <Heading styles={headingStyles}>\n {months.map((month, i) => {\n if (i === 0) {\n return (\n <Fragment key={month}>\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n } else {\n return (\n <Fragment key={month}>\n {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={style({visibility: 'hidden', width: 24})} />\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n }\n })}\n </Heading>\n );\n};\n\nexport const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {\n let {direction} = useLocale();\n return (\n <div\n className={\n style({\n scale: {\n direction: {\n rtl: -1\n }\n }\n })({direction})\n }>\n <ActionButton\n {...props}\n isQuiet>\n {props.children}\n </ActionButton>\n </div>\n );\n};\n\nconst CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {\n return (\n <AriaCalendarHeaderCell className={headerCellStyles}>\n {props.children}\n </AriaCalendarHeaderCell>\n );\n};\n\nconst CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {\n let {locale} = useLocale();\n let firstDayOfWeek = props.firstDayOfWeek;\n // Calculate the day and week index based on the date.\n let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);\n\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let state = (calendarStateContext ?? rangeCalendarStateContext)!;\n\n let isFirstWeek = weekIndex === 0;\n let isFirstChild = dayIndex === 0;\n let isLastChild = dayIndex === 6;\n return (\n <AriaCalendarCell\n date={props.date}\n className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>\n {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}\n </AriaCalendarCell>\n );\n};\n\nconst CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {\n let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;\n let {getDatesInWeek} = state;\n let ref = useRef<HTMLDivElement>(null);\n let {isUnavailable, formattedDate, isSelected} = renderProps!;\n let startDate = startOfMonth(date);\n let datesInWeek = getDatesInWeek(weekIndex, startDate);\n\n // Starting from the current day, find the first day before it in the current week that is not selected.\n // Then, the span of selected days is the current day minus the first unselected day.\n let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {\n return date && i > 0 && (!state.isSelected(date) || date.month !== props.date.month);\n });\n let selectionSpan = -1;\n if (firstUnselectedInRangeInWeek > -1 && isSelected) {\n selectionSpan = firstUnselectedInRangeInWeek - 1;\n } else if (isSelected) {\n selectionSpan = dayIndex;\n }\n\n let prevDay = date.subtract({days: 1});\n let nextDay = date.add({days: 1});\n let isBackgroundStyleApplied = (\n isSelected\n && isRangeSelection\n && (state.isSelected(prevDay)\n || (nextDay.month === date.month && state.isSelected(nextDay)))\n );\n\n return (\n <div\n className={style({\n position: 'relative',\n width: 32,\n '--cell-width': {\n type: 'width',\n value: '[self(width)]'\n }\n })}>\n <div\n ref={ref}\n style={pressScale(ref, {})(renderProps!)}\n className={cellInnerStyles({...renderProps!, selectionMode: isRangeSelection ? 'range' : 'single'})}>\n <div>\n {formattedDate}\n </div>\n {isUnavailable && <div className={unavailableStyles} role=\"presentation\" />}\n </div>\n {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles} role=\"presentation\" />}\n </div>\n );\n};\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\n/**\n * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.\n * @param date - The date to calculate indices for.\n * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').\n * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).\n * @returns Object with weekIndex and dayIndex.\n */\nfunction useWeekAndDayIndices(\n date: CalendarDate,\n locale: string,\n firstDayOfWeek?: DayOfWeek\n) {\n let {dayIndex, weekIndex} = useMemo(() => {\n // Get the day index within the week (0-6)\n const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);\n\n const monthStart = startOfMonth(date);\n\n // Calculate the week index by finding which week this date falls into\n // within the month's calendar grid\n const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);\n const dayOfMonth = date.day;\n\n const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);\n\n return {\n weekIndex,\n dayIndex\n };\n }, [date, locale, firstDayOfWeek]);\n\n return {dayIndex, weekIndex};\n}\n"],"names":[],"version":3,"file":"Calendar.css.map"}
|
|
1
|
+
{"mappings":"ACqEuB;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeN;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8BK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2DH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2BR;;;;EAAA;;;;EAAA;;;;EAkEa;;;;EACA;;;;EAAA;;;;EAetB;;;;EAAA;;;;EAAA;;;;EA8ES;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9ZG;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CD;;;;EAAA;;;;;AAtDJ;EASK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CD;;;;;AAtDJ;EASK;;;;EAAA;;;;EAAA;;;;EA6CD;;;;;AAtDJ;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAsDI;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAkHI;;;;IAAA","sources":["2295035483c3fe80","packages/@react-spectrum/s2/src/Calendar.tsx"],"sourcesContent":["@import \"a4515f5bffb5f062\";\n@import \"92a594e88a8aef1b\";\n@import \"690c8ff771746c3e\";\n@import \"61eae6535d6fcdf4\";\n@import \"45a026ed74f55e85\";\n@import \"948f79e4cbbbc206\";\n@import \"6fbf78b81e66a464\";\n@import \"98b3aa52e9389b9d\";\n@import \"b5160d992ac49c4a\";\n@import \"84221aa63b6aa322\";\n@import \"898fc73cd9eb6ae4\";\n@import \"b3de9a7ca57d6dcd\";\n@import \"630d2c7b496b99dc\";\n@import \"4ba51db32e5676ac\";\n@import \"956185cd03a3f917\";\n@import \"b1221915ab95cea2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarGrid as AriaCalendarGrid,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarProps as AriaCalendarProps,\n ButtonProps,\n CalendarCellProps,\n CalendarCellRenderProps,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCellProps,\n CalendarState,\n CalendarStateContext,\n ContextValue,\n DateValue,\n Provider,\n RangeCalendarState,\n RangeCalendarStateContext,\n Text\n} from 'react-aria-components';\nimport {AriaCalendarGridProps} from '@react-aria/calendar';\nimport {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n CalendarDate,\n getDayOfWeek,\n startOfMonth\n} from '@internationalized/date';\nimport ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';\nimport ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {helpTextStyles} from './Field';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface CalendarProps<T extends DateValue>\n extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,\n StyleProps {\n /**\n * The error message to display when the calendar is invalid.\n */\n errorMessage?: ReactNode,\n /**\n * The number of months to display at once.\n * @default 1\n */\n visibleMonths?: number\n}\n\nexport const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);\n\nconst calendarStyles = style({\n display: 'flex',\n flexDirection: 'column',\n gap: 24,\n width: 'fit',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst headerStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: 'full'\n});\n\nconst headingStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n margin: 0,\n width: 'full'\n});\n\nconst titleStyles = style({\n font: 'title-lg',\n textAlign: 'center',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: '0%',\n minWidth: 0\n});\n\nconst headerCellStyles = style({\n font: 'title-sm',\n cursor: 'default',\n textAlign: 'center',\n paddingStart: {\n default: 4,\n ':first-child': 0\n },\n paddingEnd: {\n default: 4,\n ':last-child': 0\n },\n paddingBottom: 12\n});\n\nconst cellStyles = style({\n outlineStyle: 'none',\n '--cell-gap': {\n type: 'paddingStart',\n value: 4\n },\n paddingStart: {\n default: 4,\n isFirstChild: 0\n },\n paddingEnd: {\n default: 4,\n isLastChild: 0\n },\n paddingTop: {\n default: 2,\n isFirstWeek: 0\n },\n paddingBottom: 2,\n position: 'relative',\n width: 32,\n height: 32,\n display: {\n default: 'flex',\n isOutsideMonth: 'none'\n },\n alignItems: 'center',\n justifyContent: 'center'\n});\n\nconst cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({\n ...focusRing(),\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n outlineOffset: {\n default: -2,\n isToday: 2,\n isSelected: {\n selectionMode: {\n single: 2,\n range: -2\n }\n },\n isSelectionStart: 2,\n isSelectionEnd: 2\n },\n position: 'relative',\n font: 'body-sm',\n cursor: 'default',\n width: 'full',\n height: 32,\n borderRadius: 'full',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isDisabled: 'transparent',\n isToday: {\n default: baseColor('gray-300'),\n isDisabled: 'disabled'\n },\n isSelected: {\n selectionMode: {\n single: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600'),\n isDisabled: 'transparent'\n },\n range: {\n isHovered: 'blue-500'\n }\n }\n },\n isSelectionStart: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isSelectionEnd: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isUnavailable: 'transparent',\n forcedColors: {\n default: 'transparent',\n isToday: 'ButtonFace',\n isHovered: 'Highlight',\n isSelected: {\n selectionMode: {\n single: 'Highlight',\n range: {\n isHovered: 'Highlight'\n }\n }\n },\n isSelectionStart: 'Highlight',\n isSelectionEnd: 'Highlight',\n isUnavailable: 'transparent'\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'white',\n selectionMode: {\n range: 'neutral'\n }\n },\n isSelectionStart: 'white',\n isSelectionEnd: 'white',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isToday: 'ButtonFace',\n isSelected: 'HighlightText',\n isSelectionStart: 'HighlightText',\n isSelectionEnd: 'HighlightText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nconst unavailableStyles = style({\n position: 'absolute',\n top: 'calc(50% - 1px)',\n left: 'calc(25% - 1px)',\n right: 'calc(25% - 1px)',\n height: 2,\n transform: 'rotate(-16deg)',\n borderRadius: 'full',\n backgroundColor: '[currentColor]'\n});\n\nconst selectionSpanStyles = style({\n position: 'absolute',\n zIndex: -1,\n top: 0,\n insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',\n insetEnd: 0,\n bottom: 0,\n borderWidth: 2,\n borderStyle: 'dashed',\n borderColor: {\n default: 'blue-800', // focus-indicator-color\n forcedColors: {\n default: 'ButtonText'\n }\n },\n borderStartRadius: 'full',\n borderEndRadius: 'full',\n backgroundColor: {\n default: 'blue-subtle',\n forcedColors: {\n default: 'Highlight'\n }\n },\n forcedColorAdjust: 'none'\n});\n\nexport const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);\n let {\n visibleMonths = 1,\n errorMessage,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n ...otherProps\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <AriaCalendar\n {...otherProps}\n ref={ref}\n visibleDuration={{months: visibleMonths}}\n style={UNSAFE_style}\n className={(UNSAFE_className || '') + calendarStyles(null, styles)}>\n {({isInvalid, isDisabled}) => {\n return (\n <>\n <Provider\n values={[\n [HeaderContext, null],\n [HeadingContext, null]\n ]}>\n <Header styles={headerStyles}>\n <CalendarButton slot=\"previous\"><ChevronLeftIcon /></CalendarButton>\n <CalendarHeading />\n <CalendarButton slot=\"next\"><ChevronRightIcon /></CalendarButton>\n </Header>\n </Provider>\n <div\n className={style({\n display: 'flex',\n flexDirection: 'row',\n gap: 24,\n width: 'full',\n alignItems: 'start'\n })}>\n {Array.from({length: visibleMonths}).map((_, i) => (\n <CalendarGrid months={i} key={i} />\n ))}\n </div>\n {isInvalid && (\n <Text slot=\"errorMessage\" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>\n {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}\n </Text>\n )}\n </>\n );\n }}\n </AriaCalendar>\n );\n});\n\nexport const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {\n // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.\n return (\n <AriaCalendarGrid\n className={style({\n borderCollapse: 'collapse',\n borderSpacing: 0,\n isolation: 'isolate'\n })}\n offset={{months: props.months}}>\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell>\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell date={date} firstDayOfWeek={props.firstDayOfWeek} />\n )}\n </CalendarGridBody>\n </AriaCalendarGrid>\n );\n};\n\n// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.\n// However, we want to show each month individually.\nexport const CalendarHeading = (): ReactElement => {\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};\n let currentMonth = visibleRange?.start ?? visibleRange?.end;\n let monthFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,\n calendar: visibleRange?.start.calendar.identifier,\n timeZone\n });\n let months = useMemo(() => {\n if (!visibleRange) {\n return [];\n }\n let months: string[] = [];\n for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {\n // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.\n // there has to be a better way to do this...\n if (i.month === visibleRange.start.month) {\n i = i.add({weeks: 1});\n }\n months.push(monthFormatter.format(i.toDate(timeZone!)));\n }\n return months;\n }, [visibleRange, monthFormatter, timeZone]);\n\n return (\n <Heading styles={headingStyles}>\n {months.map((month, i) => {\n if (i === 0) {\n return (\n <Fragment key={month}>\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n } else {\n return (\n <Fragment key={month}>\n {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={style({visibility: 'hidden', width: 24})} />\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n }\n })}\n </Heading>\n );\n};\n\nexport const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {\n let {direction} = useLocale();\n return (\n <div\n className={\n style({\n scale: {\n direction: {\n rtl: -1\n }\n }\n })({direction})\n }>\n <ActionButton\n {...props}\n isQuiet>\n {props.children}\n </ActionButton>\n </div>\n );\n};\n\nconst CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {\n return (\n <AriaCalendarHeaderCell className={headerCellStyles}>\n {props.children}\n </AriaCalendarHeaderCell>\n );\n};\n\nconst CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {\n let {locale} = useLocale();\n let firstDayOfWeek = props.firstDayOfWeek;\n // Calculate the day and week index based on the date.\n let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);\n\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let state = (calendarStateContext ?? rangeCalendarStateContext)!;\n\n let isFirstWeek = weekIndex === 0;\n let isFirstChild = dayIndex === 0;\n let isLastChild = dayIndex === 6;\n return (\n <AriaCalendarCell\n date={props.date}\n className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>\n {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}\n </AriaCalendarCell>\n );\n};\n\nconst CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {\n let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;\n let {getDatesInWeek} = state;\n let ref = useRef<HTMLDivElement>(null);\n let {isUnavailable, formattedDate, isSelected} = renderProps!;\n let startDate = startOfMonth(date);\n let datesInWeek = getDatesInWeek(weekIndex, startDate);\n\n // Starting from the current day, find the first day before it in the current week that is not selected.\n // Then, the span of selected days is the current day minus the first unselected day.\n let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {\n return date && i > 0 && (!state.isSelected(date) || date.month !== props.date.month);\n });\n let selectionSpan = -1;\n if (firstUnselectedInRangeInWeek > -1 && isSelected) {\n selectionSpan = firstUnselectedInRangeInWeek - 1;\n } else if (isSelected) {\n selectionSpan = dayIndex;\n }\n\n let prevDay = date.subtract({days: 1});\n let nextDay = date.add({days: 1});\n let isBackgroundStyleApplied = (\n isSelected\n && isRangeSelection\n && (state.isSelected(prevDay)\n || (nextDay.month === date.month && state.isSelected(nextDay)))\n );\n\n return (\n <div\n className={style({\n position: 'relative',\n width: 32,\n '--cell-width': {\n type: 'width',\n value: '[self(width)]'\n }\n })}>\n <div\n ref={ref}\n style={pressScale(ref, {})(renderProps!)}\n className={cellInnerStyles({...renderProps!, selectionMode: isRangeSelection ? 'range' : 'single'})}>\n <div>\n {formattedDate}\n </div>\n {isUnavailable && <div className={unavailableStyles} role=\"presentation\" />}\n </div>\n {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles} role=\"presentation\" />}\n </div>\n );\n};\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\n/**\n * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.\n * @param date - The date to calculate indices for.\n * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').\n * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).\n * @returns Object with weekIndex and dayIndex.\n */\nfunction useWeekAndDayIndices(\n date: CalendarDate,\n locale: string,\n firstDayOfWeek?: DayOfWeek\n) {\n let {dayIndex, weekIndex} = useMemo(() => {\n // Get the day index within the week (0-6)\n const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);\n\n const monthStart = startOfMonth(date);\n\n // Calculate the week index by finding which week this date falls into\n // within the month's calendar grid\n const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);\n const dayOfMonth = date.day;\n\n const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);\n\n return {\n weekIndex,\n dayIndex\n };\n }, [date, locale, firstDayOfWeek]);\n\n return {dayIndex, weekIndex};\n}\n"],"names":[],"version":3,"file":"Calendar.css.map"}
|
package/dist/Calendar.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./Calendar.css";
|
|
2
2
|
import {ActionButton as $da878a05ab4a403e$export$cfc7921d29ef7b80} from "./ActionButton.mjs";
|
|
3
|
-
import {Header as $8e847109a6ab556d$export$8b251419efc915eb, Heading as $8e847109a6ab556d$export$a8a3e93435678ff9} from "./Content.mjs";
|
|
3
|
+
import {Header as $8e847109a6ab556d$export$8b251419efc915eb, HeaderContext as $8e847109a6ab556d$export$e0e4026c12a8bdbb, Heading as $8e847109a6ab556d$export$a8a3e93435678ff9, HeadingContext as $8e847109a6ab556d$export$d688439359537581} from "./Content.mjs";
|
|
4
4
|
import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
|
|
5
5
|
import $5c3fed25abf344cc$export$2e2bcd8739ae039 from "../icons/ChevronLeft.mjs";
|
|
6
6
|
import $04f4b15c8c66bb2a$export$2e2bcd8739ae039 from "../icons/ChevronRight.mjs";
|
|
@@ -8,7 +8,7 @@ import {helpTextStyles as $9afd80978c252040$export$13b1fd5431595bf6} from "./Fie
|
|
|
8
8
|
import $gwkOZ$intlStringsmjs from "./intlStrings.mjs";
|
|
9
9
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
10
10
|
import {jsx as $gwkOZ$jsx, jsxs as $gwkOZ$jsxs, Fragment as $gwkOZ$Fragment} from "react/jsx-runtime";
|
|
11
|
-
import {Calendar as $gwkOZ$Calendar, Text as $gwkOZ$Text, CalendarGrid as $gwkOZ$CalendarGrid, CalendarGridHeader as $gwkOZ$CalendarGridHeader, CalendarGridBody as $gwkOZ$CalendarGridBody, CalendarStateContext as $gwkOZ$CalendarStateContext, RangeCalendarStateContext as $gwkOZ$RangeCalendarStateContext, CalendarHeaderCell as $gwkOZ$CalendarHeaderCell, CalendarCell as $gwkOZ$CalendarCell} from "react-aria-components";
|
|
11
|
+
import {Calendar as $gwkOZ$Calendar, Provider as $gwkOZ$Provider, Text as $gwkOZ$Text, CalendarGrid as $gwkOZ$CalendarGrid, CalendarGridHeader as $gwkOZ$CalendarGridHeader, CalendarGridBody as $gwkOZ$CalendarGridBody, CalendarStateContext as $gwkOZ$CalendarStateContext, RangeCalendarStateContext as $gwkOZ$RangeCalendarStateContext, CalendarHeaderCell as $gwkOZ$CalendarHeaderCell, CalendarCell as $gwkOZ$CalendarCell} from "react-aria-components";
|
|
12
12
|
import {startOfMonth as $gwkOZ$startOfMonth, getDayOfWeek as $gwkOZ$getDayOfWeek} from "@internationalized/date";
|
|
13
13
|
import {createContext as $gwkOZ$createContext, forwardRef as $gwkOZ$forwardRef, useContext as $gwkOZ$useContext, useMemo as $gwkOZ$useMemo, Fragment as $gwkOZ$Fragment1, useRef as $gwkOZ$useRef} from "react";
|
|
14
14
|
import {useLocalizedStringFormatter as $gwkOZ$useLocalizedStringFormatter, useDateFormatter as $gwkOZ$useDateFormatter, useLocale as $gwkOZ$useLocale} from "@react-aria/i18n";
|
|
@@ -47,145 +47,145 @@ const $f06f4d5597ad704c$var$calendarStyles = function anonymous(props, overrides
|
|
|
47
47
|
if (p[1] === "Z") width = true;
|
|
48
48
|
rules += p[0];
|
|
49
49
|
}
|
|
50
|
-
rules += '
|
|
51
|
-
rules += '
|
|
52
|
-
rules += '
|
|
53
|
-
rules += '
|
|
54
|
-
if (!width) rules += '
|
|
55
|
-
rules += '
|
|
50
|
+
rules += ' sd11';
|
|
51
|
+
rules += ' _ta11';
|
|
52
|
+
rules += ' Uj11';
|
|
53
|
+
rules += ' qj11';
|
|
54
|
+
if (!width) rules += ' ZJ11';
|
|
55
|
+
rules += ' __ca11';
|
|
56
56
|
return rules;
|
|
57
57
|
};
|
|
58
|
-
const $f06f4d5597ad704c$var$headerStyles = "
|
|
59
|
-
const $f06f4d5597ad704c$var$headingStyles = "
|
|
60
|
-
const $f06f4d5597ad704c$var$titleStyles = "
|
|
61
|
-
const $f06f4d5597ad704c$var$headerCellStyles = "
|
|
58
|
+
const $f06f4d5597ad704c$var$headerStyles = " sd11 eb11 _Ce11 Za11";
|
|
59
|
+
const $f06f4d5597ad704c$var$headingStyles = " sd11 eb11 _Ce11 Jy11 Gy11 Iy11 Hy11 Za11";
|
|
60
|
+
const $f06f4d5597ad704c$var$titleStyles = " uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-e11 vx11 wd11 xd11 _xa11 wX0cczbc11 xX0cczbc11 _xX0cczba11 wfd11 xfd11 _xfa11 wfX0cczbc11 xfX0cczbc11 _xfX0cczba11 _Fd11 _FezxGHba11 _FnuYUweb11 po11 _Wa11 _ub11 _va11 _sa11 Na11";
|
|
61
|
+
const $f06f4d5597ad704c$var$headerCellStyles = " uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-c11 vx11 wd11 xd11 _xa11 wX0cczbc11 xX0cczbc11 _xX0cczba11 wfd11 xfd11 _xfa11 wfX0cczbc11 xfX0cczbc11 _xfX0cczba11 _Fd11 _FezxGHba11 _FnuYUweb11 po11 ri11 _Wa11 Sp11 Sbd11 Rp11 Rkd11 Qe11";
|
|
62
62
|
const $f06f4d5597ad704c$var$cellStyles = function anonymous(props) {
|
|
63
63
|
let rules = " ";
|
|
64
|
-
rules += '
|
|
65
|
-
rules += ' -uq4sQ-
|
|
66
|
-
if (props.isFirstChild) rules += '
|
|
67
|
-
else rules += '
|
|
68
|
-
if (props.isLastChild) rules += '
|
|
69
|
-
else rules += '
|
|
70
|
-
if (props.isFirstWeek) rules += '
|
|
71
|
-
else rules += '
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
76
|
-
if (props.isOutsideMonth) rules += '
|
|
77
|
-
else rules += '
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
64
|
+
rules += ' _Le11';
|
|
65
|
+
rules += ' -uq4sQ-Sp11';
|
|
66
|
+
if (props.isFirstChild) rules += ' Sd11';
|
|
67
|
+
else rules += ' Sp11';
|
|
68
|
+
if (props.isLastChild) rules += ' Rd11';
|
|
69
|
+
else rules += ' Rp11';
|
|
70
|
+
if (props.isFirstWeek) rules += ' Td11';
|
|
71
|
+
else rules += ' Tj11';
|
|
72
|
+
rules += ' Qj11';
|
|
73
|
+
rules += ' _Pc11';
|
|
74
|
+
rules += ' ZC11';
|
|
75
|
+
rules += ' Fx11';
|
|
76
|
+
if (props.isOutsideMonth) rules += ' sk11';
|
|
77
|
+
else rules += ' sd11';
|
|
78
|
+
rules += ' eb11';
|
|
79
|
+
rules += ' _Ca11';
|
|
80
80
|
return rules;
|
|
81
81
|
};
|
|
82
82
|
const $f06f4d5597ad704c$var$cellInnerStyles = function anonymous(props) {
|
|
83
83
|
let rules = " ";
|
|
84
|
-
if (props.isFocusVisible) rules += '
|
|
85
|
-
else rules += '
|
|
86
|
-
rules += '
|
|
87
|
-
rules += '
|
|
88
|
-
if (props.isSelectionEnd) rules += '
|
|
89
|
-
else if (props.isSelectionStart) rules += '
|
|
84
|
+
if (props.isFocusVisible) rules += ' _Lf11';
|
|
85
|
+
else rules += ' _Le11';
|
|
86
|
+
rules += ' Oh11';
|
|
87
|
+
rules += ' _Mc11';
|
|
88
|
+
if (props.isSelectionEnd) rules += ' _Kd11';
|
|
89
|
+
else if (props.isSelectionStart) rules += ' _Kd11';
|
|
90
90
|
else if (props.isSelected) {
|
|
91
|
-
if (props.selectionMode === "range") rules += '
|
|
92
|
-
else if (props.selectionMode === "single") rules += '
|
|
93
|
-
} else if (props.isToday) rules += '
|
|
94
|
-
else rules += '
|
|
95
|
-
rules += '
|
|
96
|
-
rules += '
|
|
97
|
-
rules += '
|
|
98
|
-
rules += '
|
|
99
|
-
rules += '
|
|
100
|
-
rules += '
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
103
|
-
rules += '
|
|
104
|
-
rules += '
|
|
105
|
-
rules += '
|
|
106
|
-
rules += '
|
|
107
|
-
rules += '
|
|
108
|
-
rules += '
|
|
109
|
-
rules += '
|
|
110
|
-
rules += '
|
|
111
|
-
rules += ' -_6BNtrc-
|
|
112
|
-
rules += '
|
|
113
|
-
rules += '
|
|
114
|
-
rules += '
|
|
115
|
-
rules += '
|
|
116
|
-
rules += '
|
|
117
|
-
rules += '
|
|
118
|
-
if (props.isDisabled) rules += '
|
|
119
|
-
else if (props.isSelectionEnd) rules += '
|
|
120
|
-
else if (props.isSelectionStart) rules += '
|
|
91
|
+
if (props.selectionMode === "range") rules += ' _Kb11';
|
|
92
|
+
else if (props.selectionMode === "single") rules += ' _Kd11';
|
|
93
|
+
} else if (props.isToday) rules += ' _Kd11';
|
|
94
|
+
else rules += ' _Kb11';
|
|
95
|
+
rules += ' Yd11';
|
|
96
|
+
rules += ' Yle11';
|
|
97
|
+
rules += ' Xb11';
|
|
98
|
+
rules += ' Xlb11';
|
|
99
|
+
rules += ' _2b11';
|
|
100
|
+
rules += ' _2lb11';
|
|
101
|
+
rules += ' _Pc11';
|
|
102
|
+
rules += ' uk11';
|
|
103
|
+
rules += ' uch11';
|
|
104
|
+
rules += ' udi11';
|
|
105
|
+
rules += ' uea11';
|
|
106
|
+
rules += ' ugb11';
|
|
107
|
+
rules += ' uhd11';
|
|
108
|
+
rules += ' uje11';
|
|
109
|
+
rules += ' u2NhKxcl11';
|
|
110
|
+
rules += ' uic11';
|
|
111
|
+
rules += ' -_6BNtrc-c11';
|
|
112
|
+
rules += ' vx11';
|
|
113
|
+
rules += ' wb11';
|
|
114
|
+
rules += ' xb11';
|
|
115
|
+
rules += ' _xa11';
|
|
116
|
+
rules += ' _Fb11';
|
|
117
|
+
rules += ' _FnuYUwec11';
|
|
118
|
+
if (props.isDisabled) rules += ' pp11';
|
|
119
|
+
else if (props.isSelectionEnd) rules += ' px11';
|
|
120
|
+
else if (props.isSelectionStart) rules += ' px11';
|
|
121
121
|
else if (props.isSelected) {
|
|
122
|
-
if (props.selectionMode === "range") rules += '
|
|
123
|
-
else rules += '
|
|
124
|
-
} else rules += '
|
|
125
|
-
if (props.isDisabled) rules += '
|
|
126
|
-
else if (props.isSelectionEnd) rules += '
|
|
127
|
-
else if (props.isSelectionStart) rules += '
|
|
128
|
-
else if (props.isSelected) rules += '
|
|
129
|
-
else if (props.isToday) rules += '
|
|
130
|
-
else rules += '
|
|
131
|
-
rules += '
|
|
132
|
-
rules += '
|
|
133
|
-
rules += '
|
|
134
|
-
rules += '
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
137
|
-
rules += '
|
|
138
|
-
rules += '
|
|
139
|
-
rules += '
|
|
140
|
-
rules += '
|
|
141
|
-
rules += '
|
|
142
|
-
if (props.isUnavailable) rules += '
|
|
122
|
+
if (props.selectionMode === "range") rules += ' pt11';
|
|
123
|
+
else rules += ' px11';
|
|
124
|
+
} else rules += ' pt11';
|
|
125
|
+
if (props.isDisabled) rules += ' plc11';
|
|
126
|
+
else if (props.isSelectionEnd) rules += ' ple11';
|
|
127
|
+
else if (props.isSelectionStart) rules += ' ple11';
|
|
128
|
+
else if (props.isSelected) rules += ' ple11';
|
|
129
|
+
else if (props.isToday) rules += ' pla11';
|
|
130
|
+
else rules += ' plb11';
|
|
131
|
+
rules += ' ri11';
|
|
132
|
+
rules += ' Za11';
|
|
133
|
+
rules += ' Fx11';
|
|
134
|
+
rules += ' og11';
|
|
135
|
+
rules += ' ng11';
|
|
136
|
+
rules += ' kg11';
|
|
137
|
+
rules += ' jg11';
|
|
138
|
+
rules += ' sd11';
|
|
139
|
+
rules += ' eb11';
|
|
140
|
+
rules += ' _Ca11';
|
|
141
|
+
rules += ' _yb11';
|
|
142
|
+
if (props.isUnavailable) rules += ' g911';
|
|
143
143
|
else if (props.isSelectionEnd) {
|
|
144
|
-
if (props.isFocusVisible) rules += '
|
|
145
|
-
else if (props.isPressed) rules += '
|
|
146
|
-
else if (props.isHovered) rules += '
|
|
147
|
-
else rules += '
|
|
144
|
+
if (props.isFocusVisible) rules += ' gUgARdd11';
|
|
145
|
+
else if (props.isPressed) rules += ' gUgARdd11';
|
|
146
|
+
else if (props.isHovered) rules += ' gUgARdd11';
|
|
147
|
+
else rules += ' g5qAiPc11';
|
|
148
148
|
} else if (props.isSelectionStart) {
|
|
149
|
-
if (props.isFocusVisible) rules += '
|
|
150
|
-
else if (props.isPressed) rules += '
|
|
151
|
-
else if (props.isHovered) rules += '
|
|
152
|
-
else rules += '
|
|
149
|
+
if (props.isFocusVisible) rules += ' gUgARdd11';
|
|
150
|
+
else if (props.isPressed) rules += ' gUgARdd11';
|
|
151
|
+
else if (props.isHovered) rules += ' gUgARdd11';
|
|
152
|
+
else rules += ' g5qAiPc11';
|
|
153
153
|
} else if (props.isSelected) {
|
|
154
154
|
if (props.selectionMode === "range") {
|
|
155
|
-
if (props.isHovered) rules += '
|
|
155
|
+
if (props.isHovered) rules += ' gNAacne11';
|
|
156
156
|
} else if (props.selectionMode === "single") {
|
|
157
|
-
if (props.isDisabled) rules += '
|
|
158
|
-
else if (props.isFocusVisible) rules += '
|
|
159
|
-
else if (props.isPressed) rules += '
|
|
160
|
-
else if (props.isHovered) rules += '
|
|
161
|
-
else rules += '
|
|
157
|
+
if (props.isDisabled) rules += ' g911';
|
|
158
|
+
else if (props.isFocusVisible) rules += ' gUgARdd11';
|
|
159
|
+
else if (props.isPressed) rules += ' gUgARdd11';
|
|
160
|
+
else if (props.isHovered) rules += ' gUgARdd11';
|
|
161
|
+
else rules += ' g5qAiPc11';
|
|
162
162
|
}
|
|
163
163
|
} else if (props.isToday) {
|
|
164
|
-
if (props.isDisabled) rules += '
|
|
164
|
+
if (props.isDisabled) rules += ' gH11';
|
|
165
165
|
else {
|
|
166
|
-
if (props.isPressed) rules += '
|
|
167
|
-
else if (props.isFocusVisible) rules += '
|
|
168
|
-
else if (props.isHovered) rules += '
|
|
169
|
-
else rules += '
|
|
166
|
+
if (props.isPressed) rules += ' gw11';
|
|
167
|
+
else if (props.isFocusVisible) rules += ' gw11';
|
|
168
|
+
else if (props.isHovered) rules += ' gw11';
|
|
169
|
+
else rules += ' gE11';
|
|
170
170
|
}
|
|
171
|
-
} else if (props.isDisabled) rules += '
|
|
172
|
-
else if (props.isPressed) rules += '
|
|
173
|
-
else if (props.isHovered) rules += '
|
|
174
|
-
else rules += '
|
|
175
|
-
if (props.isUnavailable) rules += '
|
|
176
|
-
else if (props.isSelectionEnd) rules += '
|
|
177
|
-
else if (props.isSelectionStart) rules += '
|
|
171
|
+
} else if (props.isDisabled) rules += ' g911';
|
|
172
|
+
else if (props.isPressed) rules += ' gH11';
|
|
173
|
+
else if (props.isHovered) rules += ' gH11';
|
|
174
|
+
else rules += ' g911';
|
|
175
|
+
if (props.isUnavailable) rules += ' gl911';
|
|
176
|
+
else if (props.isSelectionEnd) rules += ' gle11';
|
|
177
|
+
else if (props.isSelectionStart) rules += ' gle11';
|
|
178
178
|
else if (props.isSelected) {
|
|
179
179
|
if (props.selectionMode === "range") {
|
|
180
|
-
if (props.isHovered) rules += '
|
|
181
|
-
} else if (props.selectionMode === "single") rules += '
|
|
182
|
-
} else if (props.isHovered) rules += '
|
|
183
|
-
else if (props.isToday) rules += '
|
|
184
|
-
else rules += '
|
|
180
|
+
if (props.isHovered) rules += ' gle11';
|
|
181
|
+
} else if (props.selectionMode === "single") rules += ' gle11';
|
|
182
|
+
} else if (props.isHovered) rules += ' gle11';
|
|
183
|
+
else if (props.isToday) rules += ' glb11';
|
|
184
|
+
else rules += ' gl911';
|
|
185
185
|
return rules;
|
|
186
186
|
};
|
|
187
|
-
const $f06f4d5597ad704c$var$unavailableStyles = "
|
|
188
|
-
const $f06f4d5597ad704c$var$selectionSpanStyles = "
|
|
187
|
+
const $f06f4d5597ad704c$var$unavailableStyles = " _Pa11 WzErnCb11 _EjhYzGc11 _RjhYzGc11 FlAZvq11 _ZN7ydnb11 og11 ng11 kg11 jg11 g5ZbAob11";
|
|
188
|
+
const $f06f4d5597ad704c$var$selectionSpanStyles = " _Pa11 _9a11 Wr11 _AOJNuv11 _zr11 _lr11 _kc11 hc11 mc11 lc11 _ja11 ix11 ilb11 og11 kg11 ng11 jg11 gG11 gle11 _yb11";
|
|
189
189
|
const $f06f4d5597ad704c$export$e1aef45b828286de = /*#__PURE__*/ (0, $gwkOZ$forwardRef)(function Calendar(props, ref) {
|
|
190
190
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $f06f4d5597ad704c$export$3b805cea1f178355);
|
|
191
191
|
let { visibleMonths: visibleMonths = 1, errorMessage: errorMessage, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, styles: styles, ...otherProps } = props;
|
|
@@ -201,22 +201,34 @@ const $f06f4d5597ad704c$export$e1aef45b828286de = /*#__PURE__*/ (0, $gwkOZ$forwa
|
|
|
201
201
|
children: ({ isInvalid: isInvalid, isDisabled: isDisabled })=>{
|
|
202
202
|
return /*#__PURE__*/ (0, $gwkOZ$jsxs)((0, $gwkOZ$Fragment), {
|
|
203
203
|
children: [
|
|
204
|
-
/*#__PURE__*/ (0, $gwkOZ$
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
204
|
+
/*#__PURE__*/ (0, $gwkOZ$jsx)((0, $gwkOZ$Provider), {
|
|
205
|
+
values: [
|
|
206
|
+
[
|
|
207
|
+
(0, $8e847109a6ab556d$export$e0e4026c12a8bdbb),
|
|
208
|
+
null
|
|
209
|
+
],
|
|
210
|
+
[
|
|
211
|
+
(0, $8e847109a6ab556d$export$d688439359537581),
|
|
212
|
+
null
|
|
213
|
+
]
|
|
214
|
+
],
|
|
215
|
+
children: /*#__PURE__*/ (0, $gwkOZ$jsxs)((0, $8e847109a6ab556d$export$8b251419efc915eb), {
|
|
216
|
+
styles: $f06f4d5597ad704c$var$headerStyles,
|
|
217
|
+
children: [
|
|
218
|
+
/*#__PURE__*/ (0, $gwkOZ$jsx)($f06f4d5597ad704c$export$adb29da0ac001538, {
|
|
219
|
+
slot: "previous",
|
|
220
|
+
children: /*#__PURE__*/ (0, $gwkOZ$jsx)((0, $5c3fed25abf344cc$export$2e2bcd8739ae039), {})
|
|
221
|
+
}),
|
|
222
|
+
/*#__PURE__*/ (0, $gwkOZ$jsx)($f06f4d5597ad704c$export$77af08ed164baa7, {}),
|
|
223
|
+
/*#__PURE__*/ (0, $gwkOZ$jsx)($f06f4d5597ad704c$export$adb29da0ac001538, {
|
|
224
|
+
slot: "next",
|
|
225
|
+
children: /*#__PURE__*/ (0, $gwkOZ$jsx)((0, $04f4b15c8c66bb2a$export$2e2bcd8739ae039), {})
|
|
226
|
+
})
|
|
227
|
+
]
|
|
228
|
+
})
|
|
217
229
|
}),
|
|
218
230
|
/*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
|
|
219
|
-
className: "
|
|
231
|
+
className: " sd11 _tc11 Uj11 qj11 Za11 ed11",
|
|
220
232
|
children: Array.from({
|
|
221
233
|
length: visibleMonths
|
|
222
234
|
}).map((_, i)=>/*#__PURE__*/ (0, $gwkOZ$jsx)($f06f4d5597ad704c$export$5bd780d491cfc46c, {
|
|
@@ -242,7 +254,7 @@ const $f06f4d5597ad704c$export$e1aef45b828286de = /*#__PURE__*/ (0, $gwkOZ$forwa
|
|
|
242
254
|
const $f06f4d5597ad704c$export$5bd780d491cfc46c = (props)=>{
|
|
243
255
|
// use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.
|
|
244
256
|
return /*#__PURE__*/ (0, $gwkOZ$jsxs)((0, $gwkOZ$CalendarGrid), {
|
|
245
|
-
className: "
|
|
257
|
+
className: " __na11 __oe11 _Bb11",
|
|
246
258
|
offset: {
|
|
247
259
|
months: props.months
|
|
248
260
|
},
|
|
@@ -304,13 +316,13 @@ const $f06f4d5597ad704c$export$77af08ed164baa7 = ()=>{
|
|
|
304
316
|
else return /*#__PURE__*/ (0, $gwkOZ$jsxs)((0, $gwkOZ$Fragment1), {
|
|
305
317
|
children: [
|
|
306
318
|
/*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
|
|
307
|
-
className: "
|
|
319
|
+
className: " _6b11 ZC11"
|
|
308
320
|
}),
|
|
309
321
|
/*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
|
|
310
|
-
className: "
|
|
322
|
+
className: " _6b11 Zo11"
|
|
311
323
|
}),
|
|
312
324
|
/*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
|
|
313
|
-
className: "
|
|
325
|
+
className: " _6b11 ZC11"
|
|
314
326
|
}),
|
|
315
327
|
/*#__PURE__*/ (0, $gwkOZ$jsx)("div", {
|
|
316
328
|
className: $f06f4d5597ad704c$var$titleStyles,
|
|
@@ -327,12 +339,12 @@ const $f06f4d5597ad704c$export$adb29da0ac001538 = (props1)=>{
|
|
|
327
339
|
className: function anonymous(props) {
|
|
328
340
|
let rules = " ";
|
|
329
341
|
if (props.direction === "rtl") {
|
|
330
|
-
rules += ' -Z4Pn4c-
|
|
331
|
-
rules += '
|
|
342
|
+
rules += ' -Z4Pn4c-a11';
|
|
343
|
+
rules += ' __Ha11';
|
|
332
344
|
}
|
|
333
345
|
if (props.direction === "rtl") {
|
|
334
|
-
rules += ' -_04Pn4c-
|
|
335
|
-
rules += '
|
|
346
|
+
rules += ' -_04Pn4c-a11';
|
|
347
|
+
rules += ' __Ha11';
|
|
336
348
|
}
|
|
337
349
|
return rules;
|
|
338
350
|
}({
|
|
@@ -403,7 +415,7 @@ const $f06f4d5597ad704c$var$CalendarCellInner = (props)=>{
|
|
|
403
415
|
});
|
|
404
416
|
let isBackgroundStyleApplied = isSelected && isRangeSelection && (state.isSelected(prevDay) || nextDay.month === date.month && state.isSelected(nextDay));
|
|
405
417
|
return /*#__PURE__*/ (0, $gwkOZ$jsxs)("div", {
|
|
406
|
-
className: "
|
|
418
|
+
className: " _Pc11 ZvFFGYc11 -_4Isswc-ZvFFGYc11 -Z_-ZC11",
|
|
407
419
|
children: [
|
|
408
420
|
/*#__PURE__*/ (0, $gwkOZ$jsxs)("div", {
|
|
409
421
|
ref: ref,
|
package/dist/Calendar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Calendar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, Header, Heading, pressScale} from './';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarGrid as AriaCalendarGrid,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarProps as AriaCalendarProps,\n ButtonProps,\n CalendarCellProps,\n CalendarCellRenderProps,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCellProps,\n CalendarState,\n CalendarStateContext,\n ContextValue,\n DateValue,\n RangeCalendarState,\n RangeCalendarStateContext,\n Text\n} from 'react-aria-components';\nimport {AriaCalendarGridProps} from '@react-aria/calendar';\nimport {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n CalendarDate,\n getDayOfWeek,\n startOfMonth\n} from '@internationalized/date';\nimport ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';\nimport ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {helpTextStyles} from './Field';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface CalendarProps<T extends DateValue>\n extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,\n StyleProps {\n /**\n * The error message to display when the calendar is invalid.\n */\n errorMessage?: ReactNode,\n /**\n * The number of months to display at once.\n * @default 1\n */\n visibleMonths?: number\n}\n\nexport const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);\n\nconst calendarStyles = style({\n display: 'flex',\n flexDirection: 'column',\n gap: 24,\n width: 'fit',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst headerStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: 'full'\n});\n\nconst headingStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n margin: 0,\n width: 'full'\n});\n\nconst titleStyles = style({\n font: 'title-lg',\n textAlign: 'center',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: '0%',\n minWidth: 0\n});\n\nconst headerCellStyles = style({\n font: 'title-sm',\n cursor: 'default',\n textAlign: 'center',\n paddingStart: {\n default: 4,\n ':first-child': 0\n },\n paddingEnd: {\n default: 4,\n ':last-child': 0\n },\n paddingBottom: 12\n});\n\nconst cellStyles = style({\n outlineStyle: 'none',\n '--cell-gap': {\n type: 'paddingStart',\n value: 4\n },\n paddingStart: {\n default: 4,\n isFirstChild: 0\n },\n paddingEnd: {\n default: 4,\n isLastChild: 0\n },\n paddingTop: {\n default: 2,\n isFirstWeek: 0\n },\n paddingBottom: 2,\n position: 'relative',\n width: 32,\n height: 32,\n display: {\n default: 'flex',\n isOutsideMonth: 'none'\n },\n alignItems: 'center',\n justifyContent: 'center'\n});\n\nconst cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({\n ...focusRing(),\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n outlineOffset: {\n default: -2,\n isToday: 2,\n isSelected: {\n selectionMode: {\n single: 2,\n range: -2\n }\n },\n isSelectionStart: 2,\n isSelectionEnd: 2\n },\n position: 'relative',\n font: 'body-sm',\n cursor: 'default',\n width: 'full',\n height: 32,\n borderRadius: 'full',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isDisabled: 'transparent',\n isToday: {\n default: baseColor('gray-300'),\n isDisabled: 'disabled'\n },\n isSelected: {\n selectionMode: {\n single: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600'),\n isDisabled: 'transparent'\n },\n range: {\n isHovered: 'blue-500'\n }\n }\n },\n isSelectionStart: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isSelectionEnd: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isUnavailable: 'transparent',\n forcedColors: {\n default: 'transparent',\n isToday: 'ButtonFace',\n isHovered: 'Highlight',\n isSelected: {\n selectionMode: {\n single: 'Highlight',\n range: {\n isHovered: 'Highlight'\n }\n }\n },\n isSelectionStart: 'Highlight',\n isSelectionEnd: 'Highlight',\n isUnavailable: 'transparent'\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'white',\n selectionMode: {\n range: 'neutral'\n }\n },\n isSelectionStart: 'white',\n isSelectionEnd: 'white',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isToday: 'ButtonFace',\n isSelected: 'HighlightText',\n isSelectionStart: 'HighlightText',\n isSelectionEnd: 'HighlightText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nconst unavailableStyles = style({\n position: 'absolute',\n top: 'calc(50% - 1px)',\n left: 'calc(25% - 1px)',\n right: 'calc(25% - 1px)',\n height: 2,\n transform: 'rotate(-16deg)',\n borderRadius: 'full',\n backgroundColor: '[currentColor]'\n});\n\nconst selectionSpanStyles = style({\n position: 'absolute',\n zIndex: -1,\n top: 0,\n insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',\n insetEnd: 0,\n bottom: 0,\n borderWidth: 2,\n borderStyle: 'dashed',\n borderColor: {\n default: 'blue-800', // focus-indicator-color\n forcedColors: {\n default: 'ButtonText'\n }\n },\n borderStartRadius: 'full',\n borderEndRadius: 'full',\n backgroundColor: {\n default: 'blue-subtle',\n forcedColors: {\n default: 'Highlight'\n }\n },\n forcedColorAdjust: 'none'\n});\n\nexport const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);\n let {\n visibleMonths = 1,\n errorMessage,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n ...otherProps\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <AriaCalendar\n {...otherProps}\n ref={ref}\n visibleDuration={{months: visibleMonths}}\n style={UNSAFE_style}\n className={(UNSAFE_className || '') + calendarStyles(null, styles)}>\n {({isInvalid, isDisabled}) => {\n return (\n <>\n <Header styles={headerStyles}>\n <CalendarButton slot=\"previous\"><ChevronLeftIcon /></CalendarButton>\n <CalendarHeading />\n <CalendarButton slot=\"next\"><ChevronRightIcon /></CalendarButton>\n </Header>\n <div\n className={style({\n display: 'flex',\n flexDirection: 'row',\n gap: 24,\n width: 'full',\n alignItems: 'start'\n })}>\n {Array.from({length: visibleMonths}).map((_, i) => (\n <CalendarGrid months={i} key={i} />\n ))}\n </div>\n {isInvalid && (\n <Text slot=\"errorMessage\" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>\n {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}\n </Text>\n )}\n </>\n );\n }}\n </AriaCalendar>\n );\n});\n\nexport const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {\n // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.\n return (\n <AriaCalendarGrid\n className={style({\n borderCollapse: 'collapse',\n borderSpacing: 0,\n isolation: 'isolate'\n })}\n offset={{months: props.months}}>\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell>\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell date={date} firstDayOfWeek={props.firstDayOfWeek} />\n )}\n </CalendarGridBody>\n </AriaCalendarGrid>\n );\n};\n\n// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.\n// However, we want to show each month individually.\nexport const CalendarHeading = (): ReactElement => {\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};\n let currentMonth = visibleRange?.start ?? visibleRange?.end;\n let monthFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,\n calendar: visibleRange?.start.calendar.identifier,\n timeZone\n });\n let months = useMemo(() => {\n if (!visibleRange) {\n return [];\n }\n let months: string[] = [];\n for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {\n // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.\n // there has to be a better way to do this...\n if (i.month === visibleRange.start.month) {\n i = i.add({weeks: 1});\n }\n months.push(monthFormatter.format(i.toDate(timeZone!)));\n }\n return months;\n }, [visibleRange, monthFormatter, timeZone]);\n\n return (\n <Heading styles={headingStyles}>\n {months.map((month, i) => {\n if (i === 0) {\n return (\n <Fragment key={month}>\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n } else {\n return (\n <Fragment key={month}>\n {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={style({visibility: 'hidden', width: 24})} />\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n }\n })}\n </Heading>\n );\n};\n\nexport const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {\n let {direction} = useLocale();\n return (\n <div\n className={\n style({\n scale: {\n direction: {\n rtl: -1\n }\n }\n })({direction})\n }>\n <ActionButton\n {...props}\n isQuiet>\n {props.children}\n </ActionButton>\n </div>\n );\n};\n\nconst CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {\n return (\n <AriaCalendarHeaderCell className={headerCellStyles}>\n {props.children}\n </AriaCalendarHeaderCell>\n );\n};\n\nconst CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {\n let {locale} = useLocale();\n let firstDayOfWeek = props.firstDayOfWeek;\n // Calculate the day and week index based on the date.\n let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);\n\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let state = (calendarStateContext ?? rangeCalendarStateContext)!;\n\n let isFirstWeek = weekIndex === 0;\n let isFirstChild = dayIndex === 0;\n let isLastChild = dayIndex === 6;\n return (\n <AriaCalendarCell\n date={props.date}\n className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>\n {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}\n </AriaCalendarCell>\n );\n};\n\nconst CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {\n let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;\n let {getDatesInWeek} = state;\n let ref = useRef<HTMLDivElement>(null);\n let {isUnavailable, formattedDate, isSelected} = renderProps!;\n let startDate = startOfMonth(date);\n let datesInWeek = getDatesInWeek(weekIndex, startDate);\n\n // Starting from the current day, find the first day before it in the current week that is not selected.\n // Then, the span of selected days is the current day minus the first unselected day.\n let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {\n return date && i > 0 && (!state.isSelected(date) || date.month !== props.date.month);\n });\n let selectionSpan = -1;\n if (firstUnselectedInRangeInWeek > -1 && isSelected) {\n selectionSpan = firstUnselectedInRangeInWeek - 1;\n } else if (isSelected) {\n selectionSpan = dayIndex;\n }\n\n let prevDay = date.subtract({days: 1});\n let nextDay = date.add({days: 1});\n let isBackgroundStyleApplied = (\n isSelected\n && isRangeSelection\n && (state.isSelected(prevDay)\n || (nextDay.month === date.month && state.isSelected(nextDay)))\n );\n\n return (\n <div\n className={style({\n position: 'relative',\n width: 32,\n '--cell-width': {\n type: 'width',\n value: '[self(width)]'\n }\n })}>\n <div\n ref={ref}\n style={pressScale(ref, {})(renderProps!)}\n className={cellInnerStyles({...renderProps!, selectionMode: isRangeSelection ? 'range' : 'single'})}>\n <div>\n {formattedDate}\n </div>\n {isUnavailable && <div className={unavailableStyles} role=\"presentation\" />}\n </div>\n {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles} role=\"presentation\" />}\n </div>\n );\n};\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\n/**\n * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.\n * @param date - The date to calculate indices for.\n * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').\n * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).\n * @returns Object with weekIndex and dayIndex.\n */\nfunction useWeekAndDayIndices(\n date: CalendarDate,\n locale: string,\n firstDayOfWeek?: DayOfWeek\n) {\n let {dayIndex, weekIndex} = useMemo(() => {\n // Get the day index within the week (0-6)\n const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);\n\n const monthStart = startOfMonth(date);\n\n // Calculate the week index by finding which week this date falls into\n // within the month's calendar grid\n const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);\n const dayOfMonth = date.day;\n\n const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);\n\n return {\n weekIndex,\n dayIndex\n };\n }, [date, locale, firstDayOfWeek]);\n\n return {dayIndex, weekIndex};\n}\n"],"names":[],"version":3,"file":"Calendar.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Calendar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionButton, Header, HeaderContext, Heading, HeadingContext, pressScale} from './';\nimport {\n Calendar as AriaCalendar,\n CalendarCell as AriaCalendarCell,\n CalendarGrid as AriaCalendarGrid,\n CalendarHeaderCell as AriaCalendarHeaderCell,\n CalendarProps as AriaCalendarProps,\n ButtonProps,\n CalendarCellProps,\n CalendarCellRenderProps,\n CalendarGridBody,\n CalendarGridHeader,\n CalendarHeaderCellProps,\n CalendarState,\n CalendarStateContext,\n ContextValue,\n DateValue,\n Provider,\n RangeCalendarState,\n RangeCalendarStateContext,\n Text\n} from 'react-aria-components';\nimport {AriaCalendarGridProps} from '@react-aria/calendar';\nimport {baseColor, focusRing, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n CalendarDate,\n getDayOfWeek,\n startOfMonth\n} from '@internationalized/date';\nimport ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';\nimport ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {helpTextStyles} from './Field';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport React, {createContext, CSSProperties, ForwardedRef, forwardRef, Fragment, PropsWithChildren, ReactElement, ReactNode, useContext, useMemo, useRef} from 'react';\nimport {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface CalendarProps<T extends DateValue>\n extends Omit<AriaCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,\n StyleProps {\n /**\n * The error message to display when the calendar is invalid.\n */\n errorMessage?: ReactNode,\n /**\n * The number of months to display at once.\n * @default 1\n */\n visibleMonths?: number\n}\n\nexport const CalendarContext = createContext<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>(null);\n\nconst calendarStyles = style({\n display: 'flex',\n flexDirection: 'column',\n gap: 24,\n width: 'fit',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst headerStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: 'full'\n});\n\nconst headingStyles = style({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n margin: 0,\n width: 'full'\n});\n\nconst titleStyles = style({\n font: 'title-lg',\n textAlign: 'center',\n flexGrow: 1,\n flexShrink: 0,\n flexBasis: '0%',\n minWidth: 0\n});\n\nconst headerCellStyles = style({\n font: 'title-sm',\n cursor: 'default',\n textAlign: 'center',\n paddingStart: {\n default: 4,\n ':first-child': 0\n },\n paddingEnd: {\n default: 4,\n ':last-child': 0\n },\n paddingBottom: 12\n});\n\nconst cellStyles = style({\n outlineStyle: 'none',\n '--cell-gap': {\n type: 'paddingStart',\n value: 4\n },\n paddingStart: {\n default: 4,\n isFirstChild: 0\n },\n paddingEnd: {\n default: 4,\n isLastChild: 0\n },\n paddingTop: {\n default: 2,\n isFirstWeek: 0\n },\n paddingBottom: 2,\n position: 'relative',\n width: 32,\n height: 32,\n display: {\n default: 'flex',\n isOutsideMonth: 'none'\n },\n alignItems: 'center',\n justifyContent: 'center'\n});\n\nconst cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({\n ...focusRing(),\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n outlineOffset: {\n default: -2,\n isToday: 2,\n isSelected: {\n selectionMode: {\n single: 2,\n range: -2\n }\n },\n isSelectionStart: 2,\n isSelectionEnd: 2\n },\n position: 'relative',\n font: 'body-sm',\n cursor: 'default',\n width: 'full',\n height: 32,\n borderRadius: 'full',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isDisabled: 'transparent',\n isToday: {\n default: baseColor('gray-300'),\n isDisabled: 'disabled'\n },\n isSelected: {\n selectionMode: {\n single: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600'),\n isDisabled: 'transparent'\n },\n range: {\n isHovered: 'blue-500'\n }\n }\n },\n isSelectionStart: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isSelectionEnd: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isUnavailable: 'transparent',\n forcedColors: {\n default: 'transparent',\n isToday: 'ButtonFace',\n isHovered: 'Highlight',\n isSelected: {\n selectionMode: {\n single: 'Highlight',\n range: {\n isHovered: 'Highlight'\n }\n }\n },\n isSelectionStart: 'Highlight',\n isSelectionEnd: 'Highlight',\n isUnavailable: 'transparent'\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'white',\n selectionMode: {\n range: 'neutral'\n }\n },\n isSelectionStart: 'white',\n isSelectionEnd: 'white',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isToday: 'ButtonFace',\n isSelected: 'HighlightText',\n isSelectionStart: 'HighlightText',\n isSelectionEnd: 'HighlightText',\n isDisabled: 'GrayText'\n }\n }\n});\n\nconst unavailableStyles = style({\n position: 'absolute',\n top: 'calc(50% - 1px)',\n left: 'calc(25% - 1px)',\n right: 'calc(25% - 1px)',\n height: 2,\n transform: 'rotate(-16deg)',\n borderRadius: 'full',\n backgroundColor: '[currentColor]'\n});\n\nconst selectionSpanStyles = style({\n position: 'absolute',\n zIndex: -1,\n top: 0,\n insetStart: 'calc(-1 * var(--selection-span) * (var(--cell-width) + var(--cell-gap) + var(--cell-gap)))',\n insetEnd: 0,\n bottom: 0,\n borderWidth: 2,\n borderStyle: 'dashed',\n borderColor: {\n default: 'blue-800', // focus-indicator-color\n forcedColors: {\n default: 'ButtonText'\n }\n },\n borderStartRadius: 'full',\n borderEndRadius: 'full',\n backgroundColor: {\n default: 'blue-subtle',\n forcedColors: {\n default: 'Highlight'\n }\n },\n forcedColorAdjust: 'none'\n});\n\nexport const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, CalendarContext);\n let {\n visibleMonths = 1,\n errorMessage,\n UNSAFE_style,\n UNSAFE_className,\n styles,\n ...otherProps\n } = props;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n return (\n <AriaCalendar\n {...otherProps}\n ref={ref}\n visibleDuration={{months: visibleMonths}}\n style={UNSAFE_style}\n className={(UNSAFE_className || '') + calendarStyles(null, styles)}>\n {({isInvalid, isDisabled}) => {\n return (\n <>\n <Provider\n values={[\n [HeaderContext, null],\n [HeadingContext, null]\n ]}>\n <Header styles={headerStyles}>\n <CalendarButton slot=\"previous\"><ChevronLeftIcon /></CalendarButton>\n <CalendarHeading />\n <CalendarButton slot=\"next\"><ChevronRightIcon /></CalendarButton>\n </Header>\n </Provider>\n <div\n className={style({\n display: 'flex',\n flexDirection: 'row',\n gap: 24,\n width: 'full',\n alignItems: 'start'\n })}>\n {Array.from({length: visibleMonths}).map((_, i) => (\n <CalendarGrid months={i} key={i} />\n ))}\n </div>\n {isInvalid && (\n <Text slot=\"errorMessage\" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>\n {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 1})}\n </Text>\n )}\n </>\n );\n }}\n </AriaCalendar>\n );\n});\n\nexport const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & PropsWithChildren & {months: number}): ReactElement => {\n // use isolation to start a new stacking context so that we can use zIndex -1 for the selection span.\n return (\n <AriaCalendarGrid\n className={style({\n borderCollapse: 'collapse',\n borderSpacing: 0,\n isolation: 'isolate'\n })}\n offset={{months: props.months}}>\n <CalendarGridHeader>\n {(day) => (\n <CalendarHeaderCell>\n {day}\n </CalendarHeaderCell>\n )}\n </CalendarGridHeader>\n <CalendarGridBody>\n {(date) => (\n <CalendarCell date={date} firstDayOfWeek={props.firstDayOfWeek} />\n )}\n </CalendarGridBody>\n </AriaCalendarGrid>\n );\n};\n\n// Ordinarily the heading is a formatted date range, ie January 2025 - February 2025.\n// However, we want to show each month individually.\nexport const CalendarHeading = (): ReactElement => {\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let {visibleRange, timeZone} = calendarStateContext ?? rangeCalendarStateContext ?? {};\n let currentMonth = visibleRange?.start ?? visibleRange?.end;\n let monthFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era: currentMonth && currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,\n calendar: visibleRange?.start.calendar.identifier,\n timeZone\n });\n let months = useMemo(() => {\n if (!visibleRange) {\n return [];\n }\n let months: string[] = [];\n for (let i = visibleRange.start; i.compare(visibleRange.end) <= 0; i = i.add({months: 1})) {\n // TODO: account for the first week possibly overlapping, like with a custom 454 calendar.\n // there has to be a better way to do this...\n if (i.month === visibleRange.start.month) {\n i = i.add({weeks: 1});\n }\n months.push(monthFormatter.format(i.toDate(timeZone!)));\n }\n return months;\n }, [visibleRange, monthFormatter, timeZone]);\n\n return (\n <Heading styles={headingStyles}>\n {months.map((month, i) => {\n if (i === 0) {\n return (\n <Fragment key={month}>\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n } else {\n return (\n <Fragment key={month}>\n {/* Spacers to account for Next/Previous buttons and gap, spelled out to show the math */}\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={style({visibility: 'hidden', width: 24})} />\n <div className={style({visibility: 'hidden', width: 32})} />\n <div className={titleStyles}>{month}</div>\n </Fragment>\n );\n }\n })}\n </Heading>\n );\n};\n\nexport const CalendarButton = (props: Omit<ButtonProps, 'children'> & {children: ReactNode}): ReactElement => {\n let {direction} = useLocale();\n return (\n <div\n className={\n style({\n scale: {\n direction: {\n rtl: -1\n }\n }\n })({direction})\n }>\n <ActionButton\n {...props}\n isQuiet>\n {props.children}\n </ActionButton>\n </div>\n );\n};\n\nconst CalendarHeaderCell = (props: Omit<CalendarHeaderCellProps, 'children'> & PropsWithChildren): ReactElement => {\n return (\n <AriaCalendarHeaderCell className={headerCellStyles}>\n {props.children}\n </AriaCalendarHeaderCell>\n );\n};\n\nconst CalendarCell = (props: Omit<CalendarCellProps, 'children'> & {firstDayOfWeek: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | undefined}): ReactElement => {\n let {locale} = useLocale();\n let firstDayOfWeek = props.firstDayOfWeek;\n // Calculate the day and week index based on the date.\n let {dayIndex, weekIndex} = useWeekAndDayIndices(props.date, locale, firstDayOfWeek);\n\n let calendarStateContext = useContext(CalendarStateContext);\n let rangeCalendarStateContext = useContext(RangeCalendarStateContext);\n let state = (calendarStateContext ?? rangeCalendarStateContext)!;\n\n let isFirstWeek = weekIndex === 0;\n let isFirstChild = dayIndex === 0;\n let isLastChild = dayIndex === 6;\n return (\n <AriaCalendarCell\n date={props.date}\n className={(renderProps) => cellStyles({...renderProps, isFirstChild, isLastChild, isFirstWeek})}>\n {(renderProps) => <CalendarCellInner {...props} weekIndex={weekIndex} dayIndex={dayIndex} state={state} isRangeSelection={!!rangeCalendarStateContext} renderProps={renderProps} />}\n </AriaCalendarCell>\n );\n};\n\nconst CalendarCellInner = (props: Omit<CalendarCellProps, 'children'> & {isRangeSelection: boolean, state: CalendarState | RangeCalendarState, weekIndex: number, dayIndex: number, renderProps?: CalendarCellRenderProps, date: DateValue}): ReactElement => {\n let {weekIndex, dayIndex, date, renderProps, state, isRangeSelection} = props;\n let {getDatesInWeek} = state;\n let ref = useRef<HTMLDivElement>(null);\n let {isUnavailable, formattedDate, isSelected} = renderProps!;\n let startDate = startOfMonth(date);\n let datesInWeek = getDatesInWeek(weekIndex, startDate);\n\n // Starting from the current day, find the first day before it in the current week that is not selected.\n // Then, the span of selected days is the current day minus the first unselected day.\n let firstUnselectedInRangeInWeek = datesInWeek.slice(0, dayIndex + 1).reverse().findIndex((date, i) => {\n return date && i > 0 && (!state.isSelected(date) || date.month !== props.date.month);\n });\n let selectionSpan = -1;\n if (firstUnselectedInRangeInWeek > -1 && isSelected) {\n selectionSpan = firstUnselectedInRangeInWeek - 1;\n } else if (isSelected) {\n selectionSpan = dayIndex;\n }\n\n let prevDay = date.subtract({days: 1});\n let nextDay = date.add({days: 1});\n let isBackgroundStyleApplied = (\n isSelected\n && isRangeSelection\n && (state.isSelected(prevDay)\n || (nextDay.month === date.month && state.isSelected(nextDay)))\n );\n\n return (\n <div\n className={style({\n position: 'relative',\n width: 32,\n '--cell-width': {\n type: 'width',\n value: '[self(width)]'\n }\n })}>\n <div\n ref={ref}\n style={pressScale(ref, {})(renderProps!)}\n className={cellInnerStyles({...renderProps!, selectionMode: isRangeSelection ? 'range' : 'single'})}>\n <div>\n {formattedDate}\n </div>\n {isUnavailable && <div className={unavailableStyles} role=\"presentation\" />}\n </div>\n {isBackgroundStyleApplied && <div style={{'--selection-span': selectionSpan} as CSSProperties} className={selectionSpanStyles} role=\"presentation\" />}\n </div>\n );\n};\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\n/**\n * Calculate the week index (0-based) and day index (0-based) for a given date within a month in a calendar.\n * @param date - The date to calculate indices for.\n * @param locale - The locale string (e.g., 'en-US', 'fr-FR', 'hi-IN-u-ca-indian').\n * @param firstDayOfWeek - Optional override for the first day of the week ('sun', 'mon', 'tue', etc.).\n * @returns Object with weekIndex and dayIndex.\n */\nfunction useWeekAndDayIndices(\n date: CalendarDate,\n locale: string,\n firstDayOfWeek?: DayOfWeek\n) {\n let {dayIndex, weekIndex} = useMemo(() => {\n // Get the day index within the week (0-6)\n const dayIndex = getDayOfWeek(date, locale, firstDayOfWeek);\n\n const monthStart = startOfMonth(date);\n\n // Calculate the week index by finding which week this date falls into\n // within the month's calendar grid\n const monthStartDayOfWeek = getDayOfWeek(monthStart, locale, firstDayOfWeek);\n const dayOfMonth = date.day;\n\n const weekIndex = Math.floor((dayOfMonth + monthStartDayOfWeek - 1) / 7);\n\n return {\n weekIndex,\n dayIndex\n };\n }, [date, locale, firstDayOfWeek]);\n\n return {dayIndex, weekIndex};\n}\n"],"names":[],"version":3,"file":"Calendar.mjs.map"}
|