Remove useMemo calls

useMemo calls are not needed anymore for new Next versions.

packages/web/categories/action/react/src/components/ActionButton/index.tsx

@@ -77,7 +77,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     }: ActionButtonProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<ButtonBase.ButtonBaseArgs>(() => ({
+    const styleProps: ButtonBase.ButtonBaseArgs = {
       size,
       block,
       variant,
@@ -85,7 +85,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
       compact,
       menuItem,
       disabled,
-    }), [size, block, variant, border, compact, menuItem, disabled]);
+    };
 
     return (
       <button

packages/web/categories/formatted/react/src/components/EmailAddressInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 
-export type EmailAddressInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style'> & {
+export interface EmailAddressInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -76,7 +76,7 @@ export const EmailAddressInput = React.forwardRef<HTMLInputElement, EmailAddress
           {...etcProps}
           className={TextControlBase.Input(styleArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
           type="email"
           data-testid="input"
         />

packages/web/categories/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 
-export type PhoneNumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style'> & {
+export interface PhoneNumberInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -58,7 +58,7 @@ export const PhoneNumberInput = React.forwardRef<HTMLInputElement, PhoneNumberIn
     }: PhoneNumberInputProps,
     ref,
   ) => {
-    const styleArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
+    const styleArgs: TextControlBase.TextControlBaseArgs = {
       block,
       border,
       size,
@@ -66,7 +66,7 @@ export const PhoneNumberInput = React.forwardRef<HTMLInputElement, PhoneNumberIn
       style,
       resizable: false,
       predefinedValues: false,
-    }), [block, border, size, indicator, style]);
+    };
 
     return (
       <div
@@ -76,7 +76,7 @@ export const PhoneNumberInput = React.forwardRef<HTMLInputElement, PhoneNumberIn
           {...etcProps}
           className={TextControlBase.Input(styleArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
           type="tel"
           data-testid="input"
         />

packages/web/categories/formatted/react/src/components/UrlInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 
-export type UrlInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style'> & {
+export interface UrlInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -58,7 +58,7 @@ export const UrlInput = React.forwardRef<HTMLInputElement, UrlInputProps>(
     }: UrlInputProps,
     ref,
   ) => {
-    const styleArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
+    const styleArgs: TextControlBase.TextControlBaseArgs = {
       block,
       border,
       size,
@@ -66,7 +66,7 @@ export const UrlInput = React.forwardRef<HTMLInputElement, UrlInputProps>(
       style,
       resizable: false,
       predefinedValues: false,
-    }), [block, border, size, indicator, style]);
+    };
 
     return (
       <div
@@ -76,7 +76,7 @@ export const UrlInput = React.forwardRef<HTMLInputElement, UrlInputProps>(
           {...etcProps}
           className={TextControlBase.Input(styleArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
           type="url"
           data-testid="input"
         />

packages/web/categories/freeform/react/src/components/MaskedTextInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 
-export type MaskedTextInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
+export interface MaskedTextInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -59,7 +59,7 @@ export const MaskedTextInput = React.forwardRef<HTMLInputElement, MaskedTextInpu
     }: MaskedTextInputProps,
     ref,
   ) => {
-    const textInputBaseArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
+    const textInputBaseArgs: TextControlBase.TextControlBaseArgs = {
       block,
       border,
       size,
@@ -67,7 +67,7 @@ export const MaskedTextInput = React.forwardRef<HTMLInputElement, MaskedTextInpu
       style,
       resizable: false,
       predefinedValues: false,
-    }), [block, border, size, indicator, style]);
+    };
 
     return (
       <div
@@ -77,7 +77,7 @@ export const MaskedTextInput = React.forwardRef<HTMLInputElement, MaskedTextInpu
           {...etcProps}
           className={TextControlBase.Input(textInputBaseArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
           type="password"
           data-testid="input"
         />

packages/web/categories/freeform/react/src/components/MultilineTextInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 
-export type MultilineTextInputProps = Omit<React.HTMLProps<HTMLTextAreaElement>, 'size' | 'style'> & {
+export interface MultilineTextInputProps extends Omit<React.HTMLProps<HTMLTextAreaElement>, 'size' | 'style' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -59,7 +59,7 @@ export const MultilineTextInput = React.forwardRef<HTMLTextAreaElement, Multilin
     }: MultilineTextInputProps,
     ref,
   ) => {
-    const textInputBaseArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
+    const textInputBaseArgs: TextControlBase.TextControlBaseArgs = {
       block,
       border,
       size,
@@ -67,7 +67,7 @@ export const MultilineTextInput = React.forwardRef<HTMLTextAreaElement, Multilin
       style,
       resizable: true,
       predefinedValues: false,
-    }), [block, border, size, indicator, style]);
+    };
 
     return (
       <div
@@ -77,7 +77,7 @@ export const MultilineTextInput = React.forwardRef<HTMLTextAreaElement, Multilin
           {...etcProps}
           className={TextControlBase.Input(textInputBaseArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
           style={{
             height: TextControlBase.MIN_HEIGHTS[size],
           }}

packages/web/categories/freeform/react/src/components/TextInput/index.tsx

@@ -6,7 +6,7 @@ export enum TextInputType {
   SEARCH = 'search',
 }
 
-export type TextInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
+export interface TextInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -69,7 +69,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     }: TextInputProps,
     ref,
   ) => {
-    const textInputBaseArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
+    const textInputBaseArgs: TextControlBase.TextControlBaseArgs = {
       block,
       border,
       size,
@@ -77,7 +77,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       style,
       resizable: false,
       predefinedValues: false,
-    }), [block, border, size, indicator, style]);
+    };
 
     return (
       <div
@@ -87,7 +87,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           {...etcProps}
           className={TextControlBase.Input(textInputBaseArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
           type={type}
           data-testid="input"
         />

packages/web/categories/information/react/src/components/Badge/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as BadgeBase from '@tesseract-design/web-base-badge';
 
-export type BadgeProps = React.HTMLProps<HTMLSpanElement> & {
+export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   rounded?: boolean,
 };
 
@@ -13,9 +13,9 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     },
     ref,
   ) => {
-    const badgeStyleProps = React.useMemo<BadgeBase.BadgeBaseArgs>(() => ({
+    const badgeStyleProps: BadgeBase.BadgeBaseArgs = {
       rounded,
-    }), [rounded]);
+    };
 
     return (
       <strong

packages/web/categories/navigation/react/src/components/LinkButton/index.tsx

@@ -3,7 +3,7 @@ import * as ButtonBase from '@tesseract-design/web-base-button';
 
 type LinkButtonElement = HTMLAnchorElement | HTMLSpanElement;
 
-export type LinkButtonProps = Omit<React.HTMLProps<LinkButtonElement>, 'size' | 'style'> & {
+export interface LinkButtonProps extends Omit<React.HTMLProps<LinkButtonElement>, 'size' | 'style'> {
   /**
    * Size of the component.
    */
@@ -66,7 +66,7 @@ export const LinkButton = React.forwardRef<LinkButtonElement, LinkButtonProps>(
     }: LinkButtonProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<ButtonBase.ButtonBaseArgs>(() => ({
+    const styleProps: ButtonBase.ButtonBaseArgs = {
       size,
       block,
       variant,
@@ -74,7 +74,7 @@ export const LinkButton = React.forwardRef<LinkButtonElement, LinkButtonProps>(
       disabled,
       compact,
       menuItem,
-    }), [size, block, variant, border, disabled, compact, menuItem]);
+    };
 
     const commonChildren = (
       <>

packages/web/categories/option/react/src/components/DropdownSelect/index.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
 
-type RenderOptionsProps = {
+interface RenderOptionsProps {
   options: SelectControlBase.SelectOption[],
   optionComponent?: React.ElementType,
   optgroupComponent?: React.ElementType,
   level?: number,
 }
 
-const RenderOptions: React.VFC<RenderOptionsProps> = ({
+const RenderOptions: React.FC<RenderOptionsProps> = ({
   options,
   optionComponent: Option = 'option',
   optgroupComponent: Optgroup = 'optgroup',
@@ -70,7 +70,7 @@ const RenderOptions: React.VFC<RenderOptionsProps> = ({
   </>
 );
 
-export type DropdownSelectProps = Omit<React.HTMLProps<HTMLSelectElement>, 'size' | 'style' | 'children'> & {
+export interface DropdownSelectProps extends Omit<React.HTMLProps<HTMLSelectElement>, 'size' | 'style' | 'children' | 'label'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */
@@ -129,7 +129,7 @@ export const DropdownSelect = React.forwardRef<HTMLSelectElement, DropdownSelect
     }: DropdownSelectProps,
     ref,
   ) => {
-    const styleArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
+    const styleArgs: TextControlBase.TextControlBaseArgs = {
       block,
       border,
       size,
@@ -137,7 +137,7 @@ export const DropdownSelect = React.forwardRef<HTMLSelectElement, DropdownSelect
       style,
       resizable: true,
       predefinedValues: true,
-    }), [block, border, size, style]);
+    };
 
     return (
       <div
@@ -147,7 +147,7 @@ export const DropdownSelect = React.forwardRef<HTMLSelectElement, DropdownSelect
           {...etcProps}
           className={TextControlBase.Input(styleArgs)}
           ref={ref}
-          aria-label={label}
+          aria-label={label?.toString()}
         >
           <RenderOptions
             options={options}

packages/web/categories/option/react/src/components/RadioButton/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ButtonBase from '@tesseract-design/web-base-button';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 
-export type RadioButtonProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
+export interface RadioButtonProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> {
   /**
    * Size of the component.
    */
@@ -56,7 +56,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
     }: RadioButtonProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<ButtonBase.ButtonBaseArgs & CheckControlBase.CheckControlBaseArgs>(() => ({
+    const styleProps: ButtonBase.ButtonBaseArgs & CheckControlBase.CheckControlBaseArgs = {
       size,
       block,
       variant,
@@ -67,7 +67,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
       appearance: CheckControlBase.CheckControlAppearance.BUTTON,
       type: CheckControlBase.CheckControlType.RADIO,
       uncheckedLabel: false,
-    }), [size, block, variant, border, compact, disabled]);
+    };
 
     return (
       <div

packages/web/categories/option/react/src/components/RadioTickBox/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 
-export type RadioTickBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
+export interface RadioTickBoxProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> {
   /**
    * Should the component occupy the whole width of its parent?
    */
@@ -34,13 +34,13 @@ export const RadioTickBox = React.forwardRef<HTMLInputElement, RadioTickBoxProps
     }: RadioTickBoxProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<CheckControlBase.CheckControlBaseArgs>(() => ({
+    const styleProps: CheckControlBase.CheckControlBaseArgs = {
       block,
       compact,
       appearance: CheckControlBase.CheckControlAppearance.TICK_BOX,
       type: CheckControlBase.CheckControlType.RADIO,
       uncheckedLabel: false,
-    }), [block, compact]);
+    };
 
     return (
       <div

packages/web/categories/option/react/src/components/ToggleButton/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ButtonBase from '@tesseract-design/web-base-button';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 
-export type ToggleButtonProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
+export interface ToggleButtonProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> {
   /**
    * Size of the component.
    */
@@ -61,7 +61,7 @@ export const ToggleButton = React.forwardRef<HTMLInputElement, ToggleButtonProps
     }: ToggleButtonProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<ButtonBase.ButtonBaseArgs & CheckControlBase.CheckControlBaseArgs>(() => ({
+    const styleProps: ButtonBase.ButtonBaseArgs & CheckControlBase.CheckControlBaseArgs = {
       size,
       block,
       variant,
@@ -72,7 +72,7 @@ export const ToggleButton = React.forwardRef<HTMLInputElement, ToggleButtonProps
       appearance: CheckControlBase.CheckControlAppearance.BUTTON,
       type: CheckControlBase.CheckControlType.CHECKBOX,
       uncheckedLabel: false,
-    }), [size, block, variant, border, compact, disabled]);
+    };
     const defaultRef = React.useRef<HTMLInputElement>(null);
     const theRef = (ref ?? defaultRef) as React.MutableRefObject<HTMLInputElement>;
 

packages/web/categories/option/react/src/components/ToggleSwitch/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 
-export type ToggleSwitchProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
+export interface ToggleSwitchProps extends Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> {
   /**
    * Label of the component when in the unchecked state.
    */
@@ -44,14 +44,13 @@ export const ToggleSwitch = React.forwardRef<HTMLInputElement, ToggleSwitchProps
     }: ToggleSwitchProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<CheckControlBase.CheckControlBaseArgs>(() => ({
+    const styleProps: CheckControlBase.CheckControlBaseArgs = {
       block,
       compact,
-      menuItem: false,
       appearance: CheckControlBase.CheckControlAppearance.SWITCH,
       type: CheckControlBase.CheckControlType.CHECKBOX,
       uncheckedLabel: Boolean(uncheckedLabel),
-    }), [block, compact, uncheckedLabel]);
+    };
 
     return (
       <div

packages/web/categories/option/react/src/components/ToggleTickBox/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
 
-export type ToggleTickBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'style'> & {
+export interface ToggleTickBoxProps extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'style'> {
   /**
    * Should the component occupy the whole width of its parent?
    */
@@ -39,13 +39,13 @@ export const ToggleTickBox = React.forwardRef<HTMLInputElement, ToggleTickBoxPro
     }: ToggleTickBoxProps,
     ref,
   ) => {
-    const styleProps = React.useMemo<CheckControlBase.CheckControlBaseArgs>(() => ({
+    const styleProps: CheckControlBase.CheckControlBaseArgs = {
       block,
       compact,
       appearance: CheckControlBase.CheckControlAppearance.TICK_BOX,
       type: CheckControlBase.CheckControlType.CHECKBOX,
       uncheckedLabel: false,
-    }), [block, compact]);
+    };
     const defaultRef = React.useRef<HTMLInputElement>(null);
     const theRef = (ref ?? defaultRef) as React.MutableRefObject<HTMLInputElement>;