Merge pull request #74 from projectstorm/sizing_fixes

dylanvorster · web-flow · commit 6d0a6a10d83e · 2026-02-17T17:34:14.000-07:00
Sizing fixes
diff --git a/.changeset/dark-drinks-lie.md b/.changeset/dark-drinks-lie.md
@@ -0,0 +1,5 @@
+---
+'@projectstorm/react-workspaces-core': patch
+---
+
+Fixed a rendering issue that causes overflow problems in vertical node groups
diff --git a/.changeset/easy-tables-talk.md b/.changeset/easy-tables-talk.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
+---
+
+Bump all dependencies
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v20.16
+v24
diff --git a/demo/package.json b/demo/package.json
@@ -18,23 +18,20 @@
     "@projectstorm/react-workspaces-model-floating-window": "workspace:*",
     "@projectstorm/react-workspaces-model-tabs": "workspace:*",
     "@projectstorm/react-workspaces-model-tray": "workspace:*",
-    "lodash": "^4.17.21",
-    "react": "^19.1.1",
+    "lodash": "^4.17.23",
+    "react": "^19.2.4",
     "typeface-open-sans": "^1.1.13"
   },
   "devDependencies": {
-    "@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",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@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",
+    "@types/lodash": "^4.17.23",
+    "@types/node": "^25.2.3",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react-dom": "19.2.4",
     "source-map-loader": "^5.0.0",
-    "storybook": "^9.1.1",
-    "webpack": "^5.101.0"
+    "storybook": "^10.2.9",
+    "@storybook/react-webpack5": "^10.2.9",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "webpack": "^5.105.2"
   }
 }
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -5,7 +5,8 @@
     "rootDir": ".",
     "outDir": "dist",
     "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
-    "jsx": "react"
+    "jsx": "react",
+    "moduleResolution": "bundler"
   },
   "references": [
     {
diff --git a/example-project-js/package.json b/example-project-js/package.json
@@ -12,19 +12,19 @@
     "@projectstorm/react-workspaces-behavior-resize": "workspace:*",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "html-webpack-plugin": "^5.6.3",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
+    "html-webpack-plugin": "^5.6.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "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",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "webpack": "^5.105.2",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack-dev-server": "^5.2.3"
   }
 }
diff --git a/package.json b/package.json
@@ -32,14 +32,14 @@
   "devDependencies": {
     "babel-loader": "^10.0.0",
     "source-map-loader": "^5.0.0",
-    "@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",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-env": "^7.29.0",
+    "prettier": "^3.8.1",
+    "typescript": "^5.9.3",
+    "terser-webpack-plugin": "^5.3.16",
+    "@changesets/cli": "^2.29.8",
+    "webpack": "^5.105.2",
     "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0"
   }
diff --git a/packages/behavior-divider-dropzone/package.json b/packages/behavior-divider-dropzone/package.json
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "react": "^19.1.1",
+    "react": "^19.2.4",
     "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9"
+    "@types/react": "^19.2.14"
   }
 }
diff --git a/packages/behavior-panel-dropzone/package.json b/packages/behavior-panel-dropzone/package.json
@@ -12,15 +12,15 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "@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",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "react": "^19.2.4",
+    "lodash": "^4.17.23",
     "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.20",
-    "@types/react": "^19.1.9"
+    "@types/lodash": "^4.17.23",
+    "@types/react": "^19.2.14"
   }
 }
diff --git a/packages/behavior-resize/package.json b/packages/behavior-resize/package.json
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "react": "^19.1.1",
+    "react": "^19.2.4",
     "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9"
+    "@types/react": "^19.2.14"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -11,18 +11,18 @@
     "build": "../../node_modules/.bin/webpack"
   },
   "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "@emotion/styled": "^11.14.1",
     "@emotion/react": "^11.14.0",
-    "lodash": "^4.17.21",
-    "color": "^5.0.0",
-    "uuid": "^11.1.0"
+    "lodash": "^4.17.23",
+    "color": "^5.0.3",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "@types/lodash": "^4.17.20",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/lodash": "^4.17.23",
     "@types/uuid": "^10.0.0"
   }
 }
