@react-spectrum/datepicker 3.14.3 → 3.14.5
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/DatePicker.main.js +2 -4
- package/dist/DatePicker.main.js.map +1 -1
- package/dist/DatePicker.mjs +2 -4
- package/dist/DatePicker.module.js +2 -4
- package/dist/DatePicker.module.js.map +1 -1
- package/dist/DateRangePicker.main.js +2 -4
- package/dist/DateRangePicker.main.js.map +1 -1
- package/dist/DateRangePicker.mjs +2 -4
- package/dist/DateRangePicker.module.js +2 -4
- package/dist/DateRangePicker.module.js.map +1 -1
- package/dist/{datepicker.c3193fb9.css → datepicker.4d1286b0.css} +5 -5
- package/dist/{datepicker.c3193fb9.css.map → datepicker.4d1286b0.css.map} +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +21 -21
- package/src/DatePicker.tsx +1 -5
- package/src/DateRangePicker.tsx +1 -5
package/dist/DatePicker.main.js
CHANGED
|
@@ -5,7 +5,7 @@ var $c3ebc4931d9b9977$exports = require("./Input.main.js");
|
|
|
5
5
|
var $0045b32a117743a7$exports = require("./intlStrings.main.js");
|
|
6
6
|
require("./datepicker.776a7787.css");
|
|
7
7
|
require("./textfield_vars_css.main.js");
|
|
8
|
-
require("./datepicker.
|
|
8
|
+
require("./datepicker.4d1286b0.css");
|
|
9
9
|
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
10
10
|
var $740ff83729a8f317$exports = require("./TimeField.main.js");
|
|
11
11
|
var $9d3b96715dbbb2b7$exports = require("./utils.main.js");
|
|
@@ -73,7 +73,7 @@ $parcel$export(module.exports, "DatePicker", () => $5c1ddf85d7c27889$export$5109
|
|
|
73
73
|
const $5c1ddf85d7c27889$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).forwardRef(function DatePicker(props, ref) {
|
|
74
74
|
props = (0, $2ni54$reactspectrumprovider.useProviderProps)(props);
|
|
75
75
|
props = (0, $2ni54$reactspectrumform.useFormProps)(props);
|
|
76
|
-
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1
|
|
76
|
+
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
77
77
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $2ni54$reactariainteractions.useHover)({
|
|
78
78
|
isDisabled: isDisabled
|
|
79
79
|
});
|
|
@@ -173,8 +173,6 @@ const $5c1ddf85d7c27889$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, ($parcel$int
|
|
|
173
173
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2ni54$react))).createElement((0, $2ni54$reactspectrumcalendar.Calendar), {
|
|
174
174
|
...calendarProps,
|
|
175
175
|
visibleMonths: visibleMonths,
|
|
176
|
-
pageBehavior: pageBehavior,
|
|
177
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
178
176
|
createCalendar: props.createCalendar,
|
|
179
177
|
UNSAFE_className: (0, $2ni54$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-calendar', {
|
|
180
178
|
'is-invalid': isInvalid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n autoFocus,\n isQuiet,\n isDisabled,\n placeholderValue,\n maxVisibleMonths = 1,\n pageBehavior,\n firstDayOfWeek\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDatePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...fieldProps}\n data-testid=\"date-field\"\n isQuiet={isQuiet} />\n </Input>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <Calendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n pageBehavior={pageBehavior}\n firstDayOfWeek={firstDayOfWeek}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n {showTimeField &&\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('time')}\n value={state.timeValue}\n onChange={state.setTimeValue}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n marginTop=\"size-100\" />\n </div>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n autoFocus,\n isQuiet,\n isDisabled,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDatePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...fieldProps}\n data-testid=\"date-field\"\n isQuiet={isQuiet} />\n </Input>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <Calendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n {showTimeField &&\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('time')}\n value={state.timeValue}\n onChange={state.setTimeValue}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n marginTop=\"size-100\" />\n </div>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.main.js.map"}
|
package/dist/DatePicker.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.mjs";
|
|
|
5
5
|
import $8czI1$intlStringsmodulejs from "./intlStrings.mjs";
|
|
6
6
|
import "./datepicker.776a7787.css";
|
|
7
7
|
import "./textfield_vars_css.mjs";
|
|
8
|
-
import "./datepicker.
|
|
8
|
+
import "./datepicker.4d1286b0.css";
|
|
9
9
|
import $8czI1$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
10
10
|
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.mjs";
|
|
11
11
|
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.mjs";
|
|
@@ -67,7 +67,7 @@ function $parcel$interopDefault(a) {
|
|
|
67
67
|
const $beaeefa091999363$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8czI1$react).forwardRef(function DatePicker(props, ref) {
|
|
68
68
|
props = (0, $8czI1$useProviderProps)(props);
|
|
69
69
|
props = (0, $8czI1$useFormProps)(props);
|
|
70
|
-
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1
|
|
70
|
+
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
71
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8czI1$useHover)({
|
|
72
72
|
isDisabled: isDisabled
|
|
73
73
|
});
|
|
@@ -167,8 +167,6 @@ const $beaeefa091999363$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8czI1$react
|
|
|
167
167
|
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Calendar), {
|
|
168
168
|
...calendarProps,
|
|
169
169
|
visibleMonths: visibleMonths,
|
|
170
|
-
pageBehavior: pageBehavior,
|
|
171
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
172
170
|
createCalendar: props.createCalendar,
|
|
173
171
|
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
174
172
|
'is-invalid': isInvalid
|
|
@@ -5,7 +5,7 @@ import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.module
|
|
|
5
5
|
import $8czI1$intlStringsmodulejs from "./intlStrings.module.js";
|
|
6
6
|
import "./datepicker.776a7787.css";
|
|
7
7
|
import "./textfield_vars_css.module.js";
|
|
8
|
-
import "./datepicker.
|
|
8
|
+
import "./datepicker.4d1286b0.css";
|
|
9
9
|
import $8czI1$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
|
|
10
10
|
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.module.js";
|
|
11
11
|
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.module.js";
|
|
@@ -67,7 +67,7 @@ function $parcel$interopDefault(a) {
|
|
|
67
67
|
const $beaeefa091999363$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8czI1$react).forwardRef(function DatePicker(props, ref) {
|
|
68
68
|
props = (0, $8czI1$useProviderProps)(props);
|
|
69
69
|
props = (0, $8czI1$useFormProps)(props);
|
|
70
|
-
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1
|
|
70
|
+
let { autoFocus: autoFocus, isQuiet: isQuiet, isDisabled: isDisabled, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
71
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8czI1$useHover)({
|
|
72
72
|
isDisabled: isDisabled
|
|
73
73
|
});
|
|
@@ -167,8 +167,6 @@ const $beaeefa091999363$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8czI1$react
|
|
|
167
167
|
}, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Calendar), {
|
|
168
168
|
...calendarProps,
|
|
169
169
|
visibleMonths: visibleMonths,
|
|
170
|
-
pageBehavior: pageBehavior,
|
|
171
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
172
170
|
createCalendar: props.createCalendar,
|
|
173
171
|
UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
174
172
|
'is-invalid': isInvalid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n autoFocus,\n isQuiet,\n isDisabled,\n placeholderValue,\n maxVisibleMonths = 1,\n pageBehavior,\n firstDayOfWeek\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDatePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...fieldProps}\n data-testid=\"date-field\"\n isQuiet={isQuiet} />\n </Input>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <Calendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n pageBehavior={pageBehavior}\n firstDayOfWeek={firstDayOfWeek}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n {showTimeField &&\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('time')}\n value={state.timeValue}\n onChange={state.setTimeValue}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n marginTop=\"size-100\" />\n </div>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = React.forwardRef(function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n autoFocus,\n isQuiet,\n isDisabled,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDatePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...fieldProps}\n data-testid=\"date-field\"\n isQuiet={isQuiet} />\n </Input>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <Calendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n {showTimeField &&\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('time')}\n value={state.timeValue}\n onChange={state.setTimeValue}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n marginTop=\"size-100\" />\n </div>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}
|
|
@@ -3,7 +3,7 @@ require("./datepicker.e85992d8.css");
|
|
|
3
3
|
var $91c3db8c6a21ca71$exports = require("./styles_css.main.js");
|
|
4
4
|
var $c3ebc4931d9b9977$exports = require("./Input.main.js");
|
|
5
5
|
var $0045b32a117743a7$exports = require("./intlStrings.main.js");
|
|
6
|
-
require("./datepicker.
|
|
6
|
+
require("./datepicker.4d1286b0.css");
|
|
7
7
|
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
8
8
|
var $740ff83729a8f317$exports = require("./TimeField.main.js");
|
|
9
9
|
var $9d3b96715dbbb2b7$exports = require("./utils.main.js");
|
|
@@ -73,7 +73,7 @@ const $16cafb71dac155a4$export$17334619f3ac2224 = /*#__PURE__*/ (0, ($parcel$int
|
|
|
73
73
|
var _state_timeRange, _state_timeRange1;
|
|
74
74
|
props = (0, $56Vum$reactspectrumprovider.useProviderProps)(props);
|
|
75
75
|
props = (0, $56Vum$reactspectrumform.useFormProps)(props);
|
|
76
|
-
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1
|
|
76
|
+
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
77
77
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $56Vum$reactariainteractions.useHover)({
|
|
78
78
|
isDisabled: isDisabled
|
|
79
79
|
});
|
|
@@ -185,8 +185,6 @@ const $16cafb71dac155a4$export$17334619f3ac2224 = /*#__PURE__*/ (0, ($parcel$int
|
|
|
185
185
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($56Vum$react))).createElement((0, $56Vum$reactspectrumcalendar.RangeCalendar), {
|
|
186
186
|
...calendarProps,
|
|
187
187
|
visibleMonths: visibleMonths,
|
|
188
|
-
pageBehavior: pageBehavior,
|
|
189
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
190
188
|
createCalendar: props.createCalendar,
|
|
191
189
|
UNSAFE_className: (0, $56Vum$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-calendar', {
|
|
192
190
|
'is-invalid': validationState === 'invalid'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isQuiet,\n isDisabled,\n autoFocus,\n placeholderValue,\n maxVisibleMonths = 1,\n pageBehavior,\n firstDayOfWeek\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDateRangePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <div style={{overflow: 'hidden', width: '100%'}}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...startFieldProps}\n data-testid=\"start-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n <DateRangeDash />\n <DatePickerField\n {...endFieldProps}\n data-testid=\"end-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(\n styles,\n 'spectrum-Datepicker-endField',\n classNames(\n datepickerStyles,\n 'react-spectrum-Datepicker-endField'\n )\n )} />\n </Input>\n </div>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <RangeCalendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n pageBehavior={pageBehavior}\n firstDayOfWeek={firstDayOfWeek}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n {showTimeField &&\n <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('startTime')}\n value={state.timeRange?.start || null}\n onChange={v => state.setTime('start', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n <TimeField\n label={stringFormatter.format('endTime')}\n value={state.timeRange?.end || null}\n onChange={v => state.setTime('end', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n </Flex>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nfunction DateRangeDash() {\n return (\n <span\n aria-hidden=\"true\"\n data-testid=\"date-range-dash\"\n className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isQuiet,\n isDisabled,\n autoFocus,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDateRangePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <div style={{overflow: 'hidden', width: '100%'}}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...startFieldProps}\n data-testid=\"start-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n <DateRangeDash />\n <DatePickerField\n {...endFieldProps}\n data-testid=\"end-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(\n styles,\n 'spectrum-Datepicker-endField',\n classNames(\n datepickerStyles,\n 'react-spectrum-Datepicker-endField'\n )\n )} />\n </Input>\n </div>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <RangeCalendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n {showTimeField &&\n <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('startTime')}\n value={state.timeRange?.start || null}\n onChange={v => state.setTime('start', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n <TimeField\n label={stringFormatter.format('endTime')}\n value={state.timeRange?.end || null}\n onChange={v => state.setTime('end', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n </Flex>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nfunction DateRangeDash() {\n return (\n <span\n aria-hidden=\"true\"\n data-testid=\"date-range-dash\"\n className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.main.js.map"}
|
package/dist/DateRangePicker.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import "./datepicker.e85992d8.css";
|
|
|
3
3
|
import $dUbU7$styles_cssmodulejs from "./styles_css.mjs";
|
|
4
4
|
import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.mjs";
|
|
5
5
|
import $dUbU7$intlStringsmodulejs from "./intlStrings.mjs";
|
|
6
|
-
import "./datepicker.
|
|
6
|
+
import "./datepicker.4d1286b0.css";
|
|
7
7
|
import $dUbU7$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
8
8
|
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.mjs";
|
|
9
9
|
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.mjs";
|
|
@@ -67,7 +67,7 @@ const $cb301300011a98f7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $dUbU7$react
|
|
|
67
67
|
var _state_timeRange, _state_timeRange1;
|
|
68
68
|
props = (0, $dUbU7$useProviderProps)(props);
|
|
69
69
|
props = (0, $dUbU7$useFormProps)(props);
|
|
70
|
-
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1
|
|
70
|
+
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
71
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $dUbU7$useHover)({
|
|
72
72
|
isDisabled: isDisabled
|
|
73
73
|
});
|
|
@@ -179,8 +179,6 @@ const $cb301300011a98f7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $dUbU7$react
|
|
|
179
179
|
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$RangeCalendar), {
|
|
180
180
|
...calendarProps,
|
|
181
181
|
visibleMonths: visibleMonths,
|
|
182
|
-
pageBehavior: pageBehavior,
|
|
183
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
184
182
|
createCalendar: props.createCalendar,
|
|
185
183
|
UNSAFE_className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
186
184
|
'is-invalid': validationState === 'invalid'
|
|
@@ -3,7 +3,7 @@ import "./datepicker.e85992d8.css";
|
|
|
3
3
|
import $dUbU7$styles_cssmodulejs from "./styles_css.module.js";
|
|
4
4
|
import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.module.js";
|
|
5
5
|
import $dUbU7$intlStringsmodulejs from "./intlStrings.module.js";
|
|
6
|
-
import "./datepicker.
|
|
6
|
+
import "./datepicker.4d1286b0.css";
|
|
7
7
|
import $dUbU7$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
|
|
8
8
|
import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.module.js";
|
|
9
9
|
import {useFocusManagerRef as $ea94a5cfe92db3c2$export$71a23a36270e4bf0, useFormatHelpText as $ea94a5cfe92db3c2$export$322f4580ccd8dde6, useFormattedDateWidth as $ea94a5cfe92db3c2$export$31e22e3c931fc056, useVisibleMonths as $ea94a5cfe92db3c2$export$12ce2869ce471b1f} from "./utils.module.js";
|
|
@@ -67,7 +67,7 @@ const $cb301300011a98f7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $dUbU7$react
|
|
|
67
67
|
var _state_timeRange, _state_timeRange1;
|
|
68
68
|
props = (0, $dUbU7$useProviderProps)(props);
|
|
69
69
|
props = (0, $dUbU7$useFormProps)(props);
|
|
70
|
-
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1
|
|
70
|
+
let { isQuiet: isQuiet, isDisabled: isDisabled, autoFocus: autoFocus, placeholderValue: placeholderValue, maxVisibleMonths: maxVisibleMonths = 1 } = props;
|
|
71
71
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $dUbU7$useHover)({
|
|
72
72
|
isDisabled: isDisabled
|
|
73
73
|
});
|
|
@@ -179,8 +179,6 @@ const $cb301300011a98f7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $dUbU7$react
|
|
|
179
179
|
}, /*#__PURE__*/ (0, $dUbU7$react).createElement((0, $dUbU7$RangeCalendar), {
|
|
180
180
|
...calendarProps,
|
|
181
181
|
visibleMonths: visibleMonths,
|
|
182
|
-
pageBehavior: pageBehavior,
|
|
183
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
184
182
|
createCalendar: props.createCalendar,
|
|
185
183
|
UNSAFE_className: (0, $dUbU7$classNames)((0, ($parcel$interopDefault($dUbU7$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
|
|
186
184
|
'is-invalid': validationState === 'invalid'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isQuiet,\n isDisabled,\n autoFocus,\n placeholderValue,\n maxVisibleMonths = 1,\n pageBehavior,\n firstDayOfWeek\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDateRangePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <div style={{overflow: 'hidden', width: '100%'}}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...startFieldProps}\n data-testid=\"start-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n <DateRangeDash />\n <DatePickerField\n {...endFieldProps}\n data-testid=\"end-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(\n styles,\n 'spectrum-Datepicker-endField',\n classNames(\n datepickerStyles,\n 'react-spectrum-Datepicker-endField'\n )\n )} />\n </Input>\n </div>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <RangeCalendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n pageBehavior={pageBehavior}\n firstDayOfWeek={firstDayOfWeek}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n {showTimeField &&\n <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('startTime')}\n value={state.timeRange?.start || null}\n onChange={v => state.setTime('start', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n <TimeField\n label={stringFormatter.format('endTime')}\n value={state.timeRange?.end || null}\n onChange={v => state.setTime('end', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n </Flex>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nfunction DateRangeDash() {\n return (\n <span\n aria-hidden=\"true\"\n data-testid=\"date-range-dash\"\n className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDateRangePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport {RangeCalendar} from '@react-spectrum/calendar';\nimport React, {ReactElement, useRef} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePicker} from '@react-aria/datepicker';\nimport {useDateRangePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = React.forwardRef(function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n let {\n isQuiet,\n isDisabled,\n autoFocus,\n placeholderValue,\n maxVisibleMonths = 1\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let targetRef = useRef<HTMLDivElement | null>(null);\n let state = useDateRangePickerState({\n ...props,\n shouldCloseOnSelect: () => !state.hasTime\n });\n let {labelProps, groupProps, buttonProps, dialogProps, startFieldProps, endFieldProps, descriptionProps, errorMessageProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDateRangePicker(props, state, targetRef);\n let {isOpen, setOpen} = state;\n let {direction} = useLocale();\n let domRef = useFocusManagerRef(ref);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n within: true,\n isTextInput: true,\n autoFocus\n });\n\n let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n within: false,\n isTextInput: false,\n autoFocus\n });\n\n let className = classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-focused': isFocused,\n 'focus-ring': isFocusVisible && !isFocusedButton\n }\n );\n\n let fieldClassName = classNames(\n styles,\n 'spectrum-InputGroup-input',\n {\n 'is-disabled': isDisabled,\n 'is-invalid': isInvalid && !isDisabled\n }\n );\n\n // Note: this description is intentionally not passed to useDatePicker.\n // The format help text is unnecessary for screen reader users because each segment already has a label.\n let description = useFormatHelpText(props);\n if (description && !props.description) {\n descriptionProps.id = undefined;\n }\n\n let placeholder: DateValue | null | undefined = placeholderValue;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n let showTimeField = !!timeGranularity;\n\n let visibleMonths = useVisibleMonths(maxVisibleMonths);\n let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n return (\n <Field\n {...props}\n ref={domRef}\n elementType=\"span\"\n description={description}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n validationState={validationState}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n <div\n {...mergeProps(groupProps, hoverProps, focusProps)}\n className={className}\n ref={targetRef}>\n <div style={{overflow: 'hidden', width: '100%'}}>\n <Input\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n className={classNames(styles, 'spectrum-InputGroup-field')}\n inputClassName={fieldClassName}\n disableFocusRing\n minWidth={approximateWidth}>\n <DatePickerField\n {...startFieldProps}\n data-testid=\"start-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')} />\n <DateRangeDash />\n <DatePickerField\n {...endFieldProps}\n data-testid=\"end-date\"\n isQuiet={props.isQuiet}\n inputClassName={classNames(\n styles,\n 'spectrum-Datepicker-endField',\n classNames(\n datepickerStyles,\n 'react-spectrum-Datepicker-endField'\n )\n )} />\n </Input>\n </div>\n <DialogTrigger\n type=\"popover\"\n mobileType=\"tray\"\n placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n targetRef={targetRef}\n hideArrow\n isOpen={isOpen}\n onOpenChange={setOpen}\n shouldFlip={props.shouldFlip}>\n <FieldButton\n {...mergeProps(buttonProps, focusPropsButton)}\n UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n isQuiet={isQuiet}\n validationState={validationState}>\n <CalendarIcon />\n </FieldButton>\n <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n <Content>\n <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n <RangeCalendar\n {...calendarProps}\n visibleMonths={visibleMonths}\n createCalendar={props.createCalendar}\n UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />\n {showTimeField &&\n <Flex gap=\"size-100\" marginTop=\"size-100\" UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n <TimeField\n label={stringFormatter.format('startTime')}\n value={state.timeRange?.start || null}\n onChange={v => state.setTime('start', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n <TimeField\n label={stringFormatter.format('endTime')}\n value={state.timeRange?.end || null}\n onChange={v => state.setTime('end', v)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone}\n flex />\n </Flex>\n }\n </div>\n </Content>\n </Dialog>\n </DialogTrigger>\n </div>\n </Field>\n );\n}) as <T extends DateValue>(props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nfunction DateRangeDash() {\n return (\n <span\n aria-hidden=\"true\"\n data-testid=\"date-range-dash\"\n className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')} />\n );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.module.js.map"}
|
|
@@ -542,14 +542,14 @@
|
|
|
542
542
|
border-color: var(--spectrum-dropdown-border-color-error, var(--spectrum-global-color-red-500));
|
|
543
543
|
}
|
|
544
544
|
|
|
545
|
-
.nWhlFW_spectrum-Datepicker--range.nWhlFW_spectrum-InputGroup--invalid.nWhlFW_focus-ring .nWhlFW_spectrum-FieldButton {
|
|
546
|
-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
547
|
-
}
|
|
548
|
-
|
|
549
545
|
.nWhlFW_spectrum-Datepicker--range.nWhlFW_spectrum-InputGroup--invalid.nWhlFW_focus-ring .nWhlFW_spectrum-FieldButton:before {
|
|
550
546
|
border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
551
547
|
}
|
|
552
548
|
|
|
549
|
+
.nWhlFW_spectrum-Datepicker--range.nWhlFW_spectrum-InputGroup--invalid.nWhlFW_focus-ring .nWhlFW_spectrum-FieldButton {
|
|
550
|
+
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
551
|
+
}
|
|
552
|
+
|
|
553
553
|
.nWhlFW_spectrum-Datepicker--range.nWhlFW_spectrum-InputGroup--invalid .nWhlFW_spectrum-FieldButton:before {
|
|
554
554
|
border-color: var(--spectrum-dropdown-border-color-error, var(--spectrum-global-color-red-500));
|
|
555
555
|
}
|
|
@@ -646,4 +646,4 @@
|
|
|
646
646
|
box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
647
647
|
}
|
|
648
648
|
}
|
|
649
|
-
/*# sourceMappingURL=datepicker.
|
|
649
|
+
/*# sourceMappingURL=datepicker.4d1286b0.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAWE;;;;AAcA;;;;AAWF;;;;AAOE;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAWE;;;;AAcA;;;;AAWF;;;;AAOE;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAOI;;;;AAGW;;;;AAIb;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"datepicker.4d1286b0.css.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AI2BA;;;GAGG;AACH,OAAO,MAAM,WAgEP,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACvDlH;;GAEG;AACH,OAAO,MAAM,
|
|
1
|
+
{"mappings":";;;AI2BA;;;GAGG;AACH,OAAO,MAAM,WAgEP,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACvDlH;;GAEG;AACH,OAAO,MAAM,YAwJP,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,wBAAwB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC3JnH;;;GAGG;AACH,OAAO,MAAM,iBAoLP,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,6BAA6B,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACpMxH;;;GAGG;AACH,OAAO,MAAM,WAyEP,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACvFlH,YAAY,EAAC,sBAAsB,EAAE,uBAAuB,EAAE,4BAA4B,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC","sources":["packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/DatePickerField.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/Input.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/utils.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/TimeField.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/DatePicker.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/DateRangePicker.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/DateField.tsx","packages/@react-spectrum/datepicker/src/packages/@react-spectrum/datepicker/src/index.ts","packages/@react-spectrum/datepicker/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {DatePicker} from './DatePicker';\nexport {DateRangePicker} from './DateRangePicker';\nexport {TimeField} from './TimeField';\nexport {DateField} from './DateField';\nexport type {SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps} from '@react-types/datepicker';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/datepicker",
|
|
3
|
-
"version": "3.14.
|
|
3
|
+
"version": "3.14.5",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -40,25 +40,25 @@
|
|
|
40
40
|
"url": "https://github.com/adobe/react-spectrum"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@internationalized/date": "^3.
|
|
44
|
-
"@react-aria/datepicker": "^3.
|
|
45
|
-
"@react-aria/focus": "^3.
|
|
46
|
-
"@react-aria/i18n": "^3.12.
|
|
47
|
-
"@react-aria/interactions": "^3.25.
|
|
48
|
-
"@react-aria/utils": "^3.
|
|
49
|
-
"@react-spectrum/button": "^3.
|
|
50
|
-
"@react-spectrum/calendar": "^3.7.
|
|
51
|
-
"@react-spectrum/dialog": "^3.
|
|
52
|
-
"@react-spectrum/form": "^3.7.
|
|
53
|
-
"@react-spectrum/label": "^3.16.
|
|
54
|
-
"@react-spectrum/layout": "^3.6.
|
|
55
|
-
"@react-spectrum/utils": "^3.12.
|
|
56
|
-
"@react-spectrum/view": "^3.6.
|
|
57
|
-
"@react-stately/datepicker": "^3.
|
|
58
|
-
"@react-types/datepicker": "^3.
|
|
59
|
-
"@react-types/shared": "^3.
|
|
60
|
-
"@spectrum-icons/ui": "^3.6.
|
|
61
|
-
"@spectrum-icons/workflow": "^4.2.
|
|
43
|
+
"@internationalized/date": "^3.9.0",
|
|
44
|
+
"@react-aria/datepicker": "^3.15.1",
|
|
45
|
+
"@react-aria/focus": "^3.21.1",
|
|
46
|
+
"@react-aria/i18n": "^3.12.12",
|
|
47
|
+
"@react-aria/interactions": "^3.25.5",
|
|
48
|
+
"@react-aria/utils": "^3.30.1",
|
|
49
|
+
"@react-spectrum/button": "^3.17.1",
|
|
50
|
+
"@react-spectrum/calendar": "^3.7.5",
|
|
51
|
+
"@react-spectrum/dialog": "^3.9.1",
|
|
52
|
+
"@react-spectrum/form": "^3.7.18",
|
|
53
|
+
"@react-spectrum/label": "^3.16.18",
|
|
54
|
+
"@react-spectrum/layout": "^3.6.18",
|
|
55
|
+
"@react-spectrum/utils": "^3.12.8",
|
|
56
|
+
"@react-spectrum/view": "^3.6.22",
|
|
57
|
+
"@react-stately/datepicker": "^3.15.1",
|
|
58
|
+
"@react-types/datepicker": "^3.13.1",
|
|
59
|
+
"@react-types/shared": "^3.32.0",
|
|
60
|
+
"@spectrum-icons/ui": "^3.6.19",
|
|
61
|
+
"@spectrum-icons/workflow": "^4.2.24",
|
|
62
62
|
"@swc/helpers": "^0.5.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
|
|
77
77
|
}
|
package/src/DatePicker.tsx
CHANGED
|
@@ -49,9 +49,7 @@ export const DatePicker = React.forwardRef(function DatePicker<T extends DateVal
|
|
|
49
49
|
isQuiet,
|
|
50
50
|
isDisabled,
|
|
51
51
|
placeholderValue,
|
|
52
|
-
maxVisibleMonths = 1
|
|
53
|
-
pageBehavior,
|
|
54
|
-
firstDayOfWeek
|
|
52
|
+
maxVisibleMonths = 1
|
|
55
53
|
} = props;
|
|
56
54
|
let {hoverProps, isHovered} = useHover({isDisabled});
|
|
57
55
|
let targetRef = useRef<HTMLDivElement | null>(null);
|
|
@@ -171,8 +169,6 @@ export const DatePicker = React.forwardRef(function DatePicker<T extends DateVal
|
|
|
171
169
|
<Calendar
|
|
172
170
|
{...calendarProps}
|
|
173
171
|
visibleMonths={visibleMonths}
|
|
174
|
-
pageBehavior={pageBehavior}
|
|
175
|
-
firstDayOfWeek={firstDayOfWeek}
|
|
176
172
|
createCalendar={props.createCalendar}
|
|
177
173
|
UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />
|
|
178
174
|
{showTimeField &&
|
package/src/DateRangePicker.tsx
CHANGED
|
@@ -50,9 +50,7 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
|
|
|
50
50
|
isDisabled,
|
|
51
51
|
autoFocus,
|
|
52
52
|
placeholderValue,
|
|
53
|
-
maxVisibleMonths = 1
|
|
54
|
-
pageBehavior,
|
|
55
|
-
firstDayOfWeek
|
|
53
|
+
maxVisibleMonths = 1
|
|
56
54
|
} = props;
|
|
57
55
|
let {hoverProps, isHovered} = useHover({isDisabled});
|
|
58
56
|
let targetRef = useRef<HTMLDivElement | null>(null);
|
|
@@ -189,8 +187,6 @@ export const DateRangePicker = React.forwardRef(function DateRangePicker<T exten
|
|
|
189
187
|
<RangeCalendar
|
|
190
188
|
{...calendarProps}
|
|
191
189
|
visibleMonths={visibleMonths}
|
|
192
|
-
pageBehavior={pageBehavior}
|
|
193
|
-
firstDayOfWeek={firstDayOfWeek}
|
|
194
190
|
createCalendar={props.createCalendar}
|
|
195
191
|
UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': validationState === 'invalid'})} />
|
|
196
192
|
{showTimeField &&
|