@hyphen/hyphen-components 8.0.0 → 9.0.0-beta.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,11 +1,17 @@
-import React, { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
+import React, {
+  FC,
+  ChangeEvent,
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  ReactNode,
+} from 'react';
 import classNames from 'classnames';
 import { Box } from '../Box/Box';
 import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
 import { RadioInput, RadioInputProps } from './RadioInput/RadioInput'; // eslint-disable-line import/no-cycle
 import styles from './RadioGroup.module.scss';
 
-export interface RadioGroupProps {
+interface RadioGroupOwnProps {
   /**
    * Radio group name.
    */
@@ -72,12 +78,11 @@ export interface RadioGroupProps {
    * The value of selected radio input.
    */
   value?: string;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+export type RadioGroupProps = RadioGroupOwnProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps>;
+
 export const RadioGroup: FC<RadioGroupProps> = ({
   name,
   onChange,

package/src/components/RadioGroup/RadioInput/RadioInput.module.scss

@@ -1,5 +1,5 @@
-@import '../../../styles/mixins';
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '../../../styles/mixins' as *;
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 $sm-dimension: 16px;
 $md-dimension: 20px;

package/src/components/RadioGroup/RadioInput/RadioInputIcon.tsx

@@ -22,10 +22,6 @@ export interface RadioIconProps extends BoxProps {
    * If the input should be disabled and not focusable.
    */
   isDisabled?: RadioInputProps['isDisabled'];
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
 export const RadioInputIcon: React.FC<RadioIconProps> = ({

package/src/components/SelectInput/SelectInput.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 // The following styles required the :global tag since they need to be applied to react-select elements for which we do not own the markup
 
 @mixin react-select-icon {

package/src/components/SelectInput/SelectInput.test.tsx

@@ -229,6 +229,24 @@ describe('SelectInput', () => {
           expect(loadOptions).toHaveBeenCalledTimes(1);
         });
       });
+
+      it('renders default options before searching', async () => {
+        render(
+          <SelectInput
+            id="testId"
+            onChange={jest.fn()}
+            label="Select Label"
+            options={jest.fn(() => Promise.resolve([]))}
+            value={null}
+            isAsync
+            defaultOptions={selectOptions}
+          />
+        );
+
+        await selectEvent.openMenu(screen.getByLabelText('Select Label'));
+
+        expect(screen.getByText('Vanilla')).toBeInTheDocument();
+      });
     });
 
     describe('Multi select, no selection', () => {

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.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin floating-label-minimize-md {
   opacity: 0.75;

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.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 %disabled-base {
   background-color: var(--color-background-disabled);

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.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin thumb-size-sm {
   width: calc(var(--size-spacing-2xl) - 4px);

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

@@ -146,7 +146,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/common/TableRow/TableRow.test.tsx

@@ -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

@@ -93,13 +93,31 @@ export const TableRow: FC<TableRowProps> = ({
     className
   );
 
+  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): 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 => {

package/src/components/TextInput/TextInput.module.scss

@@ -1,4 +1,4 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+@use '@hyphen/hyphen-design-tokens/build/scss/variables' as *;
 
 @mixin size-sm {
   border-radius: var(

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