@hyphen/hyphen-components 7.3.2 → 7.3.4

package/src/components/Modal/Modal.tsx

@@ -170,6 +170,8 @@ export const ModalBaseComponent: React.FC<ModalProps> = forwardRef<
   }
 );
 
+ModalBaseComponent.displayName = 'Modal';
+
 export interface ModalStatic {
   Body: typeof ModalBody;
   Header: typeof ModalHeader;

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

@@ -59,10 +59,10 @@ describe('ModalFooter', () => {
   });
 
   test('applies custom styles', () => {
-    const customStyle = { backgroundColor: 'red' };
+    const customStyle = { backgroundColor: '#cacaca' };
     const { container } = render(
       <ModalFooter style={customStyle}>test modal</ModalFooter>
     );
-    expect(container.firstChild).toHaveStyle('background-color: red');
+    expect(container.firstChild).toHaveStyle('background-color: #cacaca');
   });
 });

package/src/components/Popover/Popover.tsx

@@ -26,6 +26,8 @@ const PopoverContent = forwardRef<
   );
 });
 
+PopoverContent.displayName = 'PopoverContent';
+
 export {
   Popover,
   PopoverTrigger,

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

@@ -146,3 +146,5 @@ export const RadioInput = React.forwardRef<HTMLDivElement, RadioInputProps>(
     );
   }
 );
+
+RadioInput.displayName = 'RadioInput';

package/src/components/SelectInput/SelectInput.stories.tsx

