chore(types-react): update react types v18

Author: gcornut

packages/lumx-react/package.json

@@ -43,9 +43,9 @@
         "@types/dom-view-transitions": "^1.0.5",
         "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
-        "@types/react": "^17.0.2",
-        "@types/react-dom": "^17.0.2",
-        "@types/react-is": "^17.0.2",
+        "@types/react": "^18.3.16",
+        "@types/react-dom": "^18.3.5",
+        "@types/react-is": "^18.3.1",
         "autoprefixer": "^9.7.4",
         "babel-jest": "29.1.2",
         "babel-loader": "^8.0.6",

packages/lumx-react/src/components/post-block/PostBlock.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
-import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
@@ -98,11 +97,11 @@ export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref)
 
                 {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}
 
-                {isObject(text) && text.__html ? (
+                {typeof text === 'string' ? (
+                    <p className={`${CLASSNAME}__text`}>{text}</p>
+                ) : (
                     // eslint-disable-next-line react/no-danger
                     <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />
-                ) : (
-                    <p className={`${CLASSNAME}__text`}>{text}</p>
                 )}
 
                 {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}

packages/lumx-react/src/components/side-navigation/SideNavigation.stories.tsx

@@ -6,7 +6,7 @@ import { Emphasis, SideNavigation, SideNavigationItem } from '@lumx/react';
 
 export default { title: 'LumX components/side-navigation/Side Navigation' };
 
-const CustomLink: React.FC = ({ children, ...props }) =>
+const CustomLink: React.FC<{ children?: React.ReactNode }> = ({ children, ...props }) =>
     React.createElement('a', { ...props, style: { color: 'red' } }, children);
 
 export const Simple = () => (

packages/lumx-react/src/components/text-field/TextField.tsx

@@ -27,7 +27,7 @@ import { forwardRef } from '@lumx/react/utils/forwardRef';
  */
 export interface TextFieldProps extends GenericProps, HasTheme {
     /** Chip Group to be rendered before the main text input. */
-    chips?: HTMLElement | ReactNode;
+    chips?: ReactNode;
     /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
     clearButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;

packages/lumx-react/src/components/tooltip/context.tsx

@@ -10,7 +10,7 @@ const DEFAULT_VALUE = {};
  */
 const TooltipContext = React.createContext<TooltipContextValue | undefined>(undefined);
 
-export const TooltipContextProvider: React.FC = ({ children }) => (
+export const TooltipContextProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
     <TooltipContext.Provider value={DEFAULT_VALUE}>{children}</TooltipContext.Provider>
 );
 

packages/lumx-react/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -13,6 +13,10 @@ interface ClickAwayProviderProps extends ClickAwayParameters {
      * (Optional) Element that should be considered as part of the parent
      */
     parentRef?: RefObject<HTMLElement>;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
 }
 
 /**

packages/lumx-react/src/utils/skipRender.tsx

@@ -1,13 +1,12 @@
-import { DOCUMENT } from '@lumx/react/constants';
-import { Comp } from '@lumx/react/utils/type';
 import React from 'react';
+import { Comp } from '@lumx/react/utils/type';
 
 /**
  * HOC component wrapping a component to skip render if predicate return falsy
  */
 export const skipRender = <P, T>(predicate: (props: P) => any, Component: Comp<P, T>) => {
-    const Wrapper = React.forwardRef<T, P>((props, ref) => {
-        if (!DOCUMENT) {
+    const Wrapper = React.forwardRef<T, P>((props: any, ref) => {
+        if (!predicate(props)) {
             // Can't render in SSR.
             return null;
         }

packages/lumx-react/src/utils/type.ts

@@ -21,7 +21,7 @@ const NAME_PROPERTIES: string[] = [
 
 /** LumX Component Type. */
 export type Comp<P, T = HTMLElement> = {
-    (props: P & { ref?: Ref<T> }): ReactElement | null;
+    (props: P & { ref?: Ref<T> }): ReactNode | null;
     /** React component type. */
     readonly $$typeof: symbol;
     /** Component default props. */

packages/site-demo/content/product/components/table/react/default.tsx

@@ -83,7 +83,7 @@ export const App = ({ theme = Theme.light }: any) => {
     const [tableHeader, setTableHeader] = useState(initialHeaders);
     const [tableBody, setTableBody] = useState(initialTable);
     const toggleSort = useCallback(
-        (header) => {
+        (header: Partial<TableHeaderProps>) => {
             const sortOrder = header.sortOrder === ThOrder.asc ? ThOrder.desc : ThOrder.asc;
             setTableHeader(
                 tableHeader.map((h) => ({

packages/site-demo/package.json

@@ -55,7 +55,7 @@
     },
     "devDependencies": {
         "@types/reach__router": "^1.3.6",
-        "@types/react-helmet": "^6.1.0",
+        "@types/react-helmet": "^6.1.11",
         "glob": "^7.1.6",
         "htmlparser2": "^3.10.1",
         "tsconfig-paths-webpack-plugin": "^3.3.0",