@react-aria/test-utils 1.0.0-alpha.3 → 1.0.0-alpha.4

package/dist/gridlist.mjs

@@ -1,4 +1,4 @@
-import {pressElement as $5d1eca18f92ad0e6$export$6ffa3eb717517feb} from "./events.mjs";
+import {pressElement as $5d1eca18f92ad0e6$export$6ffa3eb717517feb, triggerLongPress as $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b} from "./events.mjs";
 import {within as $haOzD$within, act as $haOzD$act} from "@testing-library/react";
 
 /*
@@ -14,75 +14,118 @@ import {within as $haOzD$within, act as $haOzD$act} from "@testing-library/react
  */ 
 
 class $5ca9e9228f508f75$export$93a85aaed9fabd83 {
-    // TODO: do we really need this getter? Theoretically the user already has the reference to the gridlist
-    get gridlist() {
+    /**
+   * Set the interaction type used by the gridlist tester.
+   */ setInteractionType(type) {
+        this._interactionType = type;
+    }
+    /**
+   * Returns a row matching the specified index or text content.
+   */ findRow(opts) {
+        let { rowIndexOrText: rowIndexOrText } = opts;
+        let row;
+        if (typeof rowIndexOrText === 'number') row = this.rows[rowIndexOrText];
+        else if (typeof rowIndexOrText === 'string') row = (0, $haOzD$within)(this.gridlist).getByText(rowIndexOrText).closest('[role=row]');
+        return row;
+    }
+    // TODO: RTL
+    async keyboardNavigateToRow(opts) {
+        let { row: row } = opts;
+        let rows = this.rows;
+        let targetIndex = rows.indexOf(row);
+        if (targetIndex === -1) throw new Error('Option provided is not in the gridlist');
+        if (document.activeElement === this._gridlist) await this.user.keyboard('[ArrowDown]');
+        else if (this._gridlist.contains(document.activeElement) && document.activeElement.getAttribute('role') !== 'row') do await this.user.keyboard('[ArrowLeft]');
+        while (document.activeElement.getAttribute('role') !== 'row');
+        let currIndex = rows.indexOf(document.activeElement);
+        if (currIndex === -1) throw new Error('ActiveElement is not in the gridlist');
+        let direction = targetIndex > currIndex ? 'down' : 'up';
+        for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+    }
+    /**
+   * Toggles the selection for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.
+   */ async toggleRowSelection(opts) {
+        let { row: row, needsLongPress: needsLongPress, checkboxSelection: checkboxSelection = true, interactionType: interactionType = this._interactionType } = opts;
+        if (typeof row === 'string' || typeof row === 'number') row = this.findRow({
+            rowIndexOrText: row
+        });
+        if (!row) throw new Error('Target row not found in the gridlist.');
+        let rowCheckbox = (0, $haOzD$within)(row).queryByRole('checkbox');
+        // TODO: we early return here because the checkbox/row can't be keyboard navigated to if the row is disabled usually
+        // but we may to check for disabledBehavior (aka if the disable row gets skipped when keyboard navigating or not)
+        if (interactionType === 'keyboard' && ((rowCheckbox === null || rowCheckbox === void 0 ? void 0 : rowCheckbox.getAttribute('disabled')) === '' || (row === null || row === void 0 ? void 0 : row.getAttribute('aria-disabled')) === 'true')) return;
+        // this would be better than the check to do nothing in events.ts
+        // also, it'd be good to be able to trigger selection on the row instead of having to go to the checkbox directly
+        if (interactionType === 'keyboard' && !checkboxSelection) {
+            await this.keyboardNavigateToRow({
+                row: row
+            });
+            await this.user.keyboard('{Space}');
+            return;
+        }
+        if (rowCheckbox && checkboxSelection) await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, rowCheckbox, interactionType);
+        else {
+            let cell = (0, $haOzD$within)(row).getAllByRole('gridcell')[0];
+            if (needsLongPress && interactionType === 'touch') {
+                if (this._advanceTimer == null) throw new Error('No advanceTimers provided for long press.');
+                // Note that long press interactions with rows is strictly touch only for grid rows
+                await (0, $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b)({
+                    element: cell,
+                    advanceTimer: this._advanceTimer,
+                    pointerOpts: {
+                        pointerType: 'touch'
+                    }
+                });
+            } else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, cell, interactionType);
+        }
+    }
+    // TODO: There is a more difficult use case where the row has/behaves as link, don't think we have a good way to determine that unless the
+    // user specificlly tells us
+    /**
+   * Triggers the action for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.
+   */ async triggerRowAction(opts) {
+        let { row: row, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
+        if (typeof row === 'string' || typeof row === 'number') row = this.findRow({
+            rowIndexOrText: row
+        });
+        if (!row) throw new Error('Target row not found in the gridlist.');
+        if (needsDoubleClick) await this.user.dblClick(row);
+        else if (interactionType === 'keyboard') {
+            if ((row === null || row === void 0 ? void 0 : row.getAttribute('aria-disabled')) === 'true') return;
+            if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) (0, $haOzD$act)(()=>this._gridlist.focus());
+            await this.keyboardNavigateToRow({
+                row: row
+            });
+            await this.user.keyboard('[Enter]');
+        } else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, row, interactionType);
+    }
+    /**
+   * Returns the gridlist.
+   */ get gridlist() {
         return this._gridlist;
     }
