Merge branch 'main' of github.com:adobe/react-spectrum

Author: devongovett

examples/rsp-next-ts/next.config.mjs

@@ -5,7 +5,7 @@ export default {
   transpilePackages: [
     '@adobe/react-spectrum',
     '@react-spectrum/*',
-    '@spectrum-icons/*',
+    '@spectrum-icons/*'
   ].flatMap(spec => glob.sync(`${spec}`, { cwd: 'node_modules/' })),
   basePath:
     process.env.VERDACCIO && process.env.CIRCLE_SHA1

examples/rsp-next-ts/pages/_app.tsx

@@ -31,7 +31,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   enableTableNestedRows();
 
   return (
-    <Provider 
+    <Provider
       theme={lightTheme}
       colorScheme={theme}
       router={{

examples/rsp-next-ts/pages/index.tsx

@@ -79,6 +79,8 @@ import {
   ColorArea,
   ColorField,
   ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
   ColorWheel,
 } from "@react-spectrum/color";
 import ReorderableListView from "../components/ReorderableListView";
@@ -242,6 +244,12 @@ export default function Home() {
             <ColorField label="Primary Color" />
             <ColorSlider defaultValue="#7f0000" channel="red" />
             <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
+            <ColorSwatchPicker defaultValue="#f00">
+              <ColorSwatch color="#f00" />
+              <ColorSwatch color="#0f0" />
+              <ColorSwatch color="#0ff" />
+              <ColorSwatch color="#00f" />
+            </ColorSwatchPicker>
           </Section>
 
           <Section title="Date and Time">

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -140,7 +140,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   }, [isOpen]);
 
   let updatePosition = useCallback(() => {
-    if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {
+    if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {
       return;
     }
 
@@ -153,7 +153,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     // so it can be restored after repositioning. This way if the overlay height
     // changes, the focused element appears to stay in the same position.
     let anchor: ScrollAnchor | null = null;
-    if (scrollRef.current.contains(document.activeElement)) {
+    if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
       let anchorRect = document.activeElement.getBoundingClientRect();
       let scrollRect = scrollRef.current.getBoundingClientRect();
       // Anchor from the top if the offset is in the top half of the scrollable element,
@@ -181,7 +181,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       placement: translateRTL(placement, direction),
       overlayNode: overlayRef.current,
       targetNode: targetRef.current,
-      scrollNode: scrollRef.current,
+      scrollNode: scrollRef.current || overlayRef.current,
       padding: containerPadding,
       shouldFlip,
       boundaryElement,

packages/@react-spectrum/tree/src/TreeView.tsx

@@ -38,7 +38,7 @@ export interface SpectrumTreeViewProps<T> extends Omit<AriaTreeGridListProps<T>,
   children?: ReactNode | ((item: T) => ReactNode)
 }
 
-export interface SpectrumTreeViewItemProps<T extends object = object> extends Omit<TreeItemProps, 'className' | 'style' | 'value'> {
+export interface SpectrumTreeViewItemProps<T extends object = object> extends Omit<TreeItemProps, 'className' | 'style' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'> {
   /** Rendered contents of the tree item or child items. */
   children: ReactNode,
   /** Whether this item has children, even if not loaded yet. */

scripts/buildI18n.js

@@ -137,6 +137,6 @@ export declare function createLocalizedStringDictionary(packages: string[]): Loc
 `);
 }
 
-build('{@react-aria,@react-stately,@react-spectrum}/*', '@adobe/react-spectrum');
+build('{@react-aria/*,@react-stately/*,@react-spectrum/*,react-aria-components}', '@adobe/react-spectrum');
 build('{@react-aria/*,@react-stately/*,react-aria-components}', 'react-aria-components');
 build('{@react-aria,@react-stately}/*', 'react-aria');