feat: Update chromicons and icon typings

package.json

@@ -33,7 +33,7 @@
     }
   },
   "peerDependencies": {
-    "@lifeomic/chromicons": ">=1.2.1",
+    "@lifeomic/chromicons": ">=3.0.0",
     "react": "16",
     "react-dom": "16",
     "react-router-dom": ">=5.1.2"
@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@lifeomic/chromicons": "^2.2.0",
+    "@lifeomic/chromicons": "^3.4.0",
     "@storybook/addon-a11y": "^7.3.2",
     "@storybook/addon-actions": "^7.3.2",
     "@storybook/addon-docs": "^7.3.2",

src/components/Alert/AlertIcon.tsx

@@ -25,7 +25,9 @@ export type AlertIconClasses = GetClasses<typeof useStyles>;
 export interface AlertIconProps {
   children?: React.ReactNode;
   className?: string;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
 }
 
 export const AlertIcon: React.FC<AlertIconProps> = ({

src/components/Button/Button.tsx

@@ -230,9 +230,13 @@ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   color?: 'default' | 'inverse' | 'negative' | 'positive';
   disabled?: boolean;
   fullWidth?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   variant?: 'contained' | 'outlined' | 'text';
-  trailingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  trailingIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
 }
 
 /**

src/components/ButtonFloat/ButtonFloat.tsx

@@ -121,11 +121,15 @@ export interface ButtonFloatProps
   extends React.ComponentPropsWithoutRef<'button'> {
   align?: 'top' | 'center' | 'bottom';
   children?: React.ReactNode;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   fullWidth?: boolean;
   justify?: 'left' | 'center' | 'right';
   size?: 0 | 1 | 2;
-  trailingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  trailingIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
 }
 
 /**

src/components/ButtonLink/ButtonLink.tsx

@@ -227,7 +227,7 @@ export interface ButtonLinkProps extends LinkProps {
   disabled?: ButtonProps['disabled'];
   fullWidth?: ButtonProps['fullWidth'];
   icon?: ButtonProps['icon'];
-  trailingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  trailingIcon?: ButtonProps['trailingIcon'];
   variant?: ButtonProps['variant'];
 }
 

src/components/ColorPicker/ColorPicker.tsx

@@ -271,7 +271,9 @@ export interface ColorPickerProps
   fullWidth?: boolean;
   hasError?: BaseFormElement['hasError'];
   helpMessage?: BaseFormElement['helpMessage'];
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   invalidColorText?: string;
   label?: BaseFormElement['label'];
   onChange?: (color: string) => void;

src/components/DescriptionList/DescriptionDetails.tsx

@@ -103,7 +103,9 @@ export interface DescriptionDetailsProps
   avatar?: React.ReactElement<AvatarProps>;
   children?: React.ReactNode;
   disabled?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   justify?:
     | 'center'
     | 'flex-start'

src/components/DescriptionList/DescriptionList.tsx

@@ -115,7 +115,9 @@ export interface DescriptionListProps {
     | null // allows items to be added programatically and made null if a condition doesn't apply
   >;
   title?: string;
-  titleIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  titleIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   margin?: number | string;
   marginTop?: number | string;
   marginBottom?: number | string;

src/components/DescriptionList/DescriptionTerm.tsx

@@ -103,7 +103,9 @@ export interface DescriptionTermProps
   avatar?: React.ReactElement<AvatarProps>;
   children?: React.ReactNode;
   disabled?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   justify?:
     | 'center'
     | 'flex-start'

src/components/ExpansionPanel/ExpansionPanel.tsx

@@ -123,7 +123,9 @@ export interface ExpansionPanelProps
   innerContentClassName?: string;
   leadingIconClassName?: string;
   title: string;
-  leadingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  leadingIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   secondaryHeaderClassName?: string;
   secondaryHeader?: React.ReactNode;
   truncateTitle?: boolean;

src/components/IconButton/IconButton.tsx

@@ -148,7 +148,9 @@ export interface IconButtonProps
   extends React.ComponentPropsWithoutRef<'button'> {
   ['aria-label']: string;
   color?: 'default' | 'inverse' | 'negative' | 'positive';
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   size?: 0 | 1;
   paddingTop?: 0 | 1 | 2 | 3;
   paddingBottom?: 0 | 1 | 2 | 3;

src/components/IconButtonFloat/IconButtonFloat.tsx

@@ -99,7 +99,9 @@ export type IconButtonFloatClasses = GetClasses<typeof useStyles>;
 export interface IconButtonFloatProps
   extends React.ComponentPropsWithoutRef<'button'> {
   ['aria-label']: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   align?: 'top' | 'center' | 'bottom';
   justify?: 'left' | 'center' | 'right';
   size?: 0 | 1 | 2;

src/components/IconTile/IconTileBadge.tsx

@@ -37,7 +37,9 @@ export interface IconTileBadgeOwnProps
     HTMLDivElement
   > {
   children?: React.ReactNode;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
 }
 
 export type IconTileBadgeClasses = GetClasses<typeof useStyles>;

src/components/List/List.tsx

@@ -103,7 +103,9 @@ export interface ListProps {
     | React.ReactElement<ListGroupHeadingProps>
   >;
   title?: string;
-  titleIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  titleIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   margin?: number | string;
   marginTop?: number | string;
   marginBottom?: number | string;

src/components/List/ListItem.tsx

@@ -80,12 +80,16 @@ export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
   avatar?: React.ReactElement<AvatarProps>;
   children?: React.ReactNode;
   disabled?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   iconClassName?: string;
   onClick?: any;
   secondaryText?: string;
   text?: string;
-  trailingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  trailingIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   trailingIconClassName?: string;
 }
 

src/components/Menu/MenuButton.tsx

@@ -23,7 +23,9 @@ export type MenuButtonClasses = GetClasses<typeof useStyles>;
 
 export interface MenuButtonProps extends ButtonProps {
   children?: React.ReactNode;
-  trailingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  trailingIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
 }
 
 /** @deprecated Please use `trailingIcon` from Button instead. This will be removed in a future release */

src/components/Menu/MenuItem.tsx

@@ -64,7 +64,9 @@ export interface MenuItemProps
   extends React.ComponentPropsWithoutRef<'button'> {
   children?: React.ReactNode;
   color?: 'default' | 'negative' | 'positive';
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   text?: string;
   secondaryText?: string;
 }

src/components/Popover/PopoverItem.tsx

@@ -64,7 +64,9 @@ export interface PopoverItemOwnProps
   extends StandardProps<HTMLLIElement, PopoverItemClasses> {
   children?: React.ReactNode;
   clipText?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   text?: string;
   justify?: 'flex-start' | 'center' | 'space-between' | 'flex-end';
   direction?: 'row' | 'row-reverse';

src/components/Radio/Radio.tsx

@@ -137,7 +137,9 @@ export type RadioClasses = GetClasses<typeof useStyles>;
 
 export interface RadioProps extends BaseFormElement {
   children?: React.ReactNode;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
 }
 
 /**

src/components/Select/ComboBox.tsx

@@ -99,7 +99,9 @@ export interface ComboBoxProps
   value?: Array<string> | undefined;
   /** This property shows the required asterisk (*). Required validation needs to be implemented separately. */
   showRequiredLabel?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   tooltipMessage?: string;
 }
 
@@ -433,7 +435,7 @@ export const ComboBox: React.FC<ComboBoxProps> = ({
               aria-multiselectable={true}
             >
               {React.Children.map(children, (child) => {
-                if (!React.isValidElement(child)) {
+                if (!React.isValidElement<SelectOptionProps>(child)) {
                   return null;
                 }
 

src/components/Select/Select.tsx

@@ -334,7 +334,9 @@ export interface SelectProps
   secondaryAction?: SelectSecondaryAction;
   secondaryLabel?: string;
   fullWidth?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   onChange?: (value: string, meta: any) => void;
   placeholder?: string;
   placement?:
@@ -622,7 +624,7 @@ export const Select: React.FC<SelectProps> = ({
             >
               {popover.visible &&
                 React.Children.map(children, (child) => {
-                  if (!React.isValidElement(child)) {
+                  if (!React.isValidElement<SelectOptionProps>(child)) {
                     return null;
                   }
 

src/components/Select/SelectOption.tsx

@@ -64,7 +64,9 @@ export type SelectOptionClasses = GetClasses<typeof useStyles>;
 export type SelectSecondaryAction = {
   action: (args: any | undefined) => void;
   args: any | undefined;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   label: string;
 };
 

src/components/SlideOver/Header.tsx

@@ -44,7 +44,9 @@ export interface HeaderProps {
   children?: React.ReactNode;
   onClose: () => any;
   title?: string;
-  titleIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  titleIcon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   classes?: {
     root?: string;
     text?: string;

src/components/Snackbar/Snackbar.tsx

@@ -68,7 +68,9 @@ export interface SnackbarProps {
   duration?: number;
   children?: React.ReactNode;
   className?: string;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   isOpen?: boolean;
   allowDismiss?: boolean;
   onClose?: () => void;

src/components/Stepper/Step.tsx

@@ -134,7 +134,9 @@ export interface StepProps {
   className?: string;
   completed?: boolean;
   disabled?: boolean;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   index?: number;
   numberOfSteps?: number;
   onClick?: (index: number | undefined) => void;

src/components/TextArea/TextArea.tsx

@@ -171,7 +171,9 @@ export interface TextAreaProps
   label?: BaseFormElement['label'];
   fullWidth?: boolean;
   secondaryLabel?: string;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   tooltipMessage?: string;
   textAreaClassName?: string;
   /** This property shows the required asterisk (*). Required validation needs to be implemented separately. */

src/components/TextField/TextField.tsx

@@ -232,7 +232,9 @@ export interface TextFieldProps
   fullWidth?: boolean;
   hasError?: BaseFormElement['hasError'];
   helpMessage?: BaseFormElement['helpMessage'];
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.MemoExoticComponent<
+    (props: React.SVGProps<SVGSVGElement>) => JSX.Element
+  >;
   label?: BaseFormElement['label'];
   secondaryLabel?: string;
   tooltipMessage?: string;

src/testUtils/IconComponent.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 
 export const testId = 'iconComponent';
 
-export const IconComponent: React.FC<React.SVGProps<SVGSVGElement>> = (
-  props
-) => (
+const IconSvg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     width="12"
     height="12"
@@ -15,3 +13,7 @@ export const IconComponent: React.FC<React.SVGProps<SVGSVGElement>> = (
     {...props}
   />
 );
+
+export const IconComponent: React.MemoExoticComponent<(
+  props: React.SVGProps<SVGSVGElement>
+) => JSX.Element> = React.memo(IconSvg);