@react-types/table - npm Package Compare versions

Comparing version 3.0.0-rc.6 to 3.0.0-rc.7

package.json

 {
   "name": "@react-types/table",
-  "version": "3.0.0-rc.6",
+  "version": "3.0.0-rc.7",
   "description": "Spectrum UI components in React",
@@ -12,3 +12,4 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-types/shared": "^3.3.0"
+    "@react-types/grid": "3.0.0-rc.0",
+    "@react-types/shared": "^3.8.0"
   },
@@ -21,3 +22,3 @@ "peerDependencies": {
   },
-  "gitHead": "9f738a06ea4e256c8d975f00502b4b0bbabb8f65"
+  "gitHead": "2e7e9a0831380a511b87fd75d1e5c3bc65227c99"
 }

src/index.d.ts

@@ -13,7 +13,10 @@ /*
 
-import {AriaLabelingProps, AsyncLoadable, Collection, CollectionChildren, DOMProps, MultipleSelection, Node, SectionProps, Sortable, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, AsyncLoadable, CollectionChildren, DOMProps, LoadingState, MultipleSelection, Sortable, StyleProps} from '@react-types/shared';
+import {GridCollection, GridNode} from '@react-types/grid';
 import {Key, ReactElement, ReactNode} from 'react';
 
 export interface TableProps<T> extends MultipleSelection, Sortable {
-  children: ReactElement<TableHeaderProps<T> | TableBodyProps<T> | SectionProps<T> | RowProps<T>>[],
+  /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
+  children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
+  /** A list of row keys to disable. */
   disabledKeys?: Iterable<Key>
@@ -23,5 +26,15 @@ }
 export interface SpectrumTableProps<T> extends TableProps<T>, DOMProps, AriaLabelingProps, StyleProps {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * @default 'regular'
+   */
   density?: 'compact' | 'regular' | 'spacious',
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * @default 'truncate'
+   */
   overflowMode?: 'wrap' | 'truncate',
+  /** Whether the TableView should be displayed with a quiet style. */
   isQuiet?: boolean,
+  /** Sets what the TableView should render when there is no content to display. */
   renderEmptyState?: () => JSX.Element
@@ -31,3 +44,5 @@ }
 export interface TableHeaderProps<T> {
+  /** A list of table columns. */
   columns?: T[],
+  /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
   children: ColumnElement<T> | ColumnElement<T>[] | ColumnRenderer<T>
@@ -39,10 +54,21 @@ }
 export interface ColumnProps<T> {
+  /** Rendered contents of the column if `children` contains child columns. */
   title?: ReactNode,
+  /** Static child columns or content to render as the column header. */
   children: ReactNode | ColumnElement<T> | ColumnElement<T>[],
+  /** A list of child columns used when dynamically rendering nested child columns. */
   childColumns?: T[],
-  'aria-label'?: string,
+  /** The width of the column. */
   width?: number | string,
+  /** The minimum width of the column. */
   minWidth?: number | string,
+  /** The maximum width of the column. */
   maxWidth?: number | string,
-  defaultWidth?: number | string
+  // defaultWidth?: number | string
+  /** Whether the column allows sorting. */
+  allowsSorting?: boolean,
+  /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */
+  isRowHeader?: boolean,
+  /** A string representation of the column's contents, used for accessibility announcements. */
+  textValue?: string
 }
@@ -52,30 +78,45 @@
 export interface SpectrumColumnProps<T> extends ColumnProps<T> {
+  /**
+   * The alignment of the column's contents relative to its allotted width.
+   * @default 'start'
+   */
   align?: 'start' | 'center' | 'end',
-  allowsResizing?: boolean,
-  allowsReordering?: boolean,
-  allowsSorting?: boolean,
-  isSticky?: boolean, // shouldStick??
-  isRowHeader?: boolean,
+  // /** Whether the column should stick to the viewport when scrolling. */
+  // isSticky?: boolean, // shouldStick?? Not implemented yet?
+  /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
+  /**
+   * Whether the column should hide its header text. A tooltip with the column's header text
+   * will be displayed when the column header is focused instead. Note that this prop is specifically for columns
+   * that contain ActionButtons in place of text content.
+   */
   hideHeader?: boolean
 }
 
-export interface TableBodyProps<T> extends AsyncLoadable {
+export interface TableBodyProps<T> extends Omit<AsyncLoadable, 'isLoading'> {
+  /** The contents of the table body. Supports static items or a function for dynamic rendering. */
   children: CollectionChildren<T>,
-  items?: Iterable<T>
+  /** A list of row objects in the table body used when dynamically rendering rows. */
+  items?: Iterable<T>,
+  /** The current loading state of the table. */
+  loadingState?: LoadingState
 }
 
-export interface RowProps<T> {
-  // treeble case?
-  childItems?: Iterable<T>,
-  hasChildItems?: boolean,
+export interface RowProps {
+  // treeble case? Unsupported props for now
+  // /** A list of child item objects used when dynamically rendering row children. */
+  // childItems?: Iterable<T>,
+  // /** Whether this row has children, even if not loaded yet. */
+  // hasChildItems?: boolean,
+  /** Rendered contents of the row or row child items. */
   children: CellElement | CellElement[] | CellRenderer,
-  textValue?: string, // ???
-  'aria-label'?: string // ???
+  /** A string representation of the row's contents, used for features like typeahead. */
+  textValue?: string // ???
 }
 
 export interface CellProps {
+  /** The contents of the cell. */
   children: ReactNode,
-  textValue?: string,
-  'aria-label'?: string
+  /** A string representation of the cell's contents, used for features like typeahead. */
+  textValue?: string
 }
@@ -86,12 +127,12 @@
 
-export interface TableCollection<T> extends Collection<TableNode<T>> {
-  headerRows: TableNode<T>[],
-  columns: TableNode<T>[],
+export interface TableCollection<T> extends GridCollection<T> {
+  // TODO perhaps elaborate on this? maybe not clear enought, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc)
+  /** A list of header row nodes in the table. */
+  headerRows: GridNode<T>[],
+  /** A list of column nodes in the table. */
+  columns: GridNode<T>[],
+  /** A set of column keys that serve as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */
   rowHeaderColumnKeys: Set<Key>,
-  body: TableNode<T>
+  /** The node that makes up the body of the table. */
+  body: GridNode<T>
 }
-
-export interface TableNode<T> extends Node<T> {
-  column?: TableNode<T>,
-  colspan?: number
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17916

increased by19.49%

Lines of code

121

increased by53.16%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@react-types/grid@3.0.0-rc.0

• + Added@react-types/grid@3.0.0-rc.0(transitive)

• Updated@react-types/shared@^3.8.0