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

package/src/components/CheckboxInput/CheckboxInput.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { cssShorthandToClasses } from '../../lib/cssShorthandToClasses';
 import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
 import { FormLabel } from '../FormLabel/FormLabel';
-import { Box } from '../Box/Box';
+import { Box, BoxProps } from '../Box/Box';
 import { Checkbox, CheckboxSize, CheckboxProps } from './components/Checkbox';
 
 const labelMarginSizeMap = {
@@ -28,7 +28,7 @@ const computedResponsiveSize = (
 
   return labelMarginSizeMap[size || 'md'] as string;
 };
-export interface CheckboxInputProps {
+interface CheckboxInputOwnProps {
   /**
    * The id attribute of the input.
    */
@@ -76,6 +76,10 @@ export interface CheckboxInputProps {
    * The required and aria-required attributes on the input
    */
   isRequired?: boolean;
+  /**
+   * The name attribute of the checkbox input element.
+   */
+  name?: CheckboxProps['name'];
   /**
    * Callback function when input is blurred.
    */
@@ -93,11 +97,14 @@ export interface CheckboxInputProps {
    */
   size?: CheckboxSize;
   /**
-   * Additional props to be spread to rendered element
+   * Value of the checkbox input element.
    */
-  [x: string]: any; // eslint-disable-line
+  value?: CheckboxProps['value'];
 }
 
+export type CheckboxInputProps = CheckboxInputOwnProps &
+  Omit<BoxProps<'div'>, keyof CheckboxInputOwnProps | 'as'>;
+
 export const CheckboxInput: React.FC<CheckboxInputProps> = ({
   id,
   isChecked,
@@ -110,10 +117,12 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
   isDisabled = false,
   isIndeterminate = false,
   isRequired = false,
+  name = undefined,
   onBlur = undefined,
   onFocus = undefined,
   requiredIndicator = ' *',
   size = 'md',
+  value = undefined,
   ...restProps
 }) => {
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
@@ -133,11 +142,13 @@ export const CheckboxInput: React.FC<CheckboxInputProps> = ({
     isChecked: !!isChecked,
     isDisabled,
     isIndeterminate,
+    name,
     onBlur: handleBlur,
     onChange: handleChange,
     onFocus: handleFocus,
     isRequired,
     size,
+    value,
     label,
     className: classNames(
       'hyphen-components__variables__form-control',

package/src/components/CheckboxInput/components/Checkbox.test.tsx

@@ -41,6 +41,41 @@ describe('Checkbox', () => {
     });
   });
 
+  describe('Value', () => {
+    test.each([0, ''])('preserves the falsy value %p', (value) => {
+      render(
+        <Checkbox
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isChecked={false}
+          value={value}
+        />
+      );
+
+      expect(screen.getByRole('checkbox')).toHaveAttribute(
+        'value',
+        String(value)
+      );
+    });
+
+    test('uses the browser default when value is omitted', () => {
+      render(
+        <Checkbox
+          id="testCheckbox"
+          label="test checkbox"
+          onChange={jest.fn(() => null)}
+          isChecked={false}
+        />
+      );
+
+      const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+
+      expect(checkbox).not.toHaveAttribute('value');
+      expect(checkbox.value).toBe('on');
+    });
+  });
+
   describe('Indeterminate', () => {
     test('It renders an indeterminate icon if isIndeterminate is true and checkbox is checked', () => {
       render(
@@ -195,6 +230,7 @@ describe('Checkbox', () => {
       const checkboxInputContainer = screen
         .getByRole('checkbox')
         .closest('div');
+      expect(screen.getByRole('checkbox')).toHaveAttribute('name', 'mockName');
       expect(checkboxInputContainer).toHaveClass('hidden');
     });
   });

package/src/components/CheckboxInput/components/Checkbox.tsx

@@ -40,6 +40,10 @@ export interface CheckboxProps
    * id of the element that labels the Checkbox
    */
   labelledby?: string;
+  /**
+   * The checkbox input's name attribute.
+   */
+  name?: string;
   /**
    * If the input should be disabled and not focusable.
    */
@@ -75,7 +79,7 @@ export interface CheckboxProps
   value?: string | number;
 }
 
-export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(
+export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
   (
     {
       className = '',
@@ -84,6 +88,7 @@ export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(
       isChecked,
       label,
       labelledby,
+      name = undefined,
       onChange,
       error = false,
       isDisabled = false,
@@ -124,6 +129,7 @@ export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(
       'aria-labelledby': labelledby,
       'aria-required': isRequired,
       id,
+      name,
       checked: !!isChecked,
       disabled: isDisabled,
       onBlur: handleBlur,
@@ -132,7 +138,7 @@ export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(
       required: isRequired,
       type: 'checkbox',
       ref: inputRef,
-      ...(value && { value }),
+      ...(value !== undefined && { value }),
     };
 
     const responsiveClasses = generateResponsiveClasses('size', size);

package/src/components/Details/Details.test.tsx

@@ -185,5 +185,13 @@ describe('Details', () => {
       const summary = screen.getByRole('button');
       expect(summary).toHaveClass('m-top-lg');
     });
+
+    it('forwards its ref to the details element', () => {
+      const ref = React.createRef<HTMLDetailsElement>();
+
+      render(<Details isOpen={false} ref={ref} />);
+
+      expect(ref.current).toBe(screen.getByRole('group'));
+    });
   });
 });

package/src/components/Details/Details.tsx

@@ -4,14 +4,17 @@ import { DetailsSummary } from './DetailsSummary';
 import styles from './Details.module.scss';
 import { Box, BoxProps } from '../Box/Box';
 
-export interface DetailsProps extends BoxProps {
+interface DetailsOwnProps {
   /**
    * Whether the details below the summary are opened. Directly corresponds to `open` property in <details> element.
    */
   isOpen: boolean;
 }
 
-export const DetailsBaseComponent: React.FC<DetailsProps> = React.forwardRef<
+export type DetailsProps = DetailsOwnProps &
+  Omit<BoxProps<'details'>, keyof DetailsOwnProps | 'as' | 'open'>;
+
+export const DetailsBaseComponent = React.forwardRef<
   HTMLDetailsElement,
   DetailsProps
 >(({ children, className, display = 'block', isOpen, ...restProps }, ref) => {

package/src/components/Details/DetailsSummary.tsx

@@ -2,13 +2,16 @@ import React, { MouseEvent, KeyboardEvent } from 'react';
 import { ENTER, SPACE } from '../../constants/keyCodes';
 import { Box, BoxProps } from '../Box/Box';
 
-export interface DetailsSummaryProps extends BoxProps {
+interface DetailsSummaryOwnProps {
   isDetailsOpen: boolean;
   onToggle?: (
     event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
   ) => void;
 }
 
+export type DetailsSummaryProps = DetailsSummaryOwnProps &
+  Omit<BoxProps<'summary'>, keyof DetailsSummaryOwnProps | 'as'>;
+
 export const DetailsSummary: React.FC<DetailsSummaryProps> = ({
   children,
   display = 'block',

package/src/components/Drawer/Drawer.test.tsx

@@ -584,6 +584,14 @@ describe('Drawer', () => {
   });
 
   describe('Ref forwarding', () => {
+    test('forwards ref to the Drawer container', () => {
+      const ref = React.createRef<HTMLDivElement>();
+
+      render(<Drawer isOpen={false} ariaLabel="Drawer" ref={ref} />);
+
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+
     test('forwards ref to DrawerProvider container', () => {
       const ref = React.createRef<HTMLDivElement>();
       render(

package/src/components/Drawer/Drawer.tsx

@@ -211,7 +211,7 @@ export interface DrawerProps {
    */
   width?: DimensionSize | CssDimensionValue;
 }
-const Drawer: React.FC<DrawerProps> = forwardRef<HTMLDivElement, DrawerProps>(
+const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
   (
     {
       ariaLabel = undefined,

package/src/components/FormLabel/FormLabel.tsx

@@ -4,7 +4,7 @@ import { Box, BoxProps } from '../Box/Box';
 import styles from './FormLabel.module.scss';
 import { HelpText } from '../HelpText/HelpText';
 
-export interface FormLabelProps extends BoxProps {
+interface FormLabelOwnProps {
   /**
    * Content to be rendered inside the label.
    */
@@ -38,11 +38,14 @@ export interface FormLabelProps extends BoxProps {
    */
   requiredIndicator?: ReactNode;
   /**
-   * Additional props to be spread to rendered element
+   * The label size.
    */
-  [x: string]: any; // eslint-disable-line
+  size?: 'sm' | 'md' | 'lg';
 }
 
+export type FormLabelProps = FormLabelOwnProps &
+  Omit<BoxProps<'label'>, keyof FormLabelOwnProps | 'as' | 'htmlFor'>;
+
 export const FormLabel: FC<FormLabelProps> = ({
   children,
   inputId,

package/src/components/Formik/FormikCheckboxInput/FormikCheckboxInput.test.tsx

@@ -54,6 +54,15 @@ describe('FormikCheckboxInput', () => {
         expect(checkbox.disabled).toBe(false);
         expect(checkbox.getAttribute('aria-invalid')).toBe('false');
       });
+
+      test('passes the Formik field name to the checkbox input', () => {
+        const { getByLabelText } = render(renderForm(true, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        const form = checkbox.closest('form') as HTMLFormElement;
+
+        expect(checkbox).toHaveAttribute('name', testLabelName);
+        expect(new FormData(form).has(testLabelName)).toBe(true);
+      });
     });
 
     describe('With initial value true', () => {

package/src/components/Formik/FormikCheckboxInput/FormikCheckboxInput.tsx

@@ -33,6 +33,7 @@ export const FormikCheckboxInput: React.FC<FormikCheckboxInputProps> = ({
     {...props}
     id={id}
     label={label}
+    name={name}
     error={getIn(touched, name) && getIn(errors, name)}
     isChecked={value}
     onBlur={onBlur}

package/src/components/Formik/FormikSelectInput/FormikSelectInput.tsx

@@ -6,10 +6,14 @@ import {
   FormikValues,
   getIn,
 } from 'formik';
-import { SelectInput, SelectInputProps } from '../../SelectInput/SelectInput';
+import {
+  AsyncSelectInputProps,
+  SelectInput,
+  SelectInputProps,
+  SyncSelectInputProps,
+} from '../../SelectInput/SelectInput';
 
-export interface FormikSelectInputProps
-  extends Omit<SelectInputProps, 'onChange'> {
+interface FormikSelectInputOwnProps {
   field: FieldAttributes<HTMLSelectElement>;
   form: {
     touched: FormikTouched<FormikValues>;
@@ -19,15 +23,24 @@ export interface FormikSelectInputProps
   error?: string | Array<{ label?: string }>;
 }
 
+type FormikControlledSelectProps =
+  | keyof FormikSelectInputOwnProps
+  | 'name'
+  | 'onBlur'
+  | 'value';
+
+export type FormikSelectInputProps = FormikSelectInputOwnProps &
+  (
+    | Omit<AsyncSelectInputProps, FormikControlledSelectProps>
+    | Omit<SyncSelectInputProps, FormikControlledSelectProps>
+  );
+
 export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
   field: { name, onBlur, onChange: formikOnChange, value },
   form: { touched, errors },
   onChange,
-  id,
-  label,
-  options,
   error: errorProp,
-  ...props
+  ...selectProps
 }) => {
   let errorMessage: string | undefined;
   const error: unknown =
@@ -41,15 +54,12 @@ export const FormikSelectInput: React.FC<FormikSelectInputProps> = ({
 
   return (
     <SelectInput
-      id={id}
-      label={label}
-      options={options}
+      {...selectProps}
       name={name}
       onBlur={onBlur}
       onChange={onChange ?? formikOnChange}
       value={value}
       error={errorMessage}
-      {...props}
     />
   );
 };

package/src/components/Formik/FormikSelectInputNative/FormikSelectInputNative.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../SelectInputNative/SelectInputNative';
 
 export interface FormikSelectInputNativeProps
-  extends Omit<SelectInputNativeProps, 'onChange'> {
+  extends Omit<SelectInputNativeProps, 'form' | 'onChange'> {
   field: FieldAttributes<HTMLSelectElement>;
   form: {
     touched: FormikTouched<FormikValues>;

package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx

@@ -9,7 +9,7 @@ import {
 import { TimePicker, TimePickerProps } from '../../TimePicker/TimePicker';
 
 export interface FormikTimePickerProps
-  extends Omit<TimePickerProps, 'onChange'> {
+  extends Omit<TimePickerProps, 'form' | 'onChange'> {
   field: FieldAttributes<HTMLSelectElement>;
   form: {
     touched: FormikTouched<FormikValues>;

package/src/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, createElement } from 'react';
+import { FC, HTMLAttributes, ReactNode, createElement } from 'react';
 import { FontColor, HeadingSize, ResponsiveProp } from '../../types';
 import {
   HEADING_DEFAULT_SIZE_MAP,
@@ -10,7 +10,7 @@ import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import { getElementType } from '../../lib/getElementType';
 import styles from './Heading.module.scss';
 
-export interface HeadingProps {
+interface HeadingOwnProps {
   /**
    * The DOM tag or react component to use for the element.
    * Select the appropriate semantic element (h1-h6).
@@ -36,12 +36,11 @@ export interface HeadingProps {
    * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
    */
   size?: HeadingSize | ResponsiveProp<HeadingSize>;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
+export type HeadingProps = HeadingOwnProps &
+  Omit<HTMLAttributes<HTMLHeadingElement>, keyof HeadingOwnProps>;
+
 export const Heading: FC<HeadingProps> = ({
   as = 'h4',
   children,

package/src/components/Icon/Icon.test.tsx

@@ -22,6 +22,14 @@ describe('Icon', () => {
     expect(icon.getAttribute('class')).toBe('testClass');
   });
 
+  test('forwards its ref to the svg element', () => {
+    const ref = React.createRef<SVGSVGElement>();
+
+    render(<Icon name="user" ref={ref} />);
+
+    expect(ref.current).toBe(screen.getByTestId('icon-testid--user'));
+  });
+
   test('fallback', () => {
     render(<Icon name={'does-not-exist' as 'user'} />);
     const icon = screen.getByText('???');

package/src/components/Icon/Icon.tsx

@@ -1,12 +1,12 @@
 import { FontColor, FontSize, IconName, ResponsiveProp } from '../../types';
-import React, { FC, forwardRef } from 'react';
+import React, { ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { Box } from '../Box/Box';
 import classNames from 'classnames';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
 
-export interface IconProps {
+interface IconOwnProps {
   className?: string;
   /**
    * A color token identifier to use for the text color.
@@ -20,13 +20,12 @@ export interface IconProps {
    * Name of the icon
    */
   name: IconName;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
-export const Icon: FC<IconProps> = forwardRef<SVGSVGElement, IconProps>(
+export type IconProps = IconOwnProps &
+  Omit<ComponentPropsWithoutRef<'svg'>, keyof IconOwnProps>;
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
   ({ className = undefined, name, color, size, ...restProps }, ref) => {
     const IconComponent = icons[name];
 

package/src/components/Modal/Modal.test.tsx

@@ -7,7 +7,7 @@ import {
   act,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Modal } from './Modal';
+import { Modal, ModalProps } from './Modal';
 
 describe('Modal', () => {
   beforeEach(() => {
@@ -405,6 +405,36 @@ describe('Modal', () => {
         expect(handleDismiss).toHaveBeenCalledTimes(1);
       });
     });
+
+    test('does not allow passthrough props to override onDismiss', async () => {
+      const handleDismiss = jest.fn();
+      const handleRequestClose = jest.fn();
+      const unsupportedProps = {
+        onRequestClose: handleRequestClose,
+      } as unknown as Partial<ModalProps>;
+
+      render(
+        <Modal
+          {...unsupportedProps}
+          isOpen
+          onDismiss={handleDismiss}
+          ariaLabel="Escape Modal"
+        >
+          content
+        </Modal>
+      );
+
+      fireEvent.keyDown(screen.getByRole('dialog'), {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+      });
+
+      await waitFor(() => {
+        expect(handleDismiss).toHaveBeenCalledTimes(1);
+      });
+      expect(handleRequestClose).not.toHaveBeenCalled();
+    });
   });
 
   describe('fullScreenMobile', () => {

package/src/components/Modal/Modal.tsx

@@ -9,7 +9,7 @@ import { Box, BoxProps } from '../Box/Box';
 import { ModalFooter, ModalHeader, ModalBody } from './components';
 import styles from './Modal.module.scss';
 
-export interface ModalProps {
+interface ModalOwnProps {
   /**
    * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
    */
@@ -75,13 +75,19 @@ export interface ModalProps {
    * Inline styles for the modal container
    */
   style?: React.CSSProperties;
-  /**
-   * Allows spread props
-   */
-  [x: string]: any; // eslint-disable-line
 }
 
-export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
+export type ModalProps = ModalOwnProps &
+  Omit<
+    ReactModal.Props,
+    | keyof ModalOwnProps
+    | 'ariaHideApp'
+    | 'onRequestClose'
+    | 'overlayClassName'
+    | 'parentSelector'
+  >;
+
+export const ModalBaseComponent = forwardRef<
   HTMLDivElement,
   ModalProps
 >(
@@ -143,6 +149,7 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
         <RemoveScroll allowPinchZoom={allowPinchZoom} enabled={isOpen}>
           <Box ref={ref}>
             <ReactModal
+              {...restProps}
               isOpen={isOpen}
               overlayClassName={overlayClassnames}
               className={contentClassnames}
@@ -150,7 +157,6 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
               ariaHideApp={false}
               parentSelector={parentElement ? () => parentElement : undefined}
               style={{ content: { ...maxWidthCss.styles, ...style } }}
-              {...restProps}
             >
               <Box
                 aria-label={ariaLabel}

package/src/components/Popover/Popover.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import {
   Popover,
@@ -8,15 +8,14 @@ import {
 } from './Popover';
 
 // Helper to render a controlled Popover
-type ControlledPopoverProps = {
+type ControlledPopoverProps = ComponentPropsWithoutRef<typeof Popover> & {
   isOpen?: boolean;
   onClickOutside?: (event: Event) => void;
   placement?: string;
   withPortal?: boolean;
   portalTarget?: HTMLElement;
   children: React.ReactNode;
-  contentProps?: Record<string, any>;
-  [key: string]: any;
+  contentProps?: ComponentPropsWithoutRef<typeof PopoverContent>;
 };
 
 function ControlledPopover({

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/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.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', () => {