Move the rest of components to use cleaned props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/report.api.md

@@ -7,7 +7,7 @@ import { Avatar as Avatar_2 } from '@base-ui-components/react/avatar';
 import { ButtonProps as ButtonProps_2 } from 'react-aria-components';
 import { CellProps as CellProps_2 } from 'react-aria-components';
 import { Collapsible as Collapsible_2 } from '@base-ui-components/react/collapsible';
-import { ColumnProps } from 'react-aria-components';
+import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
 import { ComponentProps } from 'react';
 import type { ComponentPropsWithRef } from 'react';
 import { Context } from 'react';
@@ -341,11 +341,13 @@ export const Collapsible: {
 };
 
 // @public (undocumented)
-export const Column: (
-  props: Omit<ColumnProps, 'children'> & {
-    children?: React.ReactNode;
-  },
-) => JSX_2.Element;
+export const Column: (props: ColumnProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface ColumnProps extends Omit<ColumnProps_2, 'children'> {
+  // (undocumented)
+  children?: React.ReactNode;
+}
 
 // @public (undocumented)
 export type Columns =
@@ -1534,13 +1536,7 @@ export type ResponsivePropDef<T = any> = RegularPropDef<T> & {
 };
 
 // @public (undocumented)
-export function Row<T extends object>({
-  id,
-  columns,
-  children,
-  href,
-  ...otherProps
-}: RowProps<T>): JSX_2.Element;
+export function Row<T extends object>(props: RowProps<T>): JSX_2.Element;
 
 // @public (undocumented)
 export const ScrollArea: {
@@ -1704,10 +1700,9 @@ export const TableBody: <T extends object>(
 ) => JSX_2.Element;
 
 // @public (undocumented)
-export const TableHeader: <T extends object>({
-  columns,
-  children,
-}: TableHeaderProps<T>) => JSX_2.Element;
+export const TableHeader: <T extends object>(
+  props: TableHeaderProps<T>,
+) => JSX_2.Element;
 
 // @public
 export function TablePagination(props: TablePaginationProps): JSX_2.Element;
@@ -1765,12 +1760,9 @@ export interface TabsProps extends TabsProps_2 {}
 export const Tag: (props: TagProps) => JSX_2.Element;
 
 // @public
-export const TagGroup: <T extends object>({
-  items,
-  children,
-  renderEmptyState,
-  ...props
-}: TagGroupProps<T>) => JSX_2.Element;
+export const TagGroup: <T extends object>(
+  props: TagGroupProps<T>,
+) => JSX_2.Element;
 
 // @public
 export interface TagGroupProps<T>

packages/ui/src/components/Table/components/Cell.tsx

@@ -24,17 +24,12 @@ import styles from '../Table.module.css';
 
 /** @public */
 const Cell = (props: CellProps) => {
-  const {
-    className,
-    title,
-    description,
-    color = 'primary',
-    leadingIcon,
-    href,
-    ...rest
-  } = props;
-
-  const { classNames } = useStyles('Table');
+  const { classNames, cleanedProps } = useStyles<'Table', CellProps>('Table', {
+    color: 'primary',
+    ...props,
+  });
+  const { className, title, description, color, leadingIcon, href, ...rest } =
+    cleanedProps;
 
   return (
     <ReactAriaCell

packages/ui/src/components/Table/components/CellProfile.tsx

@@ -25,16 +25,15 @@ import styles from '../Table.module.css';
 
 /** @public */
 export const CellProfile = (props: CellProfileProps) => {
-  const {
-    className,
-    src,
-    name,
-    href,
-    description,
-    color = 'primary',
-    ...rest
-  } = props;
-  const { classNames } = useStyles('Table');
+  const { classNames, cleanedProps } = useStyles<'Table', CellProfileProps>(
+    'Table',
+    {
+      color: 'primary',
+      ...props,
+    },
+  );
+  const { className, src, name, href, description, color, ...rest } =
+    cleanedProps;
 
   return (
     <ReactAriaCell

packages/ui/src/components/Table/components/Column.tsx

@@ -14,25 +14,25 @@
  * limitations under the License.
  */
 
-import {
-  Column as ReactAriaColumn,
-  type ColumnProps,
-} from 'react-aria-components';
+import { Column as ReactAriaColumn } from 'react-aria-components';
 import { Icon } from '../../Icon';
 import { useStyles } from '../../../hooks/useStyles';
 import styles from '../Table.module.css';
 import clsx from 'clsx';
+import { ColumnProps } from '../types';
 
 /** @public */
-export const Column = (
-  props: Omit<ColumnProps, 'children'> & { children?: React.ReactNode },
-) => {
-  const { classNames } = useStyles('Table');
+export const Column = (props: ColumnProps) => {
+  const { classNames, cleanedProps } = useStyles<'Table', ColumnProps>(
+    'Table',
+    props,
+  );
+  const { children, ...rest } = cleanedProps;
 
   return (
     <ReactAriaColumn
       className={clsx(classNames.head, styles[classNames.head])}
-      {...props}
+      {...rest}
     >
       {({ allowsSorting, sortDirection }) => (
         <div
@@ -41,7 +41,7 @@ export const Column = (
             styles[classNames.headContent],
           )}
         >
-          {props.children}
+          {children}
           {allowsSorting && (
             <span
               aria-hidden="true"

packages/ui/src/components/Table/components/Row.tsx

@@ -31,14 +31,12 @@ import styles from '../Table.module.css';
 import clsx from 'clsx';
 
 /** @public */
-export function Row<T extends object>({
-  id,
-  columns,
-  children,
-  href,
-  ...otherProps
-}: RowProps<T>) {
-  const { classNames } = useStyles('Table');
+export function Row<T extends object>(props: RowProps<T>) {
+  const { classNames, cleanedProps } = useStyles<'Table', RowProps<T>>(
+    'Table',
+    props,
+  );
+  const { id, columns, children, href, ...rest } = cleanedProps;
   const navigate = useNavigate();
   const isExternal = isExternalLink(href);
 
@@ -60,7 +58,7 @@ export function Row<T extends object>({
       <ReactAriaRow
         id={id}
         className={clsx(classNames.row, styles[classNames.row])}
-        {...otherProps}
+        {...rest}
       >
         {content}
       </ReactAriaRow>
@@ -73,7 +71,7 @@ export function Row<T extends object>({
         id={id}
         className={clsx(classNames.row, styles[classNames.row])}
         data-react-aria-pressable="true"
-        {...otherProps}
+        {...rest}
       >
         {content}
       </ReactAriaRow>

packages/ui/src/components/Table/components/Table.tsx

@@ -24,13 +24,16 @@ import clsx from 'clsx';
 
 /** @public */
 export const Table = (props: TableProps) => {
-  const { classNames } = useStyles('Table');
+  const { classNames, cleanedProps } = useStyles<'Table', TableProps>(
+    'Table',
+    props,
+  );
 
   return (
     <ReactAriaTable
       className={clsx(classNames.table, styles[classNames.table])}
       aria-label="Data table"
-      {...props}
+      {...cleanedProps}
     />
   );
 };

packages/ui/src/components/Table/components/TableBody.tsx

@@ -24,12 +24,15 @@ import clsx from 'clsx';
 
 /** @public */
 export const TableBody = <T extends object>(props: TableBodyProps<T>) => {
-  const { classNames } = useStyles('Table');
+  const { classNames, cleanedProps } = useStyles<'Table', TableBodyProps<T>>(
+    'Table',
+    props,
+  );
 
   return (
     <ReactAriaTableBody
       className={clsx(classNames.body, styles[classNames.body])}
-      {...props}
+      {...cleanedProps}
     />
   );
 };

packages/ui/src/components/Table/components/TableHeader.tsx

@@ -26,17 +26,19 @@ import styles from '../Table.module.css';
 import clsx from 'clsx';
 
 /** @public */
-export const TableHeader = <T extends object>({
-  columns,
-  children,
-}: TableHeaderProps<T>) => {
+export const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {
   let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
 
-  const { classNames } = useStyles('Table');
+  const { classNames, cleanedProps } = useStyles<'Table', TableHeaderProps<T>>(
+    'Table',
+    props,
+  );
+  const { columns, children, ...rest } = cleanedProps;
 
   return (
     <ReactAriaTableHeader
       className={clsx(classNames.header, styles[classNames.header])}
+      {...rest}
     >
       {/* Add extra columns for drag and drop and selection. */}
       {allowsDragging && <Column />}

packages/ui/src/components/Table/index.ts

@@ -23,7 +23,7 @@ export { Cell } from './components/Cell';
 export { CellProfile } from './components/CellProfile';
 export { useTable } from './hooks/useTable';
 
-export type { CellProps, CellProfileProps } from './types';
+export type { CellProps, CellProfileProps, ColumnProps } from './types';
 export type {
   UseTableConfig,
   UseTableResult,

packages/ui/src/components/Table/types.ts

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { CellProps as ReactAriaCellProps } from 'react-aria-components';
+import {
+  CellProps as ReactAriaCellProps,
+  ColumnProps as AriaColumnProps,
+} from 'react-aria-components';
 
 /** @public */
 export interface CellProps extends ReactAriaCellProps {
@@ -33,3 +36,8 @@ export interface CellProfileProps extends ReactAriaCellProps {
   description?: string;
   color?: 'primary' | 'secondary';
 }
+
+/** @public */
+export interface ColumnProps extends Omit<AriaColumnProps, 'children'> {
+  children?: React.ReactNode;
+}

packages/ui/src/components/TablePagination/TablePagination.tsx

@@ -26,6 +26,10 @@ import styles from './TablePagination.module.css';
  * @public
  */
 export function TablePagination(props: TablePaginationProps) {
+  const { classNames, cleanedProps } = useStyles('TablePagination', {
+    showPageSizeOptions: true,
+    ...props,
+  });
   const {
     className,
     offset,
@@ -36,11 +40,9 @@ export function TablePagination(props: TablePaginationProps) {
     onPageSizeChange,
     setOffset,
     setPageSize,
-    showPageSizeOptions = true,
+    showPageSizeOptions,
     ...rest
-  } = props;
-
-  const { classNames } = useStyles('TablePagination');
+  } = cleanedProps;
 
   const currentOffset = offset ?? 0;
   const currentPageSize = pageSize ?? 10;

packages/ui/src/components/Tabs/Tabs.tsx

@@ -84,8 +84,8 @@ const isTabActive = (
  * @public
  */
 export const Tabs = (props: TabsProps) => {
-  const { children, ...rest } = props;
-  const { classNames } = useStyles('Tabs');
+  const { classNames, cleanedProps } = useStyles('Tabs', props);
+  const { children, ...rest } = cleanedProps;
   const tabsRef = useRef<HTMLDivElement>(null);
   const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());
   const [hoveredKey, setHoveredKey] = useState<string | null>(null);
@@ -168,8 +168,8 @@ export const Tabs = (props: TabsProps) => {
  * @public
  */
 export const TabList = (props: TabListProps) => {
-  const { children, ...rest } = props;
-  const { classNames } = useStyles('Tabs');
+  const { classNames, cleanedProps } = useStyles('Tabs', props);
+  const { children, ...rest } = cleanedProps;
   const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =
     useTabsContext();
 
@@ -218,8 +218,14 @@ export const TabList = (props: TabListProps) => {
  * @public
  */
 export const Tab = (props: TabProps) => {
-  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;
-  const { classNames } = useStyles('Tabs');
+  const { classNames, cleanedProps } = useStyles('Tabs', props);
+  const {
+    href,
+    children,
+    id,
+    matchStrategy: _matchStrategy,
+    ...rest
+  } = cleanedProps;
   const { setTabRef } = useTabsContext();
 
   return (
@@ -241,8 +247,8 @@ export const Tab = (props: TabProps) => {
  * @public
  */
 export const TabPanel = (props: TabPanelProps) => {
-  const { children, ...rest } = props;
-  const { classNames } = useStyles('Tabs');
+  const { classNames, cleanedProps } = useStyles('Tabs', props);
+  const { children, ...rest } = cleanedProps;
 
   return (
     <AriaTabPanel

packages/ui/src/components/TagGroup/TagGroup.tsx

@@ -35,17 +35,14 @@ import styles from './TagGroup.module.css';
  *
  * @public
  */
-export const TagGroup = <T extends object>({
-  items,
-  children,
-  renderEmptyState,
-  ...props
-}: TagGroupProps<T>) => {
-  const { classNames } = useStyles('TagGroup');
+export const TagGroup = <T extends object>(props: TagGroupProps<T>) => {
+  const { classNames, cleanedProps } = useStyles('TagGroup', props);
+  const { items, children, renderEmptyState, ...rest } = cleanedProps;
+
   return (
     <ReactAriaTagGroup
       className={clsx(classNames.group, styles[classNames.group])}
-      {...props}
+      {...rest}
     >
       <ReactAriaTagList
         className={clsx(classNames.list, styles[classNames.list])}
@@ -64,9 +61,12 @@ export const TagGroup = <T extends object>({
  * @public
  */
 export const Tag = (props: TagProps) => {
-  const { children, className, icon, size = 'small', href, ...rest } = props;
+  const { classNames, cleanedProps } = useStyles('TagGroup', {
+    size: 'small',
+    ...props,
+  });
+  const { children, className, icon, size, href, ...rest } = cleanedProps;
   const textValue = typeof children === 'string' ? children : undefined;
-  const { classNames } = useStyles('TagGroup');
   const navigate = useNavigate();
   const isLink = href !== undefined;
   const isExternal = isExternalLink(href);

packages/ui/src/components/Text/Text.tsx

@@ -34,14 +34,13 @@ function TextComponent<T extends ElementType = 'span'>(
     ...props,
   });
 
-  const { className, style, ...restProps } = cleanedProps;
+  const { className, ...restProps } = cleanedProps;
 
   return (
     <Component
       ref={ref}
       className={clsx(classNames.root, styles[classNames.root], className)}
       {...dataAttributes}
-      style={style}
       {...restProps}
     />
   );