@react-aria/disclosure - npm Package Compare versions

Comparing version 3.0.0-nightly-db60babaf-241014 to 3.0.0-nightly-dcc0752f8-241031

dist/types.d.ts

@@ -26,4 +26,4 @@ import { AriaButtonProps } from "@react-types/button";
  */
-export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref?: RefObject<Element | null>): DisclosureAria;
+export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref: RefObject<Element | null>): DisclosureAria;
 
 //# sourceMappingURL=types.d.ts.map

dist/useDisclosure.main.js

@@ -0,1 +1,2 @@
+var $l3cx6$reactdom = require("react-dom");
 var $l3cx6$react = require("react");
@@ -24,2 +25,3 @@ var $l3cx6$reactariautils = require("@react-aria/utils");
 
+
 function $ef53cd1bcef2de68$export$6e3e27031a30522f(props, state, ref) {
@@ -29,10 +31,25 @@ let { isDisabled: isDisabled } = props;
     let contentId = (0, $l3cx6$reactariautils.useId)();
-    let isControlled = props.isExpanded !== undefined;
     let isSSR = (0, $l3cx6$reactariassr.useIsSSR)();
     let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
+    let raf = (0, $l3cx6$react.useRef)(null);
+    let handleBeforeMatch = (0, $l3cx6$react.useCallback)(()=>{
+        // Wait a frame to revert browser's removal of hidden attribute
+        raf.current = requestAnimationFrame(()=>{
+            if (ref.current) ref.current.setAttribute('hidden', 'until-found');
+        });
+        // Force sync state update
+        (0, $l3cx6$reactdom.flushSync)(()=>{
+            state.toggle();
+        });
+    }, [
+        ref,
+        state
+    ]);
     // @ts-ignore https://github.com/facebook/react/pull/24741
-    (0, $l3cx6$reactariautils.useEvent)(ref, 'beforematch', supportsBeforeMatch && !isControlled ? ()=>state.expand() : null);
-    (0, $l3cx6$react.useEffect)(()=>{
+    (0, $l3cx6$reactariautils.useEvent)(ref, 'beforematch', supportsBeforeMatch ? handleBeforeMatch : null);
+    (0, $l3cx6$reactariautils.useLayoutEffect)(()=>{
+        // Cancel any pending RAF to prevent stale updates
+        if (raf.current) cancelAnimationFrame(raf.current);
         // Until React supports hidden="until-found": https://github.com/facebook/react/pull/24741
-        if (supportsBeforeMatch && (ref === null || ref === void 0 ? void 0 : ref.current) && !isControlled && !isDisabled) {
+        if (supportsBeforeMatch && ref.current && !isDisabled) {
             if (state.isExpanded) ref.current.removeAttribute('hidden');
@@ -42,9 +59,12 @@ else ref.current.setAttribute('hidden', 'until-found');
     }, [
-        isControlled,
+        isDisabled,
         ref,
-        props.isExpanded,
-        state,
-        supportsBeforeMatch,
-        isDisabled
+        state.isExpanded,
+        supportsBeforeMatch
     ]);
+    (0, $l3cx6$react.useEffect)(()=>{
+        return ()=>{
+            if (raf.current) cancelAnimationFrame(raf.current);
+        };
+    }, []);
     return {
@@ -59,7 +79,4 @@ buttonProps: {
             isDisabled: isDisabled,
-            onKeyDown (e) {
-                if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    state.toggle();
-                }
+            onPressStart (e) {
+                if (e.pointerType === 'keyboard' && !isDisabled) state.toggle();
             }
@@ -72,3 +89,4 @@ },
             'aria-labelledby': triggerId,
-            hidden: !supportsBeforeMatch || isControlled ? !state.isExpanded : true
+            'aria-hidden': !state.isExpanded,
+            hidden: supportsBeforeMatch ? true : !state.isExpanded
         }
@@ -75,0 +93,0 @@ };

dist/useDisclosure.module.js

@@ -1,3 +0,4 @@
-import {useEffect as $6wN6e$useEffect} from "react";
-import {useId as $6wN6e$useId, useEvent as $6wN6e$useEvent} from "@react-aria/utils";
+import {flushSync as $6wN6e$flushSync} from "react-dom";
+import {useRef as $6wN6e$useRef, useCallback as $6wN6e$useCallback, useEffect as $6wN6e$useEffect} from "react";
+import {useId as $6wN6e$useId, useEvent as $6wN6e$useEvent, useLayoutEffect as $6wN6e$useLayoutEffect} from "@react-aria/utils";
 import {useIsSSR as $6wN6e$useIsSSR} from "@react-aria/ssr";
@@ -18,2 +19,3 @@
 
+
 function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
@@ -23,10 +25,25 @@ let { isDisabled: isDisabled } = props;
     let contentId = (0, $6wN6e$useId)();
-    let isControlled = props.isExpanded !== undefined;
     let isSSR = (0, $6wN6e$useIsSSR)();
     let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
+    let raf = (0, $6wN6e$useRef)(null);
+    let handleBeforeMatch = (0, $6wN6e$useCallback)(()=>{
+        // Wait a frame to revert browser's removal of hidden attribute
+        raf.current = requestAnimationFrame(()=>{
+            if (ref.current) ref.current.setAttribute('hidden', 'until-found');
+        });
+        // Force sync state update
+        (0, $6wN6e$flushSync)(()=>{
+            state.toggle();
+        });
+    }, [
+        ref,
+        state
+    ]);
     // @ts-ignore https://github.com/facebook/react/pull/24741
-    (0, $6wN6e$useEvent)(ref, 'beforematch', supportsBeforeMatch && !isControlled ? ()=>state.expand() : null);
-    (0, $6wN6e$useEffect)(()=>{
+    (0, $6wN6e$useEvent)(ref, 'beforematch', supportsBeforeMatch ? handleBeforeMatch : null);
+    (0, $6wN6e$useLayoutEffect)(()=>{
+        // Cancel any pending RAF to prevent stale updates
+        if (raf.current) cancelAnimationFrame(raf.current);
         // Until React supports hidden="until-found": https://github.com/facebook/react/pull/24741
-        if (supportsBeforeMatch && (ref === null || ref === void 0 ? void 0 : ref.current) && !isControlled && !isDisabled) {
+        if (supportsBeforeMatch && ref.current && !isDisabled) {
             if (state.isExpanded) ref.current.removeAttribute('hidden');
@@ -36,9 +53,12 @@ else ref.current.setAttribute('hidden', 'until-found');
     }, [
-        isControlled,
+        isDisabled,
         ref,
-        props.isExpanded,
-        state,
-        supportsBeforeMatch,
-        isDisabled
+        state.isExpanded,
+        supportsBeforeMatch
     ]);
+    (0, $6wN6e$useEffect)(()=>{
+        return ()=>{
+            if (raf.current) cancelAnimationFrame(raf.current);
+        };
+    }, []);
     return {
@@ -53,7 +73,4 @@ buttonProps: {
             isDisabled: isDisabled,
-            onKeyDown (e) {
-                if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    state.toggle();
-                }
+            onPressStart (e) {
+                if (e.pointerType === 'keyboard' && !isDisabled) state.toggle();
             }
@@ -66,3 +83,4 @@ },
             'aria-labelledby': triggerId,
-            hidden: !supportsBeforeMatch || isControlled ? !state.isExpanded : true
+            'aria-hidden': !state.isExpanded,
+            hidden: supportsBeforeMatch ? true : !state.isExpanded
         }
@@ -69,0 +87,0 @@ };

package.json

 {
   "name": "@react-aria/disclosure",
-  "version": "3.0.0-nightly-db60babaf-241014",
+  "version": "3.0.0-nightly-dcc0752f8-241031",
   "description": "Spectrum UI components in React",
@@ -25,11 +25,11 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/button": "^3.0.0-nightly-db60babaf-241014",
-    "@react-aria/selection": "^3.0.0-nightly-db60babaf-241014",
-    "@react-aria/ssr": "^3.0.0-nightly-db60babaf-241014",
-    "@react-aria/utils": "^3.0.0-nightly-db60babaf-241014",
-    "@react-stately/disclosure": "3.0.0-nightly-db60babaf-241014",
-    "@react-stately/toggle": "^3.0.0-nightly-db60babaf-241014",
-    "@react-stately/tree": "^3.0.0-nightly-db60babaf-241014",
-    "@react-types/button": "^3.0.0-nightly-db60babaf-241014",
-    "@react-types/shared": "^3.0.0-nightly-db60babaf-241014",
+    "@react-aria/button": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-aria/selection": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-aria/ssr": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-aria/utils": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-stately/disclosure": "3.0.0-nightly-dcc0752f8-241031",
+    "@react-stately/toggle": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-stately/tree": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-types/button": "^3.0.0-nightly-dcc0752f8-241031",
+    "@react-types/shared": "^3.0.0-nightly-dcc0752f8-241031",
     "@swc/helpers": "^0.5.0"
@@ -44,3 +44,3 @@ },
   },
-  "stableVersion": "3.0.0-alpha.0"
+  "stableVersion": "3.0.0-alpha.1"
 }

src/useDisclosure.ts

@@ -15,4 +15,5 @@ /*
 import {DisclosureState} from '@react-stately/disclosure';
-import {HTMLAttributes, RefObject, useEffect} from 'react';
-import {useEvent, useId} from '@react-aria/utils';
+import {flushSync} from 'react-dom';
+import {HTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';
+import {useEvent, useId, useLayoutEffect} from '@react-aria/utils';
 import {useIsSSR} from '@react-aria/ssr';
@@ -44,3 +45,3 @@
  */
-export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref?: RefObject<Element | null>): DisclosureAria {
+export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref: RefObject<Element | null>): DisclosureAria {
   let {
@@ -51,12 +52,30 @@ isDisabled
   let contentId = useId();
-  let isControlled = props.isExpanded !== undefined;
   let isSSR = useIsSSR();
   let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
 
+  let raf = useRef<number | null>(null);
+
+  let handleBeforeMatch = useCallback(() => {
+    // Wait a frame to revert browser's removal of hidden attribute
+    raf.current = requestAnimationFrame(() => {
+      if (ref.current) {
+        ref.current.setAttribute('hidden', 'until-found');
+      }
+    });
+    // Force sync state update
+    flushSync(() => {
+      state.toggle();
+    });
+  }, [ref, state]);
+
   // @ts-ignore https://github.com/facebook/react/pull/24741
-  useEvent(ref, 'beforematch', supportsBeforeMatch && !isControlled ? () => state.expand() : null);
+  useEvent(ref, 'beforematch', supportsBeforeMatch ? handleBeforeMatch : null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    // Cancel any pending RAF to prevent stale updates
+    if (raf.current) {
+      cancelAnimationFrame(raf.current);
+    }
     // Until React supports hidden="until-found": https://github.com/facebook/react/pull/24741
-    if (supportsBeforeMatch && ref?.current && !isControlled && !isDisabled) {
+    if (supportsBeforeMatch && ref.current && !isDisabled) {
       if (state.isExpanded) {
@@ -68,4 +87,12 @@ ref.current.removeAttribute('hidden');
     }
-  }, [isControlled, ref, props.isExpanded, state, supportsBeforeMatch, isDisabled]);
+  }, [isDisabled, ref, state.isExpanded, supportsBeforeMatch]);
 
+  useEffect(() => {
+    return () => {
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+      }
+    };
+  }, []);
+
   return {
@@ -82,5 +109,4 @@ buttonProps: {
       isDisabled,
-      onKeyDown(e) {
-        if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-          e.preventDefault();
+      onPressStart(e) {
+        if (e.pointerType === 'keyboard' && !isDisabled) {
           state.toggle();
@@ -95,5 +121,6 @@ }
       'aria-labelledby': triggerId,
-      hidden: (!supportsBeforeMatch || isControlled) ? !state.isExpanded : true
+      'aria-hidden': !state.isExpanded,
+      hidden: supportsBeforeMatch ? true : !state.isExpanded
     }
   };
 }

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

35518

increased by14.11%

Number of low license alerts

3

decreased by-40%

License quality

80

increased by33.33%

Lines of code

441

increased by20.49%

Dependency changes

• + Added@react-stately/disclosure@3.0.0-nightly-dcc0752f8-241031(transitive)

• - Removed@react-stately/disclosure@3.0.0-nightly-db60babaf-241014(transitive)

• Updated@react-aria/button@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-aria/selection@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-aria/ssr@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-aria/utils@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-stately/disclosure@3.0.0-nightly-dcc0752f8-241031

• Updated@react-stately/toggle@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-stately/tree@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-types/button@^3.0.0-nightly-dcc0752f8-241031

• Updated@react-types/shared@^3.0.0-nightly-dcc0752f8-241031