diff --git a/.changeset/tasty-drinks-invent.md b/.changeset/tasty-drinks-invent.md new file mode 100644 index 000000000..d88a8926e --- /dev/null +++ b/.changeset/tasty-drinks-invent.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fix content visibility in Disclosure. diff --git a/src/components/actions/ItemButton/ItemButton.tsx b/src/components/actions/ItemButton/ItemButton.tsx index 7a2191ae1..821775055 100644 --- a/src/components/actions/ItemButton/ItemButton.tsx +++ b/src/components/actions/ItemButton/ItemButton.tsx @@ -100,6 +100,12 @@ const ItemButton = forwardRef(function ItemButton( type = 'neutral', theme, onPress, + // Extract react-aria press callbacks to prevent them from leaking to DOM via rest. + // These are handled by useButton inside useAction. + onPressStart: _onPressStart, + onPressEnd: _onPressEnd, + onPressChange: _onPressChange, + onPressUp: _onPressUp, actions, size = 'medium', wrapperStyles, diff --git a/src/components/content/Disclosure/Disclosure.tsx b/src/components/content/Disclosure/Disclosure.tsx index c001940fe..ac4a7a09c 100644 --- a/src/components/content/Disclosure/Disclosure.tsx +++ b/src/components/content/Disclosure/Disclosure.tsx @@ -80,7 +80,7 @@ export interface CubeDisclosureProps } export interface CubeDisclosureTriggerProps - extends Omit { + extends Omit { /** Children content for the trigger */ children?: ReactNode; } @@ -184,13 +184,14 @@ const ContentWrapperElement = tasty({ '': '0', shown: 'max-content', }, - transition: 'height $disclosure-transition linear', + transition: 'height $disclosure-transition', }, }); const ContentElement = tasty({ qa: 'DisclosureContent', styles: { + contentVisibility: 'auto', padding: '1x', }, }); diff --git a/src/components/helpers/DisplayTransition/DisplayTransition.tsx b/src/components/helpers/DisplayTransition/DisplayTransition.tsx index 0cc42e0d3..7d6c2e739 100644 --- a/src/components/helpers/DisplayTransition/DisplayTransition.tsx +++ b/src/components/helpers/DisplayTransition/DisplayTransition.tsx @@ -327,10 +327,8 @@ export function DisplayTransition({ const refCallback: RefCallback = (node) => { if (node) { elementRef.current = node; - - if (phaseRef.current === 'enter') { - ensureEnterFlow(); - } + // Don't call ensureEnterFlow() here - useLayoutEffect handles RAF scheduling + // to ensure symmetric timing with exit flow } else { cleanupEventListeners(); elementRef.current = null;