@react-aria/utils 3.26.0 → 3.27.0

package/src/animation.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {flushSync} from 'react-dom';
+import {RefObject, useCallback, useState} from 'react';
+import {useLayoutEffect} from './useLayoutEffect';
+
+export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady: boolean = true) {
+  let [isEntering, setEntering] = useState(true);
+  let isAnimationReady = isEntering && isReady;
+  
+  // There are two cases for entry animations:
+  // 1. CSS @keyframes. The `animation` property is set during the isEntering state, and it is removed after the animation finishes.
+  // 2. CSS transitions. The initial styles are applied during the isEntering state, and removed immediately, causing the transition to occur.
+  //
+  // In the second case, cancel any transitions that were triggered prior to the isEntering = false state (when the transition is supposed to start).
+  // This can happen when isReady starts as false (e.g. popovers prior to placement calculation).
+  useLayoutEffect(() => {
+    if (isAnimationReady && ref.current && 'getAnimations' in ref.current) {
+      for (let animation of ref.current.getAnimations()) {
+        if (animation instanceof CSSTransition) {
+          animation.cancel();
+        }
+      }
+    }
+  }, [ref, isAnimationReady]);
+
+  useAnimation(ref, isAnimationReady, useCallback(() => setEntering(false), []));
+  return isAnimationReady;
+}
+
+export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boolean) {
+  let [exitState, setExitState] = useState<'closed' | 'open' | 'exiting'>(isOpen ? 'open' : 'closed');
+
+  switch (exitState) {
+    case 'open':
+      // If isOpen becomes false, set the state to exiting.
+      if (!isOpen) {
+        setExitState('exiting');
+      }
+      break;
+    case 'closed':
+    case 'exiting':
+      // If we are exiting and isOpen becomes true, the animation was interrupted.
+      // Reset the state to open.
+      if (isOpen) {
+        setExitState('open');
+      }
+      break;
+  }
+
+  let isExiting = exitState === 'exiting';
+  useAnimation(
+    ref,
+    isExiting,
+    useCallback(() => {
+      // Set the state to closed, which will cause the element to be unmounted.
+      setExitState(state => state === 'exiting' ? 'closed' : state);
+    }, [])
+  );
+
+  return isExiting;
+}
+
+function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onEnd: () => void) {
+  useLayoutEffect(() => {
+    if (isActive && ref.current) {
+      if (!('getAnimations' in ref.current)) {
+        // JSDOM
+        onEnd();
+        return;
+      }
+      
+      let animations = ref.current.getAnimations();
+      if (animations.length === 0) {
+        onEnd();
+        return;
+      }
+
+      let canceled = false;
+      Promise.all(animations.map(a => a.finished)).then(() => {
+        if (!canceled) {
+          flushSync(() => {
+            onEnd();
+          });
+        }
+      }).catch(() => {});
+      
+      return () => {
+        canceled = true;
+      };
+    }
+  }, [ref, isActive, onEnd]);
+}

package/src/constants.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Custom event names for updating the autocomplete's aria-activedecendant.
+export const CLEAR_FOCUS_EVENT = 'react-aria-clear-focus';
+export const FOCUS_EVENT = 'react-aria-focus';
+export const UPDATE_ACTIVEDESCENDANT = 'react-aria-update-activedescendant';

package/src/index.ts

@@ -24,6 +24,7 @@ export {useGlobalListeners} from './useGlobalListeners';
 export {useLabels} from './useLabels';
 export {useObjectRef} from './useObjectRef';
 export {useUpdateEffect} from './useUpdateEffect';
+export {useUpdateLayoutEffect} from './useUpdateLayoutEffect';
 export {useLayoutEffect} from './useLayoutEffect';
 export {useResizeObserver} from './useResizeObserver';
 export {useSyncRef} from './useSyncRef';
@@ -42,3 +43,6 @@ export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
 export {useLoadMore} from './useLoadMore';
+export {CLEAR_FOCUS_EVENT, FOCUS_EVENT, UPDATE_ACTIVEDESCENDANT} from './constants';
+export {isCtrlKeyPressed} from './keyboard';
+export {useEnterAnimation, useExitAnimation} from './animation';

package/src/keyboard.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {isMac} from './platform';
+
+interface Event {
+  altKey: boolean,
+  ctrlKey: boolean,
+  metaKey: boolean
+}
+
+export function isCtrlKeyPressed(e: Event) {
+  if (isMac()) {
+    return e.metaKey;
+  }
+
+  return e.ctrlKey;
+}

package/src/scrollIntoView.ts

@@ -30,24 +30,40 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
   let x = scrollView.scrollLeft;
   let y = scrollView.scrollTop;
 
-  // 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);
+  // Account for top/left border offsetting the scroll top/Left + scroll padding
+  let {
+    borderTopWidth,
+    borderLeftWidth,
+    scrollPaddingTop,
+    scrollPaddingRight,
+    scrollPaddingBottom,
+    scrollPaddingLeft
+  } = getComputedStyle(scrollView);
+
+  let borderAdjustedX = x + parseInt(borderLeftWidth, 10);
+  let borderAdjustedY = y + 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 - parseInt(borderLeftWidth, 10);
-  } else if (offsetX + width > maxX) {
-    x += offsetX + width - maxX;
+  // Get scroll padding values as pixels - defaults to 0 if no scroll padding
+  // is used.
+  let scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0;
+  let scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0;
+  let scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0;
+  let scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
+
+  if (offsetX <= x + scrollPaddingLeftNumber) {
+    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
+    x += offsetX + width - maxX + scrollPaddingRightNumber;
   }
-  if (offsetY <= borderAdjustedY) {
-    y = offsetY - parseInt(borderTopWidth, 10);
-  } else if (offsetY + height > maxY) {
-    y += offsetY + height - maxY;
+  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
+    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
+    y += offsetY + height - maxY + scrollPaddingBottomNumber;
   }
+
   scrollView.scrollLeft = x;
   scrollView.scrollTop = y;
 }

package/src/useGlobalListeners.ts

@@ -29,7 +29,7 @@ export function useGlobalListeners(): GlobalListeners {
       listener(...args);
     } : listener;
     globalListeners.current.set(listener, {type, eventTarget, fn, options});
-    eventTarget.addEventListener(type, listener, options);
+    eventTarget.addEventListener(type, fn, options);
   }, []);
   let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
     let fn = globalListeners.current.get(listener)?.fn || listener;

package/src/useUpdateLayoutEffect.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {EffectCallback, useRef} from 'react';
+import {useLayoutEffect} from './useLayoutEffect';
+
+// Like useLayoutEffect, but only called for updates after the initial render.
+export function useUpdateLayoutEffect(effect: EffectCallback, dependencies: any[]) {
+  const isInitialMount = useRef(true);
+  const lastDeps = useRef<any[] | null>(null);
+
+  useLayoutEffect(() => {
+    isInitialMount.current = true;
+    return () => {
+      isInitialMount.current = false;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else if (!lastDeps.current || dependencies.some((dep, i) => !Object.is(dep, lastDeps[i]))) {
+      effect();
+    }
+    lastDeps.current = dependencies;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+}