@react-aria/tag 3.0.0-nightly.3175 → 3.0.0-rc.0

package/dist/module.js

@@ -1,212 +1,323 @@
-import {GridKeyboardDelegate as $aIvin$GridKeyboardDelegate, useGridRow as $aIvin$useGridRow, useGridCell as $aIvin$useGridCell} from "@react-aria/grid";
-import {useId as $aIvin$useId, filterDOMProps as $aIvin$filterDOMProps, mergeProps as $aIvin$mergeProps} from "@react-aria/utils";
-import {useMessageFormatter as $aIvin$useMessageFormatter} from "@react-aria/i18n";
+import {useId as $aIvin$useId, chain as $aIvin$chain, useDescription as $aIvin$useDescription, filterDOMProps as $aIvin$filterDOMProps, mergeProps as $aIvin$mergeProps} from "@react-aria/utils";
+import {useGridListItem as $aIvin$useGridListItem, useGridList as $aIvin$useGridList} from "@react-aria/gridlist";
+import {useInteractionModality as $aIvin$useInteractionModality, useFocusWithin as $aIvin$useFocusWithin} from "@react-aria/interactions";
+import {useLocalizedStringFormatter as $aIvin$useLocalizedStringFormatter, useLocale as $aIvin$useLocale} from "@react-aria/i18n";
 import {useState as $aIvin$useState} from "react";
