Merge branch 'master' into sagivd/list-multiselect

package.json

@@ -19,30 +19,31 @@
     "@playwright/browser-chromium": "^1.49.0",
     "@stylable/cli": "^6.1.1",
     "@stylable/esbuild": "^6.1.1",
+    "@testing-library/react": "^16.1.0",
     "@types/chai": "^4.3.20",
     "@types/mocha": "^10.0.10",
     "@types/node": "20",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@wixc3/board-core": "^4.6.0",
-    "@wixc3/react-board": "^4.6.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@wixc3/board-core": "^4.6.2",
+    "@wixc3/react-board": "^4.6.2",
     "chai": "^4.5.0",
     "esbuild": "^0.24.0",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "glob": "^11.0.0",
     "mocha": "^11.0.1",
     "mocha-web": "^2.0.0",
     "prettier": "^3.4.2",
     "promise-assist": "^2.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
     "typescript": "~5.7.2",
-    "typescript-eslint": "^8.17.0"
+    "typescript-eslint": "^8.18.0"
   },
   "license": "MIT",
   "private": true

packages/components/package.json

@@ -10,7 +10,6 @@
     "react": ">=17"
   },
   "dependencies": {
-    "@zeejs/react": "^0.3.1",
     "scroll-into-view-if-needed": "^3.1.0"
   },
   "files": [

packages/components/src/board-index.ts

@@ -5,7 +5,6 @@
  * do no edit manually
  */
 import area from './area/boards/area.board';
-import auto_complete from './auto-complete/auto-complete.board';
 import button from './button/boards/button.board';
 import button_with_icon from './button/boards/button-with-icon.board';
 import button_with_icons from './button/boards/button-with-icons.board';
@@ -41,7 +40,6 @@ import with_header from './scroll-list/boards/with-header.board';
 
 export default [
     area,
-    auto_complete,
     button,
     button_with_icon,
     button_with_icons,

packages/components/src/board-plugins/index.ts

@@ -1,3 +1,2 @@
 export * from './scenario-plugin/scenario-plugin';
 export * from './project-themes-plugin';
-export * from './zee-root-plugin';

packages/components/src/board-plugins/plugin-controls/plugin-controls.tsx

@@ -18,7 +18,7 @@ export const getPluginControls = () => {
     return existing;
 };
 
-export const renderInPluginControls = (board: JSX.Element, pluginControls: JSX.Element, key: string) => {
+export const renderInPluginControls = (board: React.ReactElement, pluginControls: React.ReactElement, key: string) => {
     const el = getPluginControls();
 
     return (

packages/components/src/board-plugins/scenario-plugin/actions/select-item-by-index.ts

@@ -1,4 +1,4 @@
-import ReactTestUtils from 'react-dom/test-utils';
+import { fireEvent } from '@testing-library/react';
 import { Action, waitForElement } from '../scenario-plugin';
 
 export const selectItemInput = 'input';
@@ -12,10 +12,7 @@ export const selectItemByIndex = (index: string): Action => {
         execute: async () => {
             const input = await waitForElement(`#${selectItemInput}`, title);
             if (input && input instanceof HTMLInputElement) {
-                input.value = index;
-                ReactTestUtils.Simulate.change(input, {
-                    target: input,
-                });
+                fireEvent.change(input, { target: { value: index } });
             }
             const button = await waitForElement(`#${selectItemButton}`, title);
 

packages/components/src/board-plugins/scenario-plugin/scenario-plugin.tsx

@@ -1,9 +1,9 @@
 import { createPlugin } from '@wixc3/board-core';
 import type { IReactBoard } from '@wixc3/react-board';
+import { fireEvent } from '@testing-library/react';
 import { expect } from 'chai';
 import { sleep, waitFor } from 'promise-assist';
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
-import ReactTestUtils from 'react-dom/test-utils';
 import { renderInPluginControls } from '../plugin-controls/plugin-controls';
 import { classes, st } from './scenario-plugin.st.css';
 
@@ -161,7 +161,7 @@ export const ScenarioRenderer = (props: ScenarioProps) => {
     );
 };
 
-export const RenderWrapper = (props: ScenarioParams & { board: JSX.Element }) => {
+export const RenderWrapper = (props: ScenarioParams & { board: React.ReactElement }) => {
     const [boardKey, rerenderBoard] = useReducer((n: number) => n + 1, 0);
 
     const resetBoard = () => {
@@ -338,10 +338,7 @@ export const writeAction = (selector: string, text: string, timeout = 2_000): Ac
         execute: async () => {
             const el = await waitForElement(selector, title, timeout);
             if (el && el instanceof HTMLInputElement) {
-                el.value = text;
-                ReactTestUtils.Simulate.change(el, {
-                    target: el,
-                });
+                fireEvent.change(el, { target: { value: text } });
             }
         },
         highlightSelector: selector,

packages/components/src/common/slot.ts

@@ -6,8 +6,10 @@ import type { OptionalFields } from './types';
  */
 export interface ElementSlot<
     MinimalProps,
-    El extends React.ComponentType<Props> | keyof React.ReactHTML = React.ComponentType<any> | keyof React.ReactHTML,
-    Props extends MinimalProps = any
+    El extends React.ComponentType<Props> | keyof React.JSX.IntrinsicElements =
+        | React.ComponentType<any>
+        | keyof React.JSX.IntrinsicElements,
+    Props extends MinimalProps = any,
 > {
     el: El;
     props: OptionalFields<Props, keyof MinimalProps>;

packages/components/src/data-grid/data-grid.tsx

@@ -7,7 +7,7 @@ import { ScrollList, ScrollListProps, forwardScrollListRoot } from '../scroll-li
 import { classes, vars } from './data-grid.st.css';
 export interface Column<T> {
     id: string;
-    header: JSX.Element;
+    header: React.ReactElement;
     cellRenderer: React.ComponentType<ListItemProps<T>>;
 }
 
@@ -54,7 +54,7 @@ export function DataGrid<T, EL extends HTMLElement>({
             columns,
             sizes: columnSizes,
         }),
-        [columnSizes, columns]
+        [columnSizes, columns],
     );
 
     const resizers = useMemo(
@@ -76,7 +76,7 @@ export function DataGrid<T, EL extends HTMLElement>({
                 window.addEventListener('mousemove', listener);
                 window.addEventListener('mouseup', endListener);
             }),
-        [columns, columnSizes, updateColumnSizes]
+        [columns, columnSizes, updateColumnSizes],
     );
     useEffect(() => {
         return () => {