@react-aria/utils 3.14.2 → 3.16.0

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/utils",
-  "version": "3.14.2",
+  "version": "3.16.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -17,9 +22,9 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/ssr": "^3.4.1",
-    "@react-stately/utils": "^3.5.2",
-    "@react-types/shared": "^3.16.0",
+    "@react-aria/ssr": "^3.6.0",
+    "@react-stately/utils": "^3.6.0",
+    "@react-types/shared": "^3.18.0",
     "@swc/helpers": "^0.4.14",
     "clsx": "^1.1.1"
   },
@@ -29,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5480d76bd815e239366f92852c76b6831ad2a4fd"
+  "gitHead": "9d1ba9bd8ebcd63bf3495ade16d349bcb71795ce"
 }

package/src/getScrollParent.ts

@@ -11,6 +11,10 @@
  */
 
 export function getScrollParent(node: Element): Element {
+  if (isScrollable(node)) {
+    node = node.parentElement;
+  }
+
   while (node && !isScrollable(node)) {
     node = node.parentElement;
   }
@@ -18,7 +22,7 @@ export function getScrollParent(node: Element): Element {
   return node || document.scrollingElement || document.documentElement;
 }
 
-function isScrollable(node: Element): boolean {
+export function isScrollable(node: Element): boolean {
   let style = window.getComputedStyle(node);
   return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
 }

package/src/index.ts

@@ -25,12 +25,12 @@ export {useUpdateEffect} from './useUpdateEffect';
 export {useLayoutEffect} from './useLayoutEffect';
 export {useResizeObserver} from './useResizeObserver';
 export {useSyncRef} from './useSyncRef';
-export {getScrollParent} from './getScrollParent';
+export {getScrollParent, isScrollable} from './getScrollParent';
 export {useViewportSize} from './useViewportSize';
 export {useDescription} from './useDescription';
 export {isMac, isIPhone, isIPad, isIOS, isAppleDevice, isWebKit, isChrome, isAndroid} from './platform';
 export {useEvent} from './useEvent';
 export {useValueEffect} from './useValueEffect';
-export {scrollIntoView} from './scrollIntoView';
+export {scrollIntoView, scrollIntoViewport} from './scrollIntoView';
 export {clamp, snapValueToStep} from '@react-stately/utils';
 export {isVirtualClick, isVirtualPointerEvent} from './isVirtualEvent';

package/src/mergeProps.ts

@@ -18,8 +18,11 @@ interface Props {
   [key: string]: any
 }
 
+type PropsArg = Props | null | undefined;
+
 // taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
-type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? V : never;
+type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? NullToObject<V> : never;
+type NullToObject<T> = T extends (null | undefined) ? {} : T;
 // eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
 
@@ -30,7 +33,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */
-export function mergeProps<T extends Props[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
+export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
   // Start with a base clone of the first argument. This is a lot faster than starting
   // with an empty object and adding properties as we go.
   let result: Props = {...args[0]};

package/src/mergeRefs.ts

@@ -16,6 +16,10 @@ import {ForwardedRef} from 'react';
  * Merges multiple refs into one. Works with either callback or object refs.
  */
 export function mergeRefs<T>(...refs: ForwardedRef<T>[]): ForwardedRef<T> {
+  if (refs.length === 1) {
+    return refs[0];
+  }
+
   return (value: T) => {
     for (let ref of refs) {
       if (typeof ref === 'function') {

package/src/scrollIntoView.ts

@@ -10,6 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {getScrollParent} from './';
+
+interface ScrollIntoViewportOpts {
+  /** The optional containing element of the target to be centered in the viewport. */
+  containingElement?: Element
+}
+
 /**
  * Scrolls `scrollView` so that `element` is visible.
  * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
@@ -22,20 +29,25 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
   let height = element.offsetHeight;
   let x = scrollView.scrollLeft;
   let y = scrollView.scrollTop;
-  let maxX = x + scrollView.offsetWidth;
-  let maxY = y + scrollView.offsetHeight;
+
+  // Account for top/left border offsetting the scroll top/Left
+  let {borderTopWidth, borderLeftWidth} = getComputedStyle(scrollView);
+  let borderAdjustedX = scrollView.scrollLeft + parseInt(borderLeftWidth, 10);
+  let borderAdjustedY = scrollView.scrollTop + parseInt(borderTopWidth, 10);
+  // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
+  let maxX = borderAdjustedX + scrollView.clientWidth;
+  let maxY = borderAdjustedY + scrollView.clientHeight;
 
   if (offsetX <= x) {
-    x = offsetX;
+    x = offsetX - parseInt(borderLeftWidth, 10);
   } else if (offsetX + width > maxX) {
     x += offsetX + width - maxX;
   }
-  if (offsetY <= y) {
-    y = offsetY;
+  if (offsetY <= borderAdjustedY) {
+    y = offsetY - parseInt(borderTopWidth, 10);
   } else if (offsetY + height > maxY) {
     y += offsetY + height - maxY;
   }
-
   scrollView.scrollLeft = x;
   scrollView.scrollTop = y;
 }
@@ -63,3 +75,37 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
   }
   return sum;
 }
+
+/**
+ * Scrolls the `targetElement` so it is visible in the viewport. Accepts an optional `opts.containingElement`
+ * that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on
+ * the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.
+ */
+export function scrollIntoViewport(targetElement: Element, opts?: ScrollIntoViewportOpts) {
+  if (document.contains(targetElement)) {
+    let root = document.scrollingElement || document.documentElement;
+    let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
+    // If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
+    if (!isScrollPrevented) {
+      let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
+
+      // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
+      // won't cause a scroll if the element is already focused and doesn't behave consistently when an element is partially out of view horizontally vs vertically
+      targetElement?.scrollIntoView?.({block: 'nearest'});
+      let {left: newLeft, top: newTop} = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) {
+        opts?.containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
+        targetElement.scrollIntoView?.({block: 'nearest'});
+      }
+    } else {
+      let scrollParent = getScrollParent(targetElement);
+      // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
+      while (targetElement && scrollParent && targetElement !== root && scrollParent !== root) {
+        scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
+        targetElement = scrollParent;
+        scrollParent = getScrollParent(targetElement);
+      }
+    }
+  }
+}

package/src/useObjectRef.ts

@@ -40,6 +40,14 @@ export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) |
     } else {
       forwardedRef.current = objRef.current;
     }
+
+    return () => {
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(null);
+      } else {
+        forwardedRef.current = null;
+      }
+    };
   }, [forwardedRef]);
 
   return objRef;