npm - @react-aria/datepicker - Versions diffs - 3.12.0 → 3.14.0 - Mend

@react-aria/datepicker 3.12.0 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/types.d.ts.map +1 -1
package/dist/useDateField.main.js +3 -0
package/dist/useDateField.main.js.map +1 -1
package/dist/useDateField.mjs +3 -0
package/dist/useDateField.module.js +3 -0
package/dist/useDateField.module.js.map +1 -1
package/dist/useDatePicker.main.js +19 -3
package/dist/useDatePicker.main.js.map +1 -1
package/dist/useDatePicker.mjs +20 -4
package/dist/useDatePicker.module.js +20 -4
package/dist/useDatePicker.module.js.map +1 -1
package/dist/useDatePickerGroup.main.js +33 -4
package/dist/useDatePickerGroup.main.js.map +1 -1
package/dist/useDatePickerGroup.mjs +33 -4
package/dist/useDatePickerGroup.module.js +33 -4
package/dist/useDatePickerGroup.module.js.map +1 -1
package/dist/useDateRangePicker.main.js +19 -3
package/dist/useDateRangePicker.main.js.map +1 -1
package/dist/useDateRangePicker.mjs +19 -3
package/dist/useDateRangePicker.module.js +19 -3
package/dist/useDateRangePicker.module.js.map +1 -1
package/dist/useDateSegment.main.js +13 -4
package/dist/useDateSegment.main.js.map +1 -1
package/dist/useDateSegment.mjs +13 -4
package/dist/useDateSegment.module.js +13 -4
package/dist/useDateSegment.module.js.map +1 -1
package/package.json +17 -17
package/src/useDateField.ts +3 -0
package/src/useDatePicker.ts +18 -4
package/src/useDatePickerGroup.ts +34 -2
package/src/useDateRangePicker.ts +17 -3
package/src/useDateSegment.ts +15 -5

