@react-aria/datepicker 3.9.2 → 3.10.0

package/dist/useDateField.module.js

@@ -0,0 +1,167 @@
+import $7Gzdi$intlStringsmodulejs from "./intlStrings.module.js";
+import {useDatePickerGroup as $3dfb0f96be0d6a08$export$4a931266a3838b86} from "./useDatePickerGroup.module.js";
+import {createFocusManager as $7Gzdi$createFocusManager} from "@react-aria/focus";
+import {useDescription as $7Gzdi$useDescription, mergeProps as $7Gzdi$mergeProps, useFormReset as $7Gzdi$useFormReset, filterDOMProps as $7Gzdi$filterDOMProps} from "@react-aria/utils";
+import {useRef as $7Gzdi$useRef, useMemo as $7Gzdi$useMemo, useEffect as $7Gzdi$useEffect} from "react";
+import {useField as $7Gzdi$useField} from "@react-aria/label";
+import {useFocusWithin as $7Gzdi$useFocusWithin} from "@react-aria/interactions";
+import {useFormValidation as $7Gzdi$useFormValidation} from "@react-aria/form";
+import {useLocalizedStringFormatter as $7Gzdi$useLocalizedStringFormatter} from "@react-aria/i18n";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
+const $16f0b7bb276bc17e$export$300019f83c56d282 = "__role_" + Date.now();
+const $16f0b7bb276bc17e$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
+function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
+    var _state_value;
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7Gzdi$useField)({
+        ...props,
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    let valueOnFocus = (0, $7Gzdi$useRef)(null);
+    let { focusWithinProps: focusWithinProps } = (0, $7Gzdi$useFocusWithin)({
+        ...props,
+        onFocusWithin (e) {
+            var _props_onFocus;
+            valueOnFocus.current = state.value;
+            (_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 ? void 0 : _props_onFocus.call(props, e);
+        },
+        onBlurWithin: (e)=>{
+            var _props_onBlur;
+            state.confirmPlaceholder();
+            if (state.value !== valueOnFocus.current) state.commitValidation();
+            (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+        },
+        onFocusWithinChange: props.onFocusChange
+    });
+    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), "@react-aria/datepicker");
+    let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
+    let field = state.maxGranularity === "hour" ? "time" : "date";
+    let description = state.value ? stringFormatter.format(message, {
+        [field]: state.formatValue({
+            month: "long"
+        })
+    }) : "";
+    let descProps = (0, $7Gzdi$useDescription)(description);
+    // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
+    // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
+    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation" ? fieldProps["aria-describedby"] : [
+        descProps["aria-describedby"],
+        fieldProps["aria-describedby"]
+    ].filter(Boolean).join(" ") || undefined;
+    let propsFocusManager = props[$16f0b7bb276bc17e$export$7b3062cd49e80452];
+    let focusManager = (0, $7Gzdi$useMemo)(()=>propsFocusManager || (0, $7Gzdi$createFocusManager)(ref), [
+        propsFocusManager,
+        ref
+    ]);
+    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation");
+    // Pass labels and other information to segments.
+    $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
+        ariaLabel: props["aria-label"],
+        ariaLabelledBy: [
+            labelProps.id,
+            props["aria-labelledby"]
+        ].filter(Boolean).join(" ") || undefined,
+        ariaDescribedBy: describedBy,
+        focusManager: focusManager
+    });
+    let autoFocusRef = (0, $7Gzdi$useRef)(props.autoFocus);
+    // When used within a date picker or date range picker, the field gets role="presentation"
+    // rather than role="group". Since the date picker/date range picker already has a role="group"
+    // with a label and description, and the segments are already labeled by this as well, this
+    // avoids very verbose duplicate announcements.
+    let fieldDOMProps;
+    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation") fieldDOMProps = {
+        role: "presentation"
+    };
+    else fieldDOMProps = (0, $7Gzdi$mergeProps)(fieldProps, {
+        role: "group",
+        "aria-disabled": props.isDisabled || undefined,
+        "aria-describedby": describedBy
+    });
+    (0, $7Gzdi$useEffect)(()=>{
+        if (autoFocusRef.current) focusManager.focusFirst();
+        autoFocusRef.current = false;
+    }, [
+        focusManager
+    ]);
+    (0, $7Gzdi$useFormReset)(props.inputRef, state.value, state.setValue);
+    (0, $7Gzdi$useFormValidation)({
+        ...props,
+        focus () {
+            focusManager.focusFirst();
+        }
+    }, state, props.inputRef);
+    let inputProps = {
+        type: "hidden",
+        name: props.name,
+        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+    };
+    if (props.validationBehavior === "native") {
+        // Use a hidden <input type="text"> rather than <input type="hidden">
+        // so that an empty value blocks HTML form submission when the field is required.
+        inputProps.type = "text";
+        inputProps.hidden = true;
+        inputProps.required = props.isRequired;
+        // Ignore react warning.
+        inputProps.onChange = ()=>{};
+    }
+    let domProps = (0, $7Gzdi$filterDOMProps)(props);
+    return {
+        labelProps: {
+            ...labelProps,
+            onClick: ()=>{
+                focusManager.focusFirst();
+            }
+        },
+        fieldProps: (0, $7Gzdi$mergeProps)(domProps, fieldDOMProps, groupProps, focusWithinProps, {
+            onKeyDown (e) {
+                if (props.onKeyDown) props.onKeyDown(e);
+            },
+            onKeyUp (e) {
+                if (props.onKeyUp) props.onKeyUp(e);
+            }
+        }),
+        inputProps: inputProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
+    var _state_timeValue;
+    let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
+    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
+    return res;
+}
+
+
+export {$16f0b7bb276bc17e$export$653eddfc964b0f8a as hookData, $16f0b7bb276bc17e$export$300019f83c56d282 as roleSymbol, $16f0b7bb276bc17e$export$7b3062cd49e80452 as focusManagerSymbol, $16f0b7bb276bc17e$export$5591b0b878c1a989 as useDateField, $16f0b7bb276bc17e$export$4c842f6a241dc825 as useTimeField};
+//# sourceMappingURL=useDateField.module.js.map

