Deps upgrade

.changeset/weak-beds-refuse.md

@@ -0,0 +1,15 @@
+---
+'@projectstorm/react-workspaces-behavior-divider-dropzone': patch
+'@projectstorm/react-workspaces-behavior-panel-dropzone': patch
+'@projectstorm/react-workspaces-model-floating-window': patch
+'@projectstorm/react-workspaces-dropzone-plugin-tabs': patch
+'@projectstorm/react-workspaces-dropzone-plugin-tray': patch
+'@projectstorm/react-workspaces-behavior-resize': patch
+'@projectstorm/react-workspaces-model-tabs': patch
+'@projectstorm/react-workspaces-model-tray': patch
+'@projectstorm/react-workspaces-demo': patch
+'@projectstorm/react-workspaces-defaults': patch
+'@projectstorm/react-workspaces-core': patch
+---
+
+Bumped all dependencies

demo/.storybook/main.ts

@@ -1,45 +1,31 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  addons: [
-    {
-      name: '@storybook/addon-essentials'
-    },
-    {
-      name: '@storybook/addon-webpack5-compiler-babel'
-    }
-  ],
-  docs: {
-    autodocs: false
+  stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-webpack5-compiler-swc'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
-  stories: ['../dist/stories/*.stories.js'],
   webpackFinal: async (config, { configType }) => {
     return {
       ...config,
       devtool: 'inline-source-map',
-      resolve: {
-        ...config.resolve,
-        alias: {
-          '@emotion/react': require.resolve('@emotion/react')
-        }
-      },
       module: {
         ...config.module,
         rules: [
+          ...config.module.rules,
           {
-            enforce: 'pre',
-            test: /\.js$/,
-            loader: 'source-map-loader'
+            test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif|ico)$/,
+            type: 'asset/resource'
           },
-          ...config.module.rules
+          {
+            test: /\.xml$/,
+            type: 'asset/source'
+          }
         ]
       }
     };
-  },
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {}
   }
 };
-
 export default config;

demo/.storybook/preview.ts

@@ -0,0 +1,21 @@
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { Preview } from '@storybook/react-webpack5';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      options: {
+        // 👇 Default options
+        dark: { name: 'Dark', value: '#333' },
+        light: { name: 'Light', value: '#F7F9F2' }
+      }
+    }
+  },
+  initialGlobals: {
+    // 👇 Set the initial background color
+    backgrounds: { value: 'dark' }
+  }
+};
+
+export default preview;

demo/package.json

@@ -7,7 +7,7 @@
     "storybook:build": "storybook build -o .out"
   },
   "dependencies": {
-    "@emotion/styled": "^11.13.5",
+    "@emotion/styled": "^11.14.1",
     "@projectstorm/react-workspaces-behavior-divider-dropzone": "workspace:*",
     "@projectstorm/react-workspaces-behavior-panel-dropzone": "workspace:*",
     "@projectstorm/react-workspaces-behavior-resize": "workspace:*",
@@ -19,26 +19,21 @@
     "@projectstorm/react-workspaces-model-tabs": "workspace:*",
     "@projectstorm/react-workspaces-model-tray": "workspace:*",
     "lodash": "^4.17.21",
-    "react": "^18.3.1",
+    "react": "^19.1.1",
     "typeface-open-sans": "^1.1.13"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-webpack5": "^8.4.5",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^8.4.5",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^22.10.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "react-dom": "18.3.1",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/builder-webpack5": "^9.1.0",
+    "@storybook/react": "^9.1.0",
+    "@storybook/react-webpack5": "^9.1.0",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.2.0",
+    "@types/react": "19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "react-dom": "19.1.1",
     "source-map-loader": "^5.0.0",
-    "storybook": "^8.4.5",
-    "webpack": "^5.96.1"
+    "storybook": "^9.1.1",
+    "webpack": "^5.101.0"
   }
 }

demo/stories/helpers/tools.tsx

@@ -29,7 +29,7 @@ import { resizingBehavior } from '@projectstorm/react-workspaces-behavior-resize
 import { RootWorkspaceModel } from '@projectstorm/react-workspaces-model-floating-window';
 import { ConvertToTabZone, getDirectiveForTabModel } from '@projectstorm/react-workspaces-dropzone-plugin-tabs';
 import { ConvertToTrayZone, getDirectiveForTrayModel } from '@projectstorm/react-workspaces-dropzone-plugin-tray';
-import { css, Global } from '@storybook/theming';
+import { css, Global } from 'storybook/theming';
 
 export const genVerticalNode = () => {
   const m1 = new DefaultWorkspacePanelModel('Panel 1');

example-project-js/package.json

@@ -10,21 +10,21 @@
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
     "@projectstorm/react-workspaces-behavior-resize": "workspace:*",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "html-webpack-plugin": "^5.6.3",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "babel-loader": "^9.2.1",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "babel-loader": "^10.0.0",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "webpack": "^5.101.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   }
 }

package.json

@@ -30,17 +30,17 @@
     "release:storybook": "tsc --build && cd demo && pnpm storybook:build && ./node_modules/.bin/storybook-to-ghpages --existing-output-dir .out"
   },
   "devDependencies": {
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "source-map-loader": "^5.0.0",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
-    "prettier": "^3.4.1",
-    "typescript": "^5.7.2",
-    "terser-webpack-plugin": "^5.3.10",
-    "@changesets/cli": "^2.27.10",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-env": "^7.28.0",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
+    "terser-webpack-plugin": "^5.3.14",
+    "@changesets/cli": "^2.29.5",
+    "webpack": "^5.101.0",
+    "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0"
   }
 }

