@react-aria/test-utils 1.0.0-nightly.5042 → 1.0.0-rc.0

package/dist/private/listbox.cjs

@@ -0,0 +1,163 @@
+var $a84d573878cc1e5e$exports = require("./act.cjs");
+var $022fcf8e360befed$exports = require("./utils.cjs");
+var $ivkeh$testinglibrarydom = require("@testing-library/dom");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ListBoxTester", function () { return $c0f7ae61eac30828$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 $c0f7ae61eac30828$export$54c24f7ee8577f4f {
+    constructor(opts){
+        let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer, layout: layout } = opts;
+        this.user = user;
+        this._interactionType = interactionType || 'mouse';
+        this._advanceTimer = advanceTimer;
+        this._layout = layout || 'stack';
+        this._listbox = root;
+        if (root.getAttribute('role') !== 'listbox') {
+            let listbox = (0, $ivkeh$testinglibrarydom.within)(root).queryByRole('listbox');
+            if (listbox) this._listbox = listbox;
+        }
+    }
+    /**
+   * Set the interaction type used by the listbox tester.
+   */ setInteractionType(type) {
+        this._interactionType = type;
+    }
+    /**
+   * Returns a option matching the specified index or text content.
+   */ findOption(opts) {
+        let { indexOrText: indexOrText } = opts;
+        let option;
+        let options = this.getOptions();
+        if (typeof indexOrText === 'number') option = options[indexOrText];
+        else if (typeof indexOrText === 'string') option = (0, $ivkeh$testinglibrarydom.within)(this.getListbox()).getByText(indexOrText).closest('[role=option]');
+        return option;
+    }
+    async keyboardNavigateToOption(opts) {
+        let { option: option, selectionOnNav: selectionOnNav = 'default' } = opts;
+        let altKey = (0, $022fcf8e360befed$exports.getAltKey)();
+        let options = this.getOptions();
+        let targetIndex = options.indexOf(option);
+        if (targetIndex === -1) throw new Error('Option provided is not in the listbox');
+        if (document.activeElement !== this._listbox && !this._listbox.contains(document.activeElement)) {
+            (0, $a84d573878cc1e5e$exports.act)(()=>this._listbox.focus());
+            await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
+        }
+        let currIndex = options.indexOf(document.activeElement);
+        if (currIndex === -1) throw new Error('ActiveElement is not in the listbox');
+        if (selectionOnNav === 'none') await this.user.keyboard(`[${altKey}>]`);
+        if (this._layout === 'grid') while(document.activeElement !== option){
+            let curr = document.activeElement.getBoundingClientRect();
+            let target = option.getBoundingClientRect();
+            let key;
+            // compare current position with desired position to determine if we need to go up/down/left/right
+            // use 1 in the comparison here for subpixels since getBoundingClientRect returns subpixels precision
+            if (Math.abs(curr.top - target.top) > 1) key = curr.top < target.top ? 'ArrowDown' : 'ArrowUp';
+            else if (Math.abs(curr.left - target.left) > 1) key = curr.left < target.left ? 'ArrowRight' : 'ArrowLeft';
+            else // if the diff in current vs desired is < 1 but it is claiming we arent focused on the target
+            // then we might be in a case where getBoundingClientRect isnt mocked
+            throw new Error('Could not navigate to target option in grid layout. Did the test mock getBoundingClientRect?');
+            await this.user.keyboard(`[${key}]`);
+        }
+        else {
+            let direction = targetIndex > currIndex ? 'down' : 'up';
+            for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+        }
+        if (selectionOnNav === 'none') await this.user.keyboard(`[/${altKey}]`);
+    }
+    /**
+   * 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, selectionBehavior: selectionBehavior = 'toggle' } = opts;
+        let altKey = (0, $022fcf8e360befed$exports.getAltKey)();
+        let metaKey = (0, $022fcf8e360befed$exports.getMetaKey)();
+        if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
+            indexOrText: option
+        });
+        if (!option) throw new Error(`Target option "${(0, $022fcf8e360befed$exports.formatTargetNode)(opts.option)}" not found in the listbox.`);
+        if (interactionType === 'keyboard') {
+            if (option?.getAttribute('aria-disabled') === 'true') throw new Error(`Cannot toggle selection on disabled option "${(0, $022fcf8e360befed$exports.formatTargetNode)(opts.option)}".`);
+            await this.keyboardNavigateToOption({
+                option: option,
+                selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'
+            });
+            if (selectionBehavior === 'replace') await this.user.keyboard(`[${altKey}>]`);
+            await this.user.keyboard(`[${keyboardActivation}]`);
+            if (selectionBehavior === 'replace') await this.user.keyboard(`[/${altKey}]`);
+        } else if (needsLongPress && interactionType === 'touch') await (0, $022fcf8e360befed$exports.triggerLongPress)({
+            element: option,
+            advanceTimer: this._advanceTimer,
+            pointerOpts: {
+                pointerType: 'touch'
+            }
+        });
+        else {
+            if (selectionBehavior === 'replace' && interactionType !== 'touch') await this.user.keyboard(`[${metaKey}>]`);
+            await (0, $022fcf8e360befed$exports.pressElement)(this.user, option, interactionType);
+            if (selectionBehavior === 'replace' && interactionType !== 'touch') await this.user.keyboard(`[/${metaKey}]`);
+        }
+    }
+    /**
+   * 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({
+            indexOrText: option
+        });
+        if (!option) throw new Error(`Target option "${(0, $022fcf8e360befed$exports.formatTargetNode)(opts.option)}" not found in the listbox.`);
+        if (needsDoubleClick) await this.user.dblClick(option);
+        else if (interactionType === 'keyboard') {
+            if (option?.getAttribute('aria-disabled') === 'true') throw new Error(`Cannot trigger action on disabled option "${(0, $022fcf8e360befed$exports.formatTargetNode)(opts.option)}".`);
+            await this.keyboardNavigateToOption({
+                option: option,
+                selectionOnNav: 'none'
+            });
+            await this.user.keyboard('[Enter]');
+        } else await (0, $022fcf8e360befed$exports.pressElement)(this.user, option, interactionType);
+    }
+    /**
+   * Returns the listbox.
+   */ getListbox() {
+        return this._listbox;
+    }
+    /**
+   * Returns the listbox options. Can be filtered to a subsection of the listbox if provided via
+   * `element`.
+   */ getOptions(opts = {}) {
+        let { element: element = this._listbox } = opts;
+        let options = [];
+        if (element) options = (0, $ivkeh$testinglibrarydom.within)(element).queryAllByRole('option');
+        return options;
+    }
+    /**
+   * Returns the listbox's selected options if any.
+   */ getSelectedOptions() {
+        return this.getOptions().filter((row)=>row.getAttribute('aria-selected') === 'true');
+    }
+    /**
+   * Returns the listbox's sections if any.
+   */ getSections() {
+        return (0, $ivkeh$testinglibrarydom.within)(this._listbox).queryAllByRole('group');
+    }
+}
+
+
+//# sourceMappingURL=listbox.cjs.map

