diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 05a0189cb7..f33d5a750f 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -35,15 +35,15 @@ import type { RadioProps as RadioProps_2 } from 'react-aria-components'; import type { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RefAttributes } from 'react'; -import { RowProps } from 'react-aria-components'; +import { RowProps as RowProps_2 } from 'react-aria-components'; import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components'; import type { SelectProps as SelectProps_2 } from 'react-aria-components'; import type { SeparatorProps } from 'react-aria-components'; import type { SortDescriptor as SortDescriptor_2 } from 'react-stately'; import type { SubmenuTriggerProps as SubmenuTriggerProps_2 } from 'react-aria-components'; import type { SwitchProps as SwitchProps_2 } from 'react-aria-components'; -import { TableBodyProps } from 'react-aria-components'; -import { TableHeaderProps } from 'react-aria-components'; +import { TableBodyProps as TableBodyProps_2 } from 'react-aria-components'; +import { TableHeaderProps as TableHeaderProps_2 } from 'react-aria-components'; import { TableProps as TableProps_2 } from 'react-aria-components'; import type { TabListProps as TabListProps_2 } from 'react-aria-components'; import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components'; @@ -688,25 +688,33 @@ export const Cell: { displayName: string; }; +// @public (undocumented) +export type CellOwnProps = { + className?: string; +}; + // @public (undocumented) export const CellProfile: (props: CellProfileProps) => JSX_2.Element; // @public (undocumented) -export interface CellProfileProps extends CellProps_2 { - // (undocumented) - color?: TextColors; - // (undocumented) - description?: string; - // (undocumented) - href?: string; - // (undocumented) - name?: string; - // (undocumented) +export type CellProfileOwnProps = { src?: string; -} + name?: string; + href?: string; + description?: string; + color?: TextColors; + className?: string; +}; // @public (undocumented) -export interface CellProps extends CellProps_2 {} +export interface CellProfileProps + extends CellProfileOwnProps, + Omit {} + +// @public (undocumented) +export interface CellProps + extends CellOwnProps, + Omit {} // @public (undocumented) export const CellText: { @@ -715,18 +723,19 @@ export const CellText: { }; // @public (undocumented) -export interface CellTextProps extends CellProps_2 { - // (undocumented) - color?: TextColors; - // (undocumented) - description?: string; - // (undocumented) - href?: string; - // (undocumented) - leadingIcon?: React.ReactNode | null; - // (undocumented) +export type CellTextOwnProps = { title: string; -} + description?: string; + color?: TextColors; + leadingIcon?: React.ReactNode | null; + href?: string; + className?: string; +}; + +// @public (undocumented) +export interface CellTextProps + extends CellTextOwnProps, + Omit {} // @public (undocumented) export const Checkbox: ForwardRefExoticComponent< @@ -800,10 +809,15 @@ export interface ColumnConfig { } // @public (undocumented) -export interface ColumnProps extends Omit { - // (undocumented) +export type ColumnOwnProps = { children?: React.ReactNode; -} + className?: string; +}; + +// @public (undocumented) +export interface ColumnProps + extends ColumnOwnProps, + Omit {} // @public (undocumented) export type Columns = @@ -1924,6 +1938,18 @@ export interface RowConfig { onClick?: (item: T) => void; } +// @public (undocumented) +export type RowOwnProps = { + columns?: RowProps_2['columns']; + children?: RowProps_2['children']; + href?: string; +}; + +// @public (undocumented) +export interface RowProps + extends RowOwnProps, + Omit, keyof RowOwnProps> {} + // @public (undocumented) export type RowRenderFn = (params: { item: T; @@ -2169,31 +2195,26 @@ export const TableBody: ( props: TableBodyProps, ) => JSX_2.Element; +// @public (undocumented) +export type TableBodyOwnProps = {}; + +// @public (undocumented) +export interface TableBodyProps + extends TableBodyOwnProps, + Omit, keyof TableBodyOwnProps> {} + // @public export const TableDefinition: { - readonly classNames: { - readonly table: 'bui-Table'; - readonly header: 'bui-TableHeader'; - readonly body: 'bui-TableBody'; - readonly row: 'bui-TableRow'; - readonly head: 'bui-TableHead'; - readonly headContent: 'bui-TableHeadContent'; - readonly headSortButton: 'bui-TableHeadSortButton'; - readonly caption: 'bui-TableCaption'; - readonly cell: 'bui-TableCell'; - readonly cellContentWrapper: 'bui-TableCellContentWrapper'; - readonly cellContent: 'bui-TableCellContent'; - readonly cellIcon: 'bui-TableCellIcon'; - readonly cellProfileAvatar: 'bui-TableCellProfileAvatar'; - readonly cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage'; - readonly cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback'; - readonly cellProfileName: 'bui-TableCellProfileName'; - readonly cellProfileLink: 'bui-TableCellProfileLink'; - readonly headSelection: 'bui-TableHeadSelection'; - readonly cellSelection: 'bui-TableCellSelection'; + readonly styles: { + readonly [key: string]: string; }; - readonly dataAttributes: { - readonly stale: readonly [true, false]; + readonly classNames: { + readonly root: 'bui-Table'; + }; + readonly propDefs: { + readonly stale: { + readonly dataAttribute: true; + }; }; }; @@ -2202,6 +2223,17 @@ export const TableHeader: ( props: TableHeaderProps, ) => JSX_2.Element; +// @public (undocumented) +export type TableHeaderOwnProps = { + columns?: TableHeaderProps_2['columns']; + children?: TableHeaderProps_2['children']; +}; + +// @public (undocumented) +export interface TableHeaderProps + extends TableHeaderOwnProps, + Omit, keyof TableHeaderOwnProps> {} + // @public (undocumented) export interface TableItem { // (undocumented) @@ -2298,10 +2330,14 @@ export interface TableProps { export const TableRoot: (props: TableRootProps) => JSX_2.Element; // @public (undocumented) -export interface TableRootProps extends TableProps_2 { - // (undocumented) +export type TableRootOwnProps = { stale?: boolean; -} +}; + +// @public (undocumented) +export interface TableRootProps + extends TableRootOwnProps, + Omit {} // @public (undocumented) export interface TableSelection { diff --git a/packages/ui/src/components/Table/components/Cell.tsx b/packages/ui/src/components/Table/components/Cell.tsx index 809b224a07..b5fc96d520 100644 --- a/packages/ui/src/components/Table/components/Cell.tsx +++ b/packages/ui/src/components/Table/components/Cell.tsx @@ -14,29 +14,16 @@ * limitations under the License. */ -import clsx from 'clsx'; import { Cell as ReactAriaCell } from 'react-aria-components'; import type { CellProps } from '../types'; -import { useStyles } from '../../../hooks/useStyles'; -import { TableDefinition } from '../definition'; -import styles from '../Table.module.css'; +import { useDefinition } from '../../../hooks/useDefinition'; +import { CellDefinition } from '../definition'; /** @public */ const Cell = (props: CellProps) => { - const { classNames, cleanedProps } = useStyles(TableDefinition, { - color: 'primary' as const, - ...props, - }); - const { className, children, ...rest } = cleanedProps; + const { ownProps, restProps } = useDefinition(CellDefinition, props); - return ( - - {children} - - ); + return ; }; Cell.displayName = 'Cell'; diff --git a/packages/ui/src/components/Table/components/CellProfile.tsx b/packages/ui/src/components/Table/components/CellProfile.tsx index 4abef56e01..0565fff909 100644 --- a/packages/ui/src/components/Table/components/CellProfile.tsx +++ b/packages/ui/src/components/Table/components/CellProfile.tsx @@ -14,45 +14,26 @@ * limitations under the License. */ -import clsx from 'clsx'; import { CellProfileProps } from '../types'; import { Text } from '../../Text/Text'; import { Link } from '../../Link/Link'; import { Avatar } from '../../Avatar'; -import { useStyles } from '../../../hooks/useStyles'; -import { TableDefinition } from '../definition'; +import { useDefinition } from '../../../hooks/useDefinition'; +import { CellProfileDefinition } from '../definition'; import { Cell as ReactAriaCell } from 'react-aria-components'; -import styles from '../Table.module.css'; /** @public */ export const CellProfile = (props: CellProfileProps) => { - const { classNames, cleanedProps } = useStyles(TableDefinition, { - color: 'primary' as const, - ...props, - }); - const { className, src, name, href, description, color, ...rest } = - cleanedProps; + const { ownProps, restProps } = useDefinition(CellProfileDefinition, props); + const { classes, src, name, href, description, color } = ownProps; return ( - -
+ +
{src && name && ( )} -
+
{name && href ? ( {name} ) : ( diff --git a/packages/ui/src/components/Table/components/CellText.tsx b/packages/ui/src/components/Table/components/CellText.tsx index 8855c92e80..30b02b1e44 100644 --- a/packages/ui/src/components/Table/components/CellText.tsx +++ b/packages/ui/src/components/Table/components/CellText.tsx @@ -14,48 +14,23 @@ * limitations under the License. */ -import clsx from 'clsx'; import { Text } from '../../Text'; import { Link } from '../../Link'; import { Cell as ReactAriaCell } from 'react-aria-components'; import type { CellTextProps } from '../types'; -import { useStyles } from '../../../hooks/useStyles'; -import { TableDefinition } from '../definition'; -import styles from '../Table.module.css'; +import { useDefinition } from '../../../hooks/useDefinition'; +import { CellTextDefinition } from '../definition'; /** @public */ const CellText = (props: CellTextProps) => { - const { classNames, cleanedProps } = useStyles(TableDefinition, { - color: 'primary' as const, - ...props, - }); - const { className, title, description, color, leadingIcon, href, ...rest } = - cleanedProps; + const { ownProps, restProps } = useDefinition(CellTextDefinition, props); + const { classes, title, description, color, leadingIcon, href } = ownProps; return ( - -
- {leadingIcon && ( -
- {leadingIcon} -
- )} -
+ +
+ {leadingIcon &&
{leadingIcon}
} +
{href ? ( { - const { classNames, cleanedProps } = useStyles(TableDefinition, props); - const { className, children, ...rest } = cleanedProps; + const { ownProps, restProps } = useDefinition(ColumnDefinition, props); + const { classes, children } = ownProps; return ( - + {({ allowsSorting }) => ( -
+
{children} {allowsSorting && ( -