diff --git a/packages/core/src/core-models/WorkspaceCollectionModel.ts b/packages/core/src/core-models/WorkspaceCollectionModel.ts
@@ -15,9 +15,9 @@ export interface WorkspaceCollectionModelListener extends WorkspaceModelListener
 }
 
 export class WorkspaceCollectionModel<
-    S extends SerializedCollectionModel = SerializedCollectionModel,
-    L extends WorkspaceCollectionModelListener = WorkspaceCollectionModelListener
-  >
+  S extends SerializedCollectionModel = SerializedCollectionModel,
+  L extends WorkspaceCollectionModelListener = WorkspaceCollectionModelListener
+>
   extends WorkspaceModel<S, L>
   implements WorkspaceCollectionInterface
 {
diff --git a/packages/core/src/entities/node/WorkspaceNodeWidget.tsx b/packages/core/src/entities/node/WorkspaceNodeWidget.tsx
@@ -87,12 +87,12 @@ export const WorkspaceNodePanelWidget: React.FC<WorkspaceNodePanelWidgetProps> =
   return (
     <S.Container ref={ref}>
       {props.renderer ? (
-        <DraggableWidget model={props.model} engine={props.engine}>
+        <S.Title model={props.model} engine={props.engine}>
           {props.renderer.renderTitleBar({
             engine: props.engine,
             model: props.model
           })}
-        </DraggableWidget>
+        </S.Title>
       ) : null}
       <S.Content>
         {factory.generateContent({
@@ -106,6 +106,8 @@ export const WorkspaceNodePanelWidget: React.FC<WorkspaceNodePanelWidgetProps> =
 namespace S {
   export const DirectionalLayout = styled(DirectionalLayoutWidget)`
     height: 100%;
+    min-height: 0;
+    min-width: 0;
     width: 100%;
   `;
 
@@ -115,14 +117,24 @@ namespace S {
     position: relative;
     max-height: 100%;
     height: 100%;
+    min-height: 0;
+    min-width: 0;
     width: 100%;
     overflow: hidden;
   `;
 
+  export const Title = styled(DraggableWidget)`
+    flex-shrink: 0;
+    min-height: 0;
+    min-width: 0;
+  `;
+
   export const Content = styled.div`
     flex-grow: 1;
     display: flex;
     max-height: 100%;
+    min-height: 0;
+    min-width: 0;
     overflow: hidden;
     flex-direction: column;
   `;
diff --git a/packages/core/src/widgets/layouts/DirectionalChildWidget.tsx b/packages/core/src/widgets/layouts/DirectionalChildWidget.tsx
@@ -10,6 +10,7 @@ namespace S {
     ${(p) => (p.height ? `min-height: ${p.height}px; height: ${p.height}px` : '')};
     flex-shrink: ${(p) => (p.expand ? 1 : 0)};
     flex-grow: ${(p) => (p.expand ? 1 : 0)};
+    ${(p) => (p.expand ? 'min-height: 0; min-width: 0;' : '')};
   `;
 }
 
diff --git a/packages/core/src/widgets/layouts/DirectionalLayoutWidget.tsx b/packages/core/src/widgets/layouts/DirectionalLayoutWidget.tsx
@@ -25,6 +25,8 @@ namespace S {
     display: flex;
     flex-grow: 1;
     flex-direction: ${(p) => (p.vertical ? 'column' : 'row')};
+    min-height: 0;
+    min-width: 0;
     max-height: 100%;
   `;
 }
diff --git a/packages/defaults/package.json b/packages/defaults/package.json
@@ -11,20 +11,20 @@
     "build": "../../node_modules/.bin/webpack"
   },
   "dependencies": {
-    "react": "^19.1.1",
+    "react": "^19.2.4",
     "@emotion/styled": "^11.14.1",
     "@emotion/react": "^11.14.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "@projectstorm/react-workspaces-core": "workspace:*",
     "@projectstorm/react-workspaces-model-tabs": "workspace:*",
     "@projectstorm/react-workspaces-model-tray": "workspace:*",
     "@projectstorm/react-workspaces-model-floating-window": "workspace:*",
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
-    "@fortawesome/react-fontawesome": "^0.2.3",
-    "@fortawesome/fontawesome-svg-core": "^7.0.0"
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9",
-    "@types/lodash": "^4.17.20"
+    "@types/react": "^19.2.14",
+    "@types/lodash": "^4.17.23"
   }
 }
diff --git a/packages/dropzone-plugin-tabs/package.json b/packages/dropzone-plugin-tabs/package.json
@@ -11,14 +11,14 @@
     "build": "../../node_modules/.bin/webpack"
   },
   "dependencies": {
-    "react": "^19.1.1",
+    "react": "^19.2.4",
     "@projectstorm/react-workspaces-core": "workspace:*",
     "@projectstorm/react-workspaces-model-tabs": "workspace:*",
     "@projectstorm/react-workspaces-behavior-panel-dropzone": "workspace:*",
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
-    "@fortawesome/fontawesome-svg-core": "^7.0.0"
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9"
+    "@types/react": "^19.2.14"
   }
 }
diff --git a/packages/dropzone-plugin-tray/package.json b/packages/dropzone-plugin-tray/package.json
@@ -11,14 +11,14 @@
     "build": "../../node_modules/.bin/webpack"
   },
   "dependencies": {
-    "react": "^19.1.1",
+    "react": "^19.2.4",
     "@projectstorm/react-workspaces-core": "workspace:*",
     "@projectstorm/react-workspaces-model-tray": "workspace:*",
     "@projectstorm/react-workspaces-behavior-panel-dropzone": "workspace:*",
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
-    "@fortawesome/fontawesome-svg-core": "^7.0.0"
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9"
+    "@types/react": "^19.2.14"
   }
 }
diff --git a/packages/model-floating-window/package.json b/packages/model-floating-window/package.json
@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "@projectstorm/react-workspaces-core": "workspace:*",
-    "@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",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "react": "^19.2.4",
     "@emotion/styled": "^11.14.1"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9"
+    "@types/react": "^19.2.14"
   }
 }
diff --git a/packages/model-floating-window/src/core/FloatingWindowFactory.tsx b/packages/model-floating-window/src/core/FloatingWindowFactory.tsx
@@ -7,8 +7,9 @@ import {
 } from '@projectstorm/react-workspaces-core';
 import { FloatingWindowModel } from './FloatingWindowModel';
 
-export interface FloatingWindowRendererEvent<T extends FloatingWindowModel = FloatingWindowModel>
-  extends WorkspaceModelFactoryEvent<T> {
+export interface FloatingWindowRendererEvent<
+  T extends FloatingWindowModel = FloatingWindowModel
+> extends WorkspaceModelFactoryEvent<T> {
   titlebar: React.JSX.Element;
   content: React.JSX.Element;
 }
diff --git a/packages/model-tabs/package.json b/packages/model-tabs/package.json
diff --git a/packages/model-tray/package.json b/packages/model-tray/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@projectstorm/react-workspaces-core': patch
 +---
++
 +Fixed a rendering issue that causes overflow problems in vertical node groups
Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,10 @@`
`12`	`12`	`},`
`13`	`13`	`"dependencies": {`
`14`	`14`	`"@projectstorm/react-workspaces-core": "workspace:*",`
`15`		`- "react": "^19.1.1",`
	`15`	`+ "react": "^19.2.4",`
`16`	`16`	`"@emotion/styled": "^11.14.1"`
`17`	`17`	`},`
`18`	`18`	`"devDependencies": {`
`19`		`- "@types/react": "^19.1.9"`
	`19`	`+ "@types/react": "^19.2.14"`
`20`	`20`	`}`
`21`	`21`	`}`