@react-aria/grid - npm Package Compare versions

Comparing version 3.1.1-nightly.3022 to 3.1.1-nightly.3025

dist/main.js

 var {
-  isFocusVisible
-} = require("@react-aria/interactions");
-
-var {
   focusSafely,
@@ -10,2 +6,4 @@ getFocusableTreeWalker
 
+var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
+
 var {
@@ -17,2 +15,7 @@ useSelectableCollection,
 var {
+  useInteractionModality,
+  isFocusVisible
+} = require("@react-aria/interactions");
+
+var {
   useCollator,
@@ -32,3 +35,4 @@ useLocale,
   useId,
-  useUpdateEffect
+  useUpdateEffect,
+  useDescription
 } = require("@react-aria/utils");
@@ -42,4 +46,2 @@
 
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
-
 var {
@@ -430,7 +432,9 @@ Rect
  */
-// Used to share keyboard delegate between useGrid and useGridCell
-const $e6fd609a4e1bd40f6df88a69c08b6746$export$gridKeyboardDelegates = new WeakMap();
+// Used to share:
+// keyboard delegate between useGrid and useGridCell
+// onRowAction/onCellAction across hooks
+const $e6fd609a4e1bd40f6df88a69c08b6746$export$gridMap = new WeakMap();
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/grid/intl/ar-AE.json
 var $f3b5d97e587eba8802fd35463efc40f1$exports = {};
-$f3b5d97e587eba8802fd35463efc40f1$exports = JSON.parse("{\"deselectedItem\":\"{item} غير المحدد\",\"select\":\"تحديد\",\"selectedAll\":\"جميع العناصر المحددة.\",\"selectedCount\":\"{count, plural, =0 {لم يتم تحديد عناصر} one {# عنصر محدد} other {# عنصر محدد}}.\",\"selectedItem\":\"{item} المحدد\"}");
+$f3b5d97e587eba8802fd35463efc40f1$exports = JSON.parse("{\"deselectedItem\":\"{item} غير المحدد\",\"select\":\"تحديد\",\"selectedAll\":\"جميع العناصر المحددة.\",\"selectedCount\":\"{count, plural, =0 {لم يتم تحديد عناصر} one {# عنصر محدد} other {# عنصر محدد}}.\",\"selectedItem\":\"{item} المحدد\",\"longPressToSelect\":\"Long press to enter selection mode.\"}");
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/grid/intl/bg-BG.json
@@ -453,3 +457,3 @@ var $e8c0938d9ab8b794bba35bee62bd9c11$exports = {};
 var $d13b1ea919d49253cf46bbc8c5ad0e4f$exports = {};
-$d13b1ea919d49253cf46bbc8c5ad0e4f$exports = JSON.parse("{\"deselectedItem\":\"{item} not selected.\",\"select\":\"Select\",\"selectedCount\":\"{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}.\",\"selectedAll\":\"All items selected.\",\"selectedItem\":\"{item} selected.\"}");
+$d13b1ea919d49253cf46bbc8c5ad0e4f$exports = JSON.parse("{\"deselectedItem\":\"{item} not selected.\",\"select\":\"Select\",\"selectedCount\":\"{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}.\",\"selectedAll\":\"All items selected.\",\"selectedItem\":\"{item} selected.\",\"longPressToSelect\":\"Long press to enter selection mode.\"}");
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/grid/intl/es-ES.json
@@ -537,2 +541,64 @@ var $d864b563ed6cd09263653205fa183$exports = {};
 // @ts-ignore
+const $f10fda15268f6ca6633f5e47925$var$intlMessages = {
+  "ar-AE": _babelRuntimeHelpersInteropRequireDefault($f3b5d97e587eba8802fd35463efc40f1$exports).default,
+  "bg-BG": _babelRuntimeHelpersInteropRequireDefault($e8c0938d9ab8b794bba35bee62bd9c11$exports).default,
+  "cs-CZ": _babelRuntimeHelpersInteropRequireDefault($e0c07c292996cdb1b27080a59c7cb52$exports).default,
+  "da-DK": _babelRuntimeHelpersInteropRequireDefault($e0001ed7150af4085e51c274889a03c$exports).default,
+  "de-DE": _babelRuntimeHelpersInteropRequireDefault($de9f1470f80ba9cf38b8a75bb6c$exports).default,
+  "el-GR": _babelRuntimeHelpersInteropRequireDefault($cfe35bac79961e38f4df4a0e0cb09a04$exports).default,
+  "en-US": _babelRuntimeHelpersInteropRequireDefault($d13b1ea919d49253cf46bbc8c5ad0e4f$exports).default,
+  "es-ES": _babelRuntimeHelpersInteropRequireDefault($d864b563ed6cd09263653205fa183$exports).default,
+  "et-EE": _babelRuntimeHelpersInteropRequireDefault($b14dc42d725c1febe581f4260531b766$exports).default,
+  "fi-FI": _babelRuntimeHelpersInteropRequireDefault($c9a09657efdb048bfac0187444$exports).default,
+  "fr-FR": _babelRuntimeHelpersInteropRequireDefault($ea4502238114a4fa77247e11c71dbff$exports).default,
+  "he-IL": _babelRuntimeHelpersInteropRequireDefault($d9581c305462587058c0342a58677c4$exports).default,
+  "hr-HR": _babelRuntimeHelpersInteropRequireDefault($cf734ac19e86322b877e98c049038b$exports).default,
+  "hu-HU": _babelRuntimeHelpersInteropRequireDefault($f521190239da9bcdf17fc30078c36$exports).default,
+  "it-IT": _babelRuntimeHelpersInteropRequireDefault($c65d722333d791beced80b55e56cac2b$exports).default,
+  "ja-JP": _babelRuntimeHelpersInteropRequireDefault($bf77eedec4eb77f0361d68c3e1f9ed34$exports).default,
+  "ko-KR": _babelRuntimeHelpersInteropRequireDefault($fc5ca332cebd040bdaa0cf9b999553$exports).default,
+  "lt-LT": _babelRuntimeHelpersInteropRequireDefault($f136c7b53ddb1ccb2cf52b596649$exports).default,
+  "lv-LV": _babelRuntimeHelpersInteropRequireDefault($da0bf35340be57c92d4bdcc180dbfdc2$exports).default,
+  "nb-NO": _babelRuntimeHelpersInteropRequireDefault($d83a2220a3634302170e36cb127a436$exports).default,
+  "nl-NL": _babelRuntimeHelpersInteropRequireDefault($c3f2334868ddbe62c3cddc9f73c66da0$exports).default,
+  "pl-PL": _babelRuntimeHelpersInteropRequireDefault($a03437156244244be9a419900d98$exports).default,
+  "pt-BR": _babelRuntimeHelpersInteropRequireDefault($b789143cc53d4555e546c675632d83bf$exports).default,
+  "pt-PT": _babelRuntimeHelpersInteropRequireDefault($a15741fa76f08491470130f498dbd$exports).default,
+  "ro-RO": _babelRuntimeHelpersInteropRequireDefault($e1a824107cd15e9ed3d2deec6e9958ea$exports).default,
+  "ru-RU": _babelRuntimeHelpersInteropRequireDefault($bbcd18d5c3a31954c443ea06e6f$exports).default,
+  "sk-SK": _babelRuntimeHelpersInteropRequireDefault($f82152409e7266812e1afd28$exports).default,
+  "sl-SI": _babelRuntimeHelpersInteropRequireDefault($cf441c41ac0818ad07c0beeac2a5f2a$exports).default,
+  "sr-SP": _babelRuntimeHelpersInteropRequireDefault($fb0afad71994f5a5770039a338cf3$exports).default,
+  "sv-SE": _babelRuntimeHelpersInteropRequireDefault($b27c3659a4c51ac9e7a5b961fef5ea0f$exports).default,
+  "tr-TR": _babelRuntimeHelpersInteropRequireDefault($d27e0624a0f68339271ed686c5180$exports).default,
+  "uk-UA": _babelRuntimeHelpersInteropRequireDefault($aff0802f4267f6a9ced1608dad094e62$exports).default,
+  "zh-CN": _babelRuntimeHelpersInteropRequireDefault($d98ba85122b8bc7d41f49f582696f83$exports).default,
+  "zh-TW": _babelRuntimeHelpersInteropRequireDefault($f2661a24dc6056b2c63abea3a181b0d0$exports).default
+};
+
+/**
+ * Computes the description for a grid selectable collection.
+ * @param props
+ */
+function $f10fda15268f6ca6633f5e47925$export$useHighlightSelectionDescription(props) {
+  let formatMessage = useMessageFormatter($f10fda15268f6ca6633f5e47925$var$intlMessages);
+  let modality = useInteractionModality(); // null is the default if the user hasn't interacted with the table at all yet or the rest of the page
+
+  let shouldLongPress = (modality === 'pointer' || modality === 'virtual' || modality == null) && 'ontouchstart' in window;
+  let interactionDescription = useMemo(() => {
+    let selectionMode = props.selectionManager.selectionMode;
+    let selectionBehavior = props.selectionManager.selectionBehavior;
+    let message = undefined;
+
+    if (shouldLongPress) {
+      message = formatMessage('longPressToSelect');
+    }
+
+    return selectionBehavior === 'replace' && selectionMode !== 'none' && props.hasItemActions ? message : undefined;
+  }, [props.selectionManager.selectionMode, props.selectionManager.selectionBehavior, props.hasItemActions, formatMessage, shouldLongPress]);
+  let descriptionProps = useDescription(interactionDescription);
+  return descriptionProps;
+}
+
+// @ts-ignore
 const $df311f3c863e8abccff59a8ae65a46d3$var$intlMessages = {
@@ -592,3 +658,5 @@ "ar-AE": _babelRuntimeHelpersInteropRequireDefault($f3b5d97e587eba8802fd35463efc40f1$exports).default,
     },
-    scrollRef
+    scrollRef,
+    onRowAction,
+    onCellAction
   } = props;
@@ -628,11 +696,21 @@ let formatMessage = useMessageFormatter($df311f3c863e8abccff59a8ae65a46d3$var$intlMessages);
   let id = useId();
-  $e6fd609a4e1bd40f6df88a69c08b6746$export$gridKeyboardDelegates.set(state, delegate);
+  $e6fd609a4e1bd40f6df88a69c08b6746$export$gridMap.set(state, {
+    keyboardDelegate: delegate,
+    actions: {
+      onRowAction,
+      onCellAction
+    }
+  });
+  let descriptionProps = $f10fda15268f6ca6633f5e47925$export$useHighlightSelectionDescription({
+    selectionManager: state.selectionManager,
+    hasItemActions: !!(onRowAction || onCellAction)
+  });
   let domProps = filterDOMProps(props, {
     labelable: true
   });
-  let gridProps = mergeProps(domProps, _babelRuntimeHelpersExtends({
+  let gridProps = mergeProps(domProps, {
     role: 'grid',
     id,
     'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
-  }, collectionProps));
+  }, collectionProps, descriptionProps);
 
@@ -649,5 +727,3 @@ if (isVirtualized) {
   useUpdateEffect(() => {
-    // Do not do this when using selectionBehavior = 'replace' to avoid selection announcements
-    // every time the user presses the arrow keys.
-    if (!state.selectionManager.isFocused || state.selectionManager.selectionBehavior === 'replace') {
+    if (!state.selectionManager.isFocused) {
       lastSelection.current = selection;
@@ -660,5 +736,16 @@ return;
 
+    let isReplace = state.selectionManager.selectionBehavior === 'replace';
     let messages = [];
 
-    if (addedKeys.size === 1 && removedKeys.size === 0) {
+    if (state.selectionManager.selectedKeys.size === 1 && isReplace) {
+      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
+        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
+
+        if (currentSelectionText) {
+          messages.push(formatMessage('selectedItem', {
+            item: currentSelectionText
+          }));
+        }
+      }
+    } else if (addedKeys.size === 1 && removedKeys.size === 0) {
       let addedText = getRowText(addedKeys.keys().next().value);
@@ -685,3 +772,5 @@
     if (state.selectionManager.selectionMode === 'multiple') {
-      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || lastSelection.current.size > 1) {
+      var _lastSelection$curren;
+
+      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || ((_lastSelection$curren = lastSelection.current) == null ? void 0 : _lastSelection$curren.size) > 1) {
         messages.push(selection === 'all' ? formatMessage('selectedAll') : formatMessage('selectedCount', {
@@ -748,2 +837,7 @@ count: selection.size
   let {
+    actions: {
+      onRowAction
+    }
+  } = $e6fd609a4e1bd40f6df88a69c08b6746$export$gridMap.get(state);
+  let {
     itemProps,
@@ -757,3 +851,3 @@ isPressed
     shouldSelectOnPressUp,
-    onAction
+    onAction: onRowAction ? () => onRowAction(node.key) : onAction
   });
@@ -795,3 +889,8 @@ let isSelected = state.selectionManager.isSelected(node.key);
   } = useLocale();
-  let keyboardDelegate = $e6fd609a4e1bd40f6df88a69c08b6746$export$gridKeyboardDelegates.get(state); // Handles focusing the cell. If there is a focusable child,
+  let {
+    keyboardDelegate,
+    actions: {
+      onCellAction
+    }
+  } = $e6fd609a4e1bd40f6df88a69c08b6746$export$gridMap.get(state); // Handles focusing the cell. If there is a focusable child,
   // it is focused, otherwise the cell itself is focused.
@@ -826,3 +925,3 @@
     shouldSelectOnPressUp,
-    onAction
+    onAction: onCellAction ? () => onCellAction(node.key) : onAction
   });
@@ -829,0 +928,0 @@

dist/module.js

@@ -1,10 +0,10 @@
-import { isFocusVisible } from "@react-aria/interactions";
 import { focusSafely, getFocusableTreeWalker } from "@react-aria/focus";
+import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
 import { useSelectableCollection, useSelectableItem } from "@react-aria/selection";
+import { useInteractionModality, isFocusVisible } from "@react-aria/interactions";
 import { useCollator, useLocale, useMessageFormatter } from "@react-aria/i18n";
 import { useMemo, useRef } from "react";
-import { filterDOMProps, mergeProps, useId, useUpdateEffect } from "@react-aria/utils";
+import { filterDOMProps, mergeProps, useId, useUpdateEffect, useDescription } from "@react-aria/utils";
 import { announce } from "@react-aria/live-announcer";
 import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
-import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
 import { Rect } from "@react-stately/virtualizer";
@@ -386,7 +386,9 @@ export class GridKeyboardDelegate {
  */
-// Used to share keyboard delegate between useGrid and useGridCell
-const $c7c16c1fc27e25a205a277212c8e7cfd$export$gridKeyboardDelegates = new WeakMap();
+// Used to share:
+// keyboard delegate between useGrid and useGridCell
+// onRowAction/onCellAction across hooks
+const $c7c16c1fc27e25a205a277212c8e7cfd$export$gridMap = new WeakMap();
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/grid/intl/ar-AE.json
 var $d754af426cd99d13f3c3b42e31b3$exports = {};
-$d754af426cd99d13f3c3b42e31b3$exports = JSON.parse("{\"deselectedItem\":\"{item} غير المحدد\",\"select\":\"تحديد\",\"selectedAll\":\"جميع العناصر المحددة.\",\"selectedCount\":\"{count, plural, =0 {لم يتم تحديد عناصر} one {# عنصر محدد} other {# عنصر محدد}}.\",\"selectedItem\":\"{item} المحدد\"}");
+$d754af426cd99d13f3c3b42e31b3$exports = JSON.parse("{\"deselectedItem\":\"{item} غير المحدد\",\"select\":\"تحديد\",\"selectedAll\":\"جميع العناصر المحددة.\",\"selectedCount\":\"{count, plural, =0 {لم يتم تحديد عناصر} one {# عنصر محدد} other {# عنصر محدد}}.\",\"selectedItem\":\"{item} المحدد\",\"longPressToSelect\":\"Long press to enter selection mode.\"}");
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/grid/intl/bg-BG.json
@@ -409,3 +411,3 @@ var $b550e7ff21d43357d19c7d9f6403a388$exports = {};
 var $c220079f51d67fa1d00cfe9981441af$exports = {};
-$c220079f51d67fa1d00cfe9981441af$exports = JSON.parse("{\"deselectedItem\":\"{item} not selected.\",\"select\":\"Select\",\"selectedCount\":\"{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}.\",\"selectedAll\":\"All items selected.\",\"selectedItem\":\"{item} selected.\"}");
+$c220079f51d67fa1d00cfe9981441af$exports = JSON.parse("{\"deselectedItem\":\"{item} not selected.\",\"select\":\"Select\",\"selectedCount\":\"{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}.\",\"selectedAll\":\"All items selected.\",\"selectedItem\":\"{item} selected.\",\"longPressToSelect\":\"Long press to enter selection mode.\"}");
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/grid/intl/es-ES.json
@@ -493,2 +495,64 @@ var $d087ea4b714dcffa2dde8822c5ee123$exports = {};
 // @ts-ignore
+const $b9a219c78ddfb00cbad541b7e7db769$var$intlMessages = {
+  "ar-AE": _babelRuntimeHelpersEsmInteropRequireDefault($d754af426cd99d13f3c3b42e31b3$exports).default,
+  "bg-BG": _babelRuntimeHelpersEsmInteropRequireDefault($b550e7ff21d43357d19c7d9f6403a388$exports).default,
+  "cs-CZ": _babelRuntimeHelpersEsmInteropRequireDefault($e506453b0899c672fdbf2f4855f3721d$exports).default,
+  "da-DK": _babelRuntimeHelpersEsmInteropRequireDefault($f209544680a65b4d4c1f36b455e32f8e$exports).default,
+  "de-DE": _babelRuntimeHelpersEsmInteropRequireDefault($dfc27c2d5479ed590d5c135298a3dd7a$exports).default,
+  "el-GR": _babelRuntimeHelpersEsmInteropRequireDefault($e67eb003498026404bc605ad1172$exports).default,
+  "en-US": _babelRuntimeHelpersEsmInteropRequireDefault($c220079f51d67fa1d00cfe9981441af$exports).default,
+  "es-ES": _babelRuntimeHelpersEsmInteropRequireDefault($d087ea4b714dcffa2dde8822c5ee123$exports).default,
+  "et-EE": _babelRuntimeHelpersEsmInteropRequireDefault($dfbb5dd2cf76066829f535b9b7512de$exports).default,
+  "fi-FI": _babelRuntimeHelpersEsmInteropRequireDefault($fe1857136085cd04ddc4b69d893957$exports).default,
+  "fr-FR": _babelRuntimeHelpersEsmInteropRequireDefault($dfe8baae84cd225984055f0cfc3d268$exports).default,
+  "he-IL": _babelRuntimeHelpersEsmInteropRequireDefault($ecb9832d13f940337c08bcdfe3b07d24$exports).default,
+  "hr-HR": _babelRuntimeHelpersEsmInteropRequireDefault($d9c169b9dd510b0b128c3205c2b2c21$exports).default,
+  "hu-HU": _babelRuntimeHelpersEsmInteropRequireDefault($ae5e649f2351c1ee4f214d7d3d2fee34$exports).default,
+  "it-IT": _babelRuntimeHelpersEsmInteropRequireDefault($d968134eb4b23622cddaf412b$exports).default,
+  "ja-JP": _babelRuntimeHelpersEsmInteropRequireDefault($fae0061e289ef3fe7774b3432a1fd262$exports).default,
+  "ko-KR": _babelRuntimeHelpersEsmInteropRequireDefault($a16713704fefd879098a0aa130bca4c$exports).default,
+  "lt-LT": _babelRuntimeHelpersEsmInteropRequireDefault($f726830e0f90172a1c17ab3563f05a5$exports).default,
+  "lv-LV": _babelRuntimeHelpersEsmInteropRequireDefault($b882e37fb85cc320012a177ca86a$exports).default,
+  "nb-NO": _babelRuntimeHelpersEsmInteropRequireDefault($ed7cd8cdf8abe84302fd71baf1a5a0$exports).default,
+  "nl-NL": _babelRuntimeHelpersEsmInteropRequireDefault($bbe2b06394f1013577a54b49f87d$exports).default,
+  "pl-PL": _babelRuntimeHelpersEsmInteropRequireDefault($d871c3e83f9373444be2a825fd274$exports).default,
+  "pt-BR": _babelRuntimeHelpersEsmInteropRequireDefault($fce09a65f13a12236975366a41fa3fc$exports).default,
+  "pt-PT": _babelRuntimeHelpersEsmInteropRequireDefault($de306f55572f07861710d9ca39f9c$exports).default,
+  "ro-RO": _babelRuntimeHelpersEsmInteropRequireDefault($e6c9a7e5801e9ad0eeefa1ef9bd83694$exports).default,
+  "ru-RU": _babelRuntimeHelpersEsmInteropRequireDefault($e030948355056f78df065841041ed6e1$exports).default,
+  "sk-SK": _babelRuntimeHelpersEsmInteropRequireDefault($e3fc3d4894b1affa2ff3d7c41eee3e4e$exports).default,
+  "sl-SI": _babelRuntimeHelpersEsmInteropRequireDefault($d81efb25c196c7606310a2ee6196c30$exports).default,
+  "sr-SP": _babelRuntimeHelpersEsmInteropRequireDefault($c90c405b967be58ced68$exports).default,
+  "sv-SE": _babelRuntimeHelpersEsmInteropRequireDefault($e5bd4708bcd4a81da17e007be5420$exports).default,
+  "tr-TR": _babelRuntimeHelpersEsmInteropRequireDefault($ea788b55810edc0f8005b062dd8ec58$exports).default,
+  "uk-UA": _babelRuntimeHelpersEsmInteropRequireDefault($e2a5ced9d789ea6f864372772c168b3$exports).default,
+  "zh-CN": _babelRuntimeHelpersEsmInteropRequireDefault($acd8387943c3f4ec14f3e55ba24c72c5$exports).default,
+  "zh-TW": _babelRuntimeHelpersEsmInteropRequireDefault($b1a3d2e8fbfc08bd783a71a60d60a4d0$exports).default
+};
+
+/**
+ * Computes the description for a grid selectable collection.
+ * @param props
+ */
+function $b9a219c78ddfb00cbad541b7e7db769$export$useHighlightSelectionDescription(props) {
+  let formatMessage = useMessageFormatter($b9a219c78ddfb00cbad541b7e7db769$var$intlMessages);
+  let modality = useInteractionModality(); // null is the default if the user hasn't interacted with the table at all yet or the rest of the page
+
+  let shouldLongPress = (modality === 'pointer' || modality === 'virtual' || modality == null) && 'ontouchstart' in window;
+  let interactionDescription = useMemo(() => {
+    let selectionMode = props.selectionManager.selectionMode;
+    let selectionBehavior = props.selectionManager.selectionBehavior;
+    let message = undefined;
+
+    if (shouldLongPress) {
+      message = formatMessage('longPressToSelect');
+    }
+
+    return selectionBehavior === 'replace' && selectionMode !== 'none' && props.hasItemActions ? message : undefined;
+  }, [props.selectionManager.selectionMode, props.selectionManager.selectionBehavior, props.hasItemActions, formatMessage, shouldLongPress]);
+  let descriptionProps = useDescription(interactionDescription);
+  return descriptionProps;
+}
+
+// @ts-ignore
 const $e3c4cce891c32069b0b54eddd405e76$var$intlMessages = {
@@ -548,3 +612,5 @@ "ar-AE": _babelRuntimeHelpersEsmInteropRequireDefault($d754af426cd99d13f3c3b42e31b3$exports).default,
     },
-    scrollRef
+    scrollRef,
+    onRowAction,
+    onCellAction
   } = props;
@@ -584,11 +650,21 @@ let formatMessage = useMessageFormatter($e3c4cce891c32069b0b54eddd405e76$var$intlMessages);
   let id = useId();
-  $c7c16c1fc27e25a205a277212c8e7cfd$export$gridKeyboardDelegates.set(state, delegate);
+  $c7c16c1fc27e25a205a277212c8e7cfd$export$gridMap.set(state, {
+    keyboardDelegate: delegate,
+    actions: {
+      onRowAction,
+      onCellAction
+    }
+  });
+  let descriptionProps = $b9a219c78ddfb00cbad541b7e7db769$export$useHighlightSelectionDescription({
+    selectionManager: state.selectionManager,
+    hasItemActions: !!(onRowAction || onCellAction)
+  });
   let domProps = filterDOMProps(props, {
     labelable: true
   });
-  let gridProps = mergeProps(domProps, _babelRuntimeHelpersEsmExtends({
+  let gridProps = mergeProps(domProps, {
     role: 'grid',
     id,
     'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
-  }, collectionProps));
+  }, collectionProps, descriptionProps);
 
@@ -605,5 +681,3 @@ if (isVirtualized) {
   useUpdateEffect(() => {
-    // Do not do this when using selectionBehavior = 'replace' to avoid selection announcements
-    // every time the user presses the arrow keys.
-    if (!state.selectionManager.isFocused || state.selectionManager.selectionBehavior === 'replace') {
+    if (!state.selectionManager.isFocused) {
       lastSelection.current = selection;
@@ -616,5 +690,16 @@ return;
 
+    let isReplace = state.selectionManager.selectionBehavior === 'replace';
     let messages = [];
 
-    if (addedKeys.size === 1 && removedKeys.size === 0) {
+    if (state.selectionManager.selectedKeys.size === 1 && isReplace) {
+      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
+        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
+
+        if (currentSelectionText) {
+          messages.push(formatMessage('selectedItem', {
+            item: currentSelectionText
+          }));
+        }
+      }
+    } else if (addedKeys.size === 1 && removedKeys.size === 0) {
       let addedText = getRowText(addedKeys.keys().next().value);
@@ -641,3 +726,5 @@
     if (state.selectionManager.selectionMode === 'multiple') {
-      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || lastSelection.current.size > 1) {
+      var _lastSelection$curren;
+
+      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || ((_lastSelection$curren = lastSelection.current) == null ? void 0 : _lastSelection$curren.size) > 1) {
         messages.push(selection === 'all' ? formatMessage('selectedAll') : formatMessage('selectedCount', {
@@ -700,2 +787,7 @@ count: selection.size
   let {
+    actions: {
+      onRowAction
+    }
+  } = $c7c16c1fc27e25a205a277212c8e7cfd$export$gridMap.get(state);
+  let {
     itemProps,
@@ -709,3 +801,3 @@ isPressed
     shouldSelectOnPressUp,
-    onAction
+    onAction: onRowAction ? () => onRowAction(node.key) : onAction
   });
@@ -745,3 +837,8 @@ let isSelected = state.selectionManager.isSelected(node.key);
   } = useLocale();
-  let keyboardDelegate = $c7c16c1fc27e25a205a277212c8e7cfd$export$gridKeyboardDelegates.get(state); // Handles focusing the cell. If there is a focusable child,
+  let {
+    keyboardDelegate,
+    actions: {
+      onCellAction
+    }
+  } = $c7c16c1fc27e25a205a277212c8e7cfd$export$gridMap.get(state); // Handles focusing the cell. If there is a focusable child,
   // it is focused, otherwise the cell itself is focused.
@@ -776,3 +873,3 @@
     shouldSelectOnPressUp,
-    onAction
+    onAction: onCellAction ? () => onCellAction(node.key) : onAction
   });
@@ -779,0 +876,0 @@

dist/types.d.ts

@@ -61,2 +61,6 @@ import { Direction, KeyboardDelegate, Node, AriaLabelingProps, DOMProps } from "@react-types/shared";
     scrollRef?: RefObject<HTMLElement>;
+    /** Handler that is called when a user performs an action on the row. */
+    onRowAction?: (key: Key) => void;
+    /** Handler that is called when a user performs an action on the cell. */
+    onCellAction?: (key: Key) => void;
 }
@@ -90,3 +94,7 @@ export interface GridAria {
     shouldSelectOnPressUp?: boolean;
-    /** Handler that is called when a user performs an action on the row. */
+    /**
+     * Handler that is called when a user performs an action on the row.
+     * Please use onCellAction at the collection level instead.
+     * @deprecated
+     **/
     onAction?: () => void;
@@ -115,3 +123,7 @@ }
     shouldSelectOnPressUp?: boolean;
-    /** Handler that is called when a user performs an action on the cell. */
+    /**
+     * Handler that is called when a user performs an action on the cell.
+     * Please use onCellAction at the collection level instead.
+     * @deprecated
+     **/
     onAction?: () => void;
@@ -118,0 +130,0 @@ }

package.json

 {
   "name": "@react-aria/grid",
-  "version": "3.1.1-nightly.3022+4312f197d",
+  "version": "3.1.1-nightly.3025+be936ca89",
   "description": "Spectrum UI components in React",
@@ -21,13 +21,14 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.1334+4312f197d",
-    "@react-aria/i18n": "3.0.0-nightly.1334+4312f197d",
-    "@react-aria/interactions": "3.0.0-nightly.1334+4312f197d",
-    "@react-aria/live-announcer": "3.0.0-nightly.1334+4312f197d",
-    "@react-aria/selection": "3.0.0-nightly.1334+4312f197d",
-    "@react-aria/utils": "3.0.0-nightly.1334+4312f197d",
-    "@react-stately/grid": "3.1.1-nightly.3022+4312f197d",
-    "@react-stately/virtualizer": "3.1.7-nightly.3022+4312f197d",
-    "@react-types/checkbox": "3.0.0-nightly.1334+4312f197d",
-    "@react-types/grid": "3.0.1-nightly.3022+4312f197d",
-    "@react-types/shared": "3.0.0-nightly.1334+4312f197d"
+    "@react-aria/focus": "3.0.0-nightly.1337+be936ca89",
+    "@react-aria/i18n": "3.0.0-nightly.1337+be936ca89",
+    "@react-aria/interactions": "3.0.0-nightly.1337+be936ca89",
+    "@react-aria/live-announcer": "3.0.0-nightly.1337+be936ca89",
+    "@react-aria/selection": "3.0.0-nightly.1337+be936ca89",
+    "@react-aria/utils": "3.0.0-nightly.1337+be936ca89",
+    "@react-stately/grid": "3.1.1-nightly.3025+be936ca89",
+    "@react-stately/selection": "3.0.0-nightly.1337+be936ca89",
+    "@react-stately/virtualizer": "3.1.7-nightly.3025+be936ca89",
+    "@react-types/checkbox": "3.0.0-nightly.1337+be936ca89",
+    "@react-types/grid": "3.0.1-nightly.3025+be936ca89",
+    "@react-types/shared": "3.0.0-nightly.1337+be936ca89"
   },
@@ -41,3 +42,3 @@ "peerDependencies": {
   },
-  "gitHead": "4312f197d683e75af962cf29fe7152c0377652b9"
+  "gitHead": "be936ca8962f47d5143288c741ac6061b5ffb7f7"
 }

src/useGrid.ts

@@ -18,3 +18,3 @@ /*
 import {GridKeyboardDelegate} from './GridKeyboardDelegate';
-import {gridKeyboardDelegates} from './utils';
+import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
@@ -25,2 +25,3 @@ import {HTMLAttributes, Key, RefObject, useMemo, useRef} from 'react';
 import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useHighlightSelectionDescription} from './useHighlightSelectionDescription';
 import {useSelectableCollection} from '@react-aria/selection';
@@ -49,3 +50,7 @@
    */
-  scrollRef?: RefObject<HTMLElement>
+  scrollRef?: RefObject<HTMLElement>,
+  /** Handler that is called when a user performs an action on the row. */
+  onRowAction?: (key: Key) => void,
+  /** Handler that is called when a user performs an action on the cell. */
+  onCellAction?: (key: Key) => void
 }
@@ -71,3 +76,5 @@
     getRowText = (key) => state.collection.getItem(key)?.textValue,
-    scrollRef
+    scrollRef,
+    onRowAction,
+    onCellAction
   } = props;
@@ -92,2 +99,3 @@ let formatMessage = useMessageFormatter(intlMessages);
   }), [keyboardDelegate, state.collection, state.disabledKeys, ref, direction, collator, focusMode]);
+
   let {collectionProps} = useSelectableCollection({
@@ -102,12 +110,21 @@ ref,
   let id = useId();
-  gridKeyboardDelegates.set(state, delegate);
+  gridMap.set(state, {keyboardDelegate: delegate, actions: {onRowAction, onCellAction}});
 
-  let domProps = filterDOMProps(props, {labelable: true});
-  let gridProps: HTMLAttributes<HTMLElement> = mergeProps(domProps, {
-    role: 'grid',
-    id,
-    'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined,
-    ...collectionProps
+  let descriptionProps = useHighlightSelectionDescription({
+    selectionManager: state.selectionManager,
+    hasItemActions: !!(onRowAction || onCellAction)
   });
 
+  let domProps = filterDOMProps(props, {labelable: true});
+  let gridProps: HTMLAttributes<HTMLElement> = mergeProps(
+    domProps,
+    {
+      role: 'grid',
+      id,
+      'aria-multiselectable': state.selectionManager.selectionMode === 'multiple' ? 'true' : undefined
+    },
+    collectionProps,
+    descriptionProps
+  );
+
   if (isVirtualized) {
@@ -123,5 +140,3 @@ gridProps['aria-rowcount'] = state.collection.size;
   useUpdateEffect(() => {
-    // Do not do this when using selectionBehavior = 'replace' to avoid selection announcements
-    // every time the user presses the arrow keys.
-    if (!state.selectionManager.isFocused || state.selectionManager.selectionBehavior === 'replace') {
+    if (!state.selectionManager.isFocused) {
       lastSelection.current = selection;
@@ -136,4 +151,13 @@
     // If adding or removing a single row from the selection, announce the name of that item.
+    let isReplace = state.selectionManager.selectionBehavior === 'replace';
     let messages = [];
-    if (addedKeys.size === 1 && removedKeys.size === 0) {
+
+    if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
+      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
+        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
+        if (currentSelectionText) {
+          messages.push(formatMessage('selectedItem', {item: currentSelectionText}));
+        }
+      }
+    } else if (addedKeys.size === 1 && removedKeys.size === 0) {
       let addedText = getRowText(addedKeys.keys().next().value);
@@ -154,3 +178,3 @@ if (addedText) {
     if (state.selectionManager.selectionMode === 'multiple') {
-      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || lastSelection.current.size > 1) {
+      if (messages.length === 0 || selection === 'all' || selection.size > 1 || lastSelection.current === 'all' || lastSelection.current?.size > 1) {
         messages.push(selection === 'all'
@@ -157,0 +181,0 @@ ? formatMessage('selectedAll')

src/useGridCell.ts

@@ -15,3 +15,3 @@ /*
 import {GridCollection} from '@react-types/grid';
-import {gridKeyboardDelegates} from './utils';
+import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
@@ -34,3 +34,7 @@ import {HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, RefObject} from 'react';
   shouldSelectOnPressUp?: boolean,
-  /** Handler that is called when a user performs an action on the cell. */
+  /**
+   * Handler that is called when a user performs an action on the cell.
+   * Please use onCellAction at the collection level instead.
+   * @deprecated
+   **/
   onAction?: () => void
@@ -61,3 +65,3 @@ }
   let {direction} = useLocale();
-  let keyboardDelegate = gridKeyboardDelegates.get(state);
+  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state);
 
@@ -90,3 +94,3 @@ // Handles focusing the cell. If there is a focusable child,
     shouldSelectOnPressUp,
-    onAction
+    onAction: onCellAction ? () => onCellAction(node.key) : onAction
   });
@@ -93,0 +97,0 @@

src/useGridRow.ts

@@ -14,2 +14,3 @@ /*
 import {GridCollection} from '@react-types/grid';
+import {gridMap} from './utils';
 import {GridState} from '@react-stately/grid';
@@ -27,3 +28,7 @@ import {HTMLAttributes, RefObject} from 'react';
   shouldSelectOnPressUp?: boolean,
-  /** Handler that is called when a user performs an action on the row. */
+  /**
+   * Handler that is called when a user performs an action on the row.
+   * Please use onCellAction at the collection level instead.
+   * @deprecated
+   **/
   onAction?: () => void
@@ -52,2 +57,3 @@ }
 
+  let {actions: {onRowAction}} = gridMap.get(state);
   let {itemProps, isPressed} = useSelectableItem({
@@ -59,3 +65,3 @@ selectionManager: state.selectionManager,
     shouldSelectOnPressUp,
-    onAction
+    onAction: onRowAction ? () => onRowAction(node.key) : onAction
   });
@@ -62,0 +68,0 @@

src/utils.ts

@@ -15,5 +15,16 @@ /*
 import type {GridState} from '@react-stately/grid';
+import {Key} from 'react';
 import type {KeyboardDelegate} from '@react-types/shared';
 
-// Used to share keyboard delegate between useGrid and useGridCell
-export const gridKeyboardDelegates = new WeakMap<GridState<unknown, GridCollection<unknown>>, KeyboardDelegate>();
+interface GridMapShared {
+  keyboardDelegate: KeyboardDelegate,
+  actions: {
+    onRowAction: (key: Key) => void,
+    onCellAction: (key: Key) => void
+  }
+}
+
+// Used to share:
+// keyboard delegate between useGrid and useGridCell
+// onRowAction/onCellAction across hooks
+export const gridMap = new WeakMap<GridState<unknown, GridCollection<unknown>>, GridMapShared>();

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

Improved metrics

Total package byte prevSize

322270

increased by9.91%

Number of package files

18

increased by5.88%

Lines of code

3022

increased by10.17%

Published versions last months

31

increased by10.71%

Published versions last two months

62

increased by5.08%

Worsened metrics

Dependency count

15

increased by7.14%

Published versions last year

273

decreased by-0.36%

Dependency changes

• + Added@react-stately/selection@3.0.0-nightly.1337+be936ca89

• Updated@react-aria/focus@3.0.0-nightly.1337+be936ca89

• Updated@react-aria/i18n@3.0.0-nightly.1337+be936ca89

• Updated@react-aria/interactions@3.0.0-nightly.1337+be936ca89

• Updated@react-aria/live-announcer@3.0.0-nightly.1337+be936ca89

• Updated@react-aria/selection@3.0.0-nightly.1337+be936ca89

• Updated@react-aria/utils@3.0.0-nightly.1337+be936ca89

• Updated@react-stately/grid@3.1.1-nightly.3025+be936ca89

• Updated@react-stately/virtualizer@3.1.7-nightly.3025+be936ca89

• Updated@react-types/checkbox@3.0.0-nightly.1337+be936ca89

• Updated@react-types/grid@3.0.1-nightly.3025+be936ca89

• Updated@react-types/shared@3.0.0-nightly.1337+be936ca89