-    get rows() {
+    /**
+   * Returns the gridlist's rows if any.
+   */ get rows() {
         var _this;
         return (0, $haOzD$within)((_this = this) === null || _this === void 0 ? void 0 : _this.gridlist).queryAllByRole('row');
     }
-    get selectedRows() {
+    /**
+   * Returns the gridlist's selected rows if any.
+   */ get selectedRows() {
         return this.rows.filter((row)=>row.getAttribute('aria-selected') === 'true');
     }
+    /**
+   * Returns the gridlist's cells if any. Can be filtered against a specific row if provided via `element`.
+   */ cells(opts = {}) {
+        let { element: element = this.gridlist } = opts;
+        return (0, $haOzD$within)(element).queryAllByRole('gridcell');
+    }
     constructor(opts){
-        this.setInteractionType = (type)=>{
-            this._interactionType = type;
-        };
-        // TODO: support long press? This is also pretty much the same as table's toggleRowSelection so maybe can share
-        // For now, don't include long press, see if people need it or if we should just expose long press as a separate util if it isn't very common
-        // If the current way of passing in the user specified advance timers is ok, then I'd be find including long press
-        // Maybe also support an option to force the click to happen on a specific part of the element (checkbox or row). That way
-        // the user can test a specific type of interaction?
-        this.toggleRowSelection = async (opts = {})=>{
-            let { index: index, text: text, interactionType: interactionType = this._interactionType } = opts;
-            let row = this.findRow({
-                index: index,
-                text: text
-            });
-            let rowCheckbox = (0, $haOzD$within)(row).queryByRole('checkbox');
-            if (rowCheckbox) await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, rowCheckbox, interactionType);
-            else {
-                let cell = (0, $haOzD$within)(row).getAllByRole('gridcell')[0];
-                await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, cell, interactionType);
-            }
-        };
-        // TODO: pretty much the same as table except it uses this.gridlist. Make common between the two by accepting an option for
-        // an element?
-        this.findRow = (opts)=>{
-            let { index: index, text: text } = opts;
-            let row;
-            if (index != null) row = this.rows[index];
-            else if (text != null) {
-                var _this;
-                row = (0, $haOzD$within)((_this = this) === null || _this === void 0 ? void 0 : _this.gridlist).getByText(text);
-                while(row && row.getAttribute('role') !== 'row')row = row.parentElement;
-            }
-            return row;
-        };
-        // TODO: There is a more difficult use case where the row has/behaves as link, don't think we have a good way to determine that unless the
-        // user specificlly tells us
-        this.triggerRowAction = async (opts)=>{
-            let { index: index, text: text, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
-            let row = this.findRow({
-                index: index,
-                text: text
-            });
-            if (row) {
-                if (needsDoubleClick) await this.user.dblClick(row);
-                else if (interactionType === 'keyboard') {
-                    (0, $haOzD$act)(()=>row.focus());
-                    await this.user.keyboard('[Enter]');
-                } else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, row, interactionType);
-            }
-        };
-        this.cells = (opts = {})=>{
-            let { element: element } = opts;
-            return (0, $haOzD$within)(element || this.gridlist).queryAllByRole('gridcell');
-        };
-        let { root: root, user: user, interactionType: interactionType } = opts;
+        let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer } = opts;
         this.user = user;
         this._interactionType = interactionType || 'mouse';
+        this._advanceTimer = advanceTimer;
         this._gridlist = root;
     }
 }

package/dist/gridlist.module.js

