From 5107ea6f058689d0a25272bd4b02fc1edadf5fa2 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 8 Dec 2025 13:59:29 +0000
Subject: [PATCH] Fixed React development mode warnings in
 admin-x-design-system

no issue

Some aspects of `admin-x-design-system` and its usage within `admin-x-settings` caused a lot of errors to be output in the console in development mode making it difficult to find real problems.

- Added missing `key` props to list items in `TabView`, `ButtonGroup`, `CheckboxGroup`, and `TiersList` to fix "unique key" warnings
- Added `asChild` to `Tooltip`'s `TooltipPrimitive.Trigger` to fix nested button warning when Button components are wrapped in Tooltip
- Destructured unused `separator` prop in NewsletterItemContainer to prevent it being passed to `DragIndicator` causing errors
---
 .../admin-x-design-system/src/global/button-group.tsx | 11 ++++++-----
 .../src/global/form/checkbox-group.tsx                |  4 ++--
 apps/admin-x-design-system/src/global/tab-view.tsx    |  4 ++--
 apps/admin-x-design-system/src/global/tooltip.tsx     |  2 +-
 .../settings/email/newsletters/newsletters-list.tsx   |  3 +++
 .../settings/membership/tiers/tiers-list.tsx          |  2 +-
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/button-group.tsx b/apps/admin-x-design-system/src/global/button-group.tsx
index 098e137a9cd..3ca58cc6413 100644
--- a/apps/admin-x-design-system/src/global/button-group.tsx
+++ b/apps/admin-x-design-system/src/global/button-group.tsx
@@ -39,13 +39,14 @@ const ButtonGroup: React.FC<ButtonGroupProps> = ({size = 'md', buttons, link, li
 
     return (
         <div className={groupColorClasses}>
-            {buttons.map(({key, ...props}) => {
+            {buttons.map(({key, ...props}, index) => {
+                const buttonKey = key ?? `button-${index}`;
                 const buttonProps = {...props};
 
                 if (!link && !clearBg) {
                     buttonProps.className = clsx(props.className, 'w-8 rounded-lg border !px-0');
 
-                    if (key === activeKey) {
+                    if (buttonKey === activeKey) {
                         buttonProps.color = 'white';
                         buttonProps.className = clsx(buttonProps.className, 'border-grey-300 shadow-xs dark:border-grey-800');
                     } else {
@@ -55,10 +56,10 @@ const ButtonGroup: React.FC<ButtonGroupProps> = ({size = 'md', buttons, link, li
 
                 return (
                     (props.tooltip ?
-                        <Tooltip key={key} content={props.tooltip}>
-                            <Button key={`btn-${key}`} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
+                        <Tooltip key={buttonKey} content={props.tooltip}>
+                            <Button link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
                         </Tooltip> :
-                        <Button key={key} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
+                        <Button key={buttonKey} link={link} linkWithPadding={linkWithPadding} size={size} {...buttonProps} />
                     )
                 );
             })}
diff --git a/apps/admin-x-design-system/src/global/form/checkbox-group.tsx b/apps/admin-x-design-system/src/global/form/checkbox-group.tsx
index 414bd4bdff0..2a5082161a3 100644
--- a/apps/admin-x-design-system/src/global/form/checkbox-group.tsx
+++ b/apps/admin-x-design-system/src/global/form/checkbox-group.tsx
@@ -20,8 +20,8 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
         <div>
             {title && <Heading grey={true} level={6}>{title}</Heading>}
             <div className='mt-2 flex flex-col gap-1'>
-                {checkboxes?.map(({key, ...props}) => (
-                    <Checkbox key={key} {...props} />
+                {checkboxes?.map(({key, ...props}, index) => (
+                    <Checkbox key={key ?? `checkbox-${index}`} {...props} />
                 ))}
             </div>
             <div className={`flex flex-col ${hint && 'mb-2'}`}>
diff --git a/apps/admin-x-design-system/src/global/tab-view.tsx b/apps/admin-x-design-system/src/global/tab-view.tsx
index 43673f53ffc..c0de7bcef6e 100644
--- a/apps/admin-x-design-system/src/global/tab-view.tsx
+++ b/apps/admin-x-design-system/src/global/tab-view.tsx
@@ -90,7 +90,7 @@ export const TabList: React.FC<TabListProps> = ({
         <TabsPrimitive.List className={`${stickyHeader ? 'sticky top-0 z-50 bg-white dark:bg-black' : ''}`}>
             <div className={containerClasses} role='tablist'>
                 {tabs.map(tab => (
-                    <div>
+                    <div key={tab.id}>
                         <TabButton
                             border={buttonBorder}
                             counter={tab.counter}
@@ -162,7 +162,7 @@ function TabView<ID extends string = string>({
             />
             {tabs.map((tab) => {
                 return (
-                    <TabsPrimitive.Content className={tab.tabWrapperClassName} value={tab.id}>
+                    <TabsPrimitive.Content key={tab.id} className={tab.tabWrapperClassName} value={tab.id}>
                         <div className={tab.containerClassName}>{tab.contents}</div>
                     </TabsPrimitive.Content>
                 );
diff --git a/apps/admin-x-design-system/src/global/tooltip.tsx b/apps/admin-x-design-system/src/global/tooltip.tsx
index ec596da8ccf..30107ea3afc 100644
--- a/apps/admin-x-design-system/src/global/tooltip.tsx
+++ b/apps/admin-x-design-system/src/global/tooltip.tsx
@@ -26,7 +26,7 @@ const Tooltip: React.FC<TooltipProps> = ({content, size = 'sm', children, contai
     return (
         <TooltipPrimitive.Provider delayDuration={0}>
             <TooltipPrimitive.Root>
-                <TooltipPrimitive.Trigger className={containerClassName} onClick={event => event.preventDefault()}>
+                <TooltipPrimitive.Trigger className={containerClassName} asChild onClick={event => event.preventDefault()}>
                     {children}
                 </TooltipPrimitive.Trigger>
                 <TooltipPrimitive.Content align={origin} className={tooltipClassName} sideOffset={4} onPointerDownOutside={event => event.preventDefault()}>
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
index af45eb73fc9..b8f7e81e53f 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
@@ -17,8 +17,11 @@ const NewsletterItemContainer: React.FC<Partial<SortableItemContainerProps>> = (
     isDragging,
     style,
     children,
+    separator,
     ...props
 }) => {
+    void separator; // we don't use the separator prop and it will error if it gets passed to the DragIndicator component
+
     const {updateRoute} = useRouting();
 
     const showDetails = () => {
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
index ff205ca02f8..1e70a7b7b65 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tiers-list.tsx
@@ -70,7 +70,7 @@ const TiersList: React.FC<TiersListProps> = ({
     return (
         <div className='mt-4 grid grid-cols-1 gap-4 min-[900px]:grid-cols-3'>
             {tiers.map((tier) => {
-                return <TierCard tier={tier} />;
+                return <TierCard key={tier.id} tier={tier} />;
             })}
             {tab === 'active-tiers' && (
                 <button className={`${cardContainerClasses} group cursor-pointer`} type='button' onClick={() => {