chore(types-react): update react types v18

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",

packages/site-demo/src/components/content/CodeBlock/CodeBlock.tsx

@@ -15,6 +15,8 @@ interface Props {
     codeString?: string;
     /** Code language (tsx, jsx, etc.) */
     language?: Language | 'tsx';
+    /** Code */
+    children?: React.ReactNode;
 }
 
 /** Display syntax highlighted code */

packages/site-demo/src/components/layout/Layout.tsx

@@ -9,6 +9,7 @@ import './Layout.scss';
 
 interface Props {
     location?: Location;
+    children?: React.ReactNode;
 }
 
 export const Layout: React.FC<Props> = ({ children, location }) => {

packages/site-demo/src/components/layout/MainContent/MainContent.tsx

@@ -3,7 +3,7 @@ import { ErrorBoundary } from '@lumx/demo/components/base/ErrorBoundary';
 
 import './MainContent.scss';
 
-export const MainContent: React.FC = ({ children }) => (
+export const MainContent: React.FC<{ children: React.ReactNode }> = ({ children }) => (
     <div className="main-content">
         <div className="main-content__wrapper">
             <ErrorBoundary>{children}</ErrorBoundary>

yarn.lock

@@ -4003,9 +4003,9 @@ __metadata:
     "@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
@@ -6740,16 +6740,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^17.0.2":
-  version: 17.0.25
-  resolution: "@types/react-dom@npm:17.0.25"
-  dependencies:
-    "@types/react": ^17
-  checksum: d1e582682478e0848c8d54ea3e89d02047bac6d916266b85ce63731b06987575919653ea7159d98fda47ade3362b8c4d5796831549564b83088e7aa9ce8b60ed
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:^18.0.0":
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.3.5":
   version: 18.3.5
   resolution: "@types/react-dom@npm:18.3.5"
   peerDependencies:
@@ -6758,32 +6749,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-helmet@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "@types/react-helmet@npm:6.1.0"
+"@types/react-helmet@npm:^6.1.11":
+  version: 6.1.11
+  resolution: "@types/react-helmet@npm:6.1.11"
   dependencies:
     "@types/react": "*"
-  checksum: 90a24a99e1a5f090575445139dd902b8915d4405f097818fdd31847e986a1e0dc8e0361a08366d285f9bbe9e0c013a4f06fc6b4da2d577a22b76086eefde4087
+  checksum: e329d8ad82c365fec7dd7d91c8b6d167faac30cef0d9f1e27d7e895172a0ebfa65829fb4acabbe79283b01cbbe5840a845caeb50148ceef6f3fad42b3c2c4bdc
   languageName: node
   linkType: hard
 
-"@types/react-is@npm:^17.0.2":
-  version: 17.0.7
-  resolution: "@types/react-is@npm:17.0.7"
+"@types/react-is@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "@types/react-is@npm:18.3.1"
   dependencies:
-    "@types/react": ^17
-  checksum: a8f11067795dbcf54a54d5fdc1977816be155fd04051e850f7c85dbbad83897f846dd3e474d56bd12a7055e0ae1825185f41c6f56342fd5cd31a08df3b3fbfff
+    "@types/react": ^18
+  checksum: ccb79d6e196a5232cde8ccb255ec97e062801a3dafeff3816130fb5ad6b9a87f7c0806ab35bc00890a229773228ef217d0390839b68c705d3add2f798b5fcf82
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^17, @types/react@npm:^17.0.2":
-  version: 17.0.73
-  resolution: "@types/react@npm:17.0.73"
+"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18, @types/react@npm:^18.3.16":
+  version: 18.3.16
+  resolution: "@types/react@npm:18.3.16"
   dependencies:
     "@types/prop-types": "*"
-    "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 08107645acdd734c8ddb4d26f1b43dfa0d75f7a8d268eaacb897337e103eaa620fe8c3c6972dab9860aaa47bbee1da587cf06b11bb4e655588e38485daf48a6c
+  checksum: 467c2a325870580b88b4e3bf439749b51b27cb13f52408653cb8c3e7e1b7eff86ada87e384b1aa4d34aa6027c187ca27df00bea77140fda524d726992f5b93ef
   languageName: node
   linkType: hard
 
@@ -6829,13 +6819,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/scheduler@npm:*":
-  version: 0.16.2
-  resolution: "@types/scheduler@npm:0.16.2"
-  checksum: b6b4dcfeae6deba2e06a70941860fb1435730576d3689225a421280b7742318d1548b3d22c1f66ab68e414f346a9542f29240bc955b6332c5b11e561077583bc
-  languageName: node
-  linkType: hard
-
 "@types/semver@npm:^7.3.4":
   version: 7.5.0
   resolution: "@types/semver@npm:7.5.0"
@@ -23251,7 +23234,7 @@ fsevents@~2.1.2:
     "@mdx-js/react": ^1.6.19
     "@reach/router": ^1.2.1
     "@types/reach__router": ^1.3.6
-    "@types/react-helmet": ^6.1.0
+    "@types/react-helmet": ^6.1.11
     classnames: ^2.3.2
     focus-visible: ^5.2.0
     gatsby: ^2.24.87