Add support for routerOptions and useHref #5864

devongovett · 2024-02-13T16:18:04Z

Closes #5395, closes #5335, relates to #5476

This improves integration with client side routers by introducing two new APIs:

A routerOptions prop on each component that supports links. This is an opaque object that React Aria simply passes through to the router. It can be used for options like controlling scroll behavior, using replaceState instead of pushState, or any other features offered by a router. It is passed to the navigate function provided to RouterProvider as a second argument in addition to the href.
A useHref prop for RouterProvider which is used to convert an href provided to a link component to a native href. For example, a router might accept hrefs relative to a base path, or offer additional custom ways of specifying link destinations. The original href specified on the link is passed to the navigate function of the RouterProvider, and useHref is used to generate the full native href to put on the actual DOM element.

Both of these APIs work with TypeScript to enable autocomplete and type checking for the router options and also the href. To configure it, you can use TypeScript module augmentation to specify the RouterOptions type:

declare module "react-aria-components" {
  interface RouterOptions {
    href: MyRouterHref,
    routerOptions: MyRouterOptions
  }
}

Do that once in your app (maybe where you setup RouterProvider), and all link components in React Aria/RSP will use those options.

To do

Docs

rspbot · 2024-02-13T16:19:53Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/breadcrumbs/test/Breadcrumbs.test.js # packages/@react-spectrum/combobox/test/ComboBox.test.js # packages/@react-spectrum/link/test/Link.test.js # packages/@react-spectrum/list/test/ListView.test.js # packages/@react-spectrum/listbox/test/ListBox.test.js # packages/@react-spectrum/picker/test/Picker.test.js

rspbot · 2024-02-15T19:48:03Z

Build successful! 🎉

devongovett · 2024-02-15T19:48:17Z

packages/@react-stately/selection/src/SelectionManager.ts