package/dist/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;AC2BA,sCAAsC,CAAC,SAAS,SAAS,CAAE,SAAQ,IAAI,CAAC,mBAAuB,CAAC,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,kBAAkB,GAAG,UAAU,CAAC;IACnM,mEAAmE;IACnE,QAAQ,CAAC,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC9C;AAED,8BAA+B,SAAQ,gBAAgB;IACpD,2DAA2D;IAC5D,UAAU,EAAE,aAAa,CAAC;IACzB,4CAA4C;IAC7C,UAAU,EAAE,kBAAkB,CAAC;IAC/B,mEAAmE;IACnE,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,iDAAiD;IACjD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAiBD;;;;GAIG;AACH,6BAA6B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,GAAG,aAAa,~~CA+HtJ~~;AAED,+BAAsC,CAAC,SAAS,SAAS,CAAE,SAAQ,mBAAmB,CAAC,CAAC;IACtF,mEAAmE;IACnE,QAAQ,CAAC,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC9C;AAED;;;;GAIG;AACH,6BAA6B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,GAAG,aAAa,CAItJ;~~AClLD~~,+BAAgC,SAAQ,gBAAgB;IACtD,iEAAiE;IACjE,UAAU,EAAE,aAAa,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gCAAgC;IAChC,UAAU,EAAE,oBAAoB,SAAS,CAAC,CAAC;IAC3C,4CAA4C;IAC5C,WAAW,EAAE,eAAe,CAAC;IAC7B,iDAAiD;IACjD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAC;IACjC,oCAAoC;IACpC,WAAW,EAAE,eAAe,CAAC;IAC7B,wDAAwD;IACxD,aAAa,EAAE,cAAc,SAAS,CAAC,CAAA;CACxC;AAED;;;GAGG;AACH,8BAA8B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,GAAG,cAAc,~~CAwHxJ~~;~~AC3JD~~,aAAa,KAAK,uBAAuB,CAAC;AAC1C;IACE,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;CACrC;AAED,eAAe;AACf,mCAAmC,YAAY,CAY9C;ACbD;IACE,qCAAqC;IACrC,YAAY,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;CACnD;AAED;;;;GAIG;AACH,+BAA+B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,eAAe,~~CAgY~~/H;~~ACnYD~~,oCAAqC,SAAQ,gBAAgB;IAC3D,uEAAuE;IACvE,UAAU,EAAE,aAAa,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,EAAE,kBAAkB,CAAC;IAC/B,sCAAsC;IACtC,eAAe,EAAE,oBAAoB,SAAS,CAAC,CAAC;IAChD,oCAAoC;IACpC,aAAa,EAAE,oBAAoB,SAAS,CAAC,CAAC;IAC9C,4CAA4C;IAC5C,WAAW,EAAE,eAAe,CAAC;IAC7B,iDAAiD;IACjD,gBAAgB,EAAE,aAAa,CAAC;IAChC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAC;IACjC,oCAAoC;IACpC,WAAW,EAAE,eAAe,CAAC;IAC7B,8DAA8D;IAC9D,aAAa,EAAE,mBAAmB,SAAS,CAAC,CAAA;CAC7C;AAED;;;;GAIG;AACH,mCAAmC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,UAAU,OAAO,GAAG,IAAI,CAAC,GAAG,mBAAmB,~~CAsK5K~~;~~AC5MD~~,YAAY,EAAC,kBAAkB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAKhJ,YAAY,EAAC,kBAAkB,EAAC,MAAM,yBAAyB,CAAC","sources":["packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePickerGroup.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateField.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDisplayNames.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateSegment.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateRangePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/index.ts","packages/@react-aria/datepicker/src/index.ts"],"sourcesContent":[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\nexport {useDatePicker} from './useDatePicker';\nexport {useDateSegment} from './useDateSegment';\nexport {useDateField, useTimeField} from './useDateField';\nexport {useDateRangePicker} from './useDateRangePicker';\nexport {useDisplayNames} from './useDisplayNames';\n\nexport type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker';\nexport type {AriaDateFieldOptions, DateFieldAria} from './useDateField';\nexport type {DatePickerAria} from './useDatePicker';\nexport type {DateRangePickerAria} from './useDateRangePicker';\nexport type {DateSegmentAria} from './useDateSegment';\nexport type {AriaTimeFieldProps} from '@react-types/datepicker';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1	+ {"mappings":"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","sources":["packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePickerGroup.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateField.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDatePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDisplayNames.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateSegment.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/useDateRangePicker.ts","packages/@react-aria/datepicker/src/packages/@react-aria/datepicker/src/index.ts","packages/@react-aria/datepicker/src/index.ts"],"sourcesContent":[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\nexport {useDatePicker} from './useDatePicker';\nexport {useDateSegment} from './useDateSegment';\nexport {useDateField, useTimeField} from './useDateField';\nexport {useDateRangePicker} from './useDateRangePicker';\nexport {useDisplayNames} from './useDisplayNames';\n\nexport type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker';\nexport type {AriaDateFieldOptions, DateFieldAria} from './useDateField';\nexport type {DatePickerAria} from './useDatePicker';\nexport type {DateRangePickerAria} from './useDateRangePicker';\nexport type {DateSegmentAria} from './useDateSegment';\nexport type {AriaTimeFieldProps} from '@react-types/datepicker';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/useDateField.main.js CHANGED Viewed

@@ -156,6 +156,9 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
             },
             onKeyUp (e) {
                 if (props.onKeyUp) props.onKeyUp(e);
+            },
+            style: {
+                unicodeBidi: 'isolate'
             }
         }),
         inputProps: inputProps,

package/dist/useDateField.main.js.map CHANGED Viewed

	@@ -1 +1 @@
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, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, 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 \| null>\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 \| null>): 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 disabled: props.isDisabled\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 \| null>\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 \| null>): 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.main.js.map"}
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, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, 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 \| null>\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 \| null>): 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 disabled: props.isDisabled\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 style: {\n unicodeBidi: 'isolate'\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 \| null>\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 \| null>): 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.main.js.map"}

package/dist/useDateField.mjs CHANGED Viewed

@@ -146,6 +146,9 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
             },
             onKeyUp (e) {
                 if (props.onKeyUp) props.onKeyUp(e);
+            },
+            style: {
+                unicodeBidi: 'isolate'
             }
         }),
         inputProps: inputProps,

package/dist/useDateField.module.js CHANGED Viewed

