@react-aria/datepicker 3.0.0-rc.0 → 3.0.0-rc.1

package/dist/main.js

@@ -1,8 +1,8 @@
 var $IwcIq$reactariafocus = require("@react-aria/focus");
 var $IwcIq$reactariautils = require("@react-aria/utils");
+var $IwcIq$react = require("react");
 var $IwcIq$reactarialabel = require("@react-aria/label");
 var $IwcIq$reactariai18n = require("@react-aria/i18n");
-var $IwcIq$react = require("react");
 var $IwcIq$reactariainteractions = require("@react-aria/interactions");
 var $IwcIq$internationalizednumber = require("@internationalized/number");
 var $IwcIq$reactariaspinbutton = require("@react-aria/spinbutton");
@@ -23,6 +23,7 @@ $parcel$export(module.exports, "useDateRangePicker", () => $20f695b1b69e6b9e$exp
 $parcel$export(module.exports, "useDisplayNames", () => $934ac650a0aceb4b$export$d42c60378c8168f8);
 
 
+
 var $c7d0e80b992ca68a$exports = {};
 var $aa344be62785b256$exports = {};
 $aa344be62785b256$exports = JSON.parse("{\"calendar\":\"التقويم\",\"day\":\"يوم\",\"dayPeriod\":\"ص/م\",\"endDate\":\"تاريخ الانتهاء\",\"era\":\"العصر\",\"hour\":\"الساعات\",\"minute\":\"الدقائق\",\"month\":\"الشهر\",\"second\":\"الثواني\",\"selectedDateDescription\":\"تاريخ محدد: {date}\",\"selectedRangeDescription\":\"المدى الزمني المحدد: {startDate} إلى {endDate}\",\"selectedTimeDescription\":\"الوقت المحدد: {time}\",\"startDate\":\"تاريخ البدء\",\"timeZoneName\":\"التوقيت\",\"weekday\":\"اليوم\",\"year\":\"السنة\"}");
@@ -205,7 +206,14 @@ $c7d0e80b992ca68a$exports = {
 
 
 
-function $715562ad3b4cced4$export$4a931266a3838b86(state, ref1) {
+
+
+function $715562ad3b4cced4$export$4a931266a3838b86(state, ref1, disableArrowNavigation) {
+    let { direction: direction  } = $IwcIq$reactariai18n.useLocale();
+    let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref1)
+    , [
+        ref1
+    ]);
     // Open the popover on alt + arrow down
     let onKeyDown = (e)=>{
         if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
@@ -213,6 +221,21 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref1) {
             e.stopPropagation();
             state.setOpen(true);
         }
+        if (disableArrowNavigation) return;
+        switch(e.key){
+            case 'ArrowLeft':
+                e.preventDefault();
+                e.stopPropagation();
+                if (direction === 'rtl') focusManager.focusNext();
+                else focusManager.focusPrevious();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                e.stopPropagation();
+                if (direction === 'rtl') focusManager.focusPrevious();
+                else focusManager.focusNext();
+                break;
+        }
     };
     // Focus the first placeholder segment from the end on mouse down/touch up in the field.
     let focusLast = ()=>{
@@ -267,7 +290,6 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
         ...props,
         labelElementType: 'span'
     });
-    let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
     let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
         onBlurWithin () {
             state.confirmPlaceholder();
@@ -294,6 +316,7 @@ function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
         propsFocusManager,
         ref
     ]);
