Address review feedback for RadioGroup, Select, and TablePagination

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

packages/ui/report.api.md

@@ -1896,7 +1896,7 @@ export type RadioGroupOwnProps = {
 // @public (undocumented)
 export interface RadioGroupProps
   extends RadioGroupOwnProps,
-    Omit<RadioGroupProps_2, 'children' | keyof RadioGroupOwnProps> {}
+    Omit<RadioGroupProps_2, keyof RadioGroupOwnProps> {}
 
 // @public (undocumented)
 export type RadioOwnProps = {
@@ -2224,7 +2224,9 @@ export const TablePaginationDefinition: {
   };
   readonly propDefs: {
     readonly pageSize: {};
-    readonly pageSizeOptions: {};
+    readonly pageSizeOptions: {
+      readonly default: PageSizeOption[];
+    };
     readonly offset: {};
     readonly totalCount: {};
     readonly hasNextPage: {};
@@ -2232,7 +2234,9 @@ export const TablePaginationDefinition: {
     readonly onNextPage: {};
     readonly onPreviousPage: {};
     readonly onPageSizeChange: {};
-    readonly showPageSizeOptions: {};
+    readonly showPageSizeOptions: {
+      readonly default: true;
+    };
     readonly getLabel: {};
   };
 };

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

@@ -34,7 +34,7 @@ export type RadioGroupOwnProps = {
 /** @public */
 export interface RadioGroupProps
   extends RadioGroupOwnProps,
-    Omit<AriaRadioGroupProps, 'children' | keyof RadioGroupOwnProps> {}
+    Omit<AriaRadioGroupProps, keyof RadioGroupOwnProps> {}
 
 /** @public */
 export type RadioOwnProps = {

packages/ui/src/components/Select/Select.tsx

@@ -16,11 +16,11 @@
 
 import { forwardRef, useEffect } from 'react';
 import { Select as AriaSelect, Popover } from 'react-aria-components';
-import clsx from 'clsx';
 import { SelectProps } from './types';
 import { useDefinition } from '../../hooks/useDefinition';
 import { SelectDefinition } from './definition';
 import { PopoverDefinition } from '../Popover/definition';
+import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
 import { SelectTrigger } from './SelectTrigger';
@@ -38,6 +38,7 @@ export const Select = forwardRef<
       ...props,
     },
   );
+  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});
 
   const {
     classes,
@@ -79,11 +80,7 @@ export const Select = forwardRef<
       <SelectTrigger icon={icon} />
       <FieldError />
       <Popover
-        className={clsx(
-          PopoverDefinition.classNames.root,
-          PopoverDefinition.styles[PopoverDefinition.classNames.root],
-          classes.popover,
-        )}
+        className={clsx(popoverOwnProps.classes.root, classes.popover)}
         {...dataAttributes}
       >
         <SelectContent

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

@@ -15,7 +15,12 @@
  */
 
 import { defineComponent } from '../../hooks/useDefinition';
-import type { SelectOwnProps } from './types';
+import type {
+  SelectOwnProps,
+  SelectTriggerOwnProps,
+  SelectContentOwnProps,
+  SelectListBoxOwnProps,
+} from './types';
 import styles from './Select.module.css';
 
 /**
@@ -42,11 +47,6 @@ export const SelectDefinition = defineComponent<SelectOwnProps>()({
   },
 });
 
-/** @internal */
-interface SelectTriggerOwnProps {
-  icon?: SelectOwnProps['icon'];
-}
-
 /**
  * Component definition for SelectTrigger
  * @internal
@@ -65,13 +65,6 @@ export const SelectTriggerDefinition = defineComponent<SelectTriggerOwnProps>()(
   },
 );
 
-/** @internal */
-interface SelectContentOwnProps {
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  options?: SelectOwnProps['options'];
-}
-
 /**
  * Component definition for SelectContent
  * @internal
@@ -92,11 +85,6 @@ export const SelectContentDefinition = defineComponent<SelectContentOwnProps>()(
   },
 );
 
-/** @internal */
-interface SelectListBoxOwnProps {
-  options?: SelectOwnProps['options'];
-}
-
 /**
  * Component definition for SelectListBox
  * @internal

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

@@ -70,3 +70,20 @@ export interface SelectProps<T extends 'single' | 'multiple'>
    */
   selectionMode?: T;
 }
+
+/** @internal */
+export interface SelectTriggerOwnProps {
+  icon?: SelectOwnProps['icon'];
+}
+
+/** @internal */
+export interface SelectContentOwnProps {
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  options?: SelectOwnProps['options'];
+}
+
+/** @internal */
+export interface SelectListBoxOwnProps {
+  options?: SelectOwnProps['options'];
+}

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

@@ -24,15 +24,6 @@ import { TablePaginationDefinition } from './definition';
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
 import { useMemo } from 'react';
 
-const DEFAULT_PAGE_SIZE_OPTIONS: PageSizeOption[] = [
-  { label: 'Show 5 results', value: 5 },
-  { label: 'Show 10 results', value: 10 },
-  { label: 'Show 20 results', value: 20 },
-  { label: 'Show 30 results', value: 30 },
-  { label: 'Show 40 results', value: 40 },
-  { label: 'Show 50 results', value: 50 },
-];
-
 function getOptionValue(option: number | PageSizeOption): number {
   return typeof option === 'number' ? option : option.value;
 }
@@ -65,7 +56,7 @@ export function TablePagination(props: TablePaginationProps) {
   const {
     classes,
     pageSize,
-    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+    pageSizeOptions,
     offset,
     totalCount,
     hasNextPage,
@@ -73,7 +64,7 @@ export function TablePagination(props: TablePaginationProps) {
     onNextPage,
     onPreviousPage,
     onPageSizeChange,
-    showPageSizeOptions = true,
+    showPageSizeOptions,
     getLabel,
   } = ownProps;
 

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

@@ -15,9 +15,18 @@
  */
 
 import { defineComponent } from '../../hooks/useDefinition';
-import type { TablePaginationOwnProps } from './types';
+import type { TablePaginationOwnProps, PageSizeOption } from './types';
 import styles from './TablePagination.module.css';
 
+const DEFAULT_PAGE_SIZE_OPTIONS: PageSizeOption[] = [
+  { label: 'Show 5 results', value: 5 },
+  { label: 'Show 10 results', value: 10 },
+  { label: 'Show 20 results', value: 20 },
+  { label: 'Show 30 results', value: 30 },
+  { label: 'Show 40 results', value: 40 },
+  { label: 'Show 50 results', value: 50 },
+];
+
 /**
  * Component definition for TablePagination
  * @public
@@ -33,7 +42,7 @@ export const TablePaginationDefinition =
     },
     propDefs: {
       pageSize: {},
-      pageSizeOptions: {},
+      pageSizeOptions: { default: DEFAULT_PAGE_SIZE_OPTIONS },
       offset: {},
       totalCount: {},
       hasNextPage: {},
@@ -41,7 +50,7 @@ export const TablePaginationDefinition =
       onNextPage: {},
       onPreviousPage: {},
       onPageSizeChange: {},
-      showPageSizeOptions: {},
+      showPageSizeOptions: { default: true },
       getLabel: {},
     },
   });