@@ -1,4 +1,4 @@
-import {pressElement as $5d1eca18f92ad0e6$export$6ffa3eb717517feb} from "./events.module.js";
+import {pressElement as $5d1eca18f92ad0e6$export$6ffa3eb717517feb, triggerLongPress as $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b} from "./events.module.js";
 import {within as $haOzD$within, act as $haOzD$act} from "@testing-library/react";
 
 /*
@@ -14,75 +14,118 @@ import {within as $haOzD$within, act as $haOzD$act} from "@testing-library/react
  */ 
 
 class $5ca9e9228f508f75$export$93a85aaed9fabd83 {
-    // TODO: do we really need this getter? Theoretically the user already has the reference to the gridlist
-    get gridlist() {
+    /**
+   * Set the interaction type used by the gridlist tester.
+   */ setInteractionType(type) {
+        this._interactionType = type;
+    }
+    /**
+   * Returns a row matching the specified index or text content.
+   */ findRow(opts) {
+        let { rowIndexOrText: rowIndexOrText } = opts;
+        let row;
+        if (typeof rowIndexOrText === 'number') row = this.rows[rowIndexOrText];
+        else if (typeof rowIndexOrText === 'string') row = (0, $haOzD$within)(this.gridlist).getByText(rowIndexOrText).closest('[role=row]');
+        return row;
+    }
+    // TODO: RTL
+    async keyboardNavigateToRow(opts) {
+        let { row: row } = opts;
+        let rows = this.rows;
+        let targetIndex = rows.indexOf(row);
+        if (targetIndex === -1) throw new Error('Option provided is not in the gridlist');
+        if (document.activeElement === this._gridlist) await this.user.keyboard('[ArrowDown]');
+        else if (this._gridlist.contains(document.activeElement) && document.activeElement.getAttribute('role') !== 'row') do await this.user.keyboard('[ArrowLeft]');
+        while (document.activeElement.getAttribute('role') !== 'row');
+        let currIndex = rows.indexOf(document.activeElement);
+        if (currIndex === -1) throw new Error('ActiveElement is not in the gridlist');
+        let direction = targetIndex > currIndex ? 'down' : 'up';
+        for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+    }
+    /**
+   * Toggles the selection for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.
+   */ async toggleRowSelection(opts) {
+        let { row: row, needsLongPress: needsLongPress, checkboxSelection: checkboxSelection = true, interactionType: interactionType = this._interactionType } = opts;
+        if (typeof row === 'string' || typeof row === 'number') row = this.findRow({
+            rowIndexOrText: row
+        });
+        if (!row) throw new Error('Target row not found in the gridlist.');
+        let rowCheckbox = (0, $haOzD$within)(row).queryByRole('checkbox');
+        // TODO: we early return here because the checkbox/row can't be keyboard navigated to if the row is disabled usually
+        // but we may to check for disabledBehavior (aka if the disable row gets skipped when keyboard navigating or not)
+        if (interactionType === 'keyboard' && ((rowCheckbox === null || rowCheckbox === void 0 ? void 0 : rowCheckbox.getAttribute('disabled')) === '' || (row === null || row === void 0 ? void 0 : row.getAttribute('aria-disabled')) === 'true')) return;
+        // this would be better than the check to do nothing in events.ts
+        // also, it'd be good to be able to trigger selection on the row instead of having to go to the checkbox directly
+        if (interactionType === 'keyboard' && !checkboxSelection) {
+            await this.keyboardNavigateToRow({
+                row: row
+            });
+            await this.user.keyboard('{Space}');
+            return;
+        }
+        if (rowCheckbox && checkboxSelection) await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, rowCheckbox, interactionType);
+        else {
+            let cell = (0, $haOzD$within)(row).getAllByRole('gridcell')[0];
+            if (needsLongPress && interactionType === 'touch') {
+                if (this._advanceTimer == null) throw new Error('No advanceTimers provided for long press.');
+                // Note that long press interactions with rows is strictly touch only for grid rows
+                await (0, $5d1eca18f92ad0e6$export$3a22a5a9bc0fd3b)({
+                    element: cell,
+                    advanceTimer: this._advanceTimer,
+                    pointerOpts: {
+                        pointerType: 'touch'
+                    }
+                });
+            } else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, cell, interactionType);
+        }
+    }
+    // TODO: There is a more difficult use case where the row has/behaves as link, don't think we have a good way to determine that unless the
+    // user specificlly tells us
+    /**
+   * Triggers the action for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.
+   */ async triggerRowAction(opts) {
+        let { row: row, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
+        if (typeof row === 'string' || typeof row === 'number') row = this.findRow({
+            rowIndexOrText: row
+        });
+        if (!row) throw new Error('Target row not found in the gridlist.');
+        if (needsDoubleClick) await this.user.dblClick(row);
+        else if (interactionType === 'keyboard') {
+            if ((row === null || row === void 0 ? void 0 : row.getAttribute('aria-disabled')) === 'true') return;
+            if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) (0, $haOzD$act)(()=>this._gridlist.focus());
+            await this.keyboardNavigateToRow({
+                row: row
+            });
+            await this.user.keyboard('[Enter]');
+        } else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, row, interactionType);
+    }
+    /**
+   * Returns the gridlist.
+   */ get gridlist() {
         return this._gridlist;
     }
-    get rows() {
+    /**
+   * Returns the gridlist's rows if any.
+   */ get rows() {
         var _this;
         return (0, $haOzD$within)((_this = this) === null || _this === void 0 ? void 0 : _this.gridlist).queryAllByRole('row');
     }
-    get selectedRows() {
+    /**
+   * Returns the gridlist's selected rows if any.
+   */ get selectedRows() {
         return this.rows.filter((row)=>row.getAttribute('aria-selected') === 'true');
     }
+    /**
+   * Returns the gridlist's cells if any. Can be filtered against a specific row if provided via `element`.
+   */ cells(opts = {}) {
+        let { element: element = this.gridlist } = opts;
+        return (0, $haOzD$within)(element).queryAllByRole('gridcell');
+    }
     constructor(opts){
-        this.setInteractionType = (type)=>{
-            this._interactionType = type;
-        };
-        // TODO: support long press? This is also pretty much the same as table's toggleRowSelection so maybe can share
-        // For now, don't include long press, see if people need it or if we should just expose long press as a separate util if it isn't very common
-        // If the current way of passing in the user specified advance timers is ok, then I'd be find including long press
-        // Maybe also support an option to force the click to happen on a specific part of the element (checkbox or row). That way
-        // the user can test a specific type of interaction?
-        this.toggleRowSelection = async (opts = {})=>{
-            let { index: index, text: text, interactionType: interactionType = this._interactionType } = opts;
-            let row = this.findRow({
-                index: index,
-                text: text
-            });
-            let rowCheckbox = (0, $haOzD$within)(row).queryByRole('checkbox');
-            if (rowCheckbox) await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, rowCheckbox, interactionType);
-            else {
-                let cell = (0, $haOzD$within)(row).getAllByRole('gridcell')[0];
-                await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, cell, interactionType);
-            }
-        };
-        // TODO: pretty much the same as table except it uses this.gridlist. Make common between the two by accepting an option for
-        // an element?
-        this.findRow = (opts)=>{
-            let { index: index, text: text } = opts;
-            let row;
-            if (index != null) row = this.rows[index];
-            else if (text != null) {
-                var _this;
-                row = (0, $haOzD$within)((_this = this) === null || _this === void 0 ? void 0 : _this.gridlist).getByText(text);
-                while(row && row.getAttribute('role') !== 'row')row = row.parentElement;
-            }
-            return row;
-        };
-        // TODO: There is a more difficult use case where the row has/behaves as link, don't think we have a good way to determine that unless the
-        // user specificlly tells us
-        this.triggerRowAction = async (opts)=>{
-            let { index: index, text: text, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
-            let row = this.findRow({
-                index: index,
-                text: text
-            });
-            if (row) {
-                if (needsDoubleClick) await this.user.dblClick(row);
-                else if (interactionType === 'keyboard') {
-                    (0, $haOzD$act)(()=>row.focus());
-                    await this.user.keyboard('[Enter]');
-                } else await (0, $5d1eca18f92ad0e6$export$6ffa3eb717517feb)(this.user, row, interactionType);
-            }
-        };
-        this.cells = (opts = {})=>{
-            let { element: element } = opts;
-            return (0, $haOzD$within)(element || this.gridlist).queryAllByRole('gridcell');
-        };
-        let { root: root, user: user, interactionType: interactionType } = opts;
+        let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer } = opts;
         this.user = user;
         this._interactionType = interactionType || 'mouse';
+        this._advanceTimer = advanceTimer;
         this._gridlist = root;
     }
 }

