feat(components): use typedMemo & fix types

psychedelicious · psychedelicious · commit 5834b1ebf388 · 2024-01-20T19:26:08.000+11:00
diff --git a/lib/components/accordion/accordion-button.tsx b/lib/components/accordion/accordion-button.tsx
@@ -1,8 +1,9 @@
 import type { AccordionButtonProps as ChakraAccordionButtonProps, ComponentWithAs } from '@chakra-ui/react';
 import { AccordionButton as ChakraAccordionButton, forwardRef } from '@chakra-ui/react';
 import { truncate } from 'lodash-es';
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 
+import { typedMemo } from '../../util';
 import { Badge } from '../badge';
 import { Spacer } from '../spacer';
 import { AccordionIcon } from './wrapper';
@@ -11,11 +12,10 @@ export type AccordionButtonProps = ChakraAccordionButtonProps & {
   badges?: (string | number)[];
 };
 
-export type AccordionButtonComponent = React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'button', ChakraAccordionButtonProps>, AccordionButtonProps>
->;
-
-export const AccordionButton: AccordionButtonComponent = memo(
+export const AccordionButton: ComponentWithAs<
+  ComponentWithAs<'button', ChakraAccordionButtonProps>,
+  AccordionButtonProps
+> = typedMemo(
   forwardRef<AccordionButtonProps, typeof ChakraAccordionButton>((props, ref) => {
     const { children, badges: _badges, ...rest } = props;
     const badges = useMemo<string[] | undefined>(
diff --git a/lib/components/accordion/standalone-accordion.tsx b/lib/components/accordion/standalone-accordion.tsx
@@ -1,6 +1,8 @@
+import type { AccordionProps as ChakraAccordionProps, ComponentWithAs } from '@chakra-ui/react';
 import type { MouseEventHandler, PropsWithChildren } from 'react';
-import { memo, useCallback } from 'react';
+import { useCallback } from 'react';
 
+import { typedMemo } from '../../util';
 import { AccordionButton } from './accordion-button';
 import { Accordion, AccordionItem, AccordionPanel } from './wrapper';
 
@@ -11,7 +13,10 @@ export type StandaloneAccordionProps = PropsWithChildren<{
   onToggle: () => void;
 }>;
 
-export const StandaloneAccordion = memo((props: StandaloneAccordionProps) => {
+export const StandaloneAccordion: ComponentWithAs<
+  ComponentWithAs<'div', ChakraAccordionProps>,
+  StandaloneAccordionProps
+> = typedMemo((props) => {
   const onClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (e) => {
       e.preventDefault();
diff --git a/lib/components/alert-dialog/confirmation-alert-dialog.tsx b/lib/components/alert-dialog/confirmation-alert-dialog.tsx
@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from 'react';
-import { memo, useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { typedMemo } from '../../util';
 import { Button } from '../button';
 import type { AlertDialogProps } from './wrapper';
 import {
@@ -28,7 +29,7 @@ export type ConfirmationAlertDialogProps = Omit<AlertDialogProps, 'leastDestruct
  * This component is a wrapper around AlertDialog that provides a confirmation dialog.
  * Its state must be managed externally using chakra's `useDisclosure()` hook.
  */
-export const ConfirmationAlertDialog = memo((props: ConfirmationAlertDialogProps) => {
+export const ConfirmationAlertDialog = typedMemo((props: ConfirmationAlertDialogProps) => {
   const { t } = useTranslation();
 
   const {
@@ -77,5 +78,3 @@ export const ConfirmationAlertDialog = memo((props: ConfirmationAlertDialogProps
     </AlertDialog>
   );
 });
-
-ConfirmationAlertDialog.displayName = 'ConfirmationAlertDialog';
diff --git a/lib/components/button/button-group.tsx b/lib/components/button/button-group.tsx
@@ -1,12 +1,11 @@
 import type { ButtonGroupProps as ChakraButtonGroupProps, ComponentWithAs } from '@chakra-ui/react';
 import { ButtonGroup as ChakraButtonGroup, forwardRef } from '@chakra-ui/react';
-import { memo } from 'react';
+
+import { typedMemo } from '../../util';
 
 export type ButtonGroupProps = ChakraButtonGroupProps;
 
-export const ButtonGroup: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'div', ChakraButtonGroupProps>, ButtonGroupProps>
-> = memo(
+export const ButtonGroup: ComponentWithAs<ComponentWithAs<'div', ChakraButtonGroupProps>, ButtonGroupProps> = typedMemo(
   forwardRef<ButtonGroupProps, typeof ChakraButtonGroup>(({ isAttached = true, ...rest }, ref) => {
     return <ChakraButtonGroup ref={ref} isAttached={isAttached} {...rest} />;
   })
diff --git a/lib/components/button/button.tsx b/lib/components/button/button.tsx
@@ -1,18 +1,16 @@
 import type { ButtonProps as ChakraButtonProps, ComponentWithAs } from '@chakra-ui/react';
 import { Button as ChakraButton, forwardRef } from '@chakra-ui/react';
 import type { ReactNode } from 'react';
-import { memo } from 'react';
 
+import { typedMemo } from '../../util';
 import { Tooltip } from '../tooltip/tooltip';
 
 export type ButtonProps = ChakraButtonProps & {
   isChecked?: boolean;
   tooltip?: ReactNode;
 };
 
-export const Button: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'button', ChakraButtonProps>, ButtonProps>
-> = memo(
+export const Button: ComponentWithAs<ComponentWithAs<'button', ChakraButtonProps>, ButtonProps> = typedMemo(
   forwardRef<ButtonProps, typeof ChakraButton>(({ isChecked, tooltip, children, ...rest }: ButtonProps, ref) => {
     if (tooltip) {
       return (
diff --git a/lib/components/button/icon-button.tsx b/lib/components/button/icon-button.tsx
@@ -1,18 +1,16 @@
 import type { ComponentWithAs, IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react';
 import { forwardRef, IconButton as ChakraIconButton } from '@chakra-ui/react';
 import type { ReactNode } from 'react';
-import { memo } from 'react';
 
+import { typedMemo } from '../../util';
 import { Tooltip } from '../tooltip';
 
 export type IconButtonProps = ChakraIconButtonProps & {
   isChecked?: boolean;
   tooltip?: ReactNode;
 };
 
-export const IconButton: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'button', ChakraIconButtonProps>, IconButtonProps>
-> = memo(
+export const IconButton: ComponentWithAs<ComponentWithAs<'button', ChakraIconButtonProps>, IconButtonProps> = typedMemo(
   forwardRef<IconButtonProps, typeof ChakraIconButton>(({ isChecked, tooltip, ...rest }: IconButtonProps, ref) => {
     if (tooltip) {
       return (
diff --git a/lib/components/combobox/combobox-fallback.tsx b/lib/components/combobox/combobox-fallback.tsx
@@ -1,13 +1,12 @@
-import { memo } from 'react';
-
+import { typedMemo } from '../../util';
 import { Flex } from '../flex';
 import { Text } from '../text';
 
 export type ComboboxFallbackProps = {
   label: string;
 };
 
-export const ComboboxFallback = memo((props: ComboboxFallbackProps) => (
+export const ComboboxFallback = typedMemo((props: ComboboxFallbackProps) => (
   <Flex h={8} alignItems="center" justifyContent="center">
     <Text fontSize="sm" color="base.500">
       {props.label}
diff --git a/lib/components/combobox/combobox.tsx b/lib/components/combobox/combobox.tsx
@@ -8,11 +8,12 @@ import type {
   StylesConfig,
 } from 'chakra-react-select';
 import { Select as ChakraReactSelect } from 'chakra-react-select';
-import { memo, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 export type {} from 'react-select/base';
 
 import type { SystemStyleObject } from '@chakra-ui/styled-system';
 
+import { typedMemo } from '../../util';
 import { CustomMenuListComponent } from './custom-menu-list';
 import type { ComboboxOption } from './custom-option';
 import { CustomOptionComponent } from './custom-option';
@@ -35,7 +36,7 @@ const components: SelectComponentsConfig<ComboboxOption, false, GroupBase<Combob
   MenuList: CustomMenuListComponent,
 };
 
-export const Combobox = memo((props: ComboboxProps) => {
+export const Combobox = typedMemo((props: ComboboxProps) => {
   const { sx, selectRef, inputRef, ...rest } = props;
   const chakraStyles = useMemo<CustomChakraStylesConfig>(
     () => ({
@@ -84,4 +85,4 @@ export const Combobox = memo((props: ComboboxProps) => {
   );
 });
 
-Combobox.displayName = 'InvSelect';
+Combobox.displayName = 'Combobox';
diff --git a/lib/components/combobox/custom-menu-list.tsx b/lib/components/combobox/custom-menu-list.tsx
@@ -4,8 +4,9 @@ import { cloneDeep, merge } from 'lodash-es';
 import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import type { PropsWithChildren } from 'react';
-import { memo, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
+import { typedMemo } from '../../util';
 import { Box } from '../box';
 import { overlayScrollbarsParams } from '../shared/overlayscrollbars';
 import type { ComboboxOption } from './custom-option';
@@ -18,7 +19,7 @@ const overlayScrollbarsParamsOverrides: Partial<UseOverlayScrollbarsParams> = {
 
 const osParams = merge(cloneDeep(overlayScrollbarsParams), overlayScrollbarsParamsOverrides);
 
-const Scrollable = memo((props: PropsWithChildren<{ viewport: HTMLDivElement | null }>) => {
+const Scrollable = typedMemo((props: PropsWithChildren<{ viewport: HTMLDivElement | null }>) => {
   const { children, viewport } = props;
 
   const targetRef = useRef<HTMLDivElement>(null);
@@ -45,7 +46,7 @@ const Scrollable = memo((props: PropsWithChildren<{ viewport: HTMLDivElement | n
 
 Scrollable.displayName = 'Scrollable';
 
-export const CustomMenuListComponent = memo(({ children, innerRef, ...other }: CustomMenuListProps) => {
+export const CustomMenuListComponent = typedMemo(({ children, innerRef, ...other }: CustomMenuListProps) => {
   const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
 
   useEffect(() => {
diff --git a/lib/components/combobox/custom-option.tsx b/lib/components/combobox/custom-option.tsx
@@ -1,8 +1,8 @@
 import type { GroupBase, OptionBase, OptionProps } from 'chakra-react-select';
 import { chakraComponents } from 'chakra-react-select';
 import type { ReactNode } from 'react';
-import { memo } from 'react';
 
+import { typedMemo } from '../../util';
 import { Flex } from '../flex';
 import { Text } from '../text';
 import { Tooltip } from '../tooltip';
@@ -19,7 +19,7 @@ export interface ComboboxOption extends OptionBase {
 
 type CustomOptionProps = OptionProps<ComboboxOption, false, GroupBase<ComboboxOption>>;
 
-export const CustomOptionComponent = memo(({ children, ...props }: CustomOptionProps) => {
+export const CustomOptionComponent = typedMemo(({ children, ...props }: CustomOptionProps) => {
   // On large lists, perf really takes a hit :/
   // This improves it drastically and doesn't seem to break anything...
   delete props.innerProps.onMouseMove;
diff --git a/lib/components/expander/expander.tsx b/lib/components/expander/expander.tsx
@@ -1,10 +1,11 @@
 import { Divider, Flex } from '@chakra-ui/layout';
 import type { SystemStyleObject } from '@chakra-ui/react';
 import { Collapse, Icon } from '@chakra-ui/react';
-import { memo, type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
 
+import { typedMemo } from '../../util';
 import { Text } from '../text';
 
 export type ExpanderProps = PropsWithChildren<{
@@ -26,7 +27,7 @@ const buttonStyles: SystemStyleObject = {
   },
 };
 
-export const Expander = memo((props: ExpanderProps) => {
+export const Expander = typedMemo((props: ExpanderProps) => {
   const { t } = useTranslation();
   const { children, label = t('common.advancedOptions', 'Advanced Options'), isOpen, onToggle } = props;
 
diff --git a/lib/components/form/form-control-group.tsx b/lib/components/form/form-control-group.tsx
@@ -1,6 +1,7 @@
 import type { PropsWithChildren } from 'react';
-import { createContext, memo } from 'react';
+import { createContext } from 'react';
 
+import { typedMemo } from '../../util';
 import type { FormControlProps } from './form-control';
 import type { FormLabelProps } from './form-label';
 
@@ -15,7 +16,7 @@ export const FormControlGroupContext = createContext<FormControlGroupContext>({}
 
 export type FormControlGroupProps = PropsWithChildren<FormControlGroupContext>;
 
-export const FormControlGroup = memo(({ children, ...context }: FormControlGroupProps) => {
+export const FormControlGroup = typedMemo(({ children, ...context }: FormControlGroupProps) => {
   return <FormControlGroupContext.Provider value={context}>{children}</FormControlGroupContext.Provider>;
 });
 
diff --git a/lib/components/form/form-control.tsx b/lib/components/form/form-control.tsx
@@ -1,15 +1,16 @@
 import type { ComponentWithAs, FormControlProps as ChakraFormControlProps } from '@chakra-ui/react';
 import { FormControl as ChakraFormControl, forwardRef } from '@chakra-ui/react';
-import type React from 'react';
-import { memo, useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 
+import { typedMemo } from '../../util';
 import { FormControlGroupContext } from './form-control-group';
 
 export type FormControlProps = ChakraFormControlProps;
 
-export const FormControl: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'div', ChakraFormControlProps>, ChakraFormControlProps>
-> = memo(
+export const FormControl: ComponentWithAs<
+  ComponentWithAs<'div', ChakraFormControlProps>,
+  ChakraFormControlProps
+> = typedMemo(
   forwardRef<FormControlProps, typeof ChakraFormControl>((props: FormControlProps, ref) => {
     const { orientation: _orientation, isDisabled: _isDisabled, ...formControlProps } = props;
     const ctx = useContext(FormControlGroupContext);
diff --git a/lib/components/form/form-label.tsx b/lib/components/form/form-label.tsx
@@ -1,14 +1,16 @@
 import type { ComponentWithAs, FormLabelProps as ChakraFormLabelProps } from '@chakra-ui/react';
 import { FormLabel as ChakraFormLabel, forwardRef } from '@chakra-ui/react';
-import { memo, useContext } from 'react';
+import { useContext } from 'react';
 
+import { typedMemo } from '../../util';
 import { FormControlGroupContext } from './form-control-group';
 
 export type FormLabelProps = ChakraFormLabelProps;
 
-export const FormLabel: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'label', ChakraFormLabelProps>, ChakraFormLabelProps>
-> = memo(
+export const FormLabel: ComponentWithAs<
+  ComponentWithAs<'label', ChakraFormLabelProps>,
+  ChakraFormLabelProps
+> = typedMemo(
   forwardRef<FormLabelProps, typeof ChakraFormLabel>((props: FormLabelProps, ref) => {
     const ctx = useContext(FormControlGroupContext);
     return <ChakraFormLabel ref={ref} {...props} {...ctx.formLabelProps} />;
diff --git a/lib/components/input/input.tsx b/lib/components/input/input.tsx
@@ -1,16 +1,14 @@
 import type { ComponentWithAs, InputProps as ChakraInputProps } from '@chakra-ui/react';
 import { forwardRef, Input as ChakraInput } from '@chakra-ui/react';
 import type { KeyboardEvent } from 'react';
-import { memo, useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { useGlobalModifiersImperativeAPI } from '../../hooks/use-global-modifiers';
-import { stopPastePropagation } from '../../util';
+import { stopPastePropagation, typedMemo } from '../../util';
 
 export type InputProps = ChakraInputProps;
 
-export const Input: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'input', ChakraInputProps>, ChakraInputProps>
-> = memo(
+export const Input: ComponentWithAs<ComponentWithAs<'input', ChakraInputProps>, ChakraInputProps> = typedMemo(
   forwardRef<InputProps, typeof ChakraInput>((props: InputProps, ref) => {
     const { setShift } = useGlobalModifiersImperativeAPI();
     const onKeyUpDown = useCallback(
diff --git a/lib/components/menu/menu-item.tsx b/lib/components/menu/menu-item.tsx
@@ -1,18 +1,18 @@
 import { SpinnerIcon } from '@chakra-ui/icons';
 import type { ComponentWithAs, MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
 import { forwardRef, MenuItem as ChakraMenuItem } from '@chakra-ui/react';
-import { memo } from 'react';
 
 import { spinAnimation } from '../../theme';
+import { typedMemo } from '../../util';
 
 export type MenuItemProps = ChakraMenuItemProps & {
   isDestructive?: boolean;
   isLoading?: boolean;
 };
 
-export const MenuItem: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'button', ChakraMenuItemProps>, MenuItemProps>
-> = memo(
+type MenuItemComponent = ComponentWithAs<ComponentWithAs<'button', ChakraMenuItemProps>, MenuItemProps>;
+
+export const MenuItem: MenuItemComponent = typedMemo(
   forwardRef<MenuItemProps, typeof ChakraMenuItem>((props: MenuItemProps, ref) => {
     const { isDestructive = false, isLoading = false, isDisabled, icon, ...rest } = props;
     return (
diff --git a/lib/components/menu/menu-list.tsx b/lib/components/menu/menu-list.tsx
@@ -1,15 +1,12 @@
 import type { ComponentWithAs, MenuListProps as ChakraMenuListProps } from '@chakra-ui/react';
 import { forwardRef, MenuList as ChakraMenuList, Portal } from '@chakra-ui/react';
-import { memo } from 'react';
 
-import { skipMouseEvent } from '../../util';
+import { skipMouseEvent, typedMemo } from '../../util';
 import { menuListMotionProps } from './constants';
 
 export type MenuListProps = ChakraMenuListProps;
 
-export const MenuList: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'div', ChakraMenuListProps>, ChakraMenuListProps>
-> = memo(
+export const MenuList: ComponentWithAs<ComponentWithAs<'div', ChakraMenuListProps>, ChakraMenuListProps> = typedMemo(
   forwardRef<MenuListProps, typeof ChakraMenuList>((props: MenuListProps, ref) => {
     return (
       <Portal>
diff --git a/lib/components/number-input/composite-number-input.tsx b/lib/components/number-input/composite-number-input.tsx
@@ -3,10 +3,10 @@ import type { ComponentWithAs } from '@chakra-ui/react';
 import { forwardRef } from '@chakra-ui/react';
 import { clamp } from 'lodash-es';
 import type { FocusEventHandler } from 'react';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useShiftModifier } from '../../hooks/use-global-modifiers';
-import { stopPastePropagation } from '../../util';
+import { stopPastePropagation, typedMemo } from '../../util';
 import { NumberInputField } from './number-input-field';
 import type { NumberInputProps } from './wrapper';
 import { NumberDecrementStepper, NumberIncrementStepper, NumberInput, NumberInputStepper } from './wrapper';
@@ -43,9 +43,10 @@ const roundToMultiple = (value: number, multiple: number): number => {
   return Math.round(value / multiple) * multiple;
 };
 
-export const CompositeNumberInput: React.MemoExoticComponent<
-  ComponentWithAs<ComponentWithAs<'div', NumberInputProps>, CompositeNumberInputProps>
-> = memo(
+export const CompositeNumberInput: ComponentWithAs<
+  ComponentWithAs<'div', NumberInputProps>,
+  CompositeNumberInputProps
+> = typedMemo(
   forwardRef<CompositeNumberInputProps, typeof NumberInput>((props, ref) => {
     const {
       value,
diff --git a/lib/components/number-input/number-input-field.tsx b/lib/components/number-input/number-input-field.tsx
diff --git a/lib/components/slider/composite-range-slider.tsx b/lib/components/slider/composite-range-slider.tsx
diff --git a/lib/components/slider/composite-slider.tsx b/lib/components/slider/composite-slider.tsx
diff --git a/lib/components/slider/range-slider-mark.tsx b/lib/components/slider/range-slider-mark.tsx
diff --git a/lib/components/slider/slider-mark.tsx b/lib/components/slider/slider-mark.tsx
diff --git a/lib/components/tabs/tab.tsx b/lib/components/tabs/tab.tsx
diff --git a/lib/components/textarea/textarea.tsx b/lib/components/textarea/textarea.tsx
diff --git a/lib/components/tooltip/tooltip.tsx b/lib/components/tooltip/tooltip.tsx
