chore: make useLandmark controller unstable (#7871)

* chore: make useLandmark controller unstable

* remove from mono package

* fix tests

Author: snowystinger

packages/@react-aria/landmark/src/index.ts

@@ -11,4 +11,4 @@
  */
 
 export type {AriaLandmarkRole, AriaLandmarkProps, LandmarkAria, LandmarkController} from './useLandmark';
-export {useLandmark, createLandmarkController} from './useLandmark';
+export {useLandmark, UNSTABLE_createLandmarkController} from './useLandmark';

packages/@react-aria/landmark/src/useLandmark.ts

@@ -436,7 +436,7 @@ class LandmarkManager implements LandmarkManagerApi {
 }
 
 /** Creates a LandmarkController, which allows programmatic navigation of landmarks. */
-export function createLandmarkController(): LandmarkController {
+export function UNSTABLE_createLandmarkController(): LandmarkController {
   // Get the current landmark manager and create a controller using it.
   let instance: LandmarkManagerApi | null = getLandmarkManager();
   let controller = instance?.createLandmarkController();

packages/@react-aria/landmark/stories/Landmark.stories.tsx

@@ -14,14 +14,14 @@ import {ActionGroup, Item} from '@react-spectrum/actiongroup';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {createLandmarkController, useLandmark} from '../';
 import {Flex} from '@react-spectrum/layout';
 import {Link} from '@react-spectrum/link';
 import {Meta} from '@storybook/react';
 import React, {SyntheticEvent, useEffect, useMemo, useRef} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import styles from './index.css';
 import {TextField} from '@react-spectrum/textfield';
+import {UNSTABLE_createLandmarkController, useLandmark} from '../';
 
 interface StoryProps {}
 
@@ -314,7 +314,7 @@ function ApplicationExample() {
 }
 
 function IframeExample() {
-  let controller = useMemo(() => createLandmarkController(), []);
+  let controller = useMemo(() => UNSTABLE_createLandmarkController(), []);
   useEffect(() => () => controller.dispose(), [controller]);
   let onLoad = (e: SyntheticEvent) => {
     let iframe = e.target as HTMLIFrameElement;

packages/@react-aria/landmark/test/useLandmark.test.tsx

@@ -15,11 +15,11 @@ import {ActionGroup, Item} from '@react-spectrum/actiongroup';
 import {Button} from '@react-spectrum/button';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import {Checkbox} from '@react-spectrum/checkbox';
-import {createLandmarkController, useLandmark} from '../';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {TextField} from '@react-spectrum/textfield';
 import {theme} from '@react-spectrum/theme-default';
+import {UNSTABLE_createLandmarkController, useLandmark} from '../';
 import {useFocusableRef} from '@react-spectrum/utils';
 import userEvent from '@testing-library/user-event';
 
@@ -1214,7 +1214,7 @@ describe('LandmarkManager', function () {
       await user.keyboard('{F6}');
       expect(onLandmarkNavigation).not.toHaveBeenCalled();
 
-      let controller = createLandmarkController();
+      let controller = UNSTABLE_createLandmarkController();
 
       await user.keyboard('{F6}');
       expect(onLandmarkNavigation).toHaveBeenCalledTimes(1);
@@ -1247,7 +1247,7 @@ describe('LandmarkManager', function () {
       await user.tab();
       expect(document.activeElement).toBe(tree.getAllByRole('link')[0]);
 
-      let controller = createLandmarkController();
+      let controller = UNSTABLE_createLandmarkController();
 
       act(() => {controller.focusNext();});
       expect(document.activeElement).toBe(tree.getByRole('main'));
@@ -1276,7 +1276,7 @@ describe('LandmarkManager', function () {
 
       act(() => tree.getByRole('textbox').focus());
 
-      let controller = createLandmarkController();
+      let controller = UNSTABLE_createLandmarkController();
 
       act(() => {controller.focusPrevious();});
       expect(document.activeElement).toBe(tree.getByRole('navigation'));
@@ -1305,7 +1305,7 @@ describe('LandmarkManager', function () {
 
       act(() => tree.getByRole('textbox').focus());
 
-      let controller = createLandmarkController();
+      let controller = UNSTABLE_createLandmarkController();
 
       act(() => {controller.focusMain();});
       expect(document.activeElement).toBe(tree.getByRole('main'));
@@ -1317,7 +1317,7 @@ describe('LandmarkManager', function () {
   describe('singleton', function () {
     it('should store the landmark manager on the document', function () {
       // ensure a manager exists.
-      let controller = createLandmarkController();
+      let controller = UNSTABLE_createLandmarkController();
       let manager = document[Symbol.for('react-aria-landmark-manager')];
       expect(manager).toBeDefined();
       expect(typeof manager.version).toBe('number');
@@ -1335,7 +1335,7 @@ describe('LandmarkManager', function () {
         </div>
       );
 
-      let controller = createLandmarkController();
+      let controller = UNSTABLE_createLandmarkController();
       let newController = {
         navigate: jest.fn(),
         focusNext: jest.fn(),

packages/@react-spectrum/toast/stories/Toast.stories.tsx

@@ -15,13 +15,13 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Content} from '@react-spectrum/view';
-import {createLandmarkController, useLandmark} from '@react-aria/landmark';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import React, {SyntheticEvent, useEffect, useMemo, useRef, useState} from 'react';
 import {SpectrumToastOptions, ToastPlacement} from '../src/ToastContainer';
 import {ToastContainer, ToastQueue} from '../';
+import {UNSTABLE_createLandmarkController, useLandmark} from '@react-aria/landmark';
 import {UNSTABLE_PortalProvider} from '@react-aria/overlays';
 
 export default {
@@ -260,7 +260,7 @@ function MultipleInner() {
 }
 
 function IframeExample() {
-  let controller = useMemo(() => createLandmarkController(), []);
+  let controller = useMemo(() => UNSTABLE_createLandmarkController(), []);
   useEffect(() => () => controller.dispose(), [controller]);
   let onLoad = (e: SyntheticEvent) => {
     let iframe = e.target as HTMLIFrameElement;

packages/react-aria/src/index.ts

@@ -25,7 +25,7 @@ export {I18nProvider, useCollator, useDateFormatter, useFilter, useLocale, useLo
 export {useFocus, useFocusVisible, useFocusWithin, useHover, useInteractOutside, useKeyboard, useMove, usePress, useLongPress, useFocusable, Pressable, Focusable} from '@react-aria/interactions';
 export {useField, useLabel} from '@react-aria/label';
 export {useGridList, useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';
-export {useLandmark, createLandmarkController} from '@react-aria/landmark';
+export {useLandmark} from '@react-aria/landmark';
 export {useLink} from '@react-aria/link';
 export {useListBox, useListBoxSection, useOption} from '@react-aria/listbox';
 export {useMenu, useMenuItem, useMenuSection, useMenuTrigger, useSubmenuTrigger} from '@react-aria/menu';