package/dist/gridlist.module.js.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AASM,MAAM;IA+EX,wGAAwG;IACxG,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,SAAS;IACvB;IAEA,IAAI,OAAO;YACK;QAAd,OAAO,CAAA,GAAA,aAAK,GAAE,QAAA,IAAI,cAAJ,4BAAA,MAAM,QAAQ,EAAE,cAAc,CAAC;IAC/C;IAEA,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA,MAAO,IAAI,YAAY,CAAC,qBAAqB;IACvE;IApFA,YAAY,IAAqB,CAAE;aAOnC,qBAAqB,CAAC;YACpB,IAAI,CAAC,gBAAgB,GAAG;QAC1B;QAEA,+GAA+G;QAC/G,6IAA6I;QAC7I,kHAAkH;QAClH,0HAA0H;QAC1H,oDAAoD;aACpD,qBAAqB,OAAO,OAAuF,CAAC,CAAC;YACnH,IAAI,SAAC,KAAK,QAAE,IAAI,mBAAE,kBAAkB,IAAI,CAAC,gBAAgB,EAAC,GAAG;YAE7D,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC;uBAAC;sBAAO;YAAI;YACnC,IAAI,cAAc,CAAA,GAAA,aAAK,EAAE,KAAK,WAAW,CAAC;YAC1C,IAAI,aACF,MAAM,CAAA,GAAA,yCAAW,EAAE,IAAI,CAAC,IAAI,EAAE,aAAa;iBACtC;gBACL,IAAI,OAAO,CAAA,GAAA,aAAK,EAAE,KAAK,YAAY,CAAC,WAAW,CAAC,EAAE;gBAClD,MAAM,CAAA,GAAA,yCAAW,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM;YACtC;QACF;QAEA,2HAA2H;QAC3H,cAAc;aACd,UAAU,CAAC;YACT,IAAI,SACF,KAAK,QACL,IAAI,EACL,GAAG;YAEJ,IAAI;YACJ,IAAI,SAAS,MACX,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;iBACjB,IAAI,QAAQ,MAAM;oBACV;gBAAb,MAAM,CAAA,GAAA,aAAK,GAAE,QAAA,IAAI,cAAJ,4BAAA,MAAM,QAAQ,EAAE,SAAS,CAAC;gBACvC,MAAO,OAAO,IAAI,YAAY,CAAC,YAAY,MACzC,MAAM,IAAI,aAAa;YAE3B;YAEA,OAAO;QACT;QAEA,0IAA0I;QAC1I,4BAA4B;aAC5B,mBAAmB,OAAO;YACxB,IAAI,SACF,KAAK,QACL,IAAI,oBACJ,gBAAgB,mBAChB,kBAAkB,IAAI,CAAC,gBAAgB,EACxC,GAAG;YAEJ,IAAI,MAAM,IAAI,CAAC,OAAO,CAAC;uBAAC;sBAAO;YAAI;YACnC,IAAI,KAAK;gBACP,IAAI,kBACF,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;qBACpB,IAAI,oBAAoB,YAAY;oBACzC,CAAA,GAAA,UAAE,EAAE,IAAM,IAAI,KAAK;oBACnB,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC3B,OACE,MAAM,CAAA,GAAA,yCAAW,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK;YAEvC;QACF;aAeA,QAAQ,CAAC,OAAgC,CAAC,CAAC;YACzC,IAAI,WAAC,OAAO,EAAC,GAAG;YAChB,OAAO,CAAA,GAAA,aAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC;QACzD;QAxFE,IAAI,QAAC,IAAI,QAAE,IAAI,mBAAE,eAAe,EAAC,GAAG;QACpC,IAAI,CAAC,IAAI,GAAG;QACZ,IAAI,CAAC,gBAAgB,GAAG,mBAAmB;QAC3C,IAAI,CAAC,SAAS,GAAG;IACnB;AAqFF","sources":["packages/@react-aria/test-utils/src/gridlist.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {act, within} from '@testing-library/react';\nimport {BaseTesterOpts, UserOpts} from './user';\nimport {pressElement} from './events';\n\nexport interface GridListOptions extends UserOpts, BaseTesterOpts {\n  user?: any\n}\nexport class GridListTester {\n  private user;\n  private _interactionType: UserOpts['interactionType'];\n  private _gridlist: HTMLElement;\n\n\n  constructor(opts: GridListOptions) {\n    let {root, user, interactionType} = opts;\n    this.user = user;\n    this._interactionType = interactionType || 'mouse';\n    this._gridlist = root;\n  }\n\n  setInteractionType = (type: UserOpts['interactionType']) => {\n    this._interactionType = type;\n  };\n\n  // TODO: support long press? This is also pretty much the same as table's toggleRowSelection so maybe can share\n  // For now, don't include long press, see if people need it or if we should just expose long press as a separate util if it isn't very common\n  // If the current way of passing in the user specified advance timers is ok, then I'd be find including long press\n  // Maybe also support an option to force the click to happen on a specific part of the element (checkbox or row). That way\n  // the user can test a specific type of interaction?\n  toggleRowSelection = async (opts: {index?: number, text?: string, interactionType?: UserOpts['interactionType']} = {}) => {\n    let {index, text, interactionType = this._interactionType} = opts;\n\n    let row = this.findRow({index, text});\n    let rowCheckbox = within(row).queryByRole('checkbox');\n    if (rowCheckbox) {\n      await pressElement(this.user, rowCheckbox, interactionType);\n    } else {\n      let cell = within(row).getAllByRole('gridcell')[0];\n      await pressElement(this.user, cell, interactionType);\n    }\n  };\n\n  // TODO: pretty much the same as table except it uses this.gridlist. Make common between the two by accepting an option for\n  // an element?\n  findRow = (opts: {index?: number, text?: string}) => {\n    let {\n      index,\n      text\n    } = opts;\n\n    let row;\n    if (index != null) {\n      row = this.rows[index];\n    } else if (text != null) {\n      row = within(this?.gridlist).getByText(text);\n      while (row && row.getAttribute('role') !== 'row') {\n        row = row.parentElement;\n      }\n    }\n\n    return row;\n  };\n\n  // TODO: There is a more difficult use case where the row has/behaves as link, don't think we have a good way to determine that unless the\n  // user specificlly tells us\n  triggerRowAction = async (opts: {index?: number, text?: string, needsDoubleClick?: boolean, interactionType?: UserOpts['interactionType']}) => {\n    let {\n      index,\n      text,\n      needsDoubleClick,\n      interactionType = this._interactionType\n    } = opts;\n\n    let row = this.findRow({index, text});\n    if (row) {\n      if (needsDoubleClick) {\n        await this.user.dblClick(row);\n      } else if (interactionType === 'keyboard') {\n        act(() => row.focus());\n        await this.user.keyboard('[Enter]');\n      } else {\n        await pressElement(this.user, row, interactionType);\n      }\n    }\n  };\n\n  // TODO: do we really need this getter? Theoretically the user already has the reference to the gridlist\n  get gridlist() {\n    return this._gridlist;\n  }\n\n  get rows() {\n    return within(this?.gridlist).queryAllByRole('row');\n  }\n\n  get selectedRows() {\n    return this.rows.filter(row => row.getAttribute('aria-selected') === 'true');\n  }\n\n  cells = (opts: {element?: HTMLElement} = {}) => {\n    let {element} = opts;\n    return within(element || this.gridlist).queryAllByRole('gridcell');\n  };\n}\n"],"names":[],"version":3,"file":"gridlist.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/test-utils/src/gridlist.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {act, within} from '@testing-library/react';\nimport {GridListTesterOpts, GridRowActionOpts, ToggleGridRowOpts, UserOpts} from './types';\nimport {pressElement, triggerLongPress} from './events';\n\ninterface GridListToggleRowOpts extends ToggleGridRowOpts {}\ninterface GridListRowActionOpts extends GridRowActionOpts {}\n\nexport class GridListTester {\n  private user;\n  private _interactionType: UserOpts['interactionType'];\n  private _advanceTimer: UserOpts['advanceTimer'];\n  private _gridlist: HTMLElement;\n\n  constructor(opts: GridListTesterOpts) {\n    let {root, user, interactionType, advanceTimer} = opts;\n    this.user = user;\n    this._interactionType = interactionType || 'mouse';\n    this._advanceTimer = advanceTimer;\n    this._gridlist = root;\n  }\n\n  /**\n   * Set the interaction type used by the gridlist tester.\n   */\n  setInteractionType(type: UserOpts['interactionType']) {\n    this._interactionType = type;\n  }\n\n  /**\n   * Returns a row matching the specified index or text content.\n   */\n  findRow(opts: {rowIndexOrText: number | string}): HTMLElement {\n    let {\n      rowIndexOrText\n    } = opts;\n\n    let row;\n    if (typeof rowIndexOrText === 'number') {\n      row = this.rows[rowIndexOrText];\n    } else if (typeof rowIndexOrText === 'string') {\n      row = (within(this.gridlist!).getByText(rowIndexOrText).closest('[role=row]'))! as HTMLElement;\n    }\n\n    return row;\n  }\n\n  // TODO: RTL\n  private async keyboardNavigateToRow(opts: {row: HTMLElement}) {\n    let {row} = opts;\n    let rows = this.rows;\n    let targetIndex = rows.indexOf(row);\n    if (targetIndex === -1) {\n      throw new Error('Option provided is not in the gridlist');\n    }\n    if (document.activeElement === this._gridlist) {\n      await this.user.keyboard('[ArrowDown]');\n    } else if (this._gridlist.contains(document.activeElement) && document.activeElement!.getAttribute('role') !== 'row') {\n      do {\n        await this.user.keyboard('[ArrowLeft]');\n      } while (document.activeElement!.getAttribute('role') !== 'row');\n    }\n    let currIndex = rows.indexOf(document.activeElement as HTMLElement);\n    if (currIndex === -1) {\n      throw new Error('ActiveElement is not in the gridlist');\n    }\n    let direction = targetIndex > currIndex ? 'down' : 'up';\n\n    for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {\n      await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);\n    }\n  };\n\n  /**\n   * Toggles the selection for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.\n   */\n  async toggleRowSelection(opts: GridListToggleRowOpts) {\n    let {\n      row,\n      needsLongPress,\n      checkboxSelection = true,\n      interactionType = this._interactionType\n    } = opts;\n\n    if (typeof row === 'string' || typeof row === 'number') {\n      row = this.findRow({rowIndexOrText: row});\n    }\n\n    if (!row) {\n      throw new Error('Target row not found in the gridlist.');\n    }\n\n    let rowCheckbox = within(row).queryByRole('checkbox');\n\n    // TODO: we early return here because the checkbox/row can't be keyboard navigated to if the row is disabled usually\n    // but we may to check for disabledBehavior (aka if the disable row gets skipped when keyboard navigating or not)\n    if (interactionType === 'keyboard' && (rowCheckbox?.getAttribute('disabled') === '' || row?.getAttribute('aria-disabled') === 'true')) {\n      return;\n    }\n\n    // this would be better than the check to do nothing in events.ts\n    // also, it'd be good to be able to trigger selection on the row instead of having to go to the checkbox directly\n    if (interactionType === 'keyboard' && !checkboxSelection) {\n      await this.keyboardNavigateToRow({row});\n      await this.user.keyboard('{Space}');\n      return;\n    }\n    if (rowCheckbox && checkboxSelection) {\n      await pressElement(this.user, rowCheckbox, interactionType);\n    } else {\n      let cell = within(row).getAllByRole('gridcell')[0];\n      if (needsLongPress && interactionType === 'touch') {\n        if (this._advanceTimer == null) {\n          throw new Error('No advanceTimers provided for long press.');\n        }\n\n        // Note that long press interactions with rows is strictly touch only for grid rows\n        await triggerLongPress({element: cell, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});\n\n      } else {\n        await pressElement(this.user, cell, interactionType);\n      }\n    }\n  }\n\n  // TODO: There is a more difficult use case where the row has/behaves as link, don't think we have a good way to determine that unless the\n  // user specificlly tells us\n  /**\n   * Triggers the action for the specified gridlist row. Defaults to using the interaction type set on the gridlist tester.\n   */\n  async triggerRowAction(opts: GridListRowActionOpts) {\n    let {\n      row,\n      needsDoubleClick,\n      interactionType = this._interactionType\n    } = opts;\n\n    if (typeof row === 'string' || typeof row === 'number') {\n      row = this.findRow({rowIndexOrText: row});\n    }\n\n    if (!row) {\n      throw new Error('Target row not found in the gridlist.');\n    }\n\n    if (needsDoubleClick) {\n      await this.user.dblClick(row);\n    } else if (interactionType === 'keyboard') {\n      if (row?.getAttribute('aria-disabled') === 'true') {\n        return;\n      }\n\n      if (document.activeElement !== this._gridlist || !this._gridlist.contains(document.activeElement)) {\n        act(() => this._gridlist.focus());\n      }\n\n      await this.keyboardNavigateToRow({row});\n      await this.user.keyboard('[Enter]');\n    } else {\n      await pressElement(this.user, row, interactionType);\n    }\n  }\n\n  /**\n   * Returns the gridlist.\n   */\n  get gridlist(): HTMLElement {\n    return this._gridlist;\n  }\n\n  /**\n   * Returns the gridlist's rows if any.\n   */\n  get rows(): HTMLElement[] {\n    return within(this?.gridlist).queryAllByRole('row');\n  }\n\n  /**\n   * Returns the gridlist's selected rows if any.\n   */\n  get selectedRows(): HTMLElement[] {\n    return this.rows.filter(row => row.getAttribute('aria-selected') === 'true');\n  }\n\n  /**\n   * Returns the gridlist's cells if any. Can be filtered against a specific row if provided via `element`.\n   */\n  cells(opts: {element?: HTMLElement} = {}): HTMLElement[] {\n    let {element = this.gridlist} = opts;\n    return within(element).queryAllByRole('gridcell');\n  }\n}\n"],"names":[],"version":3,"file":"gridlist.module.js.map"}

package/dist/listbox.main.js

@@ -0,0 +1,135 @@
+var $5a8bfe1663b8366d$exports = require("./events.main.js");
+var $bAxU9$testinglibraryreact = require("@testing-library/react");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ListBoxTester", () => $8ac94de7d2631d04$export$54c24f7ee8577f4f);
+/*
+ * Copyright 2024 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 $8ac94de7d2631d04$export$54c24f7ee8577f4f {
+    /**
+   * Set the interaction type used by the listbox tester.
+   */ setInteractionType(type) {
+        this._interactionType = type;
+    }
+    // TODO: now that we have listbox, perhaps select can make use of this tester internally
+    /**
+   * Returns a option matching the specified index or text content.
+   */ findOption(opts) {
+        let { optionIndexOrText: optionIndexOrText } = opts;
+        let option;
+        let options = this.options();
+        if (typeof optionIndexOrText === 'number') option = options[optionIndexOrText];
+        else if (typeof optionIndexOrText === 'string') option = (0, $bAxU9$testinglibraryreact.within)(this.listbox).getByText(optionIndexOrText).closest('[role=option]');
+        return option;
+    }
+    // TODO: this is basically the same as menu except for the error message, refactor later so that they share
+    // TODO: this also doesn't support grid layout yet
+    async keyboardNavigateToOption(opts) {
+        var _document_activeElement;
+        let { option: option } = opts;
+        let options = this.options();
+        let targetIndex = options.indexOf(option);
+        if (targetIndex === -1) throw new Error('Option provided is not in the listbox');
+        if (document.activeElement === this._listbox) await this.user.keyboard('[ArrowDown]');
+        // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,
+        // feels like it could break easily
+        if (((_document_activeElement = document.activeElement) === null || _document_activeElement === void 0 ? void 0 : _document_activeElement.getAttribute('role')) !== 'option') await (0, $bAxU9$testinglibraryreact.act)(async ()=>{
+            option.focus();
+        });
+        let currIndex = options.indexOf(document.activeElement);
+        if (currIndex === -1) throw new Error('ActiveElement is not in the listbox');
+        let direction = targetIndex > currIndex ? 'down' : 'up';
+        for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+    }
+    /**
+   * Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
+   */ async toggleOptionSelection(opts) {
+        let { option: option, needsLongPress: needsLongPress, keyboardActivation: keyboardActivation = 'Enter', interactionType: interactionType = this._interactionType } = opts;
+        if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
+            optionIndexOrText: option
+        });
+        if (!option) throw new Error('Target option not found in the listbox.');
+        if (interactionType === 'keyboard') {
+            if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
+            if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $bAxU9$testinglibraryreact.act)(()=>this._listbox.focus());
+            await this.keyboardNavigateToOption({
+                option: option
+            });
+            await this.user.keyboard(`[${keyboardActivation}]`);
+        } else if (needsLongPress && interactionType === 'touch') {
+            if (this._advanceTimer == null) throw new Error('No advanceTimers provided for long press.');
+            await (0, $5a8bfe1663b8366d$exports.triggerLongPress)({
+                element: option,
+                advanceTimer: this._advanceTimer,
+                pointerOpts: {
+                    pointerType: 'touch'
+                }
+            });
+        } else await (0, $5a8bfe1663b8366d$exports.pressElement)(this.user, option, interactionType);
+    }
+    /**
+   * Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.
+   */ async triggerOptionAction(opts) {
+        let { option: option, needsDoubleClick: needsDoubleClick, interactionType: interactionType = this._interactionType } = opts;
+        if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
+            optionIndexOrText: option
+        });
+        if (!option) throw new Error('Target option not found in the listbox.');
+        if (needsDoubleClick) await this.user.dblClick(option);
+        else if (interactionType === 'keyboard') {
+            if ((option === null || option === void 0 ? void 0 : option.getAttribute('aria-disabled')) === 'true') return;
+            if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) (0, $bAxU9$testinglibraryreact.act)(()=>this._listbox.focus());
+            await this.keyboardNavigateToOption({
+                option: option
+            });
+            await this.user.keyboard('[Enter]');
+        } else await (0, $5a8bfe1663b8366d$exports.pressElement)(this.user, option, interactionType);
+    }
+    /**
+   * Returns the listbox.
+   */ get listbox() {
+        return this._listbox;
+    }
+    /**
+   * Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.
+   */ options(opts = {}) {
+        let { element: element = this._listbox } = opts;
+        let options = [];
+        if (element) options = (0, $bAxU9$testinglibraryreact.within)(element).queryAllByRole('option');
+        return options;
+    }
+    /**
+   * Returns the listbox's selected options if any.
+   */ get selectedOptions() {
+        return this.options().filter((row)=>row.getAttribute('aria-selected') === 'true');
+    }
+    /**
+   * Returns the listbox's sections if any.
+   */ get sections() {
+        return (0, $bAxU9$testinglibraryreact.within)(this._listbox).queryAllByRole('group');
+    }
+    constructor(opts){
+        let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer } = opts;
+        this.user = user;
+        this._interactionType = interactionType || 'mouse';
+        this._listbox = root;
+        this._advanceTimer = advanceTimer;
+    }
+}
+
+
+//# sourceMappingURL=listbox.main.js.map

