chore(react19): update types in multiple files, use createroot for vrt

commercetools · Jan 8, 2025 · 0fb317c · 0fb317c
1 parent 9aa1238
commit 0fb317c
Show file tree

Hide file tree

Showing 82 changed files with 632 additions and 349 deletions.
diff --git a/.changeset/fast-ligers-unite.md b/.changeset/fast-ligers-unite.md
@@ -0,0 +1,100 @@
+---
+'@commercetools-uikit/localized-multiline-text-field': major
+'@commercetools-uikit/localized-multiline-text-input': major
+'@commercetools-uikit/async-creatable-select-field': major
+'@commercetools-uikit/async-creatable-select-input': major
+'@commercetools-uikit/localized-rich-text-input': major
+'@commercetools-uikit/selectable-search-input': major
+'@commercetools-uikit/spacings-inset-squish': major
+'@commercetools-uikit/secondary-icon-button': major
+'@commercetools-uikit/creatable-select-field': major
+'@commercetools-uikit/creatable-select-input': major
+'@commercetools-uikit/localized-money-input': major
+'@commercetools-uikit/localized-text-field': major
+'@commercetools-uikit/multiline-text-field': major
+'@commercetools-uikit/localized-text-input': major
+'@commercetools-uikit/multiline-text-input': major
+'@commercetools-uikit/search-select-field': major
+'@commercetools-uikit/search-select-input': major
+'@commercetools-uikit/accessible-button': major
+'@commercetools-uikit/async-select-field': major
+'@commercetools-uikit/async-select-input': major
+'@commercetools-uikit/secondary-button': major
+'@commercetools-uikit/search-text-input': major
+'@commercetools-uikit/spacings-inline': major
+'@commercetools-uikit/dropdown-menu': major
+'@commercetools-uikit/date-range-field': major
+'@commercetools-uikit/date-range-input': major
+'@commercetools-uikit/primary-action-dropdown': major
+'@commercetools-uikit/spacings-inset': major
+'@commercetools-uikit/spacings-stack': major
+'@commercetools-uikit/primary-button': major
+'@commercetools-uikit/date-time-field': major
+'@commercetools-uikit/date-time-input': major
+'@commercetools-uikit/rich-text-input': major
+'@commercetools-uikit/rich-text-utils': major
+'@commercetools-uikit/password-field': major
+'@commercetools-uikit/checkbox-input': major
+'@commercetools-uikit/password-input': major
+'@commercetools-uikit/flat-button': major
+'@commercetools-uikit/icon-button': major
+'@commercetools-uikit/link-button': major
+'@commercetools-uikit/number-field': major
+'@commercetools-uikit/select-field': major
+'@commercetools-uikit/number-input': major
+'@commercetools-uikit/select-input': major
+'@commercetools-uikit/select-utils': major
+'@commercetools-uikit/toggle-input': major
+'@commercetools-uikit/collapsible-motion': major
+'@commercetools-uikit/data-table-manager': major
+'@commercetools-uikit/money-field': major
+'@commercetools-uikit/radio-field': major
+'@commercetools-uikit/input-utils': major
+'@commercetools-uikit/money-input': major
+'@commercetools-uikit/radio-input': major
+'@commercetools-uikit/accessible-hidden': major
+'@commercetools-uikit/collapsible-panel': major
+'@commercetools-uikit/date-field': major
+'@commercetools-uikit/text-field': major
+'@commercetools-uikit/time-field': major
+'@commercetools-uikit/date-input': major
+'@commercetools-uikit/text-input': major
+'@commercetools-uikit/time-input': major
+'@commercetools-uikit/loading-spinner': major
+'@commercetools-uikit/field-warnings': major
+'@commercetools-uikit/notifications': major
+'@commercetools-uikit/quick-filters': major
+'@commercetools-uikit/view-switcher': major
+'@commercetools-uikit/field-errors': major
+'@commercetools-uikit/progress-bar': major
+'@commercetools-uikit/collapsible': major
+'@commercetools-uikit/constraints': major
+'@commercetools-uikit/field-label': major
+'@commercetools-uikit/data-table': major
+'@commercetools-uikit/pagination': major
+'@commercetools-uikit/messages': major
+'@commercetools-uikit/filters': major
+'@commercetools-uikit/tooltip': major
+'@commercetools-uikit/avatar': major
+'@commercetools-uikit/icons': major
+'@commercetools-uikit/label': major
+'@commercetools-uikit/stamp': major
+'@commercetools-uikit/card': major
+'@commercetools-uikit/grid': major
+'@commercetools-uikit/link': major
+'@commercetools-uikit/text': major
+'@commercetools-uikit/calendar-utils': major
+'@commercetools-uikit/tag': major
+'visual-testing-app': major
+'@commercetools-uikit/spacings': major
+'@commercetools-uikit/buttons': major
+'@commercetools-uikit/hooks': major
+'@commercetools-uikit/utils': major
+'@commercetools-uikit/fields': major
+'@commercetools-uikit/inputs': major
+'@commercetools-frontend/ui-kit': major
+'@commercetools-uikit/design-system': major
+'@commercetools-local/storybook': major
+---
+
+Upgrade UI Kit to React 19
diff --git a/design-system/src/theme-provider.tsx b/design-system/src/theme-provider.tsx
@@ -76,8 +76,8 @@ const ThemeProvider = ({
   ...props
 }: ThemeProviderProps) => {
   const parentSelectorRef = useRef(parentSelector);
-  const themeNameRef = useRef<string>();
-  const themeOverridesRef = useRef<Record<string, string>>();
+  const themeNameRef = useRef<string>(null);
+  const themeOverridesRef = useRef<Record<string, string>>(null);
 
   useLayoutEffect(() => {
     // We want to make sure we don't really apply the change when the props
@@ -88,7 +88,7 @@ const ThemeProvider = ({
       !isEqual(themeOverridesRef.current, props.themeOverrides)
     ) {
       themeNameRef.current = theme;
-      themeOverridesRef.current = props.themeOverrides;
+      themeOverridesRef.current = props.themeOverrides ?? null;
 
       applyTheme({
         newTheme: theme,
@@ -118,12 +118,17 @@ const useTheme = (parentSelector = defaultParentSelector): TUseThemeResult => {
   const [theme, setTheme] = useState<ThemeName>('default');
   const parentSelectorRef = useRef(parentSelector);
 
-  const mutationChangeCallback = useCallback((mutationList) => {
-    // We expect only a single element in the mutation list as we configured the
-    // observer to only listen to `data-theme` changes.
-    const [mutationEvent] = mutationList;
-    setTheme((mutationEvent.target as HTMLElement).dataset.theme as ThemeName);
-  }, []);
+  const mutationChangeCallback = useCallback(
+    (mutationList: MutationRecord[]) => {
+      // We expect only a single element in the mutation list as we configured the
+      // observer to only listen to `data-theme` changes.
+      const [mutationEvent] = mutationList;
+      setTheme(
+        (mutationEvent.target as HTMLElement).dataset.theme as ThemeName
+      );
+    },
+    []
+  );
 
   useMutationObserver(parentSelector(), mutationChangeCallback, {
     attributes: true,

diff --git a/packages/calendar-utils/src/calendar-body/calendar-body.tsx b/packages/calendar-utils/src/calendar-body/calendar-body.tsx
@@ -87,7 +87,7 @@ export const CalendarBody = ({
 
   const onInputFocus = props.inputProps?.onFocus;
 
-  const handleInputFocus = useCallback(
+  const handleInputFocus: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(true);
       if (onInputFocus) onInputFocus(event);
@@ -97,7 +97,7 @@ export const CalendarBody = ({
 
   const onInputBlur = props.inputProps?.onBlur;
 
-  const handleInputBlur = useCallback(
+  const handleInputBlur: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(false);
       if (onInputBlur) onInputBlur(event);
@@ -107,7 +107,7 @@ export const CalendarBody = ({
 
   const onToggleFocus = props.toggleButtonProps?.onFocus;
 
-  const handleToggleFocus = useCallback(
+  const handleToggleFocus: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(true);
       if (onToggleFocus) onToggleFocus(event);
@@ -117,7 +117,7 @@ export const CalendarBody = ({
 
   const onToggleBlur = props.toggleButtonProps?.onBlur;
 
-  const handleToggleBlur = useCallback(
+  const handleToggleBlur: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(false);
       if (onToggleBlur) onToggleBlur(event);

diff --git a/packages/calendar-utils/src/calendar-header/calendar-header.tsx b/packages/calendar-utils/src/calendar-header/calendar-header.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { MouseEventHandler, useCallback } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useIntl } from 'react-intl';
@@ -34,9 +34,12 @@ const CalendarHeader = (props: TCalendarHeader) => {
 
   // we prevent all our defined onClicks inside of the CalendarHeader
   // from blurring our input.
-  const onMouseDown = useCallback((event) => {
-    event.preventDefault();
-  }, []);
+  const onMouseDown: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      event.preventDefault();
+    },
+    []
+  );
   return (
     <div
       onMouseDown={onMouseDown}

diff --git a/packages/components/avatar/src/avatar.tsx b/packages/components/avatar/src/avatar.tsx
@@ -152,11 +152,18 @@ const Avatar = ({
             width: calc(${avatarSize} - 45%);
           `}
         >
-          {cloneElement(props?.icon, {
-            size: 'scale',
-            color: foregroundColor,
-            backgroundcolor: foregroundColor,
-          })}
+          {cloneElement(
+            props?.icon as ReactElement<{
+              size?: string;
+              color?: string;
+              backgroundcolor?: string;
+            }>,
+            {
+              size: 'scale',
+              color: foregroundColor,
+              backgroundcolor: foregroundColor,
+            }
+          )}
         </div>
       ) : (
         <>

diff --git a/packages/components/buttons/flat-button/src/flat-button.tsx b/packages/components/buttons/flat-button/src/flat-button.tsx
@@ -15,6 +15,14 @@ import { getTextColor } from './flat-button.styles';
 
 const propsToOmit = ['type'];
 
+/**
+ * Props for child icons
+ */
+type TButtonIconProps = {
+  color?: string;
+  size?: string;
+} & Record<string, unknown>;
+
 export type TFlatButtonProps<
   TStringOrComponent extends ElementType = 'button'
 > = {
@@ -46,7 +54,7 @@ export type TFlatButtonProps<
   /**
    * The icon of the button.
    */
-  icon?: ReactElement;
+  icon?: ReactElement<TButtonIconProps>;
   /**
    * The position of the icon.
    */
@@ -64,7 +72,7 @@ export type TFlatButtonProps<
  */ ComponentPropsWithRef<TStringOrComponent>;
 
 const ButtonIcon = <TStringOrComponent extends ElementType = 'button'>(
-  props: TFlatButtonProps<TStringOrComponent>
+  props: Pick<TFlatButtonProps<TStringOrComponent>, 'icon' | 'as'>
 ) => {
   if (!props.icon) return null;
   const Icon = cloneElement(props.icon, {
@@ -177,11 +185,11 @@ const FlatButton = <TStringOrComponent extends ElementType = 'button'>({
       buttonAttributes={buttonAttributes}
     >
       {props.icon && iconPosition === 'left' && (
-        <ButtonIcon<TStringOrComponent> {...buttonIconProps} />
+        <ButtonIcon {...buttonIconProps} />
       )}
       <span>{props.label}</span>
       {props.icon && iconPosition === 'right' && (
-        <ButtonIcon<TStringOrComponent> {...buttonIconProps} />
+        <ButtonIcon {...buttonIconProps} />
       )}
     </AccessibleButton>
   );

diff --git a/packages/components/buttons/link-button/src/link-button.tsx b/packages/components/buttons/link-button/src/link-button.tsx
@@ -12,6 +12,14 @@ import {
 import Inline from '@commercetools-uikit/spacings-inline';
 import Text from '@commercetools-uikit/text';
 
+/**
+ * Props for child icons
+ */
+type TButtonIconProps = {
+  color?: string;
+  size?: string;
+} & Record<string, unknown>;
+
 export type TLinkButtonProps = {
   /**
    * Should describe what the button is for.
@@ -26,7 +34,7 @@ export type TLinkButtonProps = {
   /**
    * The icon of the button.
    */
-  iconLeft?: ReactElement;
+  iconLeft?: ReactElement<TButtonIconProps>;
 
   /**
    * Determines if the button is disabled.

diff --git a/packages/components/buttons/primary-button/src/primary-button.tsx b/packages/components/buttons/primary-button/src/primary-button.tsx
@@ -28,6 +28,13 @@ type TLegacySizes = 'small' | 'medium' | 'big';
  */
 type TSizes = '10' | '20';
 
+/**
+ * Props for child icons
+ */
+type TButtonIconProps = {
+  color?: string;
+} & Record<string, unknown>;
+
 /**
  * Mapping of legacy sizes to new sizes.
  */
@@ -84,11 +91,11 @@ export type TPrimaryButtonProps<
   /**
    * The left icon displayed within the button.
    */
-  iconLeft?: ReactElement;
+  iconLeft?: ReactElement<TButtonIconProps>;
   /**
    * The right icon displayed within the button.
    */
-  iconRight?: ReactElement;
+  iconRight?: ReactElement<TButtonIconProps>;
   /**
    * If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled
    */