+    let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref, props[$4acc2f407c169e55$export$300019f83c56d282] === 'presentation');
     // Pass labels and other information to segments.
     $4acc2f407c169e55$export$653eddfc964b0f8a.set(state, {
         ariaLabel: props['aria-label'],
@@ -368,6 +391,10 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         fieldProps['aria-describedby']
     ].filter(Boolean).join(' ') || undefined;
     let domProps = $IwcIq$reactariautils.filterDOMProps(props);
+    let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref)
+    , [
+        ref
+    ]);
     return {
         groupProps: $IwcIq$reactariautils.mergeProps(domProps, groupProps, fieldProps, descProps, {
             role: 'group',
@@ -378,7 +405,6 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         labelProps: {
             ...labelProps,
             onClick: ()=>{
-                let focusManager = $IwcIq$reactariafocus.createFocusManager(ref);
                 focusManager.focusFirst();
             }
         },
@@ -405,7 +431,6 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         buttonProps: {
             ...descProps,
             id: buttonId,
-            excludeFromTabOrder: true,
             'aria-haspopup': 'dialog',
             'aria-label': formatMessage('calendar'),
             'aria-labelledby': `${labelledBy} ${buttonId}`,
@@ -473,7 +498,7 @@ class $934ac650a0aceb4b$var$DisplayNamesPolyfill {
 
 function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     let enteredKeys = $IwcIq$react.useRef('');
-    let { locale: locale , direction: direction  } = $IwcIq$reactariai18n.useLocale();
+    let { locale: locale  } = $IwcIq$reactariai18n.useLocale();
     let displayNames = $934ac650a0aceb4b$export$d42c60378c8168f8();
     let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $4acc2f407c169e55$export$653eddfc964b0f8a.get(state);
     let textValue = segment.text;
@@ -548,33 +573,11 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         if (e.key === 'a' && ($IwcIq$reactariautils.isMac() ? e.metaKey : e.ctrlKey)) e.preventDefault();
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
         switch(e.key){
-            case 'ArrowLeft':
-                e.preventDefault();
-                e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusNext({
-                    tabbable: true
-                });
-                else focusManager.focusPrevious({
-                    tabbable: true
-                });
-                break;
-            case 'ArrowRight':
-                e.preventDefault();
-                e.stopPropagation();
-                if (direction === 'rtl') focusManager.focusPrevious({
-                    tabbable: true
-                });
-                else focusManager.focusNext({
-                    tabbable: true
-                });
-                break;
             case 'Enter':
                 e.preventDefault();
                 e.stopPropagation();
                 if (segment.isPlaceholder && !state.isReadOnly) state.confirmPlaceholder(segment.type);
-                focusManager.focusNext({
-                    tabbable: true
-                });
+                focusManager.focusNext();
                 break;
             case 'Tab':
                 break;
@@ -619,9 +622,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
                 if (startsWith(am, key)) state.setSegment('dayPeriod', 0);
                 else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12);
                 else break;
-                focusManager.focusNext({
-                    tabbable: true
-                });
+                focusManager.focusNext();
                 break;
             case 'day':
             case 'hour':
@@ -651,9 +652,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
                     if (shouldSetValue) state.setSegment(segment.type, segmentValue);
                     if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
                         enteredKeys.current = '';
-                        if (shouldSetValue) focusManager.focusNext({
-                            tabbable: true
-                        });
+                        if (shouldSetValue) focusManager.focusNext();
                     } else enteredKeys.current = newValue;
                     break;
                 }
@@ -665,9 +664,11 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         // Safari requires that a selection is set or it won't fire input events.
         // Since usePress disables text selection, this won't happen by default.
         ref.current.style.webkitUserSelect = 'text';
+        ref.current.style.userSelect = 'text';
         let selection = window.getSelection();
         selection.collapse(ref.current);
-        ref.current.style.webkitUserSelect = '';
+        ref.current.style.webkitUserSelect = 'none';
+        ref.current.style.userSelect = 'none';
     };
     let compositionRef = $IwcIq$react.useRef('');
     // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
@@ -823,9 +824,13 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
         descProps['aria-describedby'],
         fieldProps['aria-describedby']
     ].filter(Boolean).join(' ') || undefined;
-    let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref)
+    let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref, {
+            // Exclude the button from the focus manager.
+            accept: (element)=>element.id !== buttonId
+        })
     , [
-        ref
+        ref,
+        buttonId
     ]);
     let commonFieldProps = {
         [$4acc2f407c169e55$export$7b3062cd49e80452]: focusManager,
@@ -858,7 +863,6 @@ function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
         buttonProps: {
             ...descProps,
             id: buttonId,
-            excludeFromTabOrder: true,
             'aria-haspopup': 'dialog',
             'aria-label': formatMessage('calendar'),
             'aria-labelledby': `${labelledBy} ${buttonId}`,