suggested refactor

Author: BrandonGoren

packages/react/src/accordion/panel/AccordionPanel.tsx

@@ -14,6 +14,23 @@ import { AccordionPanelCssVars } from './AccordionPanelCssVars';
 import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete';
 import { useRenderElement } from '../../utils/useRenderElement';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps';
+import { AccordionPanelDataAttributes } from './AccordionPanelDataAttributes';
+
+const stateAttributesMapping: StateAttributesMapping<AccordionPanel.State> = {
+  ...accordionStateAttributesMapping,
+  open: (open) => {
+    const hidden = !open;
+    const itemMapping = accordionStateAttributesMapping.open?.(open) ?? {};
+    if (hidden) {
+      return {
+        ...itemMapping,
+        [AccordionPanelDataAttributes.hidden]: '',
+      };
+    }
+    return itemMapping;
+  },
+};
 
 /**
  * A collapsible panel with the accordion item contents.
@@ -132,9 +149,8 @@ export const AccordionPanel = React.forwardRef(function AccordionPanel(
     () => ({
       ...state,
       transitionStatus,
-      hidden: !open,
     }),
-    [state, transitionStatus, open],
+    [state, transitionStatus],
   );
 
   const element = useRenderElement('div', componentProps, {
@@ -154,7 +170,7 @@ export const AccordionPanel = React.forwardRef(function AccordionPanel(
       },
       elementProps,
     ],
-    stateAttributesMapping: accordionStateAttributesMapping,
+    stateAttributesMapping,
   });
 
   const shouldRender = keepMounted || hiddenUntilFound || (!keepMounted && mounted);

packages/react/src/collapsible/panel/CollapsiblePanel.tsx

@@ -6,12 +6,18 @@ import { BaseUIComponentProps } from '../../utils/types';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { useCollapsibleRootContext } from '../root/CollapsibleRootContext';
 import type { CollapsibleRoot } from '../root/CollapsibleRoot';
-import { collapsibleStateAttributesMapping } from '../root/stateAttributesMapping';
+import { transitionStatusMapping } from '../../utils/stateAttributesMapping';
+import { panelOpenStateMapping } from '../../utils/collapsibleOpenStateMapping';
 import { useCollapsiblePanel } from './useCollapsiblePanel';
 import { CollapsiblePanelCssVars } from './CollapsiblePanelCssVars';
 import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps';
 
+const stateAttributesMapping: StateAttributesMapping<CollapsiblePanel.State> = {
+  ...panelOpenStateMapping,
+  ...transitionStatusMapping,
+};
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -124,10 +130,9 @@ export const CollapsiblePanel = React.forwardRef(function CollapsiblePanel(
   const panelState: CollapsiblePanel.State = React.useMemo(
     () => ({
       ...state,
-      hidden: !open,
       transitionStatus,
     }),
-    [state, transitionStatus, open],
+    [state, transitionStatus],
   );
 
   const element = useRenderElement('div', componentProps, {
@@ -145,7 +150,7 @@ export const CollapsiblePanel = React.forwardRef(function CollapsiblePanel(
       },
       elementProps,
     ],
-    stateAttributesMapping: collapsibleStateAttributesMapping,
+    stateAttributesMapping,
   });
 
   const shouldRender = keepMounted || hiddenUntilFound || (!keepMounted && mounted);
@@ -159,7 +164,6 @@ export const CollapsiblePanel = React.forwardRef(function CollapsiblePanel(
 
 export interface CollapsiblePanelState extends CollapsibleRoot.State {
   transitionStatus: TransitionStatus;
-  hidden: boolean;
 }
 
 export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanel.State> {

packages/react/src/utils/collapsibleOpenStateMapping.ts

@@ -33,3 +33,21 @@ export const collapsibleOpenStateMapping = {
 } satisfies StateAttributesMapping<{
   open: boolean;
 }>;
+
+export const panelOpenStateMapping = {
+  open: (open) => {
+    const panelHidden = !open;
+    const collapsibleStateMapping = collapsibleOpenStateMapping.open(open);
+
+    if (panelHidden) {
+      return {
+        ...collapsibleStateMapping,
+        [CollapsiblePanelDataAttributes.hidden]: '',
+      };
+    }
+
+    return collapsibleStateMapping;
+  },
+} satisfies StateAttributesMapping<{
+  open: boolean;
+}>;