Codemods

apps/react-workshop/src/Table.stories.tsx

@@ -1065,7 +1065,7 @@ export const ControlledState = () => {
     subRows: DemoData[];
   };
 
-  const tableInstance = React.useRef<TableInstance<DemoData>>();
+  const tableInstance = React.useRef<TableInstance<DemoData>>(undefined);
   const [selectedRows, setSelectedRows] = React.useState<DemoData[]>([]);
   const [expandedRows, setExpandedRows] = React.useState<DemoData[]>([]);
 

examples/index.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { ThemeProvider } from '@itwin/itwinui-react';
 
-const withThemeProvider = (Component: () => React.ReactElement) => () => {
+const withThemeProvider = (Component: () => React.ReactElement<any>) => () => {
   const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();
   React.useEffect(() => void setPortalContainer(document.body), []);
 

packages/itwinui-react/src/core/ComboBox/helpers.ts

@@ -9,8 +9,8 @@ import type { usePopover } from '../Popover/Popover.js';
 
 export const ComboBoxRefsContext = React.createContext<
   | {
-      inputRef: React.RefObject<HTMLInputElement>;
-      menuRef: React.RefObject<HTMLElement>;
+      inputRef: React.RefObject<HTMLInputElement | null>;
+      menuRef: React.RefObject<HTMLElement | null>;
       optionsExtraInfo: Record<string, { __originalIndex: number }>;
     }
   | undefined

packages/itwinui-react/src/core/Dialog/DialogContext.tsx

@@ -88,7 +88,7 @@ export type DialogContextProps = {
   /**
    * Dialog root ref. For internal use.
    */
-  dialogRootRef?: React.RefObject<HTMLDivElement>;
+  dialogRootRef?: React.RefObject<HTMLDivElement | null>;
   /**
    * Determines the positioning of Dialog on page.
    */

packages/itwinui-react/src/core/InputGrid/InputGrid.tsx

@@ -201,7 +201,7 @@ const useSetup = (children: React.ReactNode) => {
  * Handles regular inputs, plus `InputWithDecorations`, `InputWithIcon`, `ComboBox` and `Select`.
  */
 const handleCloningInputs = (
-  child: React.ReactElement,
+  child: React.ReactElement<any>,
   {
     labelId,
     inputId,
@@ -225,7 +225,7 @@ const handleCloningInputs = (
     };
   };
 
-  const cloneInput = (child: React.ReactElement) => {
+  const cloneInput = (child: React.ReactElement<any>) => {
     if (child.type === ComboBox) {
       return cloneElementWithRef(child, (child) => ({
         inputProps: inputProps(child.props.inputProps),
@@ -266,15 +266,16 @@ const handleCloningInputs = (
 /** @returns true if `child` is a form element that can be associated with a label using id  */
 const isInput = (child: React.ReactNode): boolean => {
   return (
-    React.isValidElement(child) &&
+    // contains ComboBox.inputProps
+    React.isValidElement(child) && // contains Select.triggerProps
     (child.type === 'input' ||
       child.type === 'textarea' ||
       child.type === 'select' ||
       child.type === Input ||
       child.type === Textarea ||
       child.type === InputWithDecorations.Input ||
-      child.type === Select || // contains Select.triggerProps
-      child.type === ComboBox) // contains ComboBox.inputProps
+      child.type === Select ||
+      child.type === ComboBox)
   );
 };
 

packages/itwinui-react/src/core/Panels/Panels.tsx

@@ -253,7 +253,7 @@ if (process.env.NODE_ENV === 'development') {
 
 type PanelTriggerProps = {
   for: string;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 };
 
 const PanelTrigger = (props: PanelTriggerProps) => {

packages/itwinui-react/src/core/SearchBox/SearchBox.tsx

@@ -70,11 +70,11 @@ const SearchBoxContext = React.createContext<
       /**
        * Ref for input subcomponent
        */
-      inputRef: React.RefObject<HTMLInputElement>;
+      inputRef: React.RefObject<HTMLInputElement | null>;
       /**
        * Ref for open button subcomponent
        */
-      openButtonRef: React.RefObject<HTMLButtonElement>;
+      openButtonRef: React.RefObject<HTMLButtonElement | null>;
     } & Pick<
       SearchBoxOwnProps,
       'size' | 'onCollapse' | 'expandable' | 'isExpanded' | 'onExpand'

packages/itwinui-react/src/core/Table/hooks/useResizeColumns.tsx

@@ -47,7 +47,7 @@ import type {
 
 export const useResizeColumns =
   <T extends Record<string, unknown>>(
-    ownerDocument: React.RefObject<Document | undefined>,
+    ownerDocument: React.RefObject<Document | undefined | null>,
   ) =>
   (hooks: Hooks<T>) => {
     hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
@@ -62,7 +62,7 @@ const isTouchEvent = (
 };
 
 const defaultGetResizerProps =
-  (ownerDocument: React.RefObject<Document | undefined>) =>
+  (ownerDocument: React.RefObject<Document | undefined | null>) =>
   (
     props: TableKeyedProps,
     {

packages/itwinui-react/src/core/Tile/Tile.tsx

@@ -398,7 +398,7 @@ const TileMoreOptions = React.forwardRef((props, forwardedRef) => {
       <DropdownMenu
         onVisibleChange={setIsMenuVisible}
         menuItems={(close) =>
-          children?.map((option: React.ReactElement) =>
+          children?.map((option: React.ReactElement<any>) =>
             React.cloneElement(option, {
               onClick: (value: unknown) => {
                 close();

packages/itwinui-react/src/react-table/react-table.ts

@@ -14,7 +14,6 @@ import type {
   EffectCallback,
   MouseEvent,
   ReactElement,
-  ReactFragment,
   ReactNode,
 } from 'react';
 
@@ -1257,10 +1256,10 @@ export type CellValue<V = any> = V;
 
 export type Renderer<Props> =
   | ComponentType<Props>
-  | ReactElement
+  | ReactElement<any>
   | string
   | number
-  | ReactFragment;
+  | Iterable<ReactNode>;
 
 export interface PluginHook<D extends Record<string, unknown>> {
   (hooks: Hooks<D>): void;
@@ -1321,4 +1320,4 @@ export declare function makeRenderer(
   instance: TableInstance,
   column: ColumnInstance,
   meta?: any,
-): ReactElement;
+): ReactElement<any>;

packages/itwinui-react/src/utils/components/Portal.test.tsx

@@ -98,7 +98,11 @@ it('should respect ThemeProvider.portalContainer', () => {
         <main>
           <Portal>my foot</Portal>
         </main>
-        <footer ref={(node) => node && setFooter(node)} />
+        <footer
+          ref={(node) => {
+            node && setFooter(node);
+          }}
+        />
       </ThemeProvider>
     );
   };

packages/itwinui-react/src/utils/components/Resizer.tsx

@@ -17,7 +17,7 @@ export type ResizerProps = {
    * Ref of the container element in order to avoid resizing past container boundaries.
    * If not passed, viewport will be used.
    */
-  containerRef?: React.RefObject<HTMLElement>;
+  containerRef?: React.RefObject<HTMLElement | null>;
   /**
    * Callback that is being called on resize start.
    * Useful to set state, style, or other properties when resizing is started.

packages/itwinui-react/src/utils/hooks/useDragAndDrop.test.tsx

@@ -23,7 +23,7 @@ vi.spyOn(DomFunctions, 'getWindow').mockReturnValue({
 
 const TestComponent = (props: {
   isVisible?: boolean;
-  containerRef?: React.RefObject<HTMLElement>;
+  containerRef?: React.RefObject<HTMLElement | null>;
 }) => {
   const { isVisible = true, containerRef } = props;
   const ref = React.useRef<HTMLDivElement>(null);
@@ -84,7 +84,12 @@ it('should prevent from dragging outside container', () => {
       containerRef={{
         current: {
           getBoundingClientRect: () =>
-            ({ top: 50, right: 250, bottom: 250, left: 50 }) as DOMRect,
+            ({
+              top: 50,
+              right: 250,
+              bottom: 250,
+              left: 50,
+            }) as DOMRect,
         } as HTMLElement,
       }}
     />,

packages/itwinui-react/src/utils/hooks/useDragAndDrop.tsx

@@ -11,7 +11,7 @@ import { useEventListener } from './useEventListener.js';
 import { useResizeObserver } from './useResizeObserver.js';
 
 const getContainerRect = (
-  containerRef: React.RefObject<HTMLElement> | undefined,
+  containerRef: React.RefObject<HTMLElement | null> | undefined,
 ) => {
   const containerRect = containerRef?.current?.getBoundingClientRect();
   return {
@@ -32,7 +32,7 @@ const getContainerRect = (
  */
 export const useDragAndDrop = (
   elementRef: React.RefObject<HTMLElement | null>,
-  containerRef?: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement | null>,
   enabled = true,
 ) => {
   const grabOffsetX = React.useRef(0);

packages/itwinui-react/src/utils/hooks/useMergedRefs.ts

@@ -8,7 +8,7 @@ import * as React from 'react';
  * Function that merges the provided refs into one.
  */
 export const mergeRefs = <T>(
-  ...refs: Array<React.Ref<T> | React.LegacyRef<T> | undefined | null>
+  ...refs: Array<React.Ref<T> | React.Ref<T> | undefined | null>
 ) => {
   return (instance: T | null) => {
     refs.forEach((ref) => {
@@ -25,7 +25,7 @@ export const mergeRefs = <T>(
  * Returns a ref callback that merges the provided refs using `mergeRefs`.
  */
 export const useMergedRefs = <T>(
-  ...refs: ReadonlyArray<React.Ref<T> | React.LegacyRef<T> | undefined | null>
+  ...refs: ReadonlyArray<React.Ref<T> | React.Ref<T> | undefined | null>
 ) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return React.useCallback(mergeRefs(...refs), [...refs]);

packages/itwinui-react/src/utils/props.ts

@@ -40,7 +40,7 @@ export interface PolymorphicForwardRefComponent<
       : As extends React.ComponentType<infer P>
         ? Merge<P, OwnProps & { as: As }>
         : never,
-  ): React.ReactElement | null;
+  ): React.ReactElement<any> | null;
 }
 
 type Merge<P1, P2> = Omit<P1, keyof P2> & P2;

testing/e2e/app/routes/ThemeProvider/route.tsx

@@ -55,28 +55,26 @@ const ThemeProviderTests = () => {
       portalContainer={portalContainer}
     >
       {popout && <button onClick={showPopOutWindow}>Pop out</button>}
-
       {!portaled && (
         <Tooltip content='main tooltip' visible>
           <button>hello</button>
         </Tooltip>
       )}
-
       {nested && (
         <ThemeProvider data-container='nested'>
           <Tooltip content='nested tooltip' visible>
             <button>hello</button>
           </Tooltip>
         </ThemeProvider>
       )}
-
       {withPortalContainer && (
         <div
           data-container='custom'
-          ref={(element) => setPortalContainer(element || undefined)}
+          ref={(element) => {
+            setPortalContainer(element || undefined);
+          }}
         />
       )}
-
       {popoutDocumentBody &&
         ReactDOM.createPortal(
           <ThemeProvider data-container='popout'>
@@ -86,7 +84,6 @@ const ThemeProviderTests = () => {
           </ThemeProvider>,
           popoutDocumentBody,
         )}
-
       {portaled && <PortaledTest />}
     </ThemeProvider>
   );