@react-aria/disclosure - npm Package Compare versions

Comparing version 3.0.0-nightly-987f174ba-241015 to 3.0.0-nightly-993de98ad-241210

dist/types.d.ts

@@ -24,6 +24,6 @@ import { AriaButtonProps } from "@react-types/button";
  * @param state - State for the disclosure, as returned by `useDisclosureState`.
- * @param ref - A ref for the disclosure content.
+ * @param ref - A ref for the disclosure panel.
  */
-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,14 +25,30 @@ var $l3cx6$reactariautils = require("@react-aria/utils");
 
+
 function $ef53cd1bcef2de68$export$6e3e27031a30522f(props, state, ref) {
     let { isDisabled: isDisabled } = props;
     let triggerId = (0, $l3cx6$reactariautils.useId)();
-    let contentId = (0, $l3cx6$reactariautils.useId)();
-    let isControlled = props.isExpanded !== undefined;
+    let panelId = (0, $l3cx6$reactariautils.useId)();
     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');
@@ -41,9 +58,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 {
@@ -53,3 +73,3 @@ buttonProps: {
             'aria-expanded': state.isExpanded,
-            'aria-controls': contentId,
+            'aria-controls': panelId,
             onPress: (e)=>{
@@ -59,15 +79,13 @@ if (!isDisabled && e.pointerType !== 'keyboard') state.toggle();
             isDisabled: isDisabled,
-            onKeyDown (e) {
-                if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    state.toggle();
-                }
+            onPressStart (e) {
+                if (e.pointerType === 'keyboard' && !isDisabled) state.toggle();
             }
         },
         panelProps: {
-            id: contentId,
+            id: panelId,
             // This can be overridden at the panel element level.
             role: 'group',
             'aria-labelledby': triggerId,
-            hidden: !supportsBeforeMatch || isControlled ? !state.isExpanded : true
+            'aria-hidden': !state.isExpanded,
+            hidden: supportsBeforeMatch ? true : !state.isExpanded
         }
@@ -74,0 +92,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,14 +19,30 @@
 
+
 function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
     let { isDisabled: isDisabled } = props;
     let triggerId = (0, $6wN6e$useId)();
-    let contentId = (0, $6wN6e$useId)();
-    let isControlled = props.isExpanded !== undefined;
+    let panelId = (0, $6wN6e$useId)();
     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');
@@ -35,9 +52,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 {
@@ -47,3 +67,3 @@ buttonProps: {
             'aria-expanded': state.isExpanded,
-            'aria-controls': contentId,
+            'aria-controls': panelId,
             onPress: (e)=>{
@@ -53,15 +73,13 @@ if (!isDisabled && e.pointerType !== 'keyboard') state.toggle();
             isDisabled: isDisabled,
-            onKeyDown (e) {
-                if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    state.toggle();
-                }
+            onPressStart (e) {
+                if (e.pointerType === 'keyboard' && !isDisabled) state.toggle();
             }
         },
         panelProps: {
-            id: contentId,
+            id: panelId,
             // This can be overridden at the panel element level.
             role: 'group',
             'aria-labelledby': triggerId,
-            hidden: !supportsBeforeMatch || isControlled ? !state.isExpanded : true
+            'aria-hidden': !state.isExpanded,
+            hidden: supportsBeforeMatch ? true : !state.isExpanded
         }
@@ -68,0 +86,0 @@ };

package.json

 {
   "name": "@react-aria/disclosure",
-  "version": "3.0.0-nightly-987f174ba-241015",
+  "version": "3.0.0-nightly-993de98ad-241210",
   "description": "Spectrum UI components in React",
@@ -25,16 +25,11 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/button": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/selection": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/ssr": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/utils": "^3.0.0-nightly-987f174ba-241015",
-    "@react-stately/disclosure": "3.0.0-nightly-987f174ba-241015",
-    "@react-stately/toggle": "^3.0.0-nightly-987f174ba-241015",
-    "@react-stately/tree": "^3.0.0-nightly-987f174ba-241015",
-    "@react-types/button": "^3.0.0-nightly-987f174ba-241015",
-    "@react-types/shared": "^3.0.0-nightly-987f174ba-241015",
+    "@react-aria/ssr": "^3.0.0-nightly-993de98ad-241210",
+    "@react-aria/utils": "^3.0.0-nightly-993de98ad-241210",
+    "@react-stately/disclosure": "^3.0.0-nightly-993de98ad-241210",
+    "@react-types/button": "^3.0.0-nightly-993de98ad-241210",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -44,3 +39,3 @@ "publishConfig": {
   },
-  "stableVersion": "3.0.0-alpha.1"
+  "stableVersion": "3.0.0"
 }

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';
@@ -42,5 +43,5 @@
  * @param state - State for the disclosure, as returned by `useDisclosureState`.
- * @param ref - A ref for the disclosure content.
+ * @param ref - A ref for the disclosure panel.
  */
-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 {
@@ -50,13 +51,31 @@ isDisabled
   let triggerId = useId();
-  let contentId = useId();
-  let isControlled = props.isExpanded !== undefined;
+  let panelId = useId();
   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 {
@@ -75,3 +102,3 @@ buttonProps: {
       'aria-expanded': state.isExpanded,
-      'aria-controls': contentId,
+      'aria-controls': panelId,
       onPress: (e) => {
@@ -83,5 +110,4 @@ if (!isDisabled && e.pointerType !== 'keyboard') {
       isDisabled,
-      onKeyDown(e) {
-        if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
-          e.preventDefault();
+      onPressStart(e) {
+        if (e.pointerType === 'keyboard' && !isDisabled) {
           state.toggle();
@@ -92,9 +118,10 @@ }
     panelProps: {
-      id: contentId,
+      id: panelId,
       // This can be overridden at the panel element level.
       role: 'group',
       'aria-labelledby': triggerId,
-      hidden: (!supportsBeforeMatch || isControlled) ? !state.isExpanded : true
+      'aria-hidden': !state.isExpanded,
+      hidden: supportsBeforeMatch ? true : !state.isExpanded
     }
   };
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

35164

increased by12.98%

Dependency count

7

decreased by-41.67%

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(transitive)

• - Removed@react-aria/button@^3.0.0-nightly-987f174ba-241015

• - Removed@react-aria/selection@^3.0.0-nightly-987f174ba-241015

• - Removed@react-stately/toggle@^3.0.0-nightly-987f174ba-241015

• - Removed@react-stately/tree@^3.0.0-nightly-987f174ba-241015

• - Removed@react-types/shared@^3.0.0-nightly-987f174ba-241015

• - Removed@formatjs/ecma402-abstract@2.3.1(transitive)

• - Removed@formatjs/fast-memoize@2.2.5(transitive)

• - Removed@formatjs/icu-messageformat-parser@2.9.7(transitive)

• - Removed@formatjs/icu-skeleton-parser@1.8.11(transitive)

• - Removed@formatjs/intl-localematcher@0.5.9(transitive)

• - Removed@internationalized/date@3.6.0(transitive)

• - Removed@internationalized/message@3.1.6(transitive)

• - Removed@internationalized/number@3.6.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-aria/button@3.11.0(transitive)

• - Removed@react-aria/focus@3.19.0(transitive)

• - Removed@react-aria/i18n@3.12.4(transitive)

• - Removed@react-aria/interactions@3.22.5(transitive)

• - Removed@react-aria/selection@3.21.0(transitive)

• - Removed@react-aria/toolbar@3.0.0-beta.11(transitive)

• - Removed@react-stately/collections@3.12.0(transitive)

• - Removed@react-stately/disclosure@3.0.0-nightly-987f174ba-241015(transitive)

• - Removed@react-stately/selection@3.18.0(transitive)

• - Removed@react-stately/toggle@3.8.0(transitive)

• - Removed@react-stately/tree@3.8.6(transitive)

• - Removed@react-types/checkbox@3.9.0(transitive)

• - Removeddecimal.js@10.4.3(transitive)

• - Removedintl-messageformat@10.7.10(transitive)

• Updated@react-aria/ssr@^3.0.0-nightly-993de98ad-241210

• Updated@react-aria/utils@^3.0.0-nightly-993de98ad-241210

• Updated@react-stately/disclosure@^3.0.0-nightly-993de98ad-241210

• Updated@react-types/button@^3.0.0-nightly-993de98ad-241210