@@ -25,7 +25,7 @@ export const Default = () => {
       <SelectInput
         id="singleSelectWithLabel"
         label="Label"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -46,7 +46,7 @@ export const PreSelected = () => {
       <SelectInput
         id="preSelected"
         label="Label"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -68,7 +68,7 @@ export const HelpText = () => {
         id="helpText"
         label="Flavor"
         helpText="Choose your favorite flavor"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -90,7 +90,7 @@ export const Placeholder = () => {
       <SelectInput
         id="customPlaceholder"
         label="Label"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -112,7 +112,7 @@ export const HiddenLabel = () => {
       <SelectInput
         id="labelHidden"
         label="My label is hidden"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -134,7 +134,7 @@ export const CreatableSelect = () => {
         id="creatableSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isCreatable
@@ -182,7 +182,7 @@ export const AsyncSelect = () => {
         id="asyncSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={loadOptions}
         defaultOptions
@@ -233,7 +233,7 @@ export const AsyncCreatableSelect = () => {
         id="asyncCreateSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={loadOptions}
         isCreatable
@@ -258,7 +258,7 @@ export const MultiSelect = () => {
         id="multiSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isMulti
@@ -280,7 +280,7 @@ export const MultiSelectAndPreSelected = () => {
         id="preSelectMultiSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isMulti
@@ -302,7 +302,7 @@ export const MultiSelectCreatable = () => {
         id="creatableMultiSelect"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isMulti
@@ -325,7 +325,7 @@ export const Autofocus = () => {
         id="autoFocus"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         autoFocus
@@ -347,7 +347,7 @@ export const Required = () => {
         id="required"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isRequired
@@ -369,7 +369,7 @@ export const Disabled = () => {
         id="disabled"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isDisabled
@@ -392,7 +392,7 @@ export const Clearable = () => {
         label="Label"
         value={value}
         name="myClearableSelect"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isClearable
@@ -414,7 +414,7 @@ export const Error = () => {
         id="error"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         isRequired
@@ -439,7 +439,7 @@ export const Sizes = () => {
       <SelectInput
         id="smallSelect"
         label="Small"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         value={value}
@@ -448,7 +448,7 @@ export const Sizes = () => {
       <SelectInput
         id="mediumSelect"
         label="Medium"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue1(event.target.value)}
         options={options}
         value={value1}
@@ -457,7 +457,7 @@ export const Sizes = () => {
       <SelectInput
         id="largeSelect"
         label="Large"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue2(event.target.value)}
         options={options}
         value={value2}
@@ -466,7 +466,7 @@ export const Sizes = () => {
       <SelectInput
         id="responsiveSelect"
         label="Responsive"
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue3(event.target.value)}
         options={options}
         value={value3}
@@ -488,7 +488,7 @@ export const WithPortal = () => {
       id="portal"
       label="Flavors"
       value={value}
-      // @ts-ignore - TS is not recognizing the value as a valid option
+      // @ts-expect-error - TS is not recognizing the value as a valid option
       onChange={(event) => setValue(event.target.value)}
       options={options}
       menuPortalTarget={document.body}
@@ -509,7 +509,7 @@ export const CustomClasses = () => {
         id="customClasses"
         label="Label"
         value={value}
-        // @ts-ignore - TS is not recognizing the value as a valid option
+        // @ts-expect-error - TS is not recognizing the value as a valid option
         onChange={(event) => setValue(event.target.value)}
         options={options}
         className="background-color-primary"

package/src/components/SelectInput/SelectInput.tsx

@@ -18,17 +18,21 @@ import { InputValidationMessage } from '../InputValidationMessage/InputValidatio
 import styles from './SelectInput.module.scss';
 import { GroupBase } from 'react-select/dist/declarations/src/types';
 
-type SelectOptions = any;
-type SelectGroupOptions = GroupBase<SelectOptions>;
+type SelectOption = {
+  value: string;
+  label: ReactNode;
+  [key: string]: unknown;
+};
+type SelectGroupOptions = GroupBase<SelectOption>;
 export type SelectInputOptions = OptionsOrGroups<
-  SelectOptions,
+  SelectOption,
   SelectGroupOptions
 >;
 
 export type SimulatedEventPayloadType = {
   target: {
     name: string;
-    value: OnChangeValue<SelectInputOptions, boolean>;
+    value: OnChangeValue<SelectOption, boolean>;
   };
 };
 
@@ -141,7 +145,9 @@ export interface SelectInputProps {
   [x: string]: any; // eslint-disable-line
 }
 
-type AsyncOptions = (inputValue: string) => Promise<SelectInputOptions>;
+type AsyncOptions = (
+  inputValue: string
+) => Promise<OptionsOrGroups<SelectOption, SelectGroupOptions>>;
 type AsyncSelectInputProps = SelectInputProps & {
   /**
    * Load the input asynchronously.
@@ -202,7 +208,7 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
     ...restProps
   } = props;
 
-  const handleChange = (values: OnChangeValue<SelectInputOptions, boolean>) => {
+  const handleChange = (values: OnChangeValue<SelectOption, boolean>) => {
     const simulatedEventPayloadType: SimulatedEventPayloadType = {
       target: {
         name,
@@ -245,9 +251,7 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
   };
 
   const ClearIndicator = (
-    props: ClearIndicatorProps<
-      OptionsOrGroups<SelectOptions, SelectGroupOptions>
-    >
+    props: ClearIndicatorProps<SelectOption, boolean, SelectGroupOptions>
   ) => (
     <components.ClearIndicator {...props}>
       <Icon name="remove" />

package/src/components/SelectInputInset/SelectInputInset.tsx

@@ -233,3 +233,5 @@ export const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps>
       );
     }
   );
+
+SelectInputInset.displayName = 'SelectInputInset';

package/src/components/Sidebar/Sidebar.module.scss

@@ -4,6 +4,10 @@
   border-right: 2px solid transparent;
 }
 
+.rail:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .rail:hover {
   border-right: 2px solid var(--color-border-sidebar-rail-hover);
 }

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -340,12 +340,16 @@ interface NavItem {
   }[];
 }
 
+type Team = {
+  name: string;
+};
+
 const NavHeader = ({
   activeTeam,
   setActiveTeam,
 }: {
-  activeTeam: any;
-  setActiveTeam: (team: any) => void;
+  activeTeam: Team;
+  setActiveTeam: (team: Team) => void;
 }) => {
   const { state, isMobile } = useSidebar();
 
@@ -645,8 +649,8 @@ const OrgSwitcher = ({
   activeTeam,
   setActiveTeam,
 }: {
-  activeTeam: any;
-  setActiveTeam: (team: any) => void;
+  activeTeam: Team;
+  setActiveTeam: (team: Team) => void;
 }) => {
   const { state } = useSidebar();
 

package/src/components/Sidebar/Sidebar.test.tsx

@@ -139,10 +139,13 @@ describe('Sidebar', () => {
   });
 
   test.each([
-    ['input', <input aria-label="input-field" />],
-    ['textarea', <textarea aria-label="textarea-field" />],
-    ['select', <select aria-label="select-field" />],
-    ['contenteditable', <div aria-label="editable-field" contentEditable />],
+    ['input', <input aria-label="input-field" key="input" />],
+    ['textarea', <textarea aria-label="textarea-field" key="textarea" />],
+    ['select', <select aria-label="select-field" key="select" />],
+    [
+      'contenteditable',
+      <div aria-label="editable-field" contentEditable key="contenteditable" />,
+    ],
   ])('ignores keyboard shortcuts for %s elements', (label, field) => {
     render(
       <SidebarProvider>

package/src/components/Sidebar/Sidebar.tsx

@@ -198,8 +198,12 @@ const useSidebarSideState = ({
 
   const toggleSidebar = useCallback(() => {
     lastToggledSideRef.current = side;
-    isMobile ? setOpenMobile((value) => !value) : setOpen((value) => !value);
-  }, [isMobile, setOpen, side, lastToggledSideRef]);
+    if (isMobile) {
+      setOpenMobile((value) => !value);
+    } else {
+      setOpen((value) => !value);
+    }
+  }, [isMobile, setOpen, side, setOpenMobile, lastToggledSideRef]);
 
   const state = open ? 'expanded' : 'collapsed';
 
@@ -640,12 +644,11 @@ const SidebarMenuButton = React.forwardRef<
   React.ComponentProps<'button'> & {
     asChild?: boolean;
     isActive?: boolean;
-    icon?: IconName;
     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   }
 >(
   (
-    { asChild = false, isActive = false, icon, tooltip, className, ...props },
+    { asChild = false, isActive = false, tooltip, className, ...props },
     ref
   ) => {
     const Comp = asChild ? Slot : 'button';

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

@@ -3,7 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { Table } from './Table';
 import { Button } from '../Button/Button';
 import { Badge } from '../Badge/Badge';
-import type { Column as ColumnType } from '../../types';
+import type {
+  Column as ColumnType,
+  Cell,
+  Row,
+  EventWithColumnKey,
+} from '../../types';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
@@ -12,6 +17,13 @@ const meta: Meta<typeof Table> = {
 
 export default meta;
 
+type SortDirection = 'ascending' | 'descending';
+type SortedColumn = {
+  dataKey?: string;
+  sortDirection?: SortDirection;
+};
+type SortableRow = Record<string, string | number>;
+
 export const Column = () =>
   (() => {
     const codePreviewStyle = {
@@ -94,7 +106,7 @@ export const Column = () =>
       {
         heading: 'Type',
         dataKey: 'type',
-        render: (cell: any) => <code style={codePreviewStyle}>{cell}</code>,
+        render: (cell: string) => <code style={codePreviewStyle}>{cell}</code>,
       },
       { heading: 'Description', dataKey: 'description' },
     ];
@@ -109,12 +121,15 @@ export const CommonExample = () =>
       {
         heading: 'Customer',
         dataKey: 'customerInfo',
-        render: (_cell: any, row: any) => (
-          <div>
-            <div>{row.name}</div>
-            <div className="font-color-base">{row.email}</div>
-          </div>
-        ),
+        render: (_cell?: Cell, row?: Row) => {
+          const customerRow = row as { name?: string; email?: string } | undefined;
+          return (
+            <div>
+              <div>{customerRow?.name}</div>
+              <div className="font-color-base">{customerRow?.email}</div>
+            </div>
+          );
+        },
       },
       { heading: 'Phone', dataKey: 'phone', width: 125 },
       { heading: 'Plan', dataKey: 'plan', width: 125 },
@@ -164,31 +179,37 @@ export const Loading = () =>
   })();
 
 export const Sortable = () => {
-  // @ts-ignore
-  const sortDescending = (arrOfObj, key) =>
+  const sortDescending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
-  // @ts-ignore
-  const sortAscending = (arrOfObj, key) =>
+  const sortAscending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
-  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+  const getNewSortDirection = (
+    sortedKey: string,
+    currentSortedColumn: SortedColumn
+  ) => {
     if (
-      event.sortedKey === currentSortedColumn.dataKey &&
+      sortedKey === currentSortedColumn.dataKey &&
       currentSortedColumn.sortDirection === 'ascending'
     )
       return 'descending';
     return 'ascending';
   };
-  const initialData = [
+  const initialData: SortableRow[] = [
     { id: 1, color: 'red', flavor: 'vanilla' },
     { id: 2, color: 'green', flavor: 'strawberry' },
     { id: 3, color: 'blue', flavor: 'chocolate' },
   ];
-  const [sortedColumn, setSortedColumn] = useState<any>({});
-  const [tableData, setTableData] = useState(initialData);
-  const handleSort = (event: any) => {
-    const newSortDirection = getNewSortDirection(event, sortedColumn);
+  const [sortedColumn, setSortedColumn] = useState<SortedColumn>({});
+  const [tableData, setTableData] = useState<SortableRow[]>(initialData);
+  const handleSort = (event: EventWithColumnKey) => {
+    const sortedKey =
+      typeof event.sortedKey === 'string' ? event.sortedKey : undefined;
+    if (!sortedKey) {
+      return;
+    }
+    const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
     setSortedColumn({
-      dataKey: event.sortedKey,
+      dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
   };
@@ -218,38 +239,45 @@ export const Sortable = () => {
 };
 
 export const SortablewithDefaultSortedColumn = () => {
-  // @ts-ignore
-  const sortDescending = (arrOfObj, key) =>
+  const sortDescending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
-  // @ts-ignore
-  const sortAscending = (arrOfObj, key) =>
+  const sortAscending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
-  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+  const getNewSortDirection = (
+    sortedKey: string,
+    currentSortedColumn: SortedColumn
+  ) => {
     if (
-      event.sortedKey === currentSortedColumn.dataKey &&
+      sortedKey === currentSortedColumn.dataKey &&
       currentSortedColumn.sortDirection === 'ascending'
     )
       return 'descending';
     return 'ascending';
   };
-  const initialData = [
+  const initialData: SortableRow[] = [
     { id: 1, color: 'red', flavor: 'vanilla' },
     { id: 2, color: 'green', flavor: 'strawberry' },
     { id: 3, color: 'blue', flavor: 'chocolate' },
   ];
-  const [sortedColumn, setSortedColumn] = useState<any>({
+  const [sortedColumn, setSortedColumn] = useState<SortedColumn>({
     dataKey: 'color',
     sortDirection: 'descending',
   });
-  const [tableData, setTableData] = useState([
-    ...(sortedColumn.sortDirecton === 'ascending'
-      ? sortAscending(initialData, sortedColumn.dataKey)
-      : sortDescending(initialData, sortedColumn.dataKey)),
+  const initialSortKey = sortedColumn.dataKey ?? 'color';
+  const [tableData, setTableData] = useState<SortableRow[]>([
+    ...(sortedColumn.sortDirection === 'ascending'
+      ? sortAscending(initialData, initialSortKey)
+      : sortDescending(initialData, initialSortKey)),
   ]);
-  const handleSort = (event: any) => {
-    const newSortDirection = getNewSortDirection(event, sortedColumn);
+  const handleSort = (event: EventWithColumnKey) => {
+    const sortedKey =
+      typeof event.sortedKey === 'string' ? event.sortedKey : undefined;
+    if (!sortedKey) {
+      return;
+    }
+    const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
     setSortedColumn({
-      dataKey: event.sortedKey,
+      dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
   };
@@ -279,31 +307,37 @@ export const SortablewithDefaultSortedColumn = () => {
 };
 
 export const SortableAndLoading = () => {
-  // @ts-ignore
-  const sortDescending = (arrOfObj, key) =>
+  const sortDescending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
-  // @ts-ignore
-  const sortAscending = (arrOfObj, key) =>
+  const sortAscending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
-  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+  const getNewSortDirection = (
+    sortedKey: string,
+    currentSortedColumn: SortedColumn
+  ) => {
     if (
-      event.sortedKey === currentSortedColumn.dataKey &&
+      sortedKey === currentSortedColumn.dataKey &&
       currentSortedColumn.sortDirection === 'ascending'
     )
       return 'descending';
     return 'ascending';
   };
-  const initialData = [
+  const initialData: SortableRow[] = [
     { id: 1, color: 'red', flavor: 'vanilla' },
     { id: 2, color: 'green', flavor: 'strawberry' },
     { id: 3, color: 'blue', flavor: 'chocolate' },
   ];
-  const [sortedColumn, setSortedColumn] = useState<any>({});
-  const [tableData, setTableData] = useState(initialData);
-  const handleSort = (event: any) => {
-    const newSortDirection = getNewSortDirection(event, sortedColumn);
+  const [sortedColumn, setSortedColumn] = useState<SortedColumn>({});
+  const [tableData, setTableData] = useState<SortableRow[]>(initialData);
+  const handleSort = (event: EventWithColumnKey) => {
+    const sortedKey =
+      typeof event.sortedKey === 'string' ? event.sortedKey : undefined;
+    if (!sortedKey) {
+      return;
+    }
+    const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
     setSortedColumn({
-      dataKey: event.sortedKey,
+      dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
   };
@@ -652,13 +686,25 @@ export const TruncateOverflow = () =>
 
 export const CustomActions = () =>
   (() => {
-    const renderFlavor = (cell: any, row: any, index: number) => {
-      const rows = [{ href: cell.href, name: cell.name, id: row.id, index }];
+    const renderFlavor = (cell?: Cell, row?: Row, index?: number) => {
+      const flavorCell = cell as { href?: string; name?: string } | undefined;
+      const flavorRow = row as { id?: number } | undefined;
+      const rows = [
+        {
+          href: flavorCell?.href ?? '',
+          name: flavorCell?.name ?? '',
+          id: flavorRow?.id ?? 0,
+          index,
+        },
+      ];
       const columns = [
         {
           heading: 'Url',
           dataKey: 'href',
-          render: (cell: any) => <a href={cell}>{cell}</a>,
+          render: (cell?: Cell) => {
+            const href = typeof cell === 'string' ? cell : '';
+            return <a href={href}>{href}</a>;
+          },
         },
         { heading: 'Name', dataKey: 'name' },
         { heading: 'ID', dataKey: 'id' },
@@ -672,7 +718,6 @@ export const CustomActions = () =>
       {
         heading: 'Based on the cell/row',
         dataKey: 'flavor',
-        // @ts-ignore
         render: renderFlavor,
       },
       { heading: 'Any custom JSX', render: () => <Button>Do anything</Button> },
@@ -706,7 +751,12 @@ export const EmptyCellPlaceholder = () =>
       {
         heading: 'Price',
         dataKey: 'price',
-        render: (cell: any) => (cell ? `$${cell}` : null),
+        render: (cell?: Cell) => {
+          if (typeof cell === 'number' || typeof cell === 'string') {
+            return cell ? `$${cell}` : null;
+          }
+          return null;
+        },
         emptyCellPlaceholder: '$0.00',
       },
     ];

package/src/components/TextInput/TextInput.tsx

@@ -261,3 +261,5 @@ export const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef<
     );
   }
 );
+
+TextInput.displayName = 'TextInput';

package/src/components/TextInputInset/TextInputInset.tsx

@@ -259,3 +259,5 @@ export const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps> =
       );
     }
   );
+
+TextInputInset.displayName = 'TextInputInset';