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

package/src/components/SelectInput/SelectInput.tsx

@@ -7,7 +7,9 @@ import Select, {
   OptionsOrGroups,
   OnChangeValue,
 } from 'react-select';
-import AsyncCreatableSelect from 'react-select/async-creatable';
+import AsyncCreatableSelect, {
+  AsyncCreatableProps,
+} from 'react-select/async-creatable';
 import AsyncSelect from 'react-select/async';
 import CreatableSelect from 'react-select/creatable';
 import { ResponsiveProp } from '../../types';
@@ -42,7 +44,7 @@ export type TextInputSize =
   | 'lg'
   | ResponsiveProp<'sm' | 'md' | 'lg'>;
 
-export interface SelectInputProps {
+interface SelectInputOwnProps {
   /**
    * The id attribute of the input.
    */
@@ -59,10 +61,6 @@ export interface SelectInputProps {
    * The value(s) of select.
    */
   value: any | any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
-  /**
-   * Options for dropdown list.
-   */
-  options: SelectInputOptions | AsyncOptions;
   /**
    * Autofocus select input on render.
    */
@@ -84,10 +82,6 @@ export interface SelectInputProps {
    * Visually hide the label.
    */
   hideLabel?: boolean;
-  /**
-   * Load the input asynchronously.
-   */
-  isAsync?: boolean;
   /**
    * If the input value is clearable programmatically.
    */
@@ -137,18 +131,36 @@ export interface SelectInputProps {
    * The size of the text input.
    */
   size?: TextInputSize;
-  /**
-   * Additional props to be spread. These will be applied specifically to
-   * the `react-select` component that powers the select. For full docs on
-   * react-select props, [Click Here](https://react-select.com/props)
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+type ReactSelectAsyncProps = AsyncCreatableProps<
+  SelectOption,
+  boolean,
+  SelectGroupOptions
+>;
+
+type ControlledReactSelectProps =
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'cacheOptions'
+  | 'classNamePrefix'
+  | 'components'
+  | 'defaultOptions'
+  | 'inputId'
+  | 'loadOptions'
+  | 'options'
+  | 'styles';
+
+type SelectInputBaseProps = SelectInputOwnProps &
+  Omit<
+    ReactSelectAsyncProps,
+    keyof SelectInputOwnProps | ControlledReactSelectProps
+  >;
+
 type AsyncOptions = (
   inputValue: string
 ) => Promise<OptionsOrGroups<SelectOption, SelectGroupOptions>>;
-type AsyncSelectInputProps = SelectInputProps & {
+export type AsyncSelectInputProps = SelectInputBaseProps & {
   /**
    * Load the input asynchronously.
    */
@@ -160,14 +172,14 @@ type AsyncSelectInputProps = SelectInputProps & {
   /**
    * If cacheOptions is passed, then the loaded data will be cached.
    */
-  cacheOptions?: boolean;
+  cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
   /**
    * The default set of options to show before the user starts searching.
    */
-  defaultOptions?: boolean;
+  defaultOptions?: ReactSelectAsyncProps['defaultOptions'];
 };
 
-type SyncSelectInputProps = SelectInputProps & {
+export type SyncSelectInputProps = SelectInputBaseProps & {
   /**
    * Load the input synchronously.
    */
@@ -176,10 +188,12 @@ type SyncSelectInputProps = SelectInputProps & {
    * Options for dropdown list.
    */
   options: SelectInputOptions;
+  cacheOptions?: never;
+  defaultOptions?: never;
 };
 
-export function SelectInput(props: AsyncSelectInputProps): JSX.Element;
-export function SelectInput(props: SyncSelectInputProps): JSX.Element;
+export type SelectInputProps = AsyncSelectInputProps | SyncSelectInputProps;
+
 export function SelectInput(props: SelectInputProps): JSX.Element {
   const {
     id,
@@ -205,6 +219,8 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
     placeholder = undefined,
     requiredIndicator = ' *',
     size = 'md',
+    cacheOptions,
+    defaultOptions,
     ...restProps
   } = props;
 
@@ -262,13 +278,17 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
     isCreatable && isAsync
       ? AsyncCreatableSelect
       : isCreatable
-      ? CreatableSelect
-      : isAsync
-      ? AsyncSelect
-      : Select;
+        ? CreatableSelect
+        : isAsync
+          ? AsyncSelect
+          : Select;
 
   const selectOptions = isAsync
-    ? ({ loadOptions: options } as { loadOptions: AsyncOptions })
+    ? {
+        loadOptions: options as AsyncOptions,
+        cacheOptions,
+        defaultOptions,
+      }
     : ({ options } as { options: SelectInputOptions });
 
   return (

package/src/components/SelectInputInset/SelectInputInset.tsx

@@ -6,7 +6,6 @@ import React, {
   FocusEvent,
   ForwardRefExoticComponent,
   ReactNode,
-  HTMLProps,
 } from 'react';
 import classNames from 'classnames';
 import { ResponsiveProp } from '../../types';
@@ -36,11 +35,15 @@ export interface SelectInputInsetProps {
   /**
    * Callback function to call on change event.
    */
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
   /**
    * Value of selected option. Should match the value key in the option object.
    */
   value: string | number | null;
+  /**
+   * The select's autocomplete behavior.
+   */
+  autoComplete?: boolean | string;
   /**
    * Automatically focus the input when the page is loaded.
    */
@@ -61,7 +64,7 @@ export interface SelectInputInsetProps {
   /**
    * Props passed directly to the input element of the component
    */
-  inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
+  inputProps?: Omit<BoxProps<'select'>, 'as'>;
   /**
    * The input's disabled attribute
    */
@@ -77,7 +80,7 @@ export interface SelectInputInsetProps {
   /**
    * Callback function to call on blur event.
    */
-  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
   /**
    * Callback function to call when input us cleared. When this is passed,
    * the input will display an icon on the right side, for triggering this callback.
@@ -88,7 +91,7 @@ export interface SelectInputInsetProps {
   /**
    * Callback function to call on focus event.
    */
-  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: FocusEvent<HTMLSelectElement>) => void;
   /**
    * The input placeholder attribute.
    */
@@ -101,10 +104,6 @@ export interface SelectInputInsetProps {
    * The size of the text input.
    */
   size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps> =

package/src/components/SelectInputNative/SelectInputNative.test.tsx

@@ -102,6 +102,30 @@ describe('SelectInputNative', () => {
 
       expect(mockedHandleBlur).toBeCalledTimes(1);
     });
+
+    test('it forwards native select attributes to the select element', () => {
+      render(
+        <SelectInputNative
+          id="testId"
+          label="native attributes"
+          onChange={() => undefined}
+          options={selectOptions}
+          value={null}
+          form="settings-form"
+          disabled
+          required
+          data-testid="native-select"
+          inputProps={{ title: 'Select a flavor' }}
+        />
+      );
+
+      const select = screen.getByTestId('native-select');
+      expect(select).toHaveAttribute('form', 'settings-form');
+      expect(select).toHaveAttribute('title', 'Select a flavor');
+      expect(select).toBeDisabled();
+      expect(select).toBeRequired();
+      expect(select.parentElement).not.toHaveAttribute('form');
+    });
   });
 
   describe('States', () => {

package/src/components/SelectInputNative/SelectInputNative.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import { ResponsiveProp } from '../../types';
-import { Box, BoxProps } from '../Box/Box';
+import { Box, BoxOwnProps, BoxProps, boxPropsKeys } from '../Box/Box';
 import { FormControl, FormControlProps } from '../FormControl/FormControl';
 import styles from './SelectInputNative.module.scss';
 
@@ -13,7 +13,7 @@ export interface SelectInputNativeOption {
   disabled?: boolean;
 }
 
-export interface SelectInputNativeProps extends BoxProps, FormControlProps {
+interface SelectInputNativeOwnProps {
   /**
    * List of options for the select input.
    */
@@ -25,11 +25,36 @@ export interface SelectInputNativeProps extends BoxProps, FormControlProps {
   /**
    * Value of selected option. Should match the value key in the option object.
    */
-  value: string | number | null;
+  value: React.ComponentPropsWithoutRef<'select'>['value'] | null;
+  /**
+   * Props passed directly to the select element of the component.
+   */
+  inputProps?: Omit<
+    BoxProps<'select'>,
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-required'
+    | 'as'
+    | 'autoFocus'
+    | 'children'
+    | 'color'
+    | 'defaultValue'
+    | 'disabled'
+    | 'id'
+    | 'name'
+    | 'onChange'
+    | 'required'
+    | 'size'
+    | 'value'
+  >;
   /**
    * The input's 'name' attribute.
    */
   name?: string;
+  /**
+   * Placeholder option displayed before a value is selected.
+   */
+  placeholder?: string;
   /**
    * Visual indicator that the field is required, that gets appended to the label
    */
@@ -42,12 +67,38 @@ export interface SelectInputNativeProps extends BoxProps, FormControlProps {
    * Whether the input is autofocused on initial render.
    */
   autoFocus?: HTMLSelectElement['autofocus'];
-  /**
-   * Additional props to be spread.
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+type SelectInputNativeFormControlProps = Pick<
+  FormControlProps,
+  | 'error'
+  | 'helpText'
+  | 'hideLabel'
+  | 'id'
+  | 'isDisabled'
+  | 'isRequired'
+  | 'label'
+>;
+
+type SelectInputNativeElementProps = Omit<
+  React.ComponentPropsWithoutRef<'select'>,
+  | keyof SelectInputNativeOwnProps
+  | keyof SelectInputNativeFormControlProps
+  | keyof BoxOwnProps
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'aria-required'
+  | 'children'
+  | 'dangerouslySetInnerHTML'
+  | 'defaultValue'
+  | 'size'
+>;
+
+export type SelectInputNativeProps = SelectInputNativeOwnProps &
+  SelectInputNativeFormControlProps &
+  Omit<BoxOwnProps, 'children'> &
+  SelectInputNativeElementProps;
+
 export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
   autoFocus = false,
   label,
@@ -55,6 +106,7 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
   helpText,
   error,
   id,
+  inputProps = {},
   isDisabled,
   isRequired,
   name,
@@ -66,6 +118,17 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
   size = 'md',
   ...restProps
 }) => {
+  const isBoxProp = (key: string) =>
+    boxPropsKeys.includes(key as keyof BoxOwnProps);
+  const formControlProps = Object.fromEntries(
+    Object.entries(restProps).filter(([key]) => isBoxProp(key))
+  ) as Omit<BoxOwnProps, 'children'>;
+  const selectProps = Object.fromEntries(
+    Object.entries(restProps).filter(([key]) => !isBoxProp(key))
+  ) as SelectInputNativeElementProps;
+  const selectIsDisabled = isDisabled || selectProps.disabled;
+  const selectIsRequired = isRequired || selectProps.required;
+
   const placeholderOption: SelectInputNativeOption = {
     value: '',
     label: placeholder,
@@ -83,7 +146,7 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
     styles['select-input-native-wrapper'],
     ...responsiveClasses.map((className) => styles[className]),
     {
-      [styles.disabled]: isDisabled,
+      [styles.disabled]: selectIsDisabled,
       [styles.error]: error,
     }
   );
@@ -95,25 +158,27 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
       id={id}
       error={error}
       helpText={helpText}
-      isDisabled={isDisabled}
-      isRequired={isRequired}
+      isDisabled={selectIsDisabled}
+      isRequired={selectIsRequired}
       requiredIndicator={requiredIndicator}
-      {...restProps}
+      {...formControlProps}
     >
       <Box className={selectWrapperClasses}>
         <Box
           as="select"
+          {...inputProps}
+          {...selectProps}
           aria-label={label}
           aria-labelledby={label && !hideLabel ? `${id}Label` : undefined}
-          aria-required={isRequired}
+          aria-required={selectIsRequired}
           value={value ?? ''}
           onChange={onChange}
           color={!value ? 'disabled' : 'base'}
           autoFocus={autoFocus}
-          disabled={isDisabled}
+          disabled={selectIsDisabled}
           name={name}
           id={id}
-          required={isRequired}
+          required={selectIsRequired}
         >
           {optionsWithPlaceholder.map((option) => (
             <Box

package/src/components/Switch/Switch.tsx

@@ -139,7 +139,7 @@ export const Switch: FC<SwitchProps> = ({
     alignItems: helpText ? 'flex-start' : ('center' as BoxProps['alignItems']),
     isFieldRequired: isRequired,
     requiredIndicator,
-    size,
+    ...(typeof size === 'string' && { size }),
   };
 
   return (

package/src/components/Table/Table.mdx

@@ -30,6 +30,26 @@ An example showcasing the props required to render a list of customers in a tabl
 
 <Canvas of={Stories.CommonExample} />
 
+## TypeScript row types
+
+`Table` accepts interfaces and infers its row type from `rows`. Type separately declared columns with `Column<TRow>[]` to validate `dataKey` values and type the `row` argument passed to render callbacks.
+
+```tsx
+interface Customer {
+  id: string;
+  name: string;
+}
+
+const columns: Column<Customer>[] = [
+  {
+    dataKey: 'name',
+    render: (_cell, row) => row?.name,
+  },
+];
+
+<Table columns={columns} rows={customers} rowKey="id" />;
+```
+
 ## Loading
 
 Use the `isLoading` prop on the `<Table />` component to display an overlay that prevents user interaction. Useful for when
@@ -146,7 +166,7 @@ The `Column` object is equiped with a `render` method. When used, the cells will
 
 The render method also exposes data about the cell and row, namely:
 
-`cell: the content in the cell,`
+`cell: the content in the cell, typed as Cell — narrow it before rendering,`
 
 `row: the entire row object,`
 

package/src/components/Table/Table.stories.tsx

@@ -106,7 +106,11 @@ export const Column = () =>
       {
         heading: 'Type',
         dataKey: 'type',
-        render: (cell: string) => <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/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { Column, Row, EventWithColumnKey } from '../../types';
 import { Spinner } from '../Spinner/Spinner';
@@ -6,20 +6,20 @@ import styles from './Table.module.scss';
 import { TableBody } from './TableBody/TableBody';
 import { TableHead } from './TableHead/TableHead';
 
-export interface TableProps {
+export interface TableProps<TRow extends object = Row> {
   /**
    * Columns for the table. See Column definition below for details.
    */
-  columns: Column[];
+  columns: Column<TRow>[];
   /**
    * The data rows to be displayed
    */
-  rows: Row[];
+  rows: TRow[];
   /**
    * Key that represents a unique value for a row. This is necessary in
    * order to supply React with a node key on each row.
    */
-  rowKey: string;
+  rowKey: Extract<keyof TRow, string>;
   /**
    * Additional classes to add.
    */
@@ -90,7 +90,7 @@ export interface TableProps {
   truncateOverflow?: boolean;
 }
 
-export const Table: FC<TableProps> = ({
+export const Table = <TRow extends object = Row,>({
   columns,
   rows,
   rowKey,
@@ -108,7 +108,7 @@ export const Table: FC<TableProps> = ({
   sortedColumn = undefined,
   useFixedTableLayout = false,
   truncateOverflow = false,
-}) => {
+}: TableProps<TRow>) => {
   const containerClasses = classNames(styles.container, {
     [styles['full-height']]: !!isScrollable?.y,
   });

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Column } from '../../../types';
 import { TableBody } from './TableBody';
 
 const columns = [
@@ -14,6 +15,18 @@ const rows = [
   { id: 3, color: 'green', flavor: 'strawberry' },
 ];
 
+const inputColumns: Column<(typeof rows)[number]>[] = [
+  {
+    dataKey: 'color',
+    render: (_cell, row) => (
+      <input
+        aria-label={`Color for row ${row?.id}`}
+        defaultValue={row?.color}
+      />
+    ),
+  },
+];
+
 describe('TableBody', () => {
   test("It renders with striped rows if passed 'isStriped' prop", () => {
     render(<TableBody columns={columns} rows={rows} rowKey="id" isStriped />);
@@ -35,4 +48,79 @@ describe('TableBody', () => {
     const tableBody = screen.getByRole('rowgroup');
     expect(tableBody).toHaveClass('my-custom-class');
   });
+
+  test('It preserves row identity when rows are reordered', () => {
+    const { rerender } = render(
+      <table>
+        <TableBody columns={inputColumns} rows={rows} rowKey="id" />
+      </table>
+    );
+
+    fireEvent.change(screen.getByLabelText('Color for row 1'), {
+      target: { value: 'purple' },
+    });
+
+    rerender(
+      <table>
+        <TableBody
+          columns={inputColumns}
+          rows={[...rows].reverse()}
+          rowKey="id"
+        />
+      </table>
+    );
+
+    expect(screen.getByLabelText('Color for row 1')).toHaveValue('purple');
+  });
+
+  test('It avoids duplicate keys when row key values cannot be used', () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation();
+    const rowsWithoutUsableKeys = [
+      { id: undefined, color: 'red' },
+      { id: undefined, color: 'blue' },
+      { id: null, color: 'green' },
+      { id: null, color: 'yellow' },
+      { id: {}, color: 'black' },
+      { id: {}, color: 'white' },
+    ];
+
+    render(
+      <table>
+        <TableBody
+          columns={[{ dataKey: 'color' }]}
+          rows={rowsWithoutUsableKeys}
+          rowKey="id"
+        />
+      </table>
+    );
+
+    const duplicateKeyWarnings = consoleError.mock.calls.filter((call) =>
+      call.some(
+        (argument) =>
+          typeof argument === 'string' &&
+          argument.includes('Encountered two children with the same key')
+      )
+    );
+    consoleError.mockRestore();
+
+    expect(duplicateKeyWarnings).toHaveLength(0);
+  });
+
+  test('It handles nullish row values at runtime', () => {
+    const rowsWithNullishValues = [undefined, null] as unknown as typeof rows;
+
+    expect(() =>
+      render(
+        <table>
+          <TableBody
+            columns={columns}
+            rows={rowsWithNullishValues}
+            rowKey="id"
+          />
+        </table>
+      )
+    ).not.toThrow();
+
+    expect(screen.getAllByRole('row')).toHaveLength(2);
+  });
 });