diff --git a/.changeset/green-bikes-doubt.md b/.changeset/green-bikes-doubt.md new file mode 100644 index 00000000..bf147750 --- /dev/null +++ b/.changeset/green-bikes-doubt.md @@ -0,0 +1,7 @@ +--- +'playroom': patch +--- + +Update `re-resizable` dependency. + +Fix issue where resizable handles were stacked below the editor panel and could not be selected. diff --git a/package.json b/package.json index 6507e19c..0a8ba0fa 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "portfinder": "^1.0.32", "prettier": "^2.8.1", "prop-types": "^15.8.1", - "re-resizable": "^6.9.9", + "re-resizable": "^6.10.0", "react-docgen-typescript": "^2.2.2", "react-helmet": "^6.1.0", "react-transition-group": "^4.4.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2d2534e..92f590a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,8 +132,8 @@ dependencies: specifier: ^15.8.1 version: 15.8.1 re-resizable: - specifier: ^6.9.9 - version: 6.9.9(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.10.0 + version: 6.10.0(react-dom@18.2.0)(react@18.2.0) react-docgen-typescript: specifier: ^2.2.2 version: 2.2.2(typescript@5.0.4) @@ -8572,8 +8572,8 @@ packages: strip-json-comments: 2.0.1 dev: true - /re-resizable@6.9.9(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==} + /re-resizable@6.10.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==} peerDependencies: react: ^16.13.1 || ^17.0.0 || ^18.0.0 react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0 diff --git a/src/Playroom/Playroom.tsx b/src/Playroom/Playroom.tsx index 0357fa7d..703a63f6 100644 --- a/src/Playroom/Playroom.tsx +++ b/src/Playroom/Playroom.tsx @@ -163,6 +163,16 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => { updateEditorSize({ isVerticalEditor, offsetWidth, offsetHeight }); }} enable={resizableConfig(editorPosition)} + /* + * Ensures resizable handles are stacked above the `codeEditor` component. + * By default, handles are stacked below the editor as introduced in: + * https://github.com/bokuweb/re-resizable/pull/827 + */ + handleStyles={ + editorPosition === 'bottom' + ? { top: { zIndex: 1 } } + : { left: { zIndex: 1 } } + } > {codeEditor}