@hyphen/hyphen-components 8.0.1 → 9.0.0-beta.1

package/src/components/Table/TableBody/TableBody.tsx

@@ -1,22 +1,22 @@
-import React, { FC, Key } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import styles from './TableBody.module.scss';
 import { Column, Row } from '../../../types';
 import { TableRow } from '../common/TableRow/TableRow';
 
-export interface TableBodyProps {
+export interface TableBodyProps<TRow extends object = Row> {
   /**
    * The table columns to be rendered
    */
-  columns: Column[];
+  columns: Column<TRow>[];
   /**
    * The unique key to identify a React node for each row.
    */
-  rowKey: Key;
+  rowKey: Extract<keyof TRow, string>;
   /**
    * The table rows to be rendered
    */
-  rows: Row[];
+  rows: TRow[];
   /**
    * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
    * for a specific column.
@@ -54,9 +54,10 @@ export interface TableBodyProps {
   truncateOverflow?: boolean;
 }
 
-export const TableBody: FC<TableBodyProps> = ({
+export const TableBody = <TRow extends object = Row,>({
   columns,
   rows,
+  rowKey,
   align = 'left',
   className = '',
   emptyCellPlaceholder = '',
@@ -65,7 +66,7 @@ export const TableBody: FC<TableBodyProps> = ({
   isCompact = false,
   isStriped = false,
   truncateOverflow = false,
-}) => {
+}: TableBodyProps<TRow>) => {
   const tableBodyClasses = classNames(
     styles['table-body'],
     {
@@ -75,6 +76,20 @@ export const TableBody: FC<TableBodyProps> = ({
     className
   );
 
+  const getRowKey = (row: TRow, rowIndex: number): string => {
+    const keyValue = row?.[rowKey];
+
+    if (
+      typeof keyValue === 'string' ||
+      typeof keyValue === 'number' ||
+      typeof keyValue === 'bigint'
+    ) {
+      return `row-key-${String(keyValue)}`;
+    }
+
+    return `row-index-${rowIndex}`;
+  };
+
   return (
     <tbody className={tableBodyClasses}>
       {rows.map((row, rowIndex) => (
@@ -83,7 +98,7 @@ export const TableBody: FC<TableBodyProps> = ({
           row={row}
           rowIndex={rowIndex}
           align={align}
-          key={rowIndex}
+          key={getRowKey(row, rowIndex)}
           emptyCellPlaceholder={emptyCellPlaceholder}
           truncateOverflow={truncateOverflow}
           isBorderless={isBorderless}

package/src/components/Table/TableHead/TableHead.tsx

@@ -1,13 +1,13 @@
-import React, { FC } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { Column, EventWithColumnKey } from '../../../types';
+import { Column, EventWithColumnKey, Row } from '../../../types';
 import { TableRow } from '../common/TableRow/TableRow';
 
-export interface TableHeadProps {
+export interface TableHeadProps<TRow extends object = Row> {
   /**
    * The table columns to be rendered
    */
-  columns: Column[];
+  columns: Column<TRow>[];
   /**
    * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
    * for a specific column.
@@ -47,7 +47,7 @@ export interface TableHeadProps {
   truncateOverflow?: boolean;
 }
 
-export const TableHead: FC<TableHeadProps> = ({
+export const TableHead = <TRow extends object = Row,>({
   columns,
   align = 'left',
   className = '',
@@ -57,7 +57,7 @@ export const TableHead: FC<TableHeadProps> = ({
   onSort = undefined,
   sortedColumn = undefined,
   truncateOverflow = false,
-}) => {
+}: TableHeadProps<TRow>) => {
   const tableHeadClasses = classNames(className);
 
   return (

package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.tsx

@@ -1,15 +1,15 @@
-import React, { FC, Key, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import React, { Key, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Box } from '../../../Box/Box';
 import { Icon } from '../../../Icon/Icon';
-import { Column, EventWithColumnKey } from '../../../../types';
+import { Column, EventWithColumnKey, Row } from '../../../../types';
 import styles from './TableHeaderCell.module.scss';
 
-export interface TableHeaderCellProps {
+export interface TableHeaderCellProps<TRow extends object = Row> {
   /**
    * Title to display for the column.
    */
-  column: Column;
+  column: Column<TRow>;
   /**
    * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
    * for a specific column.
@@ -69,7 +69,7 @@ export interface TableHeaderCellProps {
 }
 
 // eslint-disable-line import/prefer-default-export
-export const TableHeaderCell: FC<TableHeaderCellProps> = ({
+export const TableHeaderCell = <TRow extends object = Row,>({
   column,
   align = 'left',
   className = undefined,
@@ -83,7 +83,7 @@ export const TableHeaderCell: FC<TableHeaderCellProps> = ({
   sticky = undefined,
   truncateOverflow = false,
   width = undefined,
-}) => {
+}: TableHeaderCellProps<TRow>) => {
   const isColumnSorted = (columnDataKey: Key | undefined): boolean =>
     !!sortedColumn && sortedColumn.dataKey === columnDataKey;
 

package/src/components/Table/common/TableRow/TableRow.test.tsx

@@ -33,7 +33,7 @@ describe('TableRow', () => {
       render(
         <TableRow row={row} rowIndex={rowIndex} columns={customClassCell} />
       );
-      expect(func).toHaveBeenCalledWith(customClassCell[0], row, rowIndex);
+      expect(func).toHaveBeenCalledWith(row.id, row, rowIndex);
       const element = document.getElementsByClassName('my-custom-class')[0];
       expect(element).toBeInTheDocument();
     });
@@ -48,5 +48,21 @@ describe('TableRow', () => {
       const element = document.getElementsByClassName('string-class')[0];
       expect(element).toBeInTheDocument();
     });
+
+    test('renders a placeholder instead of a non-renderable row value', () => {
+      render(
+        <TableRow
+          row={{ metadata: { state: 'ready' }, action: <button>Open</button> }}
+          columns={[
+            { heading: 'Metadata', dataKey: 'metadata' },
+            { heading: 'Action', dataKey: 'action' },
+          ]}
+          emptyCellPlaceholder="--"
+        />
+      );
+
+      expect(screen.getByText('--')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
+    });
   });
 });

package/src/components/Table/common/TableRow/TableRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './TableRow.module.scss';
 import { Column, EventWithColumnKey, Row } from '../../../../types';
@@ -6,11 +6,11 @@ import { getColumnKeys } from '../../../../lib/getColumnKeys';
 import TableBodyCell from '../../TableBody/TableBodyCell/TableBodyCell';
 import { TableHeaderCell } from '../../TableHead/TableHeaderCell/TableHeaderCell';
 
-export interface TableRowProps {
+export interface TableRowProps<TRow extends object = Row> {
   /**
    * The table columns to be rendered
    */
-  columns: Column[];
+  columns: Column<TRow>[];
   /**
    * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
    * for a specific column.
@@ -52,7 +52,7 @@ export interface TableRowProps {
   /**
    * The specific row to be rendered.
    */
-  row?: Row;
+  row?: TRow;
   /**
    * The unique key to identify a React node for each row.
    */
@@ -71,7 +71,7 @@ export interface TableRowProps {
   truncateOverflow?: boolean;
 }
 
-export const TableRow: FC<TableRowProps> = ({
+export const TableRow = <TRow extends object = Row,>({
   columns,
   align = 'left',
   className = '',
@@ -86,26 +86,46 @@ export const TableRow: FC<TableRowProps> = ({
   row = undefined,
   rowIndex = undefined,
   truncateOverflow = false,
-}) => {
+}: TableRowProps<TRow>) => {
   const tableRowClasses = classNames(
     styles['table-row'],
     { [styles.hoverable]: isHoverable },
     className
   );
 
-  const renderCellContent = (column: Column): ReactNode => {
+  const isRenderableCell = (value: unknown): value is ReactNode => {
+    if (value === null || value === undefined) return true;
+
+    const valueType = typeof value;
+    if (
+      valueType === 'string' ||
+      valueType === 'number' ||
+      valueType === 'boolean'
+    ) {
+      return true;
+    }
+
+    if (Array.isArray(value)) return value.every(isRenderableCell);
+
+    return React.isValidElement(value);
+  };
+
+  const renderCellContent = (column: Column<TRow>): ReactNode => {
     if (column.render) {
       const cellValue = column.dataKey && row ? row[column.dataKey] : undefined;
       return column.render(cellValue, row, rowIndex);
     }
 
-    return column.dataKey && row ? row[column.dataKey] : null;
+    const cellValue = column.dataKey && row ? row[column.dataKey] : null;
+    return isRenderableCell(cellValue) ? cellValue : null;
   };
 
-  const getCellClassName = (column: Column): string | undefined => {
+  const getCellClassName = (column: Column<TRow>): string | undefined => {
     if (column.cellClassName) {
       if (typeof column.cellClassName === 'function') {
-        return column.cellClassName(column, row, rowIndex);
+        const cellValue =
+          column.dataKey && row ? row[column.dataKey] : undefined;
+        return column.cellClassName(cellValue, row, rowIndex);
       }
       return column.cellClassName;
     }

package/src/components/TextInput/TextInput.tsx

@@ -3,7 +3,6 @@ import React, {
   ChangeEvent,
   FocusEvent,
   ForwardRefExoticComponent,
-  HTMLProps,
   InputHTMLAttributes,
   KeyboardEvent,
   MouseEvent,
@@ -11,7 +10,7 @@ import React, {
   forwardRef,
 } from 'react';
 
-import { FormControl } from '../FormControl/FormControl';
+import { FormControl, FormControlProps } from '../FormControl/FormControl';
 import { Icon } from '../Icon/Icon';
 import { ResponsiveProp } from '../../types';
 import classNames from 'classnames';
@@ -21,7 +20,7 @@ import { getAutoCompleteValue } from '../../lib/getAutoCompleteValue';
 import styles from './TextInput.module.scss';
 
 export type TextInputSizeType = 'sm' | 'md' | 'lg';
-export interface TextInputProps {
+interface TextInputOwnProps {
   /**
    * The input's id attribute. Used to programmatically tie the input with its label.
    */
@@ -38,6 +37,10 @@ export interface TextInputProps {
    * The text value of the input. Required since our Input is a controlled component.
    */
   value: InputHTMLAttributes<HTMLInputElement>['value'];
+  /**
+   * The input's autocomplete behavior.
+   */
+  autoComplete?: boolean | string;
   /**
    * Automatically focus the input when the page is loaded.
    */
@@ -62,7 +65,7 @@ export interface TextInputProps {
   /**
    * Props passed directly to the input element of the component
    */
-  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  inputProps?: Omit<BoxProps<'input'>, 'as'>;
   /**
    * The input's disabled attribute
    */
@@ -119,12 +122,11 @@ export interface TextInputProps {
    * The input 'type' value. Defaults to type 'text'.
    */
   type?: InputHTMLAttributes<HTMLInputElement>['type'];
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+export type TextInputProps = TextInputOwnProps &
+  Omit<FormControlProps, keyof TextInputOwnProps>;
+
 export const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef<
   HTMLDivElement,
   TextInputProps

package/src/components/TextInputInset/TextInputInset.tsx

@@ -6,7 +6,6 @@ import React, {
   FocusEvent,
   ForwardRefExoticComponent,
   ReactNode,
-  HTMLProps,
   InputHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
@@ -38,6 +37,10 @@ export interface TextInputInsetProps {
    * The text value of the input. Required since our Input is a controlled component.
    */
   value: InputHTMLAttributes<HTMLInputElement>['value'];
+  /**
+   * The input's autocomplete behavior.
+   */
+  autoComplete?: boolean | string;
   /**
    * Automatically focus the input when the page is loaded.
    */
@@ -58,7 +61,7 @@ export interface TextInputInsetProps {
   /**
    * Props passed directly to the input element of the component
    */
-  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  inputProps?: Omit<BoxProps<'input'>, 'as'>;
   /**
    * The input's disabled attribute
    */
@@ -115,10 +118,6 @@ export interface TextInputInsetProps {
    * The input 'type' value. Defaults to type 'text'.
    */
   type?: InputHTMLAttributes<HTMLInputElement>['type'];
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps> =

package/src/components/TextareaInput/TextareaInput.tsx

@@ -9,7 +9,7 @@ import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import styles from './TextareaInput.module.scss';
 
 export type TextareaInputSize = 'sm' | 'md' | 'lg';
-export interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
+interface TextareaInputOwnProps {
   /**
    * The input's id attribute. Used to programmatically tie the input with its label.
    */
@@ -96,12 +96,11 @@ export interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
    * The size of the text input.
    */
   size?: TextareaInputSize | ResponsiveProp<TextareaInputSize>;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+export type TextareaInputProps = TextareaInputOwnProps &
+  Omit<BoxProps<'div'>, keyof TextareaInputOwnProps | 'as' | 'width'>;
+
 export const TextareaInput: FC<TextareaInputProps> = ({
   id,
   label,

package/src/components/TextareaInputInset/TextareaInputInset.tsx

@@ -4,8 +4,7 @@ import React, {
   FocusEvent,
   ForwardRefExoticComponent,
   ReactNode,
-  HTMLProps,
-  InputHTMLAttributes,
+  TextareaHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 import { ResponsiveProp } from '../../types';
@@ -30,11 +29,15 @@ export interface TextareaInputInsetProps {
   /**
    * Callback function to call on change event.
    */
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   /**
    * The text value of the input. Required since our Input is a controlled component.
    */
-  value: InputHTMLAttributes<HTMLInputElement>['value'];
+  value: TextareaHTMLAttributes<HTMLTextAreaElement>['value'];
+  /**
+   * The textarea's autocomplete behavior.
+   */
+  autoComplete?: boolean | string;
   /**
    * Automatically focus the input when the page is loaded.
    */
@@ -55,7 +58,7 @@ export interface TextareaInputInsetProps {
   /**
    * Props passed directly to the input element of the component
    */
-  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  inputProps?: Omit<BoxProps<'textarea'>, 'as'>;
   /**
    * The input's disabled attribute
    */
@@ -76,11 +79,11 @@ export interface TextareaInputInsetProps {
   /**
    * Callback function to call on blur event.
    */
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
   /**
    * Callback function to call on focus event.
    */
-  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
   /**
    * The input placeholder attribute.
    */
@@ -109,14 +112,6 @@ export interface TextareaInputInsetProps {
    * An input helper rendered after the input field value
    */
   suffix?: ReactNode;
-  /**
-   * The input 'type' value. Defaults to type 'text'.
-   */
-  type?: InputHTMLAttributes<HTMLInputElement>['type'];
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetProps> =
@@ -144,7 +139,6 @@ export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetPro
         resize = 'vertical',
         rows = 5,
         size = 'md',
-        type = 'text',
       },
       ref
     ) => {
@@ -180,7 +174,6 @@ export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetPro
         placeholder,
         required: isRequired,
         rows,
-        type,
         value,
       };
 

package/src/components/Toast/Toast.stories.tsx

@@ -90,7 +90,11 @@ export const Column = () =>
       {
         heading: 'Type',
         dataKey: 'type',
-        render: (cell?: Cell) => <code style={codePreviewStyle}>{cell}</code>,
+        render: (cell?: Cell) => (
+          <code style={codePreviewStyle}>
+            {typeof cell === 'string' || typeof cell === 'number' ? cell : null}
+          </code>
+        ),
       },
       { heading: 'Description', dataKey: 'description' },
     ];

package/src/lib/getColumnKeys.ts

@@ -1,10 +1,12 @@
 import { Key } from 'react';
-import { Column } from '../types';
+import { Column, Row } from '../types';
 
 // eslint-disable-next-line import/prefer-default-export
-export const getColumnKeys = (columns: Column[]): Key[] => {
+export const getColumnKeys = <TRow extends object = Row>(
+  columns: Column<TRow>[]
+): Key[] => {
   const INTERNAL_KEY_PREFIX = 'columnKeyPrefix';
-  const columnKeys: React.Key[] = [];
+  const columnKeys: Key[] = [];
   const keys: Record<string, boolean> = {};
 
   columns.forEach((column) => {

package/src/types/index.ts

@@ -44,8 +44,7 @@ export type Breakpoint = {
 
 export type DimensionSize = WidthSize | HeightSize;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type UnknownPropertiesObjType = { [key: string]: any };
+export type UnknownPropertiesObjType = Record<string, unknown>;
 
 export interface FlexProperty {
   flexGrow?: number | string;
@@ -148,9 +147,9 @@ export declare type ResponsiveProp<T> = {
 
 export type Row = UnknownPropertiesObjType;
 
-export type Cell = string | number | { [key: string]: unknown } | unknown[];
+export type Cell = Row[string];
 
-export declare type Column = {
+export declare type Column<TRow extends object = Row> = {
   /**
    * Text alignment for column cells (including header alignment). Cells will default to left if not defined.
    */
@@ -160,11 +159,11 @@ export declare type Column = {
    */
   cellClassName?:
     | string
-    | ((cell?: Cell, row?: Row, rowIndex?: number) => string);
+    | ((cell?: Cell, row?: TRow, rowIndex?: number) => string);
   /**
    * The key value to be rendered based on the table `rows`.
    */
-  dataKey?: string;
+  dataKey?: Extract<keyof TRow, string>;
   /**
    * Placeholder for empty cells Applies only to the cells of the particular column with this prop.
    */
@@ -190,7 +189,7 @@ export declare type Column = {
    * Render method for column cell data. Provides ability to render any aspect of the cell/row with custom
    * markup.
    */
-  render?: (cell?: Cell, row?: Row, rowIndex?: number) => ReactNode;
+  render?: (cell?: Cell, row?: TRow, rowIndex?: number) => ReactNode;
   /**
    * Whether the column is stuck to the left or right.
    */