Merge branch 'main' into nest-modal-support

packages/icons-vue/examples/vue-cli/yarn.lock

@@ -4151,9 +4151,9 @@ ip-regex@^2.1.0:
   integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
 ip@^1.1.0, ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
 
 ipaddr.js@1.9.1:
   version "1.9.1"

packages/react/examples/react-router-vite/yarn.lock

@@ -2379,9 +2379,9 @@ __metadata:
   linkType: hard
 
 "ip@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "ip@npm:2.0.0"
-  checksum: 1270b11e534a466fb4cf4426cbcc3a907c429389f7f4e4e3b288b42823562e88d6a509ceda8141a507de147ca506141f745005c0aa144569d94cf24a54eb52bc
+  version: 2.0.1
+  resolution: "ip@npm:2.0.1"
+  checksum: d6dd154e1bc5e8725adfdd6fb92218635b9cbe6d873d051bd63b178f009777f751a5eea4c67021723a7056325fc3052f8b6599af0a2d56f042c93e684b4a0349
   languageName: node
   linkType: hard
 

packages/react/src/components/DataTable/TableHead.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { ThHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
 import wrapComponent from '../../tools/wrapComponent';
 
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
 
-const TableHead: React.FC<TableHeadProps> = wrapComponent({
+const TableHead = wrapComponent({
   name: 'TableHead',
   type: 'thead',
 });

packages/react/src/tools/wrapComponent.js → packages/react/src/tools/wrapComponent.ts

@@ -5,16 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { usePrefix } from '../internal/usePrefix';
+import { ReactAttr } from '../types/common';
+
+type HTMLTagName = keyof HTMLElementTagNameMap;
+
+type WrapComponentArgs<T extends HTMLTagName> = {
+  name: string;
+  type: T;
+  className?: string | ((prefix: string) => string);
+};
 
 /**
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-const wrapComponent = ({ name, className: getClassName, type }) => {
+const wrapComponent = <T extends HTMLTagName>({
+  name,
+  className: getClassName,
+  type,
+}: WrapComponentArgs<T>): ((props: ReactAttr<T>) => React.ReactElement) => {
   /**
    *
    * @param {{ className?: string, [x: string]: any}} param0
@@ -41,7 +54,7 @@ const wrapComponent = ({ name, className: getClassName, type }) => {
     className: PropTypes.string,
   };
 
-  return Component;
+  return Component as (props: ReactAttr<T>) => React.ReactElement;
 };
 
 export default wrapComponent;

packages/styles/scss/components/tabs/_tabs.scss

@@ -566,6 +566,10 @@
     }
   }
 
+  .#{$prefix}--tabs--contained ~ .#{$prefix}--tab-content {
+    background: $layer;
+  }
+
   .#{$prefix}--tab-content--interactive {
     &:focus {
       outline: none;