@@ -146,6 +146,9 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
             },
             onKeyUp (e) {
                 if (props.onKeyUp) props.onKeyUp(e);
+            },
+            style: {
+                unicodeBidi: 'isolate'
             }
         }),
         inputProps: inputProps,

package/dist/useDateField.module.js.map CHANGED Viewed

	@@ -1 +1 @@
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, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, 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 \| null>\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 \| null>): 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 disabled: props.isDisabled\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 \| null>\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 \| null>): 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"}
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, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, 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 \| null>\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 \| null>): 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 disabled: props.isDisabled\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 style: {\n unicodeBidi: 'isolate'\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 \| null>\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 \| null>): 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 CHANGED Viewed

@@ -69,12 +69,28 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let focusManager = (0, $bxHoL$react.useMemo)(()=>(0, $bxHoL$reactariafocus.createFocusManager)(ref), [
         ref
     ]);
+    let isFocused = (0, $bxHoL$react.useRef)(false);
     let { focusWithinProps: focusWithinProps } = (0, $bxHoL$reactariainteractions.useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
-        onBlurWithin: props.onBlur,
-        onFocusWithin: props.onFocus,
-        onFocusWithinChange: props.onFocusChange
+        onBlurWithin: (e)=>{
+            // Ignore when focus moves into the popover.
+            let dialog = document.getElementById(dialogId);
+            if (!(dialog === null || dialog === void 0 ? void 0 : dialog.contains(e.relatedTarget))) {
+                var _props_onBlur, _props_onFocusChange;
+                isFocused.current = false;
+                (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+                (_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 ? void 0 : _props_onFocusChange.call(props, false);
+            }
+        },
+        onFocusWithin: (e)=>{
+            if (!isFocused.current) {
+                var _props_onFocus, _props_onFocusChange;
+                isFocused.current = true;
+                (_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 ? void 0 : _props_onFocus.call(props, e);
+                (_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 ? void 0 : _props_onFocusChange.call(props, true);
+            }
+        }
     });
     return {
         groupProps: (0, $bxHoL$reactariautils.mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {

package/dist/useDatePicker.main.js.map CHANGED Viewed

	@@ -1 +1 @@
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, RefObject, 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 {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';\nimport {useMemo} from 'react';\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 \| null>): 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"}
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, RefObject, 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 {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';\nimport {useMemo, useRef} from 'react';\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 \| null>): 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 isFocused = useRef(false);\n let {focusWithinProps} = useFocusWithin({\n ...props,\n isDisabled: state.isOpen,\n onBlurWithin: e => {\n // Ignore when focus moves into the popover.\n let dialog = document.getElementById(dialogId);\n if (!dialog?.contains(e.relatedTarget)) {\n isFocused.current = false;\n props.onBlur?.(e);\n props.onFocusChange?.(false);\n }\n },\n onFocusWithin: e => {\n if (!isFocused.current) {\n isFocused.current = true;\n props.onFocus?.(e);\n props.onFocusChange?.(true);\n }\n }\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 CHANGED Viewed

@@ -7,7 +7,7 @@ import {privateValidationStateProp as $4lVjK$privateValidationStateProp} from "@
 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";
-import {useMemo as $4lVjK$useMemo} from "react";
+import {useMemo as $4lVjK$useMemo, useRef as $4lVjK$useRef} from "react";
 function $parcel$interopDefault(a) {
@@ -63,12 +63,28 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
         ref
     ]);
+    let isFocused = (0, $4lVjK$useRef)(false);
     let { focusWithinProps: focusWithinProps } = (0, $4lVjK$useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
-        onBlurWithin: props.onBlur,
-        onFocusWithin: props.onFocus,
-        onFocusWithinChange: props.onFocusChange
+        onBlurWithin: (e)=>{
+            // Ignore when focus moves into the popover.
+            let dialog = document.getElementById(dialogId);
+            if (!(dialog === null || dialog === void 0 ? void 0 : dialog.contains(e.relatedTarget))) {
+                var _props_onBlur, _props_onFocusChange;
+                isFocused.current = false;
+                (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+                (_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 ? void 0 : _props_onFocusChange.call(props, false);
+            }
+        },
+        onFocusWithin: (e)=>{
+            if (!isFocused.current) {
+                var _props_onFocus, _props_onFocusChange;
+                isFocused.current = true;
+                (_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 ? void 0 : _props_onFocus.call(props, e);
+                (_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 ? void 0 : _props_onFocusChange.call(props, true);
+            }
+        }
     });
     return {
         groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {

package/dist/useDatePicker.module.js CHANGED Viewed

@@ -7,7 +7,7 @@ import {privateValidationStateProp as $4lVjK$privateValidationStateProp} from "@
 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";
-import {useMemo as $4lVjK$useMemo} from "react";
+import {useMemo as $4lVjK$useMemo, useRef as $4lVjK$useRef} from "react";
 function $parcel$interopDefault(a) {
@@ -63,12 +63,28 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
         ref
     ]);
+    let isFocused = (0, $4lVjK$useRef)(false);
     let { focusWithinProps: focusWithinProps } = (0, $4lVjK$useFocusWithin)({
         ...props,
         isDisabled: state.isOpen,
-        onBlurWithin: props.onBlur,
-        onFocusWithin: props.onFocus,
-        onFocusWithinChange: props.onFocusChange
+        onBlurWithin: (e)=>{
+            // Ignore when focus moves into the popover.
+            let dialog = document.getElementById(dialogId);
+            if (!(dialog === null || dialog === void 0 ? void 0 : dialog.contains(e.relatedTarget))) {
+                var _props_onBlur, _props_onFocusChange;
+                isFocused.current = false;
+                (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+                (_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 ? void 0 : _props_onFocusChange.call(props, false);
+            }
+        },
+        onFocusWithin: (e)=>{
+            if (!isFocused.current) {
+                var _props_onFocus, _props_onFocusChange;
+                isFocused.current = true;
+                (_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 ? void 0 : _props_onFocus.call(props, e);
+                (_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 ? void 0 : _props_onFocusChange.call(props, true);
+            }
+        }
     });
     return {
         groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {

package/dist/useDatePicker.module.js.map CHANGED Viewed

	@@ -1 +1 @@
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, RefObject, 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 {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';\nimport {useMemo} from 'react';\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 \| null>): 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.module.js.map"}
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, RefObject, 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 {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';\nimport {useMemo, useRef} from 'react';\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 \| null>): 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 isFocused = useRef(false);\n let {focusWithinProps} = useFocusWithin({\n ...props,\n isDisabled: state.isOpen,\n onBlurWithin: e => {\n // Ignore when focus moves into the popover.\n let dialog = document.getElementById(dialogId);\n if (!dialog?.contains(e.relatedTarget)) {\n isFocused.current = false;\n props.onBlur?.(e);\n props.onFocusChange?.(false);\n }\n },\n onFocusWithin: e => {\n if (!isFocused.current) {\n isFocused.current = true;\n props.onFocus?.(e);\n props.onFocusChange?.(true);\n }\n }\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.module.js.map"}

package/dist/useDatePickerGroup.main.js CHANGED Viewed

@@ -33,14 +33,24 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
             case 'ArrowLeft':
                 e.preventDefault();
                 e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusNext();
-                else focusManager.focusPrevious();
+                if (direction === 'rtl') {
+                    if (ref.current) {
+                        let target = e.target;
+                        let prev = $715562ad3b4cced4$var$findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
+                        if (prev) prev.focus();
+                    }
+                } else focusManager.focusPrevious();
                 break;
             case 'ArrowRight':
                 e.preventDefault();
                 e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusPrevious();
-                else focusManager.focusNext();
+                if (direction === 'rtl') {
+                    if (ref.current) {
+                        let target = e.target;
+                        let next = $715562ad3b4cced4$var$findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
+                        if (next) next.focus();
+                    }
+                } else focusManager.focusNext();
                 break;
         }
     };
@@ -87,6 +97,25 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref, disableArrowNavig
         onKeyDown: onKeyDown
     });
 }
+function $715562ad3b4cced4$var$findNextSegment(group, fromX, direction) {
+    let walker = (0, $19S5E$reactariafocus.getFocusableTreeWalker)(group, {
+        tabbable: true
+    });
+    let node = walker.nextNode();
+    let closest = null;
+    let closestDistance = Infinity;
+    while(node){
+        let x = node.getBoundingClientRect().left;
+        let distance = x - fromX;
+        let absoluteDistance = Math.abs(distance);
+        if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {
+            closest = node;
+            closestDistance = absoluteDistance;
+        }
+        node = walker.nextNode();
+    }
+    return closest;
+}
 //# sourceMappingURL=useDatePickerGroup.main.js.map

package/dist/useDatePickerGroup.main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;;AAQO,SAAS,0CAAmB,KAA8D,EAAE,GAA8B,EAAE,sBAAgC;IACjK,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,eAAe,CAAA,GAAA,oBAAM,EAAE,IAAM,CAAA,GAAA,wCAAiB,EAAE,MAAM;QAAC;KAAI;IAE/D,uCAAuC;IACvC,IAAI,YAAY,CAAC;QACf,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,IAAI,EAAE,MAAM,IAAK,CAAA,EAAE,GAAG,KAAK,eAAe,EAAE,GAAG,KAAK,SAAQ,KAAM,aAAa,OAAO;YACpF,EAAE,cAAc;YAChB,EAAE,eAAe;YACjB,MAAM,OAAO,CAAC;QAChB;QAEA,IAAI,wBACF;QAGF,OAAQ,EAAE,GAAG;YACX,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,~~aAAa~~,SAAS;~~qBAEtB~~,aAAa,aAAa;gBAE5B;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,~~aAAa~~,~~aAAa~~;~~qBAE1B~~,aAAa,SAAS;gBAExB;QACJ;IACF;IAEA,wFAAwF;IACxF,IAAI,YAAY;YAKD;QAJb,IAAI,CAAC,IAAI,OAAO,EACd;QAEF,oEAAoE;QACpE,IAAI,UAAS,gBAAA,OAAO,KAAK,cAAZ,oCAAA,cAAc,MAAM;QACjC,IAAI,SAAS,CAAA,GAAA,4CAAqB,EAAE,IAAI,OAAO,EAAE;YAAC,UAAU;QAAI;QAChE,IAAI,QAAQ;YACV,OAAO,WAAW,GAAG;YACrB,SAAS,OAAO,YAAY;QAC9B;QAEA,0DAA0D;QAC1D,IAAI,CAAC,QAAQ;YACX,IAAI;YACJ,GAAG;gBACD,OAAO,OAAO,SAAS;gBACvB,IAAI,MACF,SAAS;YAEb,QAAS,MAAM;QACjB;QAEA,uEAAuE;QACvE,MAAO,mBAAA,6BAAA,OAAQ,YAAY,CAAC,oBAAqB;YAC/C,IAAI,OAAO,OAAO,YAAY;YAC9B,IAAI,QAAQ,KAAK,YAAY,CAAC,qBAC5B,SAAS;iBAET;QAEJ;QAEA,IAAI,QACF,OAAO,KAAK;IAEhB;IAEA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QAC1B,qBAAqB;QACrB,2BAA2B;QAC3B,cAAa,CAAC;YACZ,IAAI,EAAE,WAAW,KAAK,SACpB;QAEJ;QACA,SAAQ,CAAC;YACP,IAAI,EAAE,WAAW,KAAK,SACpB;QAEJ;IACF;IAEA,OAAO,CAAA,GAAA,gCAAS,EAAE,YAAY;mBAAC;IAAS;AAC1C","sources":["packages/@react-aria/datepicker/src/useDatePickerGroup.ts"],"sourcesContent":["import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';\nimport {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';\nimport {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useMemo} from 'react';\nimport {usePress} from '@react-aria/interactions';\n\nexport function useDatePickerGroup(state: DatePickerState \| DateRangePickerState \| DateFieldState, ref: RefObject<Element \| null>, disableArrowNavigation?: boolean) {\n let {direction} = useLocale();\n let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n // Open the popover on alt + arrow down\n let onKeyDown = (e: KeyboardEvent) => {\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n if (e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp') && 'setOpen' in state) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true);\n }\n\n if (disableArrowNavigation) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n ~~focusManager~~.~~focusNext~~();\n } else {\n focusManager.focusPrevious();\n }\n break;\n case 'ArrowRight':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n ~~focusManager~~.~~focusPrevious~~();\n } else {\n focusManager.focusNext();\n }\n break;\n }\n };\n\n // Focus the first placeholder segment from the end on mouse down/touch up in the field.\n let focusLast = () => {\n if (!ref.current) {\n return;\n }\n // Try to find the segment prior to the element that was clicked on.\n let target = window.event?.target as FocusableElement;\n let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n if (target) {\n walker.currentNode = target;\n target = walker.previousNode() as FocusableElement;\n }\n\n // If no target found, find the last element from the end.\n if (!target) {\n let last: FocusableElement;\n do {\n last = walker.lastChild() as FocusableElement;\n if (last) {\n target = last;\n }\n } while (last);\n }\n\n // Now go backwards until we find an element that is not a placeholder.\n while (target?.hasAttribute('data-placeholder')) {\n let prev = walker.previousNode() as FocusableElement;\n if (prev && prev.hasAttribute('data-placeholder')) {\n target = prev;\n } else {\n break;\n }\n }\n\n if (target) {\n target.focus();\n }\n };\n\n let {pressProps} = usePress({\n preventFocusOnPress: true,\n allowTextSelectionOnPress: true,\n onPressStart(e) {\n if (e.pointerType === 'mouse') {\n focusLast();\n }\n },\n onPress(e) {\n if (e.pointerType !== 'mouse') {\n focusLast();\n }\n }\n });\n\n return mergeProps(pressProps, {onKeyDown});\n}\n"],"names":[],"version":3,"file":"useDatePickerGroup.main.js.map"}
1	+ {"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDatePickerGroup.ts"],"sourcesContent":["import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';\nimport {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';\nimport {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\nimport {useMemo} from 'react';\nimport {usePress} from '@react-aria/interactions';\n\nexport function useDatePickerGroup(state: DatePickerState \| DateRangePickerState \| DateFieldState, ref: RefObject<Element \| null>, disableArrowNavigation?: boolean) {\n let {direction} = useLocale();\n let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n // Open the popover on alt + arrow down\n let onKeyDown = (e: KeyboardEvent) => {\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n if (e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp') && 'setOpen' in state) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true);\n }\n\n if (disableArrowNavigation) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n if (ref.current) {\n let target = e.target as FocusableElement;\n let prev = findNextSegment(ref.current, target.getBoundingClientRect().left, -1);\n\n if (prev) {\n prev.focus();\n }\n }\n } else {\n focusManager.focusPrevious();\n }\n break;\n case 'ArrowRight':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n if (ref.current) {\n let target = e.target as FocusableElement;\n let next = findNextSegment(ref.current, target.getBoundingClientRect().left, 1);\n\n if (next) {\n next.focus();\n }\n }\n } else {\n focusManager.focusNext();\n }\n break;\n }\n };\n\n // Focus the first placeholder segment from the end on mouse down/touch up in the field.\n let focusLast = () => {\n if (!ref.current) {\n return;\n }\n // Try to find the segment prior to the element that was clicked on.\n let target = window.event?.target as FocusableElement;\n let walker = getFocusableTreeWalker(ref.current, {tabbable: true});\n if (target) {\n walker.currentNode = target;\n target = walker.previousNode() as FocusableElement;\n }\n\n // If no target found, find the last element from the end.\n if (!target) {\n let last: FocusableElement;\n do {\n last = walker.lastChild() as FocusableElement;\n if (last) {\n target = last;\n }\n } while (last);\n }\n\n // Now go backwards until we find an element that is not a placeholder.\n while (target?.hasAttribute('data-placeholder')) {\n let prev = walker.previousNode() as FocusableElement;\n if (prev && prev.hasAttribute('data-placeholder')) {\n target = prev;\n } else {\n break;\n }\n }\n\n if (target) {\n target.focus();\n }\n };\n\n let {pressProps} = usePress({\n preventFocusOnPress: true,\n allowTextSelectionOnPress: true,\n onPressStart(e) {\n if (e.pointerType === 'mouse') {\n focusLast();\n }\n },\n onPress(e) {\n if (e.pointerType !== 'mouse') {\n focusLast();\n }\n }\n });\n\n return mergeProps(pressProps, {onKeyDown});\n}\n\nfunction findNextSegment(group: Element, fromX: number, direction: number) {\n let walker = getFocusableTreeWalker(group, {tabbable: true});\n let node = walker.nextNode();\n let closest: FocusableElement \| null = null;\n let closestDistance = Infinity;\n while (node) {\n let x = (node as Element).getBoundingClientRect().left;\n let distance = x - fromX;\n let absoluteDistance = Math.abs(distance);\n if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {\n closest = node as FocusableElement;\n closestDistance = absoluteDistance;\n }\n node = walker.nextNode();\n }\n return closest;\n}\n"],"names":[],"version":3,"file":"useDatePickerGroup.main.js.map"}

package/dist/useDatePickerGroup.mjs CHANGED Viewed

@@ -27,14 +27,24 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
             case 'ArrowLeft':
                 e.preventDefault();
                 e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusNext();
-                else focusManager.focusPrevious();
+                if (direction === 'rtl') {
+                    if (ref.current) {
+                        let target = e.target;
+                        let prev = $3dfb0f96be0d6a08$var$findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
+                        if (prev) prev.focus();
+                    }
+                } else focusManager.focusPrevious();
                 break;
             case 'ArrowRight':
                 e.preventDefault();
                 e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusPrevious();
-                else focusManager.focusNext();
+                if (direction === 'rtl') {
+                    if (ref.current) {
+                        let target = e.target;
+                        let next = $3dfb0f96be0d6a08$var$findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
+                        if (next) next.focus();
+                    }
+                } else focusManager.focusNext();
                 break;
         }
     };
@@ -81,6 +91,25 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
         onKeyDown: onKeyDown
     });
 }
+function $3dfb0f96be0d6a08$var$findNextSegment(group, fromX, direction) {
+    let walker = (0, $7CEvq$getFocusableTreeWalker)(group, {
+        tabbable: true
+    });
+    let node = walker.nextNode();
+    let closest = null;
+    let closestDistance = Infinity;
+    while(node){
+        let x = node.getBoundingClientRect().left;
+        let distance = x - fromX;
+        let absoluteDistance = Math.abs(distance);
+        if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {
+            closest = node;
+            closestDistance = absoluteDistance;
+        }
+        node = walker.nextNode();
+    }
+    return closest;
+}
 export {$3dfb0f96be0d6a08$export$4a931266a3838b86 as useDatePickerGroup};

package/dist/useDatePickerGroup.module.js CHANGED Viewed

@@ -27,14 +27,24 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
             case 'ArrowLeft':
                 e.preventDefault();
                 e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusNext();
-                else focusManager.focusPrevious();
+                if (direction === 'rtl') {
+                    if (ref.current) {
+                        let target = e.target;
+                        let prev = $3dfb0f96be0d6a08$var$findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
+                        if (prev) prev.focus();
+                    }
+                } else focusManager.focusPrevious();
                 break;
             case 'ArrowRight':
                 e.preventDefault();
                 e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusPrevious();
-                else focusManager.focusNext();
+                if (direction === 'rtl') {
+                    if (ref.current) {
+                        let target = e.target;
+                        let next = $3dfb0f96be0d6a08$var$findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
+                        if (next) next.focus();
+                    }
+                } else focusManager.focusNext();
                 break;
         }
     };
@@ -81,6 +91,25 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref, disableArrowNavig
         onKeyDown: onKeyDown
     });
 }
+function $3dfb0f96be0d6a08$var$findNextSegment(group, fromX, direction) {
+    let walker = (0, $7CEvq$getFocusableTreeWalker)(group, {
+        tabbable: true
+    });
+    let node = walker.nextNode();
+    let closest = null;
+    let closestDistance = Infinity;
+    while(node){
+        let x = node.getBoundingClientRect().left;
+        let distance = x - fromX;
+        let absoluteDistance = Math.abs(distance);
+        if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {
+            closest = node;
+            closestDistance = absoluteDistance;
+        }
+        node = walker.nextNode();
+    }
+    return closest;
+}
 export {$3dfb0f96be0d6a08$export$4a931266a3838b86 as useDatePickerGroup};