-import {useFocusWithin as $aIvin$useFocusWithin} from "@react-aria/interactions";
+import {useField as $aIvin$useField} from "@react-aria/label";
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-var $542448901dbd2c36$exports = {};
-
-$parcel$export($542448901dbd2c36$exports, "TagKeyboardDelegate", () => $542448901dbd2c36$export$b00754732e683b92);
-
-class $542448901dbd2c36$export$b00754732e683b92 extends $aIvin$GridKeyboardDelegate {
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ class $542448901dbd2c36$export$b00754732e683b92 {
+    getFirstKey() {
+        return this.collection.getFirstKey();
+    }
+    getLastKey() {
+        return this.collection.getLastKey();
+    }
     getKeyRightOf(key) {
-        return this.direction === 'rtl' ? this.getKeyAbove(key) : this.getKeyBelow(key);
+        return this.direction === "rtl" ? this.getKeyAbove(key) : this.getKeyBelow(key);
     }
     getKeyLeftOf(key) {
-        return this.direction === 'rtl' ? this.getKeyBelow(key) : this.getKeyAbove(key);
+        return this.direction === "rtl" ? this.getKeyBelow(key) : this.getKeyAbove(key);
     }
     getKeyBelow(key) {
         let startItem = this.collection.getItem(key);
         if (!startItem) return;
-        // If focus was on a cell, start searching from the parent row
-        if (this.isCell(startItem)) key = startItem.parentKey;
         // Find the next item
-        key = this.findNextKey(key);
-        if (key != null) {
-            // If focus was on a cell, focus the cell with the same index in the next row.
-            if (this.isCell(startItem)) {
-                let item = this.collection.getItem(key);
-                let newKey = [
-                    ...item.childNodes
-                ][startItem.index].key;
-                // Ignore disabled tags
-                if (this.disabledKeys.has(newKey)) return this.getKeyBelow(newKey);
-                return newKey;
-            }
-            // Otherwise, focus the next row
-            if (this.focusMode === 'row') return key;
-        }
+        key = this.collection.getKeyAfter(key);
+        if (key != null) return key;
+        else return this.collection.getFirstKey();
     }
     getKeyAbove(key) {
         let startItem = this.collection.getItem(key);
         if (!startItem) return;
-        // If focus is on a cell, start searching from the parent row
-        if (this.isCell(startItem)) key = startItem.parentKey;
         // Find the previous item
-        key = this.findPreviousKey(key);
-        if (key != null) {
-            // If focus was on a cell, focus the cell with the same index in the previous row.
-            if (this.isCell(startItem)) {
-                let item = this.collection.getItem(key);
-                let newKey = [
-                    ...item.childNodes
-                ][startItem.index].key;
-                // ignore disabled tags
-                if (this.disabledKeys.has(newKey)) return this.getKeyAbove(newKey);
-                return newKey;
-            }
-            // Otherwise, focus the previous row
-            if (this.focusMode === 'row') return key;
-        }
+        key = this.collection.getKeyBefore(key);
+        if (key != null) return key;
+        else return this.collection.getLastKey();
+    }
+    getKeyPageAbove(key) {
+        return this.getKeyAbove(key);
+    }
+    getKeyPageBelow(key) {
+        return this.getKeyBelow(key);
+    }
+    constructor(collection, direction){
+        this.collection = collection;
+        this.direction = direction;
     }
 }
 
 
-var $fc6126c82a4601f1$exports = {};
-
-$parcel$export($fc6126c82a4601f1$exports, "useTag", () => $fc6126c82a4601f1$export$3f568fff7dff2f03);
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 var $4d1b62e0e67c00a4$exports = {};
 var $84925f526f90eebd$exports = {};
-$84925f526f90eebd$exports = JSON.parse("{\"remove\":\"إزالة\"}");
+$84925f526f90eebd$exports = {
+    "removeButtonLabel": `إزالة`,
+    "removeDescription": `اضغط على مفتاح DELETE لإزالة علامة.`
+};
 
 
 var $c0650163dc1b6f9d$exports = {};
-$c0650163dc1b6f9d$exports = JSON.parse("{\"remove\":\"Премахване\"}");
+$c0650163dc1b6f9d$exports = {
+    "removeButtonLabel": `Премахване`,
+    "removeDescription": `Натиснете Delete, за да премахнете маркера.`
+};
 
 
 var $b2b55661291de587$exports = {};
-$b2b55661291de587$exports = JSON.parse("{\"remove\":\"Odebrat\"}");
+$b2b55661291de587$exports = {
+    "removeButtonLabel": `Odebrat`,
+    "removeDescription": `Stisknutím klávesy Delete odeberete značku.`
+};
 
 
 var $deb83970956f6d5b$exports = {};
-$deb83970956f6d5b$exports = JSON.parse("{\"remove\":\"Fjern\"}");
+$deb83970956f6d5b$exports = {
+    "removeButtonLabel": `Fjern`,
+    "removeDescription": `Tryk på Slet for at fjerne tag.`
+};
 
 
 var $aea1cb4c7ec97e1c$exports = {};
-$aea1cb4c7ec97e1c$exports = JSON.parse("{\"remove\":\"Entfernen\"}");
+$aea1cb4c7ec97e1c$exports = {
+    "removeButtonLabel": `Entfernen`,
+    "removeDescription": `Auf „Löschen“ drücken, um das Tag zu entfernen.`
+};
 
 
 var $3618d917e503a8d3$exports = {};
-$3618d917e503a8d3$exports = JSON.parse("{\"remove\":\"Κατάργηση\"}");
+$3618d917e503a8d3$exports = {
+    "removeButtonLabel": `Κατάργηση`,
+    "removeDescription": `Πατήστε Διαγραφή για να καταργήσετε την ετικέτα.`
+};
 
 
 var $9eb56bbbe8e31294$exports = {};
-$9eb56bbbe8e31294$exports = JSON.parse("{\"remove\":\"Remove\"}");
+$9eb56bbbe8e31294$exports = {
+    "removeDescription": `Press Delete to remove tag.`,
+    "removeButtonLabel": `Remove`
+};
 
 
 var $361c604b0fc269a3$exports = {};
-$361c604b0fc269a3$exports = JSON.parse("{\"remove\":\"Quitar\"}");
+$361c604b0fc269a3$exports = {
+    "removeButtonLabel": `Quitar`,
+    "removeDescription": `Pulse Eliminar para quitar la etiqueta.`
+};
 
 
 var $2f00170f4ee3ca01$exports = {};
-$2f00170f4ee3ca01$exports = JSON.parse("{\"remove\":\"Eemalda\"}");
+$2f00170f4ee3ca01$exports = {
+    "removeButtonLabel": `Eemalda`,
+    "removeDescription": `Sildi eemaldamiseks vajutage kustutusklahvi Delete.`
+};
 
 
 var $80ee16b64fab9fb5$exports = {};
-$80ee16b64fab9fb5$exports = JSON.parse("{\"remove\":\"Poista\"}");
+$80ee16b64fab9fb5$exports = {
+    "removeButtonLabel": `Poista`,
+    "removeDescription": `Poista tunniste painamalla Poista-painiketta.`
+};
 
 
 var $be9d354476c08087$exports = {};
-$be9d354476c08087$exports = JSON.parse("{\"remove\":\"Supprimer\"}");
+$be9d354476c08087$exports = {
+    "removeButtonLabel": `Supprimer`,
+    "removeDescription": `Appuyez sur Supprimer pour supprimer l’étiquette.`
+};
 
 
 var $ffeb903ba092eb35$exports = {};
-$ffeb903ba092eb35$exports = JSON.parse("{\"remove\":\"הסר\"}");
+$ffeb903ba092eb35$exports = {
+    "removeButtonLabel": `הסר`,
+    "removeDescription": `לחץ על מחק כדי להסיר תג.`
+};
 
 
 var $1df6722c6f19728b$exports = {};
-$1df6722c6f19728b$exports = JSON.parse("{\"remove\":\"Ukloni\"}");
+$1df6722c6f19728b$exports = {
+    "removeButtonLabel": `Ukloni`,
+    "removeDescription": `Pritisnite Delete za uklanjanje oznake.`
+};
 
 
 var $093d57e325bc9071$exports = {};
-$093d57e325bc9071$exports = JSON.parse("{\"remove\":\"Eltávolítás\"}");
+$093d57e325bc9071$exports = {
+    "removeButtonLabel": `Eltávolítás`,
+    "removeDescription": `Nyomja meg a Delete billentyűt a címke eltávolításához.`
+};
 
 
 var $609dbdfbcad85bdb$exports = {};
-$609dbdfbcad85bdb$exports = JSON.parse("{\"remove\":\"Rimuovi\"}");
+$609dbdfbcad85bdb$exports = {
+    "removeButtonLabel": `Rimuovi`,
+    "removeDescription": `Premi Elimina per rimuovere il tag.`
+};
 
 
 var $c08e84f882644048$exports = {};
-$c08e84f882644048$exports = JSON.parse("{\"remove\":\"削除\"}");
+$c08e84f882644048$exports = {
+    "removeButtonLabel": `削除`,
+    "removeDescription": `タグを削除するには、Delete キーを押します。`
+};
 
 
 var $5cd130489822fa21$exports = {};
-$5cd130489822fa21$exports = JSON.parse("{\"remove\":\"제거\"}");
+$5cd130489822fa21$exports = {
+    "removeButtonLabel": `제거`,
+    "removeDescription": `태그를 제거하려면 Delete 키를 누르십시오.`
+};
 
 
 var $ab5183739b6c5e7e$exports = {};
-$ab5183739b6c5e7e$exports = JSON.parse("{\"remove\":\"Pašalinti\"}");
+$ab5183739b6c5e7e$exports = {
+    "removeButtonLabel": `Pašalinti`,
+    "removeDescription": `Norėdami pašalinti žymą, paspauskite „Delete“ klavišą.`
+};
 
 
 var $dd84a0b574be3f23$exports = {};
-$dd84a0b574be3f23$exports = JSON.parse("{\"remove\":\"Noņemt\"}");
+$dd84a0b574be3f23$exports = {
+    "removeButtonLabel": `Noņemt`,
+    "removeDescription": `Nospiediet Delete [Dzēst], lai noņemtu tagu.`
+};
 
 
 var $85eee97d14eef7b5$exports = {};
-$85eee97d14eef7b5$exports = JSON.parse("{\"remove\":\"Fjern\"}");
+$85eee97d14eef7b5$exports = {
+    "removeButtonLabel": `Fjern`,
+    "removeDescription": `Trykk på Slett for å fjerne taggen.`
+};
 
 
 var $18781839f93b0314$exports = {};
-$18781839f93b0314$exports = JSON.parse("{\"remove\":\"Verwijderen\"}");
+$18781839f93b0314$exports = {
+    "removeButtonLabel": `Verwijderen`,
+    "removeDescription": `Druk op Verwijderen om de tag te verwijderen.`
+};
 
 
 var $1c40ffbbfe9f3bda$exports = {};
-$1c40ffbbfe9f3bda$exports = JSON.parse("{\"remove\":\"Usuń\"}");
+$1c40ffbbfe9f3bda$exports = {
+    "removeButtonLabel": `Usuń`,
+    "removeDescription": `Naciśnij Usuń, aby usunąć znacznik.`
+};
 
 
 var $156880e329b1c717$exports = {};
-$156880e329b1c717$exports = JSON.parse("{\"remove\":\"Remover\"}");
+$156880e329b1c717$exports = {
+    "removeButtonLabel": `Remover`,
+    "removeDescription": `Pressione Delete para remover a tag.`
+};
 
 
 var $b6d50b1d20768ce4$exports = {};
-$b6d50b1d20768ce4$exports = JSON.parse("{\"remove\":\"Eliminar\"}");
+$b6d50b1d20768ce4$exports = {
+    "removeButtonLabel": `Eliminar`,
+    "removeDescription": `Prima Delete para eliminar a tag.`
+};
 
 
 var $d8c38c691b006187$exports = {};
-$d8c38c691b006187$exports = JSON.parse("{\"remove\":\"Îndepărtaţi\"}");
+$d8c38c691b006187$exports = {
+    "removeButtonLabel": `Îndepărtaţi`,
+    "removeDescription": `Apăsați pe Delete (Ștergere) pentru a elimina eticheta.`
+};
 
 
 var $ed9b4bf7ce1fb1d7$exports = {};
-$ed9b4bf7ce1fb1d7$exports = JSON.parse("{\"remove\":\"Удалить\"}");
+$ed9b4bf7ce1fb1d7$exports = {
+    "removeButtonLabel": `Удалить`,
+    "removeDescription": `Нажмите DELETE, чтобы удалить тег.`
+};
 
 
 var $51d8721afda4d678$exports = {};
-$51d8721afda4d678$exports = JSON.parse("{\"remove\":\"Odstrániť\"}");
+$51d8721afda4d678$exports = {
+    "removeButtonLabel": `Odstrániť`,
+    "removeDescription": `Ak chcete odstrániť značku, stlačte kláves Delete.`
+};
 
 
 var $fd37a27baae493e8$exports = {};
-$fd37a27baae493e8$exports = JSON.parse("{\"remove\":\"Odstrani\"}");
+$fd37a27baae493e8$exports = {
+    "removeButtonLabel": `Odstrani`,
+    "removeDescription": `Pritisnite Delete, da odstranite oznako.`
+};
 
 
 var $5505a1ca71ffd6f4$exports = {};
-$5505a1ca71ffd6f4$exports = JSON.parse("{\"remove\":\"Ukloni\"}");
+$5505a1ca71ffd6f4$exports = {
+    "removeButtonLabel": `Ukloni`,
+    "removeDescription": `Pritisnite Obriši da biste uklonili oznaku.`
+};
 
 
 var $33670e148c84ad02$exports = {};
-$33670e148c84ad02$exports = JSON.parse("{\"remove\":\"Ta bort\"}");
+$33670e148c84ad02$exports = {
+    "removeButtonLabel": `Ta bort`,
+    "removeDescription": `Tryck på Radera för att ta bort taggen.`
+};
 
 
 var $0bf46fdcdd7cb5f6$exports = {};
-$0bf46fdcdd7cb5f6$exports = JSON.parse("{\"remove\":\"Kaldır\"}");
+$0bf46fdcdd7cb5f6$exports = {
+    "removeButtonLabel": `Kaldır`,
+    "removeDescription": `Etiketi kaldırmak için Sil tuşuna basın.`
+};
 
 
 var $9d9765222bc08ca2$exports = {};
-$9d9765222bc08ca2$exports = JSON.parse("{\"remove\":\"Видалити\"}");
+$9d9765222bc08ca2$exports = {
+    "removeButtonLabel": `Вилучити`,
+    "removeDescription": `Натисніть Delete, щоб вилучити тег.`
+};
 
 
 var $d737296cedcdee9f$exports = {};
-$d737296cedcdee9f$exports = JSON.parse("{\"remove\":\"删除\"}");
+$d737296cedcdee9f$exports = {
+    "removeButtonLabel": `删除`,
+    "removeDescription": `按下“删除”以删除标记。`
+};
 
 
 var $09cd168ab18773f4$exports = {};
-$09cd168ab18773f4$exports = JSON.parse("{\"remove\":\"移除\"}");
+$09cd168ab18773f4$exports = {
+    "removeButtonLabel": `移除`,
+    "removeDescription": `按 Delete 鍵以移除標記。`
+};
 
 
 $4d1b62e0e67c00a4$exports = {
@@ -249,90 +360,102 @@ $4d1b62e0e67c00a4$exports = {
 
 
 
-function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state) {
-    let { isFocused: isFocused  } = props;
-    const { isDisabled: isDisabled , isRemovable: isRemovable , onRemove: onRemove , children: children , item: item , tagRef: tagRef , tagRowRef: tagRowRef  } = props;
-    const formatMessage = $aIvin$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($4d1b62e0e67c00a4$exports)));
-    const removeString = formatMessage('remove');
-    const labelId = $aIvin$useId();
-    const buttonId = $aIvin$useId();
-    let { rowProps: rowProps  } = $aIvin$useGridRow({
+
+function $fc6126c82a4601f1$export$3f568fff7dff2f03(props, state, ref) {
+    let { allowsRemoving: allowsRemoving , item: item  } = props;
+    let stringFormatter = (0, $aIvin$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4d1b62e0e67c00a4$exports))));
+    let labelId = (0, $aIvin$useId)();
+    let buttonId = (0, $aIvin$useId)();
+    let { rowProps: rowProps , gridCellProps: gridCellProps  } = (0, $aIvin$useGridListItem)({
         node: item
-    }, state, tagRowRef);
-    // Don't want the row to be focusable or accessible via keyboard
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    let { tabIndex: tabIndex , ...otherRowProps } = rowProps;
-    let { gridCellProps: gridCellProps  } = $aIvin$useGridCell({
-        node: [
-            ...item.childNodes
-        ][0],
-        focusMode: 'cell'
-    }, state, tagRef);
-    function onKeyDown(e) {
-        if (e.key === 'Delete' || e.key === 'Backspace') {
-            onRemove(children, e);
+    }, state, ref);
+    // We want the group to handle keyboard navigation between tags.
+    delete rowProps.onKeyDownCapture;
+    let onRemove = (0, $aIvin$chain)(props.onRemove, state.onRemove);
+    let onKeyDown = (e)=>{
+        if (e.key === "Delete" || e.key === "Backspace") {
+            onRemove(item.key);
             e.preventDefault();
         }
-    }
-    const pressProps = {
-        onPress: (e)=>{
-            return onRemove === null || onRemove === void 0 ? void 0 : onRemove(children, e);
-        }
     };
-    isFocused = isFocused || state.selectionManager.focusedKey === item.childNodes[0].key;
-    let domProps = $aIvin$filterDOMProps(props);
+    let modality = (0, $aIvin$useInteractionModality)();
+    if (modality === "virtual" && typeof window !== "undefined" && "ontouchstart" in window) modality = "touch";
+    let description = allowsRemoving && (modality === "keyboard" || modality === "virtual") ? stringFormatter.format("removeDescription") : "";
+    let descProps = (0, $aIvin$useDescription)(description);
+    let domProps = (0, $aIvin$filterDOMProps)(props);
+    let isFocused = item.key === state.selectionManager.focusedKey;
     return {
-        clearButtonProps: $aIvin$mergeProps(pressProps, {
-            'aria-label': removeString,
-            'aria-labelledby': `${buttonId} ${labelId}`,
+        removeButtonProps: {
+            "aria-label": stringFormatter.format("removeButtonLabel", {
+                label: item.textValue
+            }),
+            "aria-labelledby": `${buttonId} ${labelId}`,
             id: buttonId,
-            isDisabled: isDisabled
-        }),
+            onPress: ()=>allowsRemoving && onRemove ? onRemove(item.key) : null,
+            excludeFromTabOrder: true
+        },
         labelProps: {
             id: labelId
         },
-        tagRowProps: otherRowProps,
-        tagProps: $aIvin$mergeProps(domProps, gridCellProps, {
-            'aria-disabled': isDisabled,
-            'aria-errormessage': props['aria-errormessage'],
-            'aria-label': props['aria-label'],
-            onKeyDown: !isDisabled && isRemovable ? onKeyDown : null,
-            tabIndex: (isFocused || state.selectionManager.focusedKey == null) && !isDisabled ? 0 : -1,
-            onFocus () {
-                state.selectionManager.setFocusedKey(item.childNodes[0].key);
-            },
-            ref: tagRef
+        rowProps: {
+            ...rowProps,
+            tabIndex: isFocused || state.selectionManager.focusedKey == null ? 0 : -1,
+            onKeyDown: allowsRemoving ? onKeyDown : null,
+            "aria-describedby": descProps["aria-describedby"]
+        },
+        gridCellProps: (0, $aIvin$mergeProps)(domProps, gridCellProps, {
+            "aria-errormessage": props["aria-errormessage"],
+            "aria-label": props["aria-label"]
         })
     };
 }
 
 
-var $d7323bca8d074eeb$exports = {};
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
 
-$parcel$export($d7323bca8d074eeb$exports, "useTagGroup", () => $d7323bca8d074eeb$export$4f8b5cda58b7e8ff);
 
 
 
-function $d7323bca8d074eeb$export$4f8b5cda58b7e8ff(props, listState) {
-    let { isDisabled: isDisabled  } = props;
-    let [isFocusWithin, setFocusWithin] = $aIvin$useState(false);
-    let { focusWithinProps: focusWithinProps  } = $aIvin$useFocusWithin({
+
+function $d7323bca8d074eeb$export$4f8b5cda58b7e8ff(props, state, ref) {
+    let { direction: direction  } = (0, $aIvin$useLocale)();
+    let keyboardDelegate = props.keyboardDelegate || new (0, $542448901dbd2c36$export$b00754732e683b92)(state.collection, direction);
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = (0, $aIvin$useField)(props);
+    let { gridProps: gridProps  } = (0, $aIvin$useGridList)({
+        ...props,
+        ...fieldProps,
+        keyboardDelegate: keyboardDelegate
+    }, state, ref);
+    // Don't want the grid to be focusable or accessible via keyboard
+    delete gridProps.tabIndex;
+    let [isFocusWithin, setFocusWithin] = (0, $aIvin$useState)(false);
+    let { focusWithinProps: focusWithinProps  } = (0, $aIvin$useFocusWithin)({
         onFocusWithinChange: setFocusWithin
     });
-    let allKeys = [
-        ...listState.collection.getKeys()
-    ];
-    if (!allKeys.some((key)=>!listState.disabledKeys.has(key)
-    )) isDisabled = true;
-    let domProps = $aIvin$filterDOMProps(props);
+    let domProps = (0, $aIvin$filterDOMProps)(props);
     return {
-        tagGroupProps: $aIvin$mergeProps(domProps, {
-            'aria-atomic': false,
-            'aria-relevant': 'additions',
-            'aria-live': isFocusWithin ? 'polite' : 'off',
-            'aria-disabled': isDisabled === true,
-            ...focusWithinProps
-        })
+        gridProps: (0, $aIvin$mergeProps)(gridProps, domProps, {
+            role: state.collection.size ? "grid" : null,
+            "aria-atomic": false,
+            "aria-relevant": "additions",
+            "aria-live": isFocusWithin ? "polite" : "off",
+            ...focusWithinProps,
+            ...fieldProps
+        }),
+        labelProps: labelProps,
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps
     };
 }