Merge pull request #2189 from db-ui/2188-fixdb-select-options-by-prop…

…-leads-to-duplicated-keys fix: uuid for option keys
db-ui · Feb 27, 2024 · 4e9aa08 · 4e9aa08
2 parents 4712986 + 9964192
commit 4e9aa08
Show file tree

Hide file tree

Showing 25 changed files with 176 additions and 68 deletions.
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
@@ -75,6 +75,10 @@ module.exports = (tmp) => {
 					from: '={true}',
 					to: ''
 				},
+				{
+					from: '{ cls }',
+					to: '{ cls, uuid }'
+				},
 				{
 					from: '} from "../../utils"',
 					to: ', filterPassingProps } from "../../utils"'
@@ -86,6 +90,19 @@ module.exports = (tmp) => {
 						`{...filterPassingProps(props,${JSON.stringify(
 							component?.config?.react?.propsPassingFilter ?? []
 						)})}`
+				},
+				/**
+				 * Mitosis generates Fragments for each mapping function.
+				 * The following overwrites will prevent react from throwing duplicate key warnings.
+				 * uuid() should be part of every component
+				 */
+				{
+					from: /<>/g,
+					to: '<React.Fragment key={uuid()}>'
+				},
+				{
+					from: /<\/>/g,
+					to: '</React.Fragment>'
 				}
 			];
 

diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -12,8 +12,9 @@ import {
 	DBAccordionProps,
 	DBAccordionItemInterface
 } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { DBAccordionItem } from '../accordion-item';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -28,6 +29,7 @@ export default function DBAccordion(props: DBAccordionProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionState>({
+		_id: DEFAULT_ID,
 		openItems: [],
 		clickedId: '',
 		initialized: false,
@@ -66,6 +68,8 @@ export default function DBAccordion(props: DBAccordionProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'accordion-' + uuid();
+
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -128,7 +132,7 @@ export default function DBAccordion(props: DBAccordionProps) {
 	return (
 		<div
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-accordion', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />

diff --git a/packages/components/src/components/alert/alert.lite.tsx b/packages/components/src/components/alert/alert.lite.tsx
@@ -8,8 +8,8 @@ import {
 import { DBAlertProps, DBAlertState } from './model';
 import { DBButton } from '../button';
 import { DBLink } from '../link';
-import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
-import { cls } from '../../utils';
+import { DEFAULT_CLOSE_BUTTON, DEFAULT_ID } from '../../shared/constants';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -20,6 +20,7 @@ export default function DBAlert(props: DBAlertProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAlertState>({
+		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -28,6 +29,7 @@ export default function DBAlert(props: DBAlertProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'alert-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -37,7 +39,7 @@ export default function DBAlert(props: DBAlertProps) {
 	return (
 		<div
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-alert', props.className)}
 			aria-live={props.ariaLive}
 			data-variant={props.variant}

diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBBadgeState, DBBadgeProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -9,9 +16,12 @@ useMetadata({
 export default function DBBadge(props: DBBadgeProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBBadgeState>({});
+	const state = useStore<DBBadgeState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'badge-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -21,7 +31,7 @@ export default function DBBadge(props: DBBadgeProps) {
 	return (
 		<span
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-badge', props.className)}
 			data-variant={props.variant}
 			data-size={props.size}

diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
-import { cls } from '../../utils';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
+import { cls, uuid } from '../../utils';
 import { DBBrandState, DBBrandProps } from './model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -10,6 +17,7 @@ export default function DBBrand(props: DBBrandProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({
+		_id: DEFAULT_ID,
 		defaultValues: {
 			anchorRef: '/',
 			src: './assets/images/db_logo.svg',
@@ -19,17 +27,16 @@ export default function DBBrand(props: DBBrandProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'brand-' + uuid();
+
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
 	});
 	// jscpd:ignore-end
 
 	return (
-		<div
-			ref={ref}
-			id={props.id}
-			class={cls('db-brand', props.className)}>
+		<div ref={ref} id={state._id} class={cls('db-brand', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
@@ -6,8 +6,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,6 +18,7 @@ export default function DBButton(props: DBButtonProps) {
 	const ref = useRef<HTMLButtonElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBButtonState>({
+		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -25,6 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'button-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -34,7 +37,7 @@ export default function DBButton(props: DBButtonProps) {
 	return (
 		<button
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-button', props.className, {
 				'is-icon-text-replace': props.noText
 			})}

diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
@@ -6,8 +6,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import type { DBCardState, DBCardProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,6 +18,7 @@ export default function DBCard(props: DBCardProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCardState>({
+		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -25,6 +27,7 @@ export default function DBCard(props: DBCardProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'card-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -34,7 +37,7 @@ export default function DBCard(props: DBCardProps) {
 	return (
 		<div
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-card', props.className)}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -7,9 +7,8 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBCheckboxProps, DBCheckboxState } from './model';
-import { uuid } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
-import { cls } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 
 useMetadata({

diff --git a/packages/components/src/components/code-docs/code-docs.lite.tsx b/packages/components/src/components/code-docs/code-docs.lite.tsx
@@ -2,12 +2,14 @@ import {
 	onMount,
 	Show,
 	Slot,
-	useMetadata, useRef,
+	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBCodeDocsProps, DBCodeDocsState } from './model';
 import { DBCard } from '../card';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -22,6 +24,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCodeDocsState>({
+		_id: DEFAULT_ID,
 		open: false,
 		toggleCode: () => {
 			state.open = !state.open;
@@ -34,6 +37,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'code-docs-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -43,6 +47,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	return (
 		<DBCard
 			ref={ref}
+			id={state._id}
 			className={cls('db-code-docs', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />

diff --git a/packages/components/src/components/divider/divider.lite.tsx b/packages/components/src/components/divider/divider.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBDividerState, DBDividerProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -9,9 +16,12 @@ useMetadata({
 export default function DBDivider(props: DBDividerProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBDividerState>({});
+	const state = useStore<DBDividerState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'divider-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -21,7 +31,7 @@ export default function DBDivider(props: DBDividerProps) {
 	return (
 		<div
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			data-margin={props.margin}
 			data-variant={props.variant}
 			data-emphasis={props.emphasis}

diff --git a/packages/components/src/components/drawer/drawer.lite.tsx b/packages/components/src/components/drawer/drawer.lite.tsx
@@ -10,8 +10,7 @@ import {
 import { DBDrawerState, DBDrawerProps } from './model';
 import { DBButton } from '../button';
 import { DEFAULT_CLOSE_BUTTON, DEFAULT_ID } from '../../shared/constants';
-import { cls } from '../../utils';
-import { uuid } from '../../utils';
+import { cls, uuid } from '../../utils';
 
 useMetadata({
 	isAttachedToShadowDom: true,

diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
@@ -6,7 +6,8 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import type { DBIconState, DBIconProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -15,9 +16,12 @@ useMetadata({
 export default function DBIcon(props: DBIconProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBIconState>({});
+	const state = useStore<DBIconState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'icon-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -27,7 +31,7 @@ export default function DBIcon(props: DBIconProps) {
 	return (
 		<span
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-icon', props.className)}
 			data-icon={props.icon}
 			data-icon-weight={props.weight}