fix: preserve default className when className is null or undefined

Author: Shiva903-hue

src/components/UncontrolledTabs.jsx

@@ -373,27 +373,49 @@ const UncontrolledTabs = (props) => {
     return false;
   }
   const {
-    children, // unused
-    className,
-    disabledTabClassName, // unused
+    className: propClassName,
     domRef,
-    focus, // unused
-    forceRenderTabPanel, // unused
-    onSelect, // unused
-    selectedIndex, // unused
-    selectedTabClassName, // unused
-    selectedTabPanelClassName, // unused
-    environment, // unused
-    disableUpDownKeys, // unused
-    disableLeftRightKeys, // unused
-    ...attributes
-  } = {
-    ...defaultProps,
-    ...props,
-  };
+    children, // unused here
+    disabledTabClassName, // unused here
+    focus, // unused here
+    forceRenderTabPanel, // unused here
+    onSelect, // unused here
+    selectedIndex, // unused here
+    selectedTabClassName, // unused here
+    selectedTabPanelClassName, // unused here
+    environment, // unused here
+    disableUpDownKeys, // unused here
+    disableLeftRightKeys, // unused here
+    ...restProps
+  } = props;
+
+  // Only pass valid DOM attributes and data- attributes
+  const domAttributes = {};
+  Object.keys(restProps).forEach((key) => {
+    if (
+      key.startsWith('data-') ||
+      key === 'id' ||
+      key === 'style' ||
+      key === 'title' ||
+      key === 'role' ||
+      key === 'tabIndex' ||
+      key === 'aria-label' ||
+      key === 'aria-labelledby' ||
+      key === 'aria-describedby' ||
+      key === 'aria-controls' ||
+      key === 'aria-selected' ||
+      key === 'aria-disabled'
+    ) {
+      domAttributes[key] = restProps[key];
+    }
+  });
+
+  const className =
+    propClassName == null ? defaultProps.className : propClassName;
+
   return (
     <div
-      {...attributes}
+      {...domAttributes}
       className={cx(className)}
       onClick={handleClick}
       onKeyDown={handleKeyDown}

src/components/__tests__/Tabs-test.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { cleanup, render, screen, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
+import UncontrolledTabs from '../UncontrolledTabs';
 import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
@@ -651,3 +652,38 @@ describe('<Tabs />', () => {
     assertTabSelected(1);
   });
 });
+
+
+test('preserves default className when className is undefined', () => {
+  const { container } = render(
+    <UncontrolledTabs
+      className={undefined}
+      selectedIndex={0}
+      onSelect={() => {}}
+    >
+      <TabList>
+        <Tab>Tab</Tab>
+      </TabList>
+      <TabPanel>Panel</TabPanel>
+    </UncontrolledTabs>
+  );
+
+  expect(container.firstChild).toHaveClass('react-tabs');
+});
+
+test('preserves default className when className is null', () => {
+  const { container } = render(
+    <UncontrolledTabs
+      className={null}
+      selectedIndex={0}
+      onSelect={() => {}}
+    >
+      <TabList>
+        <Tab>Tab</Tab>
+      </TabList>
+      <TabPanel>Panel</TabPanel>
+    </UncontrolledTabs>
+  );
+
+  expect(container.firstChild).toHaveClass('react-tabs');
+});