@react-aria/datepicker - npm Package Compare versions

Comparing version 3.0.0-nightly.1603 to 3.0.0-nightly.1607

dist/main.js

@@ -261,5 +261,5 @@ var $IwcIq$reactariafocus = require("@react-aria/focus");
         // Now go backwards until we find an element that is not a placeholder.
-        while(target === null || target === void 0 ? void 0 : target.getAttribute('aria-placeholder')){
+        while(target === null || target === void 0 ? void 0 : target.hasAttribute('data-placeholder')){
             let prev = walker.previousNode();
-            if (prev && prev.getAttribute('aria-placeholder')) target = prev;
+            if (prev && prev.hasAttribute('data-placeholder')) target = prev;
             else break;
@@ -505,3 +505,3 @@ }
     let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $4acc2f407c169e55$export$653eddfc964b0f8a.get(state);
-    let textValue = segment.text;
+    let textValue = segment.isPlaceholder ? '' : segment.text;
     let options = $IwcIq$react.useMemo(()=>state.dateFormatter.resolvedOptions()
@@ -520,7 +520,10 @@ , [
     });
-    if (segment.type === 'month') {
+    if (segment.type === 'month' && !segment.isPlaceholder) {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-    } else if (segment.type === 'hour') textValue = hourDateFormatter.format(state.dateValue);
+    } else if (segment.type === 'hour' && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
     let { spinButtonProps: spinButtonProps  } = $IwcIq$reactariaspinbutton.useSpinButton({
+        // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.
+        // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.
+        // https://github.com/dequelabs/axe-core/issues/3505
         value: segment.value,
@@ -579,10 +582,2 @@ textValue: textValue,
         switch(e.key){
-            case 'Enter':
-                e.preventDefault();
-                e.stopPropagation();
-                if (segment.isPlaceholder && !state.isReadOnly) state.confirmPlaceholder(segment.type);
-                focusManager.focusNext();
-                break;
-            case 'Tab':
-                break;
             case 'Backspace':
@@ -754,4 +749,4 @@ case 'Delete':
             'aria-describedby': ariaDescribedBy,
-            'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
             'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
+            'data-placeholder': segment.isPlaceholder || undefined,
             contentEditable: isEditable,
@@ -794,3 +789,2 @@ suppressContentEditableWarning: isEditable,
 
-
 function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
@@ -824,7 +818,2 @@ var ref1, ref2;
     let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
     let ariaDescribedBy = [
@@ -859,3 +848,3 @@ descProps['aria-describedby'],
     return {
-        groupProps: $IwcIq$reactariautils.mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+        groupProps: $IwcIq$reactariautils.mergeProps(domProps, groupProps, fieldProps, descProps, {
             role: 'group',
@@ -862,0 +851,0 @@ 'aria-disabled': props.isDisabled || null,

dist/module.js

@@ -251,5 +251,5 @@ import {createFocusManager as $cIPI0$createFocusManager, getFocusableTreeWalker as $cIPI0$getFocusableTreeWalker} from "@react-aria/focus";
         // Now go backwards until we find an element that is not a placeholder.
-        while(target === null || target === void 0 ? void 0 : target.getAttribute('aria-placeholder')){
+        while(target === null || target === void 0 ? void 0 : target.hasAttribute('data-placeholder')){
             let prev = walker.previousNode();
-            if (prev && prev.getAttribute('aria-placeholder')) target = prev;
+            if (prev && prev.hasAttribute('data-placeholder')) target = prev;
             else break;
@@ -495,3 +495,3 @@ }
     let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $16f0b7bb276bc17e$export$653eddfc964b0f8a.get(state);
-    let textValue = segment.text;
+    let textValue = segment.isPlaceholder ? '' : segment.text;
     let options = $cIPI0$useMemo(()=>state.dateFormatter.resolvedOptions()
@@ -510,7 +510,10 @@ , [
     });
-    if (segment.type === 'month') {
+    if (segment.type === 'month' && !segment.isPlaceholder) {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-    } else if (segment.type === 'hour') textValue = hourDateFormatter.format(state.dateValue);
+    } else if (segment.type === 'hour' && !segment.isPlaceholder) textValue = hourDateFormatter.format(state.dateValue);
     let { spinButtonProps: spinButtonProps  } = $cIPI0$useSpinButton({
+        // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.
+        // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.
+        // https://github.com/dequelabs/axe-core/issues/3505
         value: segment.value,
@@ -569,10 +572,2 @@ textValue: textValue,
         switch(e.key){
-            case 'Enter':
-                e.preventDefault();
-                e.stopPropagation();
-                if (segment.isPlaceholder && !state.isReadOnly) state.confirmPlaceholder(segment.type);
-                focusManager.focusNext();
-                break;
-            case 'Tab':
-                break;
             case 'Backspace':
@@ -744,4 +739,4 @@ case 'Delete':
             'aria-describedby': ariaDescribedBy,
-            'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
             'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
+            'data-placeholder': segment.isPlaceholder || undefined,
             contentEditable: isEditable,
@@ -784,3 +779,2 @@ suppressContentEditableWarning: isEditable,
 
-
 function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
@@ -814,7 +808,2 @@ var ref1, ref2;
     let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $cIPI0$useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
     let ariaDescribedBy = [
@@ -849,3 +838,3 @@ descProps['aria-describedby'],
     return {
-        groupProps: $cIPI0$mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+        groupProps: $cIPI0$mergeProps(domProps, groupProps, fieldProps, descProps, {
             role: 'group',
@@ -852,0 +841,0 @@ 'aria-disabled': props.isDisabled || null,

package.json

 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly.1603+18cb5bfc4",
+  "version": "3.0.0-nightly.1607+9f7ebe489",
   "description": "Spectrum UI components in React",
@@ -21,16 +21,16 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.8-nightly.3302+18cb5bfc4",
-    "@internationalized/number": "3.1.2-nightly.3302+18cb5bfc4",
-    "@react-aria/focus": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-aria/i18n": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-aria/interactions": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-aria/label": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-aria/spinbutton": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-aria/utils": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-stately/datepicker": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-types/button": "3.5.1-nightly.3302+18cb5bfc4",
-    "@react-types/calendar": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-types/datepicker": "3.0.0-nightly.1603+18cb5bfc4",
-    "@react-types/dialog": "3.4.1-nightly.3302+18cb5bfc4",
-    "@react-types/shared": "3.0.0-nightly.1603+18cb5bfc4"
+    "@internationalized/message": "3.0.8-nightly.3306+9f7ebe489",
+    "@internationalized/number": "3.1.2-nightly.3306+9f7ebe489",
+    "@react-aria/focus": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-aria/i18n": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-aria/interactions": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-aria/label": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-aria/spinbutton": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-aria/utils": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-stately/datepicker": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-types/button": "3.5.1-nightly.3306+9f7ebe489",
+    "@react-types/calendar": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-types/datepicker": "3.0.0-nightly.1607+9f7ebe489",
+    "@react-types/dialog": "3.4.1-nightly.3306+9f7ebe489",
+    "@react-types/shared": "3.0.0-nightly.1607+9f7ebe489"
   },
@@ -44,3 +44,3 @@ "peerDependencies": {
   },
-  "gitHead": "18cb5bfc4a049fc791b0836fb0a29e64f6162f9e"
+  "gitHead": "9f7ebe4897af095b31dc43cfd069bcf662bcfbac"
 }

src/useDatePickerGroup.ts

@@ -69,5 +69,5 @@ import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
     // Now go backwards until we find an element that is not a placeholder.
-    while (target?.getAttribute('aria-placeholder')) {
+    while (target?.hasAttribute('data-placeholder')) {
       let prev = walker.previousNode() as HTMLElement;
-      if (prev && prev.getAttribute('aria-placeholder')) {
+      if (prev && prev.hasAttribute('data-placeholder')) {
         target = prev;
@@ -74,0 +74,0 @@ } else {

src/useDateRangePicker.ts

@@ -26,3 +26,2 @@ /*
 import {useField} from '@react-aria/label';
-import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
@@ -84,7 +83,2 @@
   let groupProps = useDatePickerGroup(state, ref);
-  let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
-      state.confirmPlaceholder();
-    }
-  });
 
@@ -116,3 +110,3 @@ let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
   return {
-    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, {
       role: 'group',
@@ -119,0 +113,0 @@ 'aria-disabled': props.isDisabled || null,

src/useDateSegment.ts

@@ -38,3 +38,3 @@ /*
 
-  let textValue = segment.text;
+  let textValue = segment.isPlaceholder ? '' : segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
@@ -48,6 +48,6 @@ let monthDateFormatter = useDateFormatter({month: 'long', timeZone: options.timeZone});
 
-  if (segment.type === 'month') {
+  if (segment.type === 'month' && !segment.isPlaceholder) {
     let monthTextValue = monthDateFormatter.format(state.dateValue);
     textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-  } else if (segment.type === 'hour') {
+  } else if (segment.type === 'hour' && !segment.isPlaceholder) {
     textValue = hourDateFormatter.format(state.dateValue);
@@ -57,2 +57,5 @@ }
   let {spinButtonProps} = useSpinButton({
+    // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.
+    // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.
+    // https://github.com/dequelabs/axe-core/issues/3505
     value: segment.value,
@@ -120,12 +123,2 @@ textValue,
     switch (e.key) {
-      case 'Enter':
-        e.preventDefault();
-        e.stopPropagation();
-        if (segment.isPlaceholder && !state.isReadOnly) {
-          state.confirmPlaceholder(segment.type);
-        }
-        focusManager.focusNext();
-        break;
-      case 'Tab':
-        break;
       case 'Backspace':
@@ -339,4 +332,4 @@ case 'Delete': {
       'aria-describedby': ariaDescribedBy,
-      'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
       'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
+      'data-placeholder': segment.isPlaceholder || undefined,
       contentEditable: isEditable,
@@ -343,0 +336,0 @@ suppressContentEditableWarning: isEditable,

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

333414

decreased by-0.37%

Lines of code

2645

decreased by-1.23%

Dependency changes

• Updated@internationalized/message@3.0.8-nightly.3306+9f7ebe489

• Updated@internationalized/number@3.1.2-nightly.3306+9f7ebe489

• Updated@react-aria/focus@3.0.0-nightly.1607+9f7ebe489

• Updated@react-aria/i18n@3.0.0-nightly.1607+9f7ebe489

• Updated@react-aria/interactions@3.0.0-nightly.1607+9f7ebe489

• Updated@react-aria/label@3.0.0-nightly.1607+9f7ebe489

• Updated@react-aria/spinbutton@3.0.0-nightly.1607+9f7ebe489

• Updated@react-aria/utils@3.0.0-nightly.1607+9f7ebe489

• Updated@react-stately/datepicker@3.0.0-nightly.1607+9f7ebe489

• Updated@react-types/button@3.5.1-nightly.3306+9f7ebe489

• Updated@react-types/calendar@3.0.0-nightly.1607+9f7ebe489

• Updated@react-types/datepicker@3.0.0-nightly.1607+9f7ebe489

• Updated@react-types/dialog@3.4.1-nightly.3306+9f7ebe489

• Updated@react-types/shared@3.0.0-nightly.1607+9f7ebe489