fix: issue with tabs and accordion for react 19 (#4030)

* fix: issue with tabs and accordion for react 19

* chore: update from main

Author: nmerget

__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png

@@ -1,11 +1,13 @@
 import {
 	onMount,
+	onUpdate,
 	Show,
 	Slot,
 	useDefaultProps,
 	useMetadata,
 	useRef,
-	useStore
+	useStore,
+	useTarget
 } from '@builder.io/mitosis';
 import { DBAccordionItemProps, DBAccordionItemState } from './model';
 import { cls, getBooleanAsString, uuid } from '../../utils';
@@ -22,6 +24,19 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	const state = useStore<DBAccordionItemState>({
 		_id: DEFAULT_ID,
 		_open: false,
+		_name: undefined,
+		initialized: false,
+		handleNameAttribute: () => {
+			if (_ref) {
+				const setAttribute = _ref.setAttribute;
+				_ref.setAttribute = (attribute: string, value: string) => {
+					setAttribute.call(_ref, attribute, value);
+					if (attribute === 'name') {
+						state._name = value;
+					}
+				};
+			}
+		},
 		toggle: (event: ClickEvent<HTMLElement>) => {
 			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
 			event?.preventDefault();
@@ -38,14 +53,31 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 		if (props.defaultOpen) {
 			state._open = props.defaultOpen;
 		}
+
+		state.initialized = true;
 	});
+
+	onUpdate(() => {
+		if (_ref && state.initialized) {
+			useTarget({ react: () => state.handleNameAttribute() });
+		}
+	}, [_ref, state.initialized]);
+
+	onUpdate(() => {
+		if (props.name) {
+			state._name = props.name;
+		}
+	}, [props.name]);
+
 	// jscpd:ignore-end
 
 	return (
 		<li id={state._id} class={cls('db-accordion-item', props.className)}>
 			<details
 				aria-disabled={getBooleanAsString(props.disabled)}
 				ref={_ref}
+				/* @ts-expect-error This is a new api for details */
+				name={state._name}
 				open={state._open}>
 				<summary onClick={(event) => state.toggle(event)}>
 					<Show when={props.headlinePlain}>

__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png

@@ -1,6 +1,9 @@
 import {
 	GlobalProps,
 	GlobalState,
+	InitializedState,
+	NameProps,
+	NameState,
 	TextProps,
 	ToggleEventProps,
 	ToggleEventState
@@ -27,12 +30,15 @@ export type DBAccordionItemDefaultProps = {
 
 export type DBAccordionItemProps = DBAccordionItemDefaultProps &
 	GlobalProps &
-	ToggleEventProps;
+	ToggleEventProps &
+	NameProps;
 
 export type DBAccordionItemDefaultState = {
 	_open: boolean;
 };
 
 export type DBAccordionItemState = DBAccordionItemDefaultState &
 	GlobalState &
-	ToggleEventState<HTMLElement>;
+	ToggleEventState<HTMLElement> &
+	InitializedState &
+	NameState;

package-lock.json

@@ -8,6 +8,8 @@ import {
 	IconAfterProps,
 	IconProps,
 	InitializedState,
+	NameProps,
+	NameState,
 	ShowIconProps
 } from '../../shared/model';
 
@@ -38,7 +40,8 @@ export type DBTabItemProps = GlobalProps &
 	ActiveProps &
 	AriaControlsProps &
 	ChangeEventProps<HTMLInputElement> &
-	ShowIconProps;
+	ShowIconProps &
+	NameProps;
 
 export type DBTabItemDefaultState = {
 	_selected: boolean;
@@ -47,4 +50,5 @@ export type DBTabItemDefaultState = {
 export type DBTabItemState = DBTabItemDefaultState &
 	GlobalState &
 	ChangeEventState<HTMLInputElement> &
-	InitializedState;
+	InitializedState &
+	NameState;

packages/components/src/components/accordion-item/accordion-item.lite.tsx

@@ -26,8 +26,20 @@ export default function DBTabItem(props: DBTabItemProps) {
 	const _ref = useRef<HTMLInputElement | null>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBTabItemState>({
-		initialized: false,
 		_selected: false,
+		_name: undefined,
+		initialized: false,
+		handleNameAttribute: () => {
+			if (_ref) {
+				const setAttribute = _ref.setAttribute;
+				_ref.setAttribute = (attribute: string, value: string) => {
+					setAttribute.call(_ref, attribute, value);
+					if (attribute === 'name') {
+						state._name = value;
+					}
+				};
+			}
+		},
 		handleChange: (event: any) => {
 			if (props.onChange) {
 				props.onChange(event);
@@ -63,12 +75,22 @@ export default function DBTabItem(props: DBTabItemProps) {
 	// jscpd:ignore-end
 
 	onUpdate(() => {
-		if (props.active && state.initialized && _ref) {
-			_ref.click();
+		if (state.initialized && _ref) {
+			if (props.active) {
+				_ref.click();
+			}
+
+			useTarget({ react: () => state.handleNameAttribute() });
 			state.initialized = false;
 		}
 	}, [_ref, state.initialized]);
 
+	onUpdate(() => {
+		if (props.name) {
+			state._name = props.name;
+		}
+	}, [props.name]);
+
 	return (
 		<li class={cls('db-tab-item', props.className)} role="none">
 			<label
@@ -86,6 +108,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 					ref={_ref}
 					type="radio"
 					role="tab"
+					name={state._name}
 					id={props.id}
 					onInput={(event: any) => state.handleChange(event)}
 				/>

packages/components/src/components/accordion-item/model.ts

@@ -207,6 +207,18 @@ export type PopoverState = {
 	handleAutoPlacement: () => void;
 };
 
+export type NameProps = {
+	/**
+	 * The name attribute gives the name of the element to group it.
+	 */
+	name?: string;
+};
+
+export type NameState = {
+	_name?: string;
+	handleNameAttribute: () => void;
+};
+
 export type ContentSlotProps = {
 	/**
 	 * Default slot which is used to pass in additional content.