fix: <Tab> and <TabPanel> id type mismatch (#8423)

* fix: `<Tab>` and `<TabPanel>` `id` type mismatch

* fix types

* fix types

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: kidonng

packages/@react-spectrum/s2/src/Tabs.tsx

@@ -458,7 +458,8 @@ export function TabPanel(props: TabPanelProps): ReactNode | null {
 }
 
 function CollapsedTabPanel(props: TabPanelProps) {
-  let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;
   let {menuId, valueId} = useContext(CollapseContext);
   let ref = useRef(null);
   let tabIndex = useHasTabbableChild(ref) ? undefined : 0;

packages/@react-types/tabs/src/index.d.ts

@@ -55,7 +55,10 @@ interface AriaTabListBase extends AriaLabelingProps {
 
 export interface AriaTabListProps<T> extends TabListProps<T>, AriaTabListBase, DOMProps, AriaLabelingProps {}
 
-export interface AriaTabPanelProps extends DOMProps, AriaLabelingProps {}
+export interface AriaTabPanelProps extends Omit<DOMProps, 'id'>, AriaLabelingProps {
+  /** The unique id of the tab. */
+  id?: Key
+}
 
 export interface SpectrumTabsProps<T> extends AriaTabListBase, Omit<SingleSelection, 'onSelectionChange'>, DOMProps, StyleProps {
   /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */

packages/react-aria-components/src/Tabs.tsx

@@ -290,6 +290,8 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
 export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {
   const state = useContext(TabListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let {id, ...otherProps} = props;
   let {tabPanelProps} = useTabPanel(props, state, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
@@ -310,7 +312,7 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
     return null;
   }
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(otherProps);
   delete DOMProps.id;
 
   let domProps = isSelected