packages/behavior-divider-dropzone/package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "react": "^18.3.1",
-    "@emotion/styled": "^11.13.5"
+    "react": "^19.1.1",
+    "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12"
+    "@types/react": "^19.1.9"
   }
 }

packages/behavior-divider-dropzone/src/DropzoneDividerWidget.tsx

@@ -26,7 +26,7 @@ export interface DropzoneDividerWidgetProps {
 
 export const DropzoneDividerWidget: React.FC<DropzoneDividerWidgetProps> = (props) => {
   const [entered, setEntered] = useState(false);
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
   useMouseDragEvents({
     forwardRef: ref,
     mouseEnter: () => {

packages/behavior-divider-dropzone/src/DropzoneDividersLayer.tsx

@@ -14,7 +14,7 @@ export class DropzoneDividersLayer extends Layer {
     });
   }
 
-  renderLayer(event): JSX.Element {
+  renderLayer(event): React.JSX.Element {
     return <DropzoneDividersLayerWidget engine={event.engine} theme={this.options2.theme} />;
   }
 }

packages/behavior-panel-dropzone/package.json

@@ -12,15 +12,15 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "react": "^18.3.1",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^0.2.3",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "react": "^19.1.1",
     "lodash": "^4.17.21",
-    "@emotion/styled": "^11.13.5"
+    "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.13",
-    "@types/react": "^18.3.12"
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^19.1.9"
   }
 }

packages/behavior-panel-dropzone/src/DropZoneAlignmentButtonWidget.tsx

@@ -36,7 +36,7 @@ export interface DropZoneAlignmentButtonWidgetProps {
 
 export const DropZoneAlignmentButtonWidget: React.FC<DropZoneAlignmentButtonWidgetProps> = (props) => {
   const [entered, setEntered] = useState(false);
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
   const theme = _.merge({}, DefaultDropZoneAlignmentTheme, props.theme || {});
   useMouseDragEvents({
     forwardRef: ref,

packages/behavior-panel-dropzone/src/DropZoneLayer.tsx

@@ -16,7 +16,7 @@ export class DropZoneLayer extends Layer {
     });
   }
 
-  renderLayer(event): JSX.Element {
+  renderLayer(event): React.JSX.Element {
     return (
       <DropZoneLayerWidget
         debugModels={this.options2.debugModels}

packages/behavior-panel-dropzone/src/DropZoneLayerPanelWidget.tsx

@@ -68,7 +68,7 @@ export interface DropZoneLayerPanelWidgetProps {
 }
 
 export const DropZoneLayerPanelWidget: React.FC<DropZoneLayerPanelWidgetProps> = (props) => {
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
   const [show, setShow] = useState(false);
   const theme = _.merge({}, DefaultDropZoneLayerPanelTheme, props.theme || {});
 

packages/behavior-panel-dropzone/src/DropZoneTransformWidget.tsx

@@ -15,7 +15,7 @@ export interface DropZoneTransformWidgetProps {
 
 export const DropZoneTransformWidget: React.FC<DropZoneTransformWidgetProps> = (props) => {
   const [entered, setEntered] = useState(false);
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
   useMouseDragEvents({
     forwardRef: ref,
     mouseEnter: () => {

packages/behavior-resize/package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "react": "^18.3.1",
-    "@emotion/styled": "^11.13.5"
+    "react": "^19.1.1",
+    "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12"
+    "@types/react": "^19.1.9"
   }
 }

packages/behavior-resize/src/ResizeDividerWidget.tsx

@@ -118,7 +118,7 @@ const getResizeStrategy = (
 export const ResizeDividerWidget: React.FC<ResizeDividerWidgetProps> = (props) => {
   const container = props.dividerContainer.dimensions;
   const vertical = props.dividerContainer.vertical;
-  const ref = useRef<HTMLDivElement>();
+  const ref = useRef<HTMLDivElement>(null);
   const [strategy] = useState(() => {
     return getResizeStrategy(props.dividerContainer, props.parent);
   });

packages/behavior-resize/src/ResizeDividersLayer.tsx

@@ -10,7 +10,7 @@ export class ResizeDividersLayer extends Layer {
     });
   }
 
-  renderLayer(event): JSX.Element {
+  renderLayer(event): React.JSX.Element {
     return <ResizeDividersLayerWidget engine={event.engine} />;
   }
 }

packages/core/package.json

@@ -11,18 +11,18 @@
     "build": "../../node_modules/.bin/webpack"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@emotion/styled": "^11.13.5",
-    "@emotion/react": "^11.13.5",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "@emotion/styled": "^11.14.1",
+    "@emotion/react": "^11.14.0",
     "lodash": "^4.17.21",
-    "color": "^4.2.3",
-    "uuid": "^11.0.3"
+    "color": "^5.0.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/lodash": "^4.17.13",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@types/lodash": "^4.17.20",
     "@types/uuid": "^10.0.0"
   }
 }

packages/core/src/core/WorkspaceModelFactory.ts

@@ -35,5 +35,5 @@ export abstract class WorkspaceModelFactory<
 
   protected abstract _generateModel(): T;
 
-  abstract generateContent(event: E): JSX.Element;
+  abstract generateContent(event: E): React.JSX.Element;
 }