@@ -494,4 +494,8 @@ export class SelectionManager implements MultipleSelectionManager {
  isLink(key: Key) {
    return !!this.collection.getItem(key)?.props?.href;
  }
+
+  getItemProps(key: Key) {


Adding this to selection manager feels a bit weird, but not sure where else to put it. useSelectableCollection and useSelectableItem don't currently receive the collection as props, except via SelectionManager...

agreed, it's a bit odd, however, we already have 'isLink' in here, which is almost the same thing and is only tangentially related to selection

would it make more sense to just return the collection and then handle this specific logic outside?

well, the original idea was that the MultipleSelectionManager interface could have multiple implementations, perhaps not even using collections under the hood. So if we expose the collection from the interface that will force other implementations to also use collections.

that makes sense :-/

snowystinger

can keep discussing, but approving so we can get nightlies out sooner rather than later

LFDanLu

Docs/code look good to me, will test the apps once they get built on main. Does the remix one get built somewhere? I tried running it locally but got a Invalid URL error. Otherwise just one small comment but happy to get this merged as is

LFDanLu · 2024-02-16T21:59:59Z

packages/@react-aria/utils/src/openLink.tsx

+export function useLinkProps(props: LinkDOMProps) {
+  let router = useRouter();
+  return {
+    href: props?.href ? router.useHref(props?.href) : undefined,
+    target: props?.target,
+    rel: props?.rel,
+    download: props?.download,
+    ping: props?.ping,
+    referrerPolicy: props?.referrerPolicy
+  };
+}


minor nit but it almost feels like this useRouter call should be in filterDOMProps instead of being a separate function if only to guard against cases where both filterDOMProps and useLinkProps are called and the props from useLinkProps need to be merged after the ones from filterDOMProps. Is there something I'm missing here as to why this is a separate function?

because filterDOMProps isn't a hook so it cannot call other hooks... :/

ahhh, right ugh

# Conflicts: # packages/@adobe/react-spectrum/src/index.ts # packages/@react-spectrum/breadcrumbs/test/Breadcrumbs.test.js # packages/@react-spectrum/combobox/test/ComboBox.test.js # packages/@react-spectrum/link/test/Link.test.js # packages/@react-spectrum/list/test/ListView.test.js # packages/@react-spectrum/listbox/test/ListBox.test.js # packages/@react-spectrum/picker/test/Picker.test.js # packages/@react-types/shared/src/dom.d.ts

rspbot · 2024-03-28T18:56:56Z

Build successful! 🎉

# Conflicts: # packages/@react-aria/listbox/src/useOption.ts # packages/@react-aria/menu/src/useMenuItem.ts

rspbot · 2024-04-02T02:50:04Z

Build successful! 🎉

rspbot · 2024-04-03T01:53:42Z

Build successful! 🎉

rspbot · 2024-04-03T01:53:44Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-aria/utils

RouterProvider

 RouterProvider {
   children: ReactNode
-  navigate: (string) => void
+  navigate: (Href, RouterOptions | undefined) => void
+  useHref?: (Href) => string
 }

useFormReset

-
+useLinkProps {
+  props: LinkDOMProps
+  returnVal: undefined
+}

@react-stately/selection

MultipleSelectionManager

 MultipleSelectionManager {
   canSelectItem: (Key) => boolean
   childFocusStrategy: FocusStrategy
   clearSelection: () => void
   disabledBehavior: DisabledBehavior
   disabledKeys: Set<Key>
   disallowEmptySelection?: boolean
   extendSelection: (Key) => void
   firstSelectedKey: Key | null
   focusedKey: Key
+  getItemProps: (Key) => any
   isDisabled: (Key) => boolean
   isEmpty: boolean
   isFocused: boolean
   isLink: (Key) => boolean
   isSelected: (Key) => boolean
   isSelectionEqual: (Set<Key>) => boolean
   lastSelectedKey: Key | null
   replaceSelection: (Key) => void
   select: (Key, PressEvent | LongPressEvent | PointerEvent) => void
   selectAll: () => void
   selectedKeys: Set<Key>
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   setFocused: (boolean) => void
   setFocusedKey: (Key, FocusStrategy) => void
   setSelectedKeys: (Iterable<Key>) => void
   setSelectionBehavior: (SelectionBehavior) => void
   toggleSelectAll: () => void
   toggleSelection: (Key) => void
 }

SelectionManager

 SelectionManager {
   canSelectItem: (Key) => void
   childFocusStrategy: FocusStrategy
   clearSelection: () => void
   constructor: (Collection<Node<unknown>>, MultipleSelectionState, SelectionManagerOptions) => void
   disabledBehavior: DisabledBehavior
   disabledKeys: Set<Key>
   disallowEmptySelection: boolean
   extendSelection: (Key) => void
   firstSelectedKey: Key | null
   focusedKey: Key
+  getItemProps: (Key) => void
   isDisabled: (Key) => void
   isEmpty: boolean
   isFocused: boolean
   isLink: (Key) => void
   isSelected: (Key) => void
   isSelectionEqual: (Set<Key>) => void
   lastSelectedKey: Key | null
   rawSelection: ISelection
   replaceSelection: (Key) => void
   select: (Key, PressEvent | LongPressEvent | PointerEvent) => void
   selectAll: () => void
   selectedKeys: Set<Key>
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   setFocused: (boolean) => void
   setFocusedKey: (Key | null, FocusStrategy) => void
   setSelectedKeys: (Iterable<Key>) => void
   setSelectionBehavior: (SelectionBehavior) => void
   toggleSelectAll: () => void
   toggleSelection: (Key) => void
 }

Add support for routerOptions and useHref

9bbc208

devongovett mentioned this pull request Feb 13, 2024

React Aria Components: rendering as custom components #5476

Open

devongovett added 2 commits February 15, 2024 11:45

Add docs and test in example apps

a36b347

devongovett commented Feb 15, 2024

View reviewed changes

snowystinger previously approved these changes Feb 15, 2024

View reviewed changes

LFDanLu previously approved these changes Feb 16, 2024

View reviewed changes

devongovett dismissed stale reviews from LFDanLu and snowystinger via eaa7491 March 28, 2024 13:49

Merge branch 'main' into router-next

8bfaccb

LFDanLu previously approved these changes Mar 28, 2024

View reviewed changes

Merge branch 'main' into router-next

1d10def

# Conflicts: # packages/@react-aria/listbox/src/useOption.ts # packages/@react-aria/menu/src/useMenuItem.ts

snowystinger dismissed LFDanLu’s stale review via 1d10def April 2, 2024 02:36

reidbarber approved these changes Apr 2, 2024

View reviewed changes

snowystinger approved these changes Apr 3, 2024

View reviewed changes

Merge branch 'main' into router-next

23e6078

snowystinger merged commit 2318292 into main Apr 3, 2024
27 checks passed

snowystinger deleted the router-next branch April 3, 2024 02:06

joshuajaco mentioned this pull request May 8, 2024

useHref passed to RouterProvider not respected for synthetic links #6347

Closed

Niznikr mentioned this pull request May 16, 2024

Support use of external links when using useHref in RouterProvider #6397

Open

MerryOscar mentioned this pull request May 23, 2024

[BUG] - Links is not working with react-router-dom heroui-inc/heroui#2963

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for routerOptions and useHref #5864

Add support for routerOptions and useHref #5864

devongovett commented Feb 13, 2024 •

edited

Loading

rspbot commented Feb 13, 2024

rspbot commented Feb 15, 2024

devongovett Feb 15, 2024

snowystinger Feb 15, 2024

devongovett Feb 15, 2024

snowystinger Feb 15, 2024

snowystinger left a comment

LFDanLu left a comment

LFDanLu Feb 16, 2024

devongovett Feb 17, 2024

LFDanLu Feb 20, 2024

rspbot commented Mar 28, 2024

rspbot commented Apr 2, 2024

rspbot commented Apr 3, 2024

rspbot commented Apr 3, 2024

Add support for routerOptions and useHref #5864

Add support for routerOptions and useHref #5864

Conversation

devongovett commented Feb 13, 2024 • edited Loading

To do

rspbot commented Feb 13, 2024

rspbot commented Feb 15, 2024

devongovett Feb 15, 2024

Choose a reason for hiding this comment

snowystinger Feb 15, 2024

Choose a reason for hiding this comment

devongovett Feb 15, 2024

Choose a reason for hiding this comment

snowystinger Feb 15, 2024

Choose a reason for hiding this comment

snowystinger left a comment

Choose a reason for hiding this comment

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Feb 16, 2024

Choose a reason for hiding this comment

devongovett Feb 17, 2024

Choose a reason for hiding this comment

LFDanLu Feb 20, 2024

Choose a reason for hiding this comment

rspbot commented Mar 28, 2024

rspbot commented Apr 2, 2024

rspbot commented Apr 3, 2024

rspbot commented Apr 3, 2024

@react-aria/utils

RouterProvider

useFormReset

@react-stately/selection

MultipleSelectionManager

SelectionManager

devongovett commented Feb 13, 2024 •

edited

Loading