@react-aria/utils 3.21.1 → 3.23.0

package/src/getScrollParent.ts

@@ -10,19 +10,25 @@
  * governing permissions and limitations under the License.
  */
 
-export function getScrollParent(node: Element): Element {
-  if (isScrollable(node)) {
+export function getScrollParent(node: Element, checkForOverflow?: boolean): Element {
+  if (isScrollable(node, checkForOverflow)) {
     node = node.parentElement;
   }
 
-  while (node && !isScrollable(node)) {
+  while (node && !isScrollable(node, checkForOverflow)) {
     node = node.parentElement;
   }
 
   return node || document.scrollingElement || document.documentElement;
 }
 
-export function isScrollable(node: Element): boolean {
+export function isScrollable(node: Element, checkForOverflow?: boolean): boolean {
   let style = window.getComputedStyle(node);
-  return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+  let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+
+  if (isScrollable && checkForOverflow) {
+    isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+  }
+
+  return isScrollable;
 }

package/src/index.ts

@@ -11,6 +11,7 @@
  */
 export {useId, mergeIds, useSlotId} from './useId';
 export {chain} from './chain';
+export {getOwnerDocument, getOwnerWindow} from './domHelpers';
 export {mergeProps} from './mergeProps';
 export {mergeRefs} from './mergeRefs';
 export {filterDOMProps} from './filterDOMProps';
@@ -29,7 +30,7 @@ export {useSyncRef} from './useSyncRef';
 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 {isMac, isIPhone, isIPad, isIOS, isAppleDevice, isWebKit, isChrome, isAndroid, isFirefox} from './platform';
 export {useEvent} from './useEvent';
 export {useValueEffect} from './useValueEffect';
 export {scrollIntoView, scrollIntoViewport} from './scrollIntoView';

package/src/useDescription.ts

@@ -17,7 +17,7 @@ import {useState} from 'react';
 let descriptionId = 0;
 const descriptionNodes = new Map<string, {refCount: number, element: Element}>();
 
-export function useDescription(description: string): AriaLabelingProps {
+export function useDescription(description?: string): AriaLabelingProps {
   let [id, setId] = useState(undefined);
 
   useLayoutEffect(() => {

package/src/useEffectEvent.ts

@@ -13,13 +13,14 @@
 import {useCallback, useRef} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 
-export function useEffectEvent(fn) {
-  const ref = useRef(null);
+export function useEffectEvent<T extends Function>(fn: T): T {
+  const ref = useRef<T | null>(null);
   useLayoutEffect(() => {
     ref.current = fn;
   }, [fn]);
-  return useCallback((...args) => {
-    const f = ref.current;
+  // @ts-ignore
+  return useCallback<T>((...args) => {
+    const f = ref.current!;
     return f(...args);
   }, []);
 }

package/src/useEvent.ts

@@ -16,7 +16,7 @@ import {useEffectEvent} from './useEffectEvent';
 export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
   ref: RefObject<EventTarget>,
   event: K,
-  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ) {
   let handleEvent = useEffectEvent(handler);

package/src/useId.ts

@@ -15,6 +15,13 @@ import {useLayoutEffect} from './useLayoutEffect';
 import {useSSRSafeId} from '@react-aria/ssr';
 import {useValueEffect} from './';
 
+// copied from SSRProvider.tsx to reduce exports, if needed again, consider sharing
+let canUseDOM = Boolean(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
 let idsUpdaterMap: Map<string, (v: string) => void> = new Map();
 
 /**
@@ -31,7 +38,9 @@ export function useId(defaultId?: string): string {
     nextId.current = val;
   }, []);
 
-  idsUpdaterMap.set(res, updateValue);
+  if (canUseDOM) {
+    idsUpdaterMap.set(res, updateValue);
+  }
 
   useLayoutEffect(() => {
     let r = res;

package/src/useSyncRef.ts

@@ -18,7 +18,7 @@ interface ContextValue<T> {
 }
 
 // Syncs ref from context with ref passed to hook
-export function useSyncRef<T>(context: ContextValue<T>, ref: RefObject<T>) {
+export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T>) {
   useLayoutEffect(() => {
     if (context && context.ref && ref) {
       context.ref.current = ref.current;