chore: typing cleanups for <Chip> code

src/Chip/Chip.test.jsx → src/Chip/Chip.test.tsx

@@ -7,7 +7,7 @@ import { Close } from '../../icons';
 import { STYLE_VARIANTS } from './constants';
 import Chip from '.';
 
-function TestChip(props) {
+function TestChip(props: Omit<React.ComponentProps<typeof Chip>, 'children'>) {
   return (
     <Chip {...props}>
       Test
@@ -42,15 +42,13 @@ describe('<Chip />', () => {
           iconBeforeAlt="close icon"
           iconAfter={Close}
           iconAfterAlt="close icon"
-        >
-          Chip
-        </TestChip>
+        />
       )).toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders div with "button" role when onClick is provided', () => {
       const tree = renderer.create((
-        <TestChip onClick={jest.fn}>Chip</TestChip>
+        <TestChip onClick={jest.fn} />
       )).toJSON();
       expect(tree).toMatchSnapshot();
     });
@@ -104,7 +102,7 @@ describe('<Chip />', () => {
         />,
       );
       const iconAfter = screen.getByLabelText('icon-after');
-      await userEvent.click(iconAfter, '{enter}', { skipClick: true });
+      await userEvent.click(iconAfter);
       expect(func).toHaveBeenCalledTimes(1);
     });
     it('onIconBeforeClick is triggered', async () => {
@@ -130,7 +128,7 @@ describe('<Chip />', () => {
         />,
       );
       const iconBefore = screen.getByLabelText('icon-before');
-      await userEvent.click(iconBefore, '{enter}', { skipClick: true });
+      await userEvent.click(iconBefore);
       expect(func).toHaveBeenCalledTimes(1);
     });
     it('checks the absence of the `selected` class in the chip', async () => {

src/Chip/ChipIcon.tsx

@@ -1,19 +1,19 @@
 import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
-// @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
 import { STYLE_VARIANTS } from './constants';
 
-export interface ChipIconProps {
+export type ChipIconProps = {
   className: string,
   src: React.ComponentType,
-  onClick?: KeyboardEventHandler & MouseEventHandler,
-  alt: string,
   variant: string,
   disabled?: boolean,
-}
+} & (
+  // Either _both_ onClick and alt are provided, or neither is:
+  | { onClick: KeyboardEventHandler & MouseEventHandler, alt: string }
+  | { onClick?: undefined, alt?: undefined }
+);
 
 function ChipIcon({
   className, src, onClick, alt, variant, disabled,

src/Chip/constants.js → src/Chip/constants.ts

@@ -2,4 +2,4 @@
 export const STYLE_VARIANTS = {
   DARK: 'dark',
   LIGHT: 'light',
-};
+} as const;

src/Chip/index.tsx

@@ -3,9 +3,7 @@ import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
 import { requiredWhen } from '../utils/propTypes';
-// @ts-ignore
 import { STYLE_VARIANTS } from './constants';
-// @ts-ignore
 import ChipIcon from './ChipIcon';
 
 export const CHIP_PGN_CLASS = 'pgn__chip';

src/ChipCarousel/index.tsx

@@ -4,9 +4,7 @@ import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 // @ts-ignore
 import { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';
-// @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
 import Icon from '../Icon';
 // @ts-ignore
 import { ArrowForward, ArrowBack } from '../../icons';