Migrate TablePagination component from useStyles to useDefinition

Signed-off-by: Johan Persson <johanopersson@gmail.com>

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

@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-import clsx from 'clsx';
 import { useId } from 'react-aria';
 import { Text } from '../Text';
 import { ButtonIcon } from '../ButtonIcon';
 import { Select } from '../Select';
 import type { TablePaginationProps, PageSizeOption } from './types';
-import { useStyles } from '../../hooks/useStyles';
+import { useDefinition } from '../../hooks/useDefinition';
 import { TablePaginationDefinition } from './definition';
-import styles from './TablePagination.module.css';
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
 import { useMemo } from 'react';
 
@@ -62,20 +60,23 @@ function normalizePageSizeOptions(
  *
  * @public
  */
-export function TablePagination({
-  pageSize,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  offset,
-  totalCount,
-  hasNextPage,
-  hasPreviousPage,
-  onNextPage,
-  onPreviousPage,
-  onPageSizeChange,
-  showPageSizeOptions = true,
-  getLabel,
-}: TablePaginationProps) {
-  const { classNames } = useStyles(TablePaginationDefinition, {});
+export function TablePagination(props: TablePaginationProps) {
+  const { ownProps } = useDefinition(TablePaginationDefinition, props);
+  const {
+    classes,
+    pageSize,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+    offset,
+    totalCount,
+    hasNextPage,
+    hasPreviousPage,
+    onNextPage,
+    onPreviousPage,
+    onPageSizeChange,
+    showPageSizeOptions = true,
+    getLabel,
+  } = ownProps;
+
   const labelId = useId();
   const normalizedOptions = useMemo(
     () => normalizePageSizeOptions(pageSizeOptions),
@@ -108,8 +109,8 @@ export function TablePagination({
   }
 
   return (
-    <div className={clsx(classNames.root, styles[classNames.root])}>
-      <div className={clsx(classNames.left, styles[classNames.left])}>
+    <div className={classes.root}>
+      <div className={classes.left}>
         {showPageSizeOptions && (
           <Select
             name="pageSize"
@@ -124,11 +125,11 @@ export function TablePagination({
               const newPageSize = Number(value);
               onPageSizeChange?.(newPageSize);
             }}
-            className={clsx(classNames.select, styles[classNames.select])}
+            className={classes.select}
           />
         )}
       </div>
-      <div className={clsx(classNames.right, styles[classNames.right])}>
+      <div className={classes.right}>
         {hasItems && (
           <Text as="p" variant="body-medium" id={labelId}>
             {label}

packages/ui/src/components/TablePagination/definition.ts

@@ -14,17 +14,34 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { TablePaginationOwnProps } from './types';
+import styles from './TablePagination.module.css';
 
 /**
  * Component definition for TablePagination
  * @public
  */
-export const TablePaginationDefinition = {
-  classNames: {
-    root: 'bui-TablePagination',
-    left: 'bui-TablePaginationLeft',
-    right: 'bui-TablePaginationRight',
-    select: 'bui-TablePaginationSelect',
-  },
-} as const satisfies ComponentDefinition;
+export const TablePaginationDefinition =
+  defineComponent<TablePaginationOwnProps>()({
+    styles,
+    classNames: {
+      root: 'bui-TablePagination',
+      left: 'bui-TablePaginationLeft',
+      right: 'bui-TablePaginationRight',
+      select: 'bui-TablePaginationSelect',
+    },
+    propDefs: {
+      pageSize: {},
+      pageSizeOptions: {},
+      offset: {},
+      totalCount: {},
+      hasNextPage: {},
+      hasPreviousPage: {},
+      onNextPage: {},
+      onPreviousPage: {},
+      onPageSizeChange: {},
+      showPageSizeOptions: {},
+      getLabel: {},
+    },
+  });

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

@@ -15,5 +15,9 @@
  */
 
 export { TablePagination } from './TablePagination';
-export type { TablePaginationProps, PageSizeOption } from './types';
+export type {
+  TablePaginationProps,
+  TablePaginationOwnProps,
+  PageSizeOption,
+} from './types';
 export { TablePaginationDefinition } from './definition';

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

@@ -21,7 +21,7 @@ export interface PageSizeOption {
 }
 
 /** @public */
-export interface TablePaginationProps {
+export type TablePaginationOwnProps = {
   pageSize: number;
   pageSizeOptions?: number[] | PageSizeOption[];
   offset?: number;
@@ -37,4 +37,7 @@ export interface TablePaginationProps {
     offset?: number;
     totalCount?: number;
   }) => string;
-}
+};
+
+/** @public */
+export interface TablePaginationProps extends TablePaginationOwnProps {}