package/dist/listbox.main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/test-utils/src/listbox.ts"],"sourcesContent":["/*\n * Copyright 2024 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 {act, within} from '@testing-library/react';\nimport {ListBoxTesterOpts, UserOpts} from './types';\nimport {pressElement, triggerLongPress} from './events';\n\ninterface ListBoxToggleOptionOpts {\n  /**\n   * What interaction type to use when toggling selection for an option. Defaults to the interaction type set on the tester.\n   */\n  interactionType?: UserOpts['interactionType'],\n  /**\n   * The index, text, or node of the option to toggle selection for.\n   */\n  option: number | string | HTMLElement,\n  /**\n   * Whether the option should be triggered by Space or Enter in keyboard modality.\n   * @default 'Enter'\n   */\n  keyboardActivation?: 'Space' | 'Enter',\n  /**\n   * Whether the option needs to be long pressed to be selected. Depends on the listbox's implementation.\n   */\n  needsLongPress?: boolean\n}\n\ninterface ListBoxOptionActionOpts extends Omit<ListBoxToggleOptionOpts, 'keyboardActivation' | 'needsLongPress'> {\n  /**\n   * Whether or not the option needs a double click to trigger the option action. Depends on the listbox's implementation.\n   */\n  needsDoubleClick?: boolean\n}\n\nexport class ListBoxTester {\n  private user;\n  private _interactionType: UserOpts['interactionType'];\n  private _advanceTimer: UserOpts['advanceTimer'];\n  private _listbox: HTMLElement;\n\n  constructor(opts: ListBoxTesterOpts) {\n    let {root, user, interactionType, advanceTimer} = opts;\n    this.user = user;\n    this._interactionType = interactionType || 'mouse';\n    this._listbox = root;\n    this._advanceTimer = advanceTimer;\n  }\n\n  /**\n   * Set the interaction type used by the listbox tester.\n   */\n  setInteractionType(type: UserOpts['interactionType']) {\n    this._interactionType = type;\n  }\n\n  // TODO: now that we have listbox, perhaps select can make use of this tester internally\n  /**\n   * Returns a option matching the specified index or text content.\n   */\n  findOption(opts: {optionIndexOrText: number | string}): HTMLElement {\n    let {\n      optionIndexOrText\n    } = opts;\n\n    let option;\n    let options = this.options();\n\n    if (typeof optionIndexOrText === 'number') {\n      option = options[optionIndexOrText];\n    } else if (typeof optionIndexOrText === 'string') {\n      option = (within(this.listbox!).getByText(optionIndexOrText).closest('[role=option]'))! as HTMLElement;\n    }\n\n    return option;\n  }\n\n  // TODO: this is basically the same as menu except for the error message, refactor later so that they share\n  // TODO: this also doesn't support grid layout yet\n  private async keyboardNavigateToOption(opts: {option: HTMLElement}) {\n    let {option} = opts;\n    let options = this.options();\n    let targetIndex = options.indexOf(option);\n    if (targetIndex === -1) {\n      throw new Error('Option provided is not in the listbox');\n    }\n\n    if (document.activeElement === this._listbox) {\n      await this.user.keyboard('[ArrowDown]');\n    }\n\n    // TODO: not sure about doing same while loop that exists in other implementations of keyboardNavigateToOption,\n    // feels like it could break easily\n    if (document.activeElement?.getAttribute('role') !== 'option') {\n      await act(async () => {\n        option.focus();\n      });\n    }\n\n    let currIndex = options.indexOf(document.activeElement as HTMLElement);\n    if (currIndex === -1) {\n      throw new Error('ActiveElement is not in the listbox');\n    }\n    let direction = targetIndex > currIndex ? 'down' : 'up';\n\n    for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {\n      await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);\n    }\n  };\n\n  /**\n   * Toggles the selection for the specified listbox option. Defaults to using the interaction type set on the listbox tester.\n   */\n  async toggleOptionSelection(opts: ListBoxToggleOptionOpts) {\n    let {option, needsLongPress, keyboardActivation = 'Enter', interactionType = this._interactionType} = opts;\n\n    if (typeof option === 'string' || typeof option === 'number') {\n      option = this.findOption({optionIndexOrText: option});\n    }\n\n    if (!option) {\n      throw new Error('Target option not found in the listbox.');\n    }\n\n    if (interactionType === 'keyboard') {\n      if (option?.getAttribute('aria-disabled') === 'true') {\n        return;\n      }\n\n      if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {\n        act(() => this._listbox.focus());\n      }\n\n      await this.keyboardNavigateToOption({option});\n      await this.user.keyboard(`[${keyboardActivation}]`);\n    } else {\n      if (needsLongPress && interactionType === 'touch') {\n        if (this._advanceTimer == null) {\n          throw new Error('No advanceTimers provided for long press.');\n        }\n\n        await triggerLongPress({element: option, advanceTimer: this._advanceTimer, pointerOpts: {pointerType: 'touch'}});\n      } else {\n        await pressElement(this.user, option, interactionType);\n      }\n    }\n  }\n\n  /**\n   * Triggers the action for the specified listbox option. Defaults to using the interaction type set on the listbox tester.\n   */\n  async triggerOptionAction(opts: ListBoxOptionActionOpts) {\n    let {\n      option,\n      needsDoubleClick,\n      interactionType = this._interactionType\n    } = opts;\n\n    if (typeof option === 'string' || typeof option === 'number') {\n      option = this.findOption({optionIndexOrText: option});\n    }\n\n    if (!option) {\n      throw new Error('Target option not found in the listbox.');\n    }\n\n    if (needsDoubleClick) {\n      await this.user.dblClick(option);\n    } else if (interactionType === 'keyboard') {\n      if (option?.getAttribute('aria-disabled') === 'true') {\n        return;\n      }\n\n      if (document.activeElement !== this._listbox || !this._listbox.contains(document.activeElement)) {\n        act(() => this._listbox.focus());\n      }\n\n      await this.keyboardNavigateToOption({option});\n      await this.user.keyboard('[Enter]');\n    } else {\n      await pressElement(this.user, option, interactionType);\n    }\n  }\n\n  /**\n   * Returns the listbox.\n   */\n  get listbox(): HTMLElement {\n    return this._listbox;\n  }\n\n  /**\n   * Returns the listbox options. Can be filtered to a subsection of the listbox if provided via `element`.\n   */\n  options(opts: {element?: HTMLElement} = {}): HTMLElement[] {\n    let {element = this._listbox} = opts;\n    let options = [];\n    if (element) {\n      options = within(element).queryAllByRole('option');\n    }\n\n    return options;\n  }\n\n  /**\n   * Returns the listbox's selected options if any.\n   */\n  get selectedOptions(): HTMLElement[] {\n    return this.options().filter(row => row.getAttribute('aria-selected') === 'true');\n  }\n\n  /**\n   * Returns the listbox's sections if any.\n   */\n  get sections(): HTMLElement[] {\n    return within(this._listbox).queryAllByRole('group');\n  }\n}\n"],"names":[],"version":3,"file":"listbox.main.js.map"}