From a06731af6721d88033e0e6ada661d72e74341e10 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Thu, 26 Feb 2026 16:15:03 +0100 Subject: [PATCH] Address review feedback for RadioGroup, Select, and TablePagination Signed-off-by: Johan Persson --- packages/ui/report.api.md | 10 +++++--- .../ui/src/components/RadioGroup/types.ts | 2 +- packages/ui/src/components/Select/Select.tsx | 9 +++---- .../ui/src/components/Select/definition.ts | 24 +++++-------------- packages/ui/src/components/Select/types.ts | 17 +++++++++++++ .../TablePagination/TablePagination.tsx | 13 ++-------- .../components/TablePagination/definition.ts | 15 +++++++++--- 7 files changed, 48 insertions(+), 42 deletions(-) diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 75d6da278e..05a0189cb7 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -1896,7 +1896,7 @@ export type RadioGroupOwnProps = { // @public (undocumented) export interface RadioGroupProps extends RadioGroupOwnProps, - Omit {} + Omit {} // @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: {}; }; }; diff --git a/packages/ui/src/components/RadioGroup/types.ts b/packages/ui/src/components/RadioGroup/types.ts index a0011f3759..dbef43b552 100644 --- a/packages/ui/src/components/RadioGroup/types.ts +++ b/packages/ui/src/components/RadioGroup/types.ts @@ -34,7 +34,7 @@ export type RadioGroupOwnProps = { /** @public */ export interface RadioGroupProps extends RadioGroupOwnProps, - Omit {} + Omit {} /** @public */ export type RadioOwnProps = { diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx index 48fd08184c..4b0ce5a6b6 100644 --- a/packages/ui/src/components/Select/Select.tsx +++ b/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< ()({ }, }); -/** @internal */ -interface SelectTriggerOwnProps { - icon?: SelectOwnProps['icon']; -} - /** * Component definition for SelectTrigger * @internal @@ -65,13 +65,6 @@ export const SelectTriggerDefinition = defineComponent()( }, ); -/** @internal */ -interface SelectContentOwnProps { - searchable?: boolean; - searchPlaceholder?: string; - options?: SelectOwnProps['options']; -} - /** * Component definition for SelectContent * @internal @@ -92,11 +85,6 @@ export const SelectContentDefinition = defineComponent()( }, ); -/** @internal */ -interface SelectListBoxOwnProps { - options?: SelectOwnProps['options']; -} - /** * Component definition for SelectListBox * @internal diff --git a/packages/ui/src/components/Select/types.ts b/packages/ui/src/components/Select/types.ts index 1cc441d71d..c9de97a089 100644 --- a/packages/ui/src/components/Select/types.ts +++ b/packages/ui/src/components/Select/types.ts @@ -70,3 +70,20 @@ export interface SelectProps */ 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']; +} diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx index 8796c319bb..745088bf2f 100644 --- a/packages/ui/src/components/TablePagination/TablePagination.tsx +++ b/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; diff --git a/packages/ui/src/components/TablePagination/definition.ts b/packages/ui/src/components/TablePagination/definition.ts index 1e6dc1a476..516f05cdda 100644 --- a/packages/ui/src/components/TablePagination/definition.ts +++ b/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: {}, }, });