package/dist/useDateField.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateField.ts"],"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 {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';\nimport {createFocusManager, FocusManager} from '@react-aria/focus';\nimport {DateFieldState, TimeFieldState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useFormValidation} from '@react-aria/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\n// Allows this hook to also be used with TimeField\nexport interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement>\n}\n\nexport interface DateFieldAria extends ValidationResult {\n   /** Props for the field's visible label element, if any. */\n  labelProps: DOMAttributes,\n   /** Props for the field grouping element. */\n  fieldProps: GroupDOMAttributes,\n  /** Props for the hidden input element for HTML form submission. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n// Data that is passed between useDateField and useDateSegment.\ninterface HookData {\n  ariaLabel: string,\n  ariaLabelledBy: string,\n  ariaDescribedBy: string,\n  focusManager: FocusManager\n}\n\nexport const hookData = new WeakMap<DateFieldState, HookData>();\n\n// Private props that we pass from useDatePicker/useDateRangePicker.\n// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552\nexport const roleSymbol = '__role_' + Date.now();\nexport const focusManagerSymbol = '__focusManager_' + Date.now();\n\n/**\n * Provides the behavior and accessibility implementation for a date field component.\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let valueOnFocus = useRef<DateValue | null>(null);\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    onFocusWithin(e) {\n      valueOnFocus.current = state.value;\n      props.onFocus?.(e);\n    },\n    onBlurWithin: (e) => {\n      state.confirmPlaceholder();\n      if (state.value !== valueOnFocus.current) {\n        state.commitValidation();\n      }\n      props.onBlur?.(e);\n    },\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n  let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';\n  let field = state.maxGranularity === 'hour' ? 'time' : 'date';\n  let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : '';\n  let descProps = useDescription(description);\n\n  // If within a date picker or date range picker, the date field will have role=\"presentation\" and an aria-describedby\n  // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.\n  let describedBy = props[roleSymbol] === 'presentation'\n    ? fieldProps['aria-describedby']\n    : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  let propsFocusManager = props[focusManagerSymbol];\n  let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]);\n  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');\n\n  // Pass labels and other information to segments.\n  hookData.set(state, {\n    ariaLabel: props['aria-label'],\n    ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,\n    ariaDescribedBy: describedBy,\n    focusManager\n  });\n\n  let autoFocusRef = useRef(props.autoFocus);\n\n  // When used within a date picker or date range picker, the field gets role=\"presentation\"\n  // rather than role=\"group\". Since the date picker/date range picker already has a role=\"group\"\n  // with a label and description, and the segments are already labeled by this as well, this\n  // avoids very verbose duplicate announcements.\n  let fieldDOMProps: GroupDOMAttributes;\n  if (props[roleSymbol] === 'presentation') {\n    fieldDOMProps = {\n      role: 'presentation'\n    };\n  } else {\n    fieldDOMProps = mergeProps(fieldProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || undefined,\n      'aria-describedby': describedBy\n    });\n  }\n\n  useEffect(() => {\n    if (autoFocusRef.current) {\n      focusManager.focusFirst();\n    }\n    autoFocusRef.current = false;\n  }, [focusManager]);\n\n  useFormReset(props.inputRef, state.value, state.setValue);\n  useFormValidation({\n    ...props,\n    focus() {\n      focusManager.focusFirst();\n    }\n  }, state, props.inputRef);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n    type: 'hidden',\n    name: props.name,\n    value: state.value?.toString() || ''\n  };\n\n  if (props.validationBehavior === 'native') {\n    // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n    // so that an empty value blocks HTML form submission when the field is required.\n    inputProps.type = 'text';\n    inputProps.hidden = true;\n    inputProps.required = props.isRequired;\n    // Ignore react warning.\n    inputProps.onChange = () => {};\n  }\n\n  let domProps = filterDOMProps(props);\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {\n      onKeyDown(e: KeyboardEvent) {\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      }\n    }),\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n\nexport interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a time field component.\n * A time field allows users to enter and edit time values using a keyboard.\n * Each part of a time value is displayed in an individually editable segment.\n */\nexport function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element>): DateFieldAria {\n  let res = useDateField(props, state, ref);\n  res.inputProps.value = state.timeValue?.toString() || '';\n  return res;\n}\n"],"names":[],"version":3,"file":"useDateField.module.js.map"}

package/dist/useDatePicker.main.js

@@ -0,0 +1,158 @@
+var $c1905b78f6d2f5bf$exports = require("./intlStrings.main.js");
+var $4acc2f407c169e55$exports = require("./useDateField.main.js");
+var $715562ad3b4cced4$exports = require("./useDatePickerGroup.main.js");
+var $bxHoL$reactariafocus = require("@react-aria/focus");
+var $bxHoL$reactariautils = require("@react-aria/utils");
+var $bxHoL$reactstatelyform = require("@react-stately/form");
+var $bxHoL$react = require("react");
+var $bxHoL$reactarialabel = require("@react-aria/label");
+var $bxHoL$reactariainteractions = require("@react-aria/interactions");
+var $bxHoL$reactariai18n = require("@react-aria/i18n");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useDatePicker", () => $e90ae7c26a69c6b1$export$42df105a73306d51);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
+    let buttonId = (0, $bxHoL$reactariautils.useId)();
+    let dialogId = (0, $bxHoL$reactariautils.useId)();
+    let fieldId = (0, $bxHoL$reactariautils.useId)();
+    let stringFormatter = (0, $bxHoL$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), "@react-aria/datepicker");
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $bxHoL$reactarialabel.useField)({
+        ...props,
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    let groupProps = (0, $715562ad3b4cced4$exports.useDatePickerGroup)(state, ref);
+    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let { locale: locale } = (0, $bxHoL$reactariai18n.useLocale)();
+    let date = state.formatValue(locale, {
+        month: "long"
+    });
+    let description = date ? stringFormatter.format("selectedDateDescription", {
+        date: date
+    }) : "";
+    let descProps = (0, $bxHoL$reactariautils.useDescription)(description);
+    let ariaDescribedBy = [
+        descProps["aria-describedby"],
+        fieldProps["aria-describedby"]
+    ].filter(Boolean).join(" ") || undefined;
+    let domProps = (0, $bxHoL$reactariautils.filterDOMProps)(props);
+    let focusManager = (0, $bxHoL$react.useMemo)(()=>(0, $bxHoL$reactariafocus.createFocusManager)(ref), [
+        ref
+    ]);
+    let { focusWithinProps: focusWithinProps } = (0, $bxHoL$reactariainteractions.useFocusWithin)({
+        ...props,
+        isDisabled: state.isOpen,
+        onBlurWithin: props.onBlur,
+        onFocusWithin: props.onFocus,
+        onFocusWithinChange: props.onFocusChange
+    });
+    return {
+        groupProps: (0, $bxHoL$reactariautils.mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+            role: "group",
+            "aria-disabled": props.isDisabled || null,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": ariaDescribedBy,
+            onKeyDown (e) {
+                if (state.isOpen) return;
+                if (props.onKeyDown) props.onKeyDown(e);
+            },
+            onKeyUp (e) {
+                if (state.isOpen) return;
+                if (props.onKeyUp) props.onKeyUp(e);
+            }
+        }),
+        labelProps: {
+            ...labelProps,
+            onClick: ()=>{
+                focusManager.focusFirst();
+            }
+        },
+        fieldProps: {
+            ...fieldProps,
+            id: fieldId,
+            [(0, $4acc2f407c169e55$exports.roleSymbol)]: "presentation",
+            "aria-describedby": ariaDescribedBy,
+            value: state.value,
+            onChange: state.setValue,
+            placeholderValue: props.placeholderValue,
+            hideTimeZone: props.hideTimeZone,
+            hourCycle: props.hourCycle,
+            shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+            granularity: props.granularity,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            isRequired: props.isRequired,
+            validationBehavior: props.validationBehavior,
+            // DatePicker owns the validation state for the date field.
+            [(0, $bxHoL$reactstatelyform.privateValidationStateProp)]: state,
+            autoFocus: props.autoFocus,
+            name: props.name
+        },
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        buttonProps: {
+            ...descProps,
+            id: buttonId,
+            "aria-haspopup": "dialog",
+            "aria-label": stringFormatter.format("calendar"),
+            "aria-labelledby": `${buttonId} ${labelledBy}`,
+            "aria-describedby": ariaDescribedBy,
+            "aria-expanded": state.isOpen,
+            isDisabled: props.isDisabled || props.isReadOnly,
+            onPress: ()=>state.setOpen(true)
+        },
+        dialogProps: {
+            id: dialogId,
+            "aria-labelledby": `${buttonId} ${labelledBy}`
+        },
+        calendarProps: {
+            autoFocus: true,
+            value: state.dateValue,
+            onChange: state.setDateValue,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            isDateUnavailable: props.isDateUnavailable,
+            defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
+            isInvalid: state.isInvalid,
+            errorMessage: typeof props.errorMessage === "function" ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(" ")
+        },
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+//# sourceMappingURL=useDatePicker.main.js.map

package/dist/useDatePicker.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDatePicker.ts"],"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 {AriaButtonProps} from '@react-types/button';\nimport {AriaDatePickerProps, DateValue} from '@react-types/datepicker';\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {CalendarProps} from '@react-types/calendar';\nimport {createFocusManager} from '@react-aria/focus';\nimport {DatePickerState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {RefObject, useMemo} from 'react';\nimport {roleSymbol} from './useDateField';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface DatePickerAria extends ValidationResult {\n  /** Props for the date picker's visible label element, if any. */\n  labelProps: DOMAttributes,\n  /** Props for the grouping element containing the date field and button. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the date field. */\n  fieldProps: AriaDatePickerProps<DateValue>,\n  /** Props for the popover trigger button. */\n  buttonProps: AriaButtonProps,\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes,\n  /** Props for the popover dialog. */\n  dialogProps: AriaDialogProps,\n  /** Props for the calendar within the popover dialog. */\n  calendarProps: CalendarProps<DateValue>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a date picker component.\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element>): DatePickerAria {\n  let buttonId = useId();\n  let dialogId = useId();\n  let fieldId = useId();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let groupProps = useDatePickerGroup(state, ref);\n\n  let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;\n\n  let {locale} = useLocale();\n  let date = state.formatValue(locale, {month: 'long'});\n  let description = date ? stringFormatter.format('selectedDateDescription', {date}) : '';\n  let descProps = useDescription(description);\n  let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  let domProps = filterDOMProps(props);\n  let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    isDisabled: state.isOpen,\n    onBlurWithin: props.onBlur,\n    onFocusWithin: props.onFocus,\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  return {\n    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || null,\n      'aria-labelledby': labelledBy,\n      'aria-describedby': ariaDescribedBy,\n      onKeyDown(e: KeyboardEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      }\n    }),\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: {\n      ...fieldProps,\n      id: fieldId,\n      [roleSymbol]: 'presentation',\n      'aria-describedby': ariaDescribedBy,\n      value: state.value,\n      onChange: state.setValue,\n      placeholderValue: props.placeholderValue,\n      hideTimeZone: props.hideTimeZone,\n      hourCycle: props.hourCycle,\n      shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n      granularity: props.granularity,\n      isDisabled: props.isDisabled,\n      isReadOnly: props.isReadOnly,\n      isRequired: props.isRequired,\n      validationBehavior: props.validationBehavior,\n      // DatePicker owns the validation state for the date field.\n      [privateValidationStateProp]: state,\n      autoFocus: props.autoFocus,\n      name: props.name\n    },\n    descriptionProps,\n    errorMessageProps,\n    buttonProps: {\n      ...descProps,\n      id: buttonId,\n      'aria-haspopup': 'dialog',\n      'aria-label': stringFormatter.format('calendar'),\n      'aria-labelledby': `${buttonId} ${labelledBy}`,\n      'aria-describedby': ariaDescribedBy,\n      'aria-expanded': state.isOpen,\n      isDisabled: props.isDisabled || props.isReadOnly,\n      onPress: () => state.setOpen(true)\n    },\n    dialogProps: {\n      id: dialogId,\n      'aria-labelledby': `${buttonId} ${labelledBy}`\n    },\n    calendarProps: {\n      autoFocus: true,\n      value: state.dateValue,\n      onChange: state.setDateValue,\n      minValue: props.minValue,\n      maxValue: props.maxValue,\n      isDisabled: props.isDisabled,\n      isReadOnly: props.isReadOnly,\n      isDateUnavailable: props.isDateUnavailable,\n      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,\n      isInvalid: state.isInvalid,\n      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))\n    },\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useDatePicker.main.js.map"}

package/dist/useDatePicker.mjs

@@ -0,0 +1,153 @@
+import $4lVjK$intlStringsmodulejs from "./intlStrings.mjs";
+import {roleSymbol as $16f0b7bb276bc17e$export$300019f83c56d282} from "./useDateField.mjs";
+import {useDatePickerGroup as $3dfb0f96be0d6a08$export$4a931266a3838b86} from "./useDatePickerGroup.mjs";
+import {createFocusManager as $4lVjK$createFocusManager} from "@react-aria/focus";
+import {useId as $4lVjK$useId, useDescription as $4lVjK$useDescription, filterDOMProps as $4lVjK$filterDOMProps, mergeProps as $4lVjK$mergeProps} from "@react-aria/utils";
+import {privateValidationStateProp as $4lVjK$privateValidationStateProp} from "@react-stately/form";
+import {useMemo as $4lVjK$useMemo} from "react";
+import {useField as $4lVjK$useField} from "@react-aria/label";
+import {useFocusWithin as $4lVjK$useFocusWithin} from "@react-aria/interactions";
+import {useLocalizedStringFormatter as $4lVjK$useLocalizedStringFormatter, useLocale as $4lVjK$useLocale} from "@react-aria/i18n";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
+    let buttonId = (0, $4lVjK$useId)();
+    let dialogId = (0, $4lVjK$useId)();
+    let fieldId = (0, $4lVjK$useId)();
+    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), "@react-aria/datepicker");
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
+    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4lVjK$useField)({
+        ...props,
+        labelElementType: "span",
+        isInvalid: isInvalid,
+        errorMessage: props.errorMessage || validationErrors
+    });
+    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
+    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let { locale: locale } = (0, $4lVjK$useLocale)();
+    let date = state.formatValue(locale, {
+        month: "long"
+    });
+    let description = date ? stringFormatter.format("selectedDateDescription", {
+        date: date
+    }) : "";
+    let descProps = (0, $4lVjK$useDescription)(description);
+    let ariaDescribedBy = [
+        descProps["aria-describedby"],
+        fieldProps["aria-describedby"]
+    ].filter(Boolean).join(" ") || undefined;
+    let domProps = (0, $4lVjK$filterDOMProps)(props);
+    let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
+        ref
+    ]);
+    let { focusWithinProps: focusWithinProps } = (0, $4lVjK$useFocusWithin)({
+        ...props,
+        isDisabled: state.isOpen,
+        onBlurWithin: props.onBlur,
+        onFocusWithin: props.onFocus,
+        onFocusWithinChange: props.onFocusChange
+    });
+    return {
+        groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+            role: "group",
+            "aria-disabled": props.isDisabled || null,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": ariaDescribedBy,
+            onKeyDown (e) {
+                if (state.isOpen) return;
+                if (props.onKeyDown) props.onKeyDown(e);
+            },
+            onKeyUp (e) {
+                if (state.isOpen) return;
+                if (props.onKeyUp) props.onKeyUp(e);
+            }
+        }),
+        labelProps: {
+            ...labelProps,
+            onClick: ()=>{
+                focusManager.focusFirst();
+            }
+        },
+        fieldProps: {
+            ...fieldProps,
+            id: fieldId,
+            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: "presentation",
+            "aria-describedby": ariaDescribedBy,
+            value: state.value,
+            onChange: state.setValue,
+            placeholderValue: props.placeholderValue,
+            hideTimeZone: props.hideTimeZone,
+            hourCycle: props.hourCycle,
+            shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+            granularity: props.granularity,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            isRequired: props.isRequired,
+            validationBehavior: props.validationBehavior,
+            // DatePicker owns the validation state for the date field.
+            [(0, $4lVjK$privateValidationStateProp)]: state,
+            autoFocus: props.autoFocus,
+            name: props.name
+        },
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        buttonProps: {
+            ...descProps,
+            id: buttonId,
+            "aria-haspopup": "dialog",
+            "aria-label": stringFormatter.format("calendar"),
+            "aria-labelledby": `${buttonId} ${labelledBy}`,
+            "aria-describedby": ariaDescribedBy,
+            "aria-expanded": state.isOpen,
+            isDisabled: props.isDisabled || props.isReadOnly,
+            onPress: ()=>state.setOpen(true)
+        },
+        dialogProps: {
+            id: dialogId,
+            "aria-labelledby": `${buttonId} ${labelledBy}`
+        },
+        calendarProps: {
+            autoFocus: true,
+            value: state.dateValue,
+            onChange: state.setDateValue,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            isDateUnavailable: props.isDateUnavailable,
+            defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
+            isInvalid: state.isInvalid,
+            errorMessage: typeof props.errorMessage === "function" ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(" ")
+        },
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+export {$6057a3d2a53a12fd$export$42df105a73306d51 as useDatePicker};
+//# sourceMappingURL=useDatePicker.mjs.map