package/dist/private/listbox.cjs.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} from './act';\nimport {formatTargetNode, getAltKey, getMetaKey, pressElement, triggerLongPress} from './utils';\nimport {ListBoxTesterOpts, UserOpts} from './types';\nimport {within} from '@testing-library/dom';\n\ninterface ListBoxToggleOptionOpts {\n  /**\n   * What interaction type to use when toggling selection for an option. Defaults to the interaction\n   * 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   *\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\n   * implementation.\n   */\n  needsLongPress?: boolean;\n  /**\n   * Whether the listbox has a selectionBehavior of \"toggle\" or \"replace\" (aka highlight selection).\n   * This affects the user operations required to toggle option selection by adding modifier keys\n   * during user actions, useful when performing multi-option selection in a \"selectionBehavior:\n   * 'replace'\" listbox. If you would like to still simulate user actions (aka press) without these\n   * modifiers keys for a \"selectionBehavior: replace\" listbox, simply omit this option. See the\n   * [RAC Listbox docs](https://react-spectrum.adobe.com/react-aria/ListBox.html#selection-behavior)\n   * for more info on this behavior.\n   *\n   * @default 'toggle'\n   */\n  selectionBehavior?: 'toggle' | 'replace';\n}\n\ninterface ListBoxOptionActionOpts extends Omit<\n  ListBoxToggleOptionOpts,\n  'keyboardActivation' | 'needsLongPress'\n> {\n  /**\n   * Whether or not the option needs a double click to trigger the option action. Depends on the\n   * 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  private _layout: ListBoxTesterOpts['layout'];\n\n  constructor(opts: ListBoxTesterOpts) {\n    let {root, user, interactionType, advanceTimer, layout} = opts;\n    this.user = user;\n    this._interactionType = interactionType || 'mouse';\n    this._advanceTimer = advanceTimer;\n    this._layout = layout || 'stack';\n    this._listbox = root;\n    if (root.getAttribute('role') !== 'listbox') {\n      let listbox = within(root).queryByRole('listbox');\n      if (listbox) {\n        this._listbox = listbox;\n      }\n    }\n  }\n\n  /**\n   * Set the interaction type used by the listbox tester.\n   */\n  setInteractionType(type: UserOpts['interactionType']): void {\n    this._interactionType = type;\n  }\n\n  /**\n   * Returns a option matching the specified index or text content.\n   */\n  findOption(opts: {indexOrText: number | string}): HTMLElement {\n    let {indexOrText} = opts;\n\n    let option;\n    let options = this.getOptions();\n\n    if (typeof indexOrText === 'number') {\n      option = options[indexOrText];\n    } else if (typeof indexOrText === 'string') {\n      option = within(this.getListbox()!)\n        .getByText(indexOrText)\n        .closest('[role=option]')! as HTMLElement;\n    }\n\n    return option;\n  }\n\n  private async keyboardNavigateToOption(opts: {\n    option: HTMLElement;\n    selectionOnNav?: 'default' | 'none';\n  }) {\n    let {option, selectionOnNav = 'default'} = opts;\n    let altKey = getAltKey();\n    let options = this.getOptions();\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 (\n      document.activeElement !== this._listbox &&\n      !this._listbox.contains(document.activeElement)\n    ) {\n      act(() => this._listbox.focus());\n      await this.user.keyboard(\n        `${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`\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\n    if (selectionOnNav === 'none') {\n      await this.user.keyboard(`[${altKey}>]`);\n    }\n    if (this._layout === 'grid') {\n      while (document.activeElement !== option) {\n        let curr = (document.activeElement as HTMLElement).getBoundingClientRect();\n        let target = option.getBoundingClientRect();\n        let key: string;\n        // compare current position with desired position to determine if we need to go up/down/left/right\n        // use 1 in the comparison here for subpixels since getBoundingClientRect returns subpixels precision\n        if (Math.abs(curr.top - target.top) > 1) {\n          key = curr.top < target.top ? 'ArrowDown' : 'ArrowUp';\n        } else if (Math.abs(curr.left - target.left) > 1) {\n          key = curr.left < target.left ? 'ArrowRight' : 'ArrowLeft';\n        } else {\n          // if the diff in current vs desired is < 1 but it is claiming we arent focused on the target\n          // then we might be in a case where getBoundingClientRect isnt mocked\n          throw new Error(\n            'Could not navigate to target option in grid layout. Did the test mock getBoundingClientRect?'\n          );\n        }\n        await this.user.keyboard(`[${key}]`);\n      }\n    } else {\n      let direction = targetIndex > currIndex ? 'down' : 'up';\n      for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {\n        await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);\n      }\n    }\n    if (selectionOnNav === 'none') {\n      await this.user.keyboard(`[/${altKey}]`);\n    }\n  }\n\n  /**\n   * Toggles the selection for the specified listbox option. Defaults to using the interaction type\n   * set on the listbox tester.\n   */\n  async toggleOptionSelection(opts: ListBoxToggleOptionOpts): Promise<void> {\n    let {\n      option,\n      needsLongPress,\n      keyboardActivation = 'Enter',\n      interactionType = this._interactionType,\n      selectionBehavior = 'toggle'\n    } = opts;\n\n    let altKey = getAltKey();\n    let metaKey = getMetaKey();\n\n    if (typeof option === 'string' || typeof option === 'number') {\n      option = this.findOption({indexOrText: option});\n    }\n\n    if (!option) {\n      throw new Error(`Target option \"${formatTargetNode(opts.option)}\" not found in the listbox.`);\n    }\n\n    if (interactionType === 'keyboard') {\n      if (option?.getAttribute('aria-disabled') === 'true') {\n        throw new Error(\n          `Cannot toggle selection on disabled option \"${formatTargetNode(opts.option)}\".`\n        );\n      }\n\n      await this.keyboardNavigateToOption({\n        option,\n        selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'\n      });\n      if (selectionBehavior === 'replace') {\n        await this.user.keyboard(`[${altKey}>]`);\n      }\n      await this.user.keyboard(`[${keyboardActivation}]`);\n      if (selectionBehavior === 'replace') {\n        await this.user.keyboard(`[/${altKey}]`);\n      }\n    } else {\n      if (needsLongPress && interactionType === 'touch') {\n        await triggerLongPress({\n          element: option,\n          advanceTimer: this._advanceTimer!,\n          pointerOpts: {pointerType: 'touch'}\n        });\n      } else {\n        if (selectionBehavior === 'replace' && interactionType !== 'touch') {\n          await this.user.keyboard(`[${metaKey}>]`);\n        }\n        await pressElement(this.user, option, interactionType);\n        if (selectionBehavior === 'replace' && interactionType !== 'touch') {\n          await this.user.keyboard(`[/${metaKey}]`);\n        }\n      }\n    }\n  }\n\n  /**\n   * Triggers the action for the specified listbox option. Defaults to using the interaction type\n   * set on the listbox tester.\n   */\n  async triggerOptionAction(opts: ListBoxOptionActionOpts): Promise<void> {\n    let {option, needsDoubleClick, interactionType = this._interactionType} = opts;\n\n    if (typeof option === 'string' || typeof option === 'number') {\n      option = this.findOption({indexOrText: option});\n    }\n\n    if (!option) {\n      throw new Error(`Target option \"${formatTargetNode(opts.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        throw new Error(\n          `Cannot trigger action on disabled option \"${formatTargetNode(opts.option)}\".`\n        );\n      }\n\n      await this.keyboardNavigateToOption({option, selectionOnNav: 'none'});\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  getListbox(): 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\n   * `element`.\n   */\n  getOptions(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  getSelectedOptions(): HTMLElement[] {\n    return this.getOptions().filter(row => row.getAttribute('aria-selected') === 'true');\n  }\n\n  /**\n   * Returns the listbox's sections if any.\n   */\n  getSections(): HTMLElement[] {\n    return within(this._listbox).queryAllByRole('group');\n  }\n}\n"],"names":[],"version":3,"file":"listbox.cjs.map"}

package/dist/private/listbox.js

@@ -0,0 +1,158 @@
+import {act as $1350703ef3ac1acc$export$3ba232387fd5d6dd} from "./act.js";
+import {formatTargetNode as $b4e037a2907521c6$export$bc3bc4a9206bf789, getAltKey as $b4e037a2907521c6$export$6fc0ccaebd758b9d, getMetaKey as $b4e037a2907521c6$export$7943c508934e27ce, pressElement as $b4e037a2907521c6$export$6ffa3eb717517feb, triggerLongPress as $b4e037a2907521c6$export$3a22a5a9bc0fd3b} from "./utils.js";
+import {within as $6BrfQ$within} from "@testing-library/dom";
+
+/*
+ * 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 $8d2aea0e455eb460$export$54c24f7ee8577f4f {
+    constructor(opts){
+        let { root: root, user: user, interactionType: interactionType, advanceTimer: advanceTimer, layout: layout } = opts;
+        this.user = user;
+        this._interactionType = interactionType || 'mouse';
+        this._advanceTimer = advanceTimer;
+        this._layout = layout || 'stack';
+        this._listbox = root;
+        if (root.getAttribute('role') !== 'listbox') {
+            let listbox = (0, $6BrfQ$within)(root).queryByRole('listbox');
+            if (listbox) this._listbox = listbox;
+        }
+    }
+    /**
+   * Set the interaction type used by the listbox tester.
+   */ setInteractionType(type) {
+        this._interactionType = type;
+    }
+    /**
+   * Returns a option matching the specified index or text content.
+   */ findOption(opts) {
+        let { indexOrText: indexOrText } = opts;
+        let option;
+        let options = this.getOptions();
+        if (typeof indexOrText === 'number') option = options[indexOrText];
+        else if (typeof indexOrText === 'string') option = (0, $6BrfQ$within)(this.getListbox()).getByText(indexOrText).closest('[role=option]');
+        return option;
+    }
+    async keyboardNavigateToOption(opts) {
+        let { option: option, selectionOnNav: selectionOnNav = 'default' } = opts;
+        let altKey = (0, $b4e037a2907521c6$export$6fc0ccaebd758b9d)();
+        let options = this.getOptions();
+        let targetIndex = options.indexOf(option);
+        if (targetIndex === -1) throw new Error('Option provided is not in the listbox');
+        if (document.activeElement !== this._listbox && !this._listbox.contains(document.activeElement)) {
+            (0, $1350703ef3ac1acc$export$3ba232387fd5d6dd)(()=>this._listbox.focus());
+            await this.user.keyboard(`${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`);
+        }
+        let currIndex = options.indexOf(document.activeElement);
+        if (currIndex === -1) throw new Error('ActiveElement is not in the listbox');
+        if (selectionOnNav === 'none') await this.user.keyboard(`[${altKey}>]`);
+        if (this._layout === 'grid') while(document.activeElement !== option){
+            let curr = document.activeElement.getBoundingClientRect();
+            let target = option.getBoundingClientRect();
+            let key;
+            // compare current position with desired position to determine if we need to go up/down/left/right
+            // use 1 in the comparison here for subpixels since getBoundingClientRect returns subpixels precision
+            if (Math.abs(curr.top - target.top) > 1) key = curr.top < target.top ? 'ArrowDown' : 'ArrowUp';
+            else if (Math.abs(curr.left - target.left) > 1) key = curr.left < target.left ? 'ArrowRight' : 'ArrowLeft';
+            else // if the diff in current vs desired is < 1 but it is claiming we arent focused on the target
+            // then we might be in a case where getBoundingClientRect isnt mocked
+            throw new Error('Could not navigate to target option in grid layout. Did the test mock getBoundingClientRect?');
+            await this.user.keyboard(`[${key}]`);
+        }
+        else {
+            let direction = targetIndex > currIndex ? 'down' : 'up';
+            for(let i = 0; i < Math.abs(targetIndex - currIndex); i++)await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);
+        }
+        if (selectionOnNav === 'none') await this.user.keyboard(`[/${altKey}]`);
+    }
+    /**
+   * 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, selectionBehavior: selectionBehavior = 'toggle' } = opts;
+        let altKey = (0, $b4e037a2907521c6$export$6fc0ccaebd758b9d)();
+        let metaKey = (0, $b4e037a2907521c6$export$7943c508934e27ce)();
+        if (typeof option === 'string' || typeof option === 'number') option = this.findOption({
+            indexOrText: option
+        });
+        if (!option) throw new Error(`Target option "${(0, $b4e037a2907521c6$export$bc3bc4a9206bf789)(opts.option)}" not found in the listbox.`);
+        if (interactionType === 'keyboard') {
+            if (option?.getAttribute('aria-disabled') === 'true') throw new Error(`Cannot toggle selection on disabled option "${(0, $b4e037a2907521c6$export$bc3bc4a9206bf789)(opts.option)}".`);
+            await this.keyboardNavigateToOption({
+                option: option,
+                selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'
+            });
+            if (selectionBehavior === 'replace') await this.user.keyboard(`[${altKey}>]`);
+            await this.user.keyboard(`[${keyboardActivation}]`);
+            if (selectionBehavior === 'replace') await this.user.keyboard(`[/${altKey}]`);
+        } else if (needsLongPress && interactionType === 'touch') await (0, $b4e037a2907521c6$export$3a22a5a9bc0fd3b)({
+            element: option,
+            advanceTimer: this._advanceTimer,
+            pointerOpts: {
+                pointerType: 'touch'
+            }
+        });
+        else {
+            if (selectionBehavior === 'replace' && interactionType !== 'touch') await this.user.keyboard(`[${metaKey}>]`);
+            await (0, $b4e037a2907521c6$export$6ffa3eb717517feb)(this.user, option, interactionType);
+            if (selectionBehavior === 'replace' && interactionType !== 'touch') await this.user.keyboard(`[/${metaKey}]`);
+        }
+    }
+    /**
+   * 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({
+            indexOrText: option
+        });
+        if (!option) throw new Error(`Target option "${(0, $b4e037a2907521c6$export$bc3bc4a9206bf789)(opts.option)}" not found in the listbox.`);
+        if (needsDoubleClick) await this.user.dblClick(option);
+        else if (interactionType === 'keyboard') {
+            if (option?.getAttribute('aria-disabled') === 'true') throw new Error(`Cannot trigger action on disabled option "${(0, $b4e037a2907521c6$export$bc3bc4a9206bf789)(opts.option)}".`);
+            await this.keyboardNavigateToOption({
+                option: option,
+                selectionOnNav: 'none'
+            });
+            await this.user.keyboard('[Enter]');
+        } else await (0, $b4e037a2907521c6$export$6ffa3eb717517feb)(this.user, option, interactionType);
+    }
+    /**
+   * Returns the listbox.
+   */ getListbox() {
+        return this._listbox;
+    }
+    /**
+   * Returns the listbox options. Can be filtered to a subsection of the listbox if provided via
+   * `element`.
+   */ getOptions(opts = {}) {
+        let { element: element = this._listbox } = opts;
+        let options = [];
+        if (element) options = (0, $6BrfQ$within)(element).queryAllByRole('option');
+        return options;
+    }
+    /**
+   * Returns the listbox's selected options if any.
+   */ getSelectedOptions() {
+        return this.getOptions().filter((row)=>row.getAttribute('aria-selected') === 'true');
+    }
+    /**
+   * Returns the listbox's sections if any.
+   */ getSections() {
+        return (0, $6BrfQ$within)(this._listbox).queryAllByRole('group');
+    }
+}
+
+
+export {$8d2aea0e455eb460$export$54c24f7ee8577f4f as ListBoxTester};
+//# sourceMappingURL=listbox.js.map

package/dist/private/listbox.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} from './act';\nimport {formatTargetNode, getAltKey, getMetaKey, pressElement, triggerLongPress} from './utils';\nimport {ListBoxTesterOpts, UserOpts} from './types';\nimport {within} from '@testing-library/dom';\n\ninterface ListBoxToggleOptionOpts {\n  /**\n   * What interaction type to use when toggling selection for an option. Defaults to the interaction\n   * 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   *\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\n   * implementation.\n   */\n  needsLongPress?: boolean;\n  /**\n   * Whether the listbox has a selectionBehavior of \"toggle\" or \"replace\" (aka highlight selection).\n   * This affects the user operations required to toggle option selection by adding modifier keys\n   * during user actions, useful when performing multi-option selection in a \"selectionBehavior:\n   * 'replace'\" listbox. If you would like to still simulate user actions (aka press) without these\n   * modifiers keys for a \"selectionBehavior: replace\" listbox, simply omit this option. See the\n   * [RAC Listbox docs](https://react-spectrum.adobe.com/react-aria/ListBox.html#selection-behavior)\n   * for more info on this behavior.\n   *\n   * @default 'toggle'\n   */\n  selectionBehavior?: 'toggle' | 'replace';\n}\n\ninterface ListBoxOptionActionOpts extends Omit<\n  ListBoxToggleOptionOpts,\n  'keyboardActivation' | 'needsLongPress'\n> {\n  /**\n   * Whether or not the option needs a double click to trigger the option action. Depends on the\n   * 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  private _layout: ListBoxTesterOpts['layout'];\n\n  constructor(opts: ListBoxTesterOpts) {\n    let {root, user, interactionType, advanceTimer, layout} = opts;\n    this.user = user;\n    this._interactionType = interactionType || 'mouse';\n    this._advanceTimer = advanceTimer;\n    this._layout = layout || 'stack';\n    this._listbox = root;\n    if (root.getAttribute('role') !== 'listbox') {\n      let listbox = within(root).queryByRole('listbox');\n      if (listbox) {\n        this._listbox = listbox;\n      }\n    }\n  }\n\n  /**\n   * Set the interaction type used by the listbox tester.\n   */\n  setInteractionType(type: UserOpts['interactionType']): void {\n    this._interactionType = type;\n  }\n\n  /**\n   * Returns a option matching the specified index or text content.\n   */\n  findOption(opts: {indexOrText: number | string}): HTMLElement {\n    let {indexOrText} = opts;\n\n    let option;\n    let options = this.getOptions();\n\n    if (typeof indexOrText === 'number') {\n      option = options[indexOrText];\n    } else if (typeof indexOrText === 'string') {\n      option = within(this.getListbox()!)\n        .getByText(indexOrText)\n        .closest('[role=option]')! as HTMLElement;\n    }\n\n    return option;\n  }\n\n  private async keyboardNavigateToOption(opts: {\n    option: HTMLElement;\n    selectionOnNav?: 'default' | 'none';\n  }) {\n    let {option, selectionOnNav = 'default'} = opts;\n    let altKey = getAltKey();\n    let options = this.getOptions();\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 (\n      document.activeElement !== this._listbox &&\n      !this._listbox.contains(document.activeElement)\n    ) {\n      act(() => this._listbox.focus());\n      await this.user.keyboard(\n        `${selectionOnNav === 'none' ? `[${altKey}>]` : ''}[ArrowDown]${selectionOnNav === 'none' ? `[/${altKey}]` : ''}`\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\n    if (selectionOnNav === 'none') {\n      await this.user.keyboard(`[${altKey}>]`);\n    }\n    if (this._layout === 'grid') {\n      while (document.activeElement !== option) {\n        let curr = (document.activeElement as HTMLElement).getBoundingClientRect();\n        let target = option.getBoundingClientRect();\n        let key: string;\n        // compare current position with desired position to determine if we need to go up/down/left/right\n        // use 1 in the comparison here for subpixels since getBoundingClientRect returns subpixels precision\n        if (Math.abs(curr.top - target.top) > 1) {\n          key = curr.top < target.top ? 'ArrowDown' : 'ArrowUp';\n        } else if (Math.abs(curr.left - target.left) > 1) {\n          key = curr.left < target.left ? 'ArrowRight' : 'ArrowLeft';\n        } else {\n          // if the diff in current vs desired is < 1 but it is claiming we arent focused on the target\n          // then we might be in a case where getBoundingClientRect isnt mocked\n          throw new Error(\n            'Could not navigate to target option in grid layout. Did the test mock getBoundingClientRect?'\n          );\n        }\n        await this.user.keyboard(`[${key}]`);\n      }\n    } else {\n      let direction = targetIndex > currIndex ? 'down' : 'up';\n      for (let i = 0; i < Math.abs(targetIndex - currIndex); i++) {\n        await this.user.keyboard(`[${direction === 'down' ? 'ArrowDown' : 'ArrowUp'}]`);\n      }\n    }\n    if (selectionOnNav === 'none') {\n      await this.user.keyboard(`[/${altKey}]`);\n    }\n  }\n\n  /**\n   * Toggles the selection for the specified listbox option. Defaults to using the interaction type\n   * set on the listbox tester.\n   */\n  async toggleOptionSelection(opts: ListBoxToggleOptionOpts): Promise<void> {\n    let {\n      option,\n      needsLongPress,\n      keyboardActivation = 'Enter',\n      interactionType = this._interactionType,\n      selectionBehavior = 'toggle'\n    } = opts;\n\n    let altKey = getAltKey();\n    let metaKey = getMetaKey();\n\n    if (typeof option === 'string' || typeof option === 'number') {\n      option = this.findOption({indexOrText: option});\n    }\n\n    if (!option) {\n      throw new Error(`Target option \"${formatTargetNode(opts.option)}\" not found in the listbox.`);\n    }\n\n    if (interactionType === 'keyboard') {\n      if (option?.getAttribute('aria-disabled') === 'true') {\n        throw new Error(\n          `Cannot toggle selection on disabled option \"${formatTargetNode(opts.option)}\".`\n        );\n      }\n\n      await this.keyboardNavigateToOption({\n        option,\n        selectionOnNav: selectionBehavior === 'replace' ? 'none' : 'default'\n      });\n      if (selectionBehavior === 'replace') {\n        await this.user.keyboard(`[${altKey}>]`);\n      }\n      await this.user.keyboard(`[${keyboardActivation}]`);\n      if (selectionBehavior === 'replace') {\n        await this.user.keyboard(`[/${altKey}]`);\n      }\n    } else {\n      if (needsLongPress && interactionType === 'touch') {\n        await triggerLongPress({\n          element: option,\n          advanceTimer: this._advanceTimer!,\n          pointerOpts: {pointerType: 'touch'}\n        });\n      } else {\n        if (selectionBehavior === 'replace' && interactionType !== 'touch') {\n          await this.user.keyboard(`[${metaKey}>]`);\n        }\n        await pressElement(this.user, option, interactionType);\n        if (selectionBehavior === 'replace' && interactionType !== 'touch') {\n          await this.user.keyboard(`[/${metaKey}]`);\n        }\n      }\n    }\n  }\n\n  /**\n   * Triggers the action for the specified listbox option. Defaults to using the interaction type\n   * set on the listbox tester.\n   */\n  async triggerOptionAction(opts: ListBoxOptionActionOpts): Promise<void> {\n    let {option, needsDoubleClick, interactionType = this._interactionType} = opts;\n\n    if (typeof option === 'string' || typeof option === 'number') {\n      option = this.findOption({indexOrText: option});\n    }\n\n    if (!option) {\n      throw new Error(`Target option \"${formatTargetNode(opts.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        throw new Error(\n          `Cannot trigger action on disabled option \"${formatTargetNode(opts.option)}\".`\n        );\n      }\n\n      await this.keyboardNavigateToOption({option, selectionOnNav: 'none'});\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  getListbox(): 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\n   * `element`.\n   */\n  getOptions(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  getSelectedOptions(): HTMLElement[] {\n    return this.getOptions().filter(row => row.getAttribute('aria-selected') === 'true');\n  }\n\n  /**\n   * Returns the listbox's sections if any.\n   */\n  getSections(): HTMLElement[] {\n    return within(this._listbox).queryAllByRole('group');\n  }\n}\n"],"names":[],"version":3,"file":"listbox.js.map"}