Release 4.11.0

Author: bvaughn

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.11.0
+
+- [712](https://github.com/bvaughn/react-resizable-panels/issues/712): `Separator` supports `:focus-visible` pseudo-class
+- [711](https://github.com/bvaughn/react-resizable-panels/issues/711): Improve legacy browser support wrt global stylesheets
+
 ## 4.10.0
 
 - [705](https://github.com/bvaughn/react-resizable-panels/pull/705): Add `data-separator="focus"` state for `Separator` elements for more consistent custom CSS styles.

lib/global/cursor/updateCursorStyle.ts

@@ -26,7 +26,14 @@ export function updateCursorStyle(ownerDocument: Document) {
 
     // adoptedStyleSheets is undefined in jsdom
     if (ownerDocument.adoptedStyleSheets) {
-      ownerDocument.adoptedStyleSheets.push(styleSheet);
+      if (Object.isExtensible(ownerDocument.adoptedStyleSheets)) {
+        ownerDocument.adoptedStyleSheets.push(styleSheet);
+      } else {
+        ownerDocument.adoptedStyleSheets = [
+          ...ownerDocument.adoptedStyleSheets,
+          styleSheet
+        ];
+      }
     }
   }
 

lib/global/event-handlers/onDocumentPointerDown.ts

@@ -24,6 +24,8 @@ export function onDocumentPointerDown(event: PointerEvent) {
         didChangeFocus = true;
 
         current.separator.element.focus({
+          // @ts-expect-error https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#browser_compatibility
+          focusVisible: false,
           preventScroll: true
         });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
@@ -97,7 +97,7 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
-    "react-lib-tools": "0.0.52",
+    "react-lib-tools": "0.0.53",
     "react-router-dom": "^7.6.3",
     "rimraf": "^6.1.2",
     "rollup-plugin-terser": "^7.0.2",

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Separator</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span></div>\n<div><span class=\"tok-string\">    bg-slate-600</span></div>\n<div><span class=\"tok-string\">    [&#38;[data-separator='hover']]:bg-slate-500</span></div>\n<div><span class=\"tok-string\">    [&#38;[data-separator='active']]:bg-slate-400</span></div>\n<div><span class=\"tok-string\">    focus-visible:bg-sky-400!</span></div>\n<div><span class=\"tok-string\">  \"</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">/&#62;</span></div>"
+}

public/generated/examples/SeparatorCustomStylesFocusVisible.json

@@ -18,7 +18,7 @@
   {
     "path": "/examples/min-max-sizes",
     "section": "Examples",
-    "text": " Panels can be configured with minimum/maximum allowed sizes. Size can be specified using the following CSS units: Pixels Percentages Font sizes (em, rem) Viewport sizes (vh, vw) For example, the left panel below only allows itself to be resized between 10v0-200 pixels. <Group>\n <Panel minSize={100} maxSize={200}>left</Panel>\n <Separator />\n <Panel>right</Panel>\n</Group> As another example, this panel group will not allow any individual panel to be smaller than 10% of the group's width. <Group>\n <Panel minSize=\"10%\">left</Panel>\n <Separator />\n <Panel minSize=\"10%\">middle</Panel>\n <Separator />\n <Panel minSize=\"10%\">right</Panel>\n</Group> When specifying sizes, remember: Numbers are evaluated as pixels. Strings are evaluated as percentages (0..100%) unless otherwise specified. You can always include the unit, even for pixels (e.g. minSize=\"100px\") or percentages (e.g. minSize=\"10%\") ",
+    "text": " Panels can be configured with minimum/maximum allowed sizes. Size can be specified using the following CSS units: Pixels Percentages Font sizes (em, rem) Viewport sizes (vh, vw) For example, the left panel below only allows itself to be resized between 100-200 pixels. <Group>\n <Panel minSize={100} maxSize={200}>left</Panel>\n <Separator />\n <Panel>right</Panel>\n</Group> As another example, this panel group will not allow any individual panel to be smaller than 10% of the group's width. <Group>\n <Panel minSize=\"10%\">left</Panel>\n <Separator />\n <Panel minSize=\"10%\">middle</Panel>\n <Separator />\n <Panel minSize=\"10%\">right</Panel>\n</Group> When specifying sizes, remember: Numbers are evaluated as pixels. Strings are evaluated as percentages (0..100%) unless otherwise specified. You can always include the unit, even for pixels (e.g. minSize=\"100px\") or percentages (e.g. minSize=\"10%\") ",
     "title": "Min/max sizes"
   },
   {
@@ -90,7 +90,7 @@
   {
     "path": "/examples/custom-css-styles",
     "section": "Examples",
-    "text": " className and style props can be used to customize styles, but there are a few limitations to remember: Certain style properties cannot be overridden; (refer to component documentation for a list of specific styles) Panel styles are applied to a nested HTMLDivElement to prevent interfering with the Flex layout When styling a Separator, use the data-separator attribute rather than :hover or :active pseudo-classes. This attribute is updated when the pointer is near enough to a separator element to be interactive, even if it is not directly on top of the element. <div data-separator=\"disabled\" />\n<div data-separator=\"inactive\" />\n<div data-separator=\"hover\" />\n<div data-separator=\"active\" />\n<div data-separator=\"focus\" /> An example using Tailwind CSS might look something like this. <Separator\n className=\"\n bg-slate-600\n [&[data-separator='hover']]:bg-slate-500\n [&[data-separator='active']]:bg-slate-400\n [&[data-separator='focus']]:bg-sky-400\n \"\n/> ",
+    "text": " className and style props can be used to customize styles, but there are a few limitations to remember: Certain style properties cannot be overridden; (refer to component documentation for a list of specific styles) Panel styles are applied to a nested HTMLDivElement to prevent interfering with the Flex layout When styling a Separator, use the data-separator attribute rather than :hover or :active pseudo-classes. This attribute is updated when the pointer is near enough to a separator element to be interactive, even if it is not directly on top of the element. <div data-separator=\"disabled\" />\n<div data-separator=\"inactive\" />\n<div data-separator=\"hover\" />\n<div data-separator=\"active\" />\n<div data-separator=\"focus\" /> An example using Tailwind CSS might look something like this. <Separator\n className=\"\n bg-slate-600\n [&[data-separator='hover']]:bg-slate-500\n [&[data-separator='active']]:bg-slate-400\n [&[data-separator='focus']]:bg-sky-400\n \"\n/> If you want to differentiate between keyboard-initiated focus and pointer-initiated focus, you can use the :focus and :focus-visible CSS pseudo-class instead. <Separator\n className=\"\n bg-slate-600\n [&[data-separator='hover']]:bg-slate-500\n [&[data-separator='active']]:bg-slate-400\n focus-visible:bg-sky-400!\n \"\n/> ",
     "title": "Custom CSS styles"
   },
   {

public/generated/site-map.json

@@ -1,4 +1,4 @@
-import { compileSearchIndex } from "../../react-lib-tools/scripts/compile-search-index.ts";
+import { compileSearchIndex } from "react-lib-tools/scripts/compile-search-index.ts";
 
 await compileSearchIndex({
   chromeExecutablePath: process.env.CHROME_PATH,

scripts/compile-search-index.ts

@@ -10,10 +10,12 @@ import GrabDotsIcon from "../../../public/svgs/grab-dots.svg?react";
 export function Separator({
   className = "",
   orientation = "horizontal",
+  useFocusPseudoClasses,
   ...rest
 }: PropsWithChildren<
   SeparatorProps & {
     orientation?: Orientation;
+    useFocusPseudoClasses?: boolean;
   }
 >) {
   return (
@@ -22,7 +24,9 @@ export function Separator({
         "rounded rounded-xs flex items-center justify-center",
         "bg-slate-600 [&[data-separator='disabled']]:opacity-50 [&[data-separator='hover']]:bg-slate-500 [&[data-separator='active']]:bg-slate-400",
         "text-slate-900 [&[data-separator='hover']]:text-slate-950 [&[data-separator='active']]:text-slate-950",
-        "[&[data-separator='focus']]:bg-sky-400",
+        useFocusPseudoClasses
+          ? "focus-visible:bg-sky-400!"
+          : "[&[data-separator='focus']]:bg-sky-400",
         orientation === "horizontal" ? "w-4 sm:w-2" : "h-4 sm:h-2",
         className
       )}

src/components/styled-panels/Separator.tsx

@@ -1,5 +1,6 @@
 import { Box, Callout, Code, Header } from "react-lib-tools";
 import { html as CustomStylesExampleHTML } from "../../public/generated/examples/SeparatorCustomStyles.json";
+import { html as SeparatorCustomStylesFocusVisibleHTML } from "../../public/generated/examples/SeparatorCustomStylesFocusVisible.json";
 import { html as DataAttributesExampleHTML } from "../../public/generated/examples/SeparatorDataAttributes.json";
 import { Group } from "../components/styled-panels/Group";
 import { Panel } from "../components/styled-panels/Panel";
@@ -38,6 +39,17 @@ export default function CustomStylesRoute() {
         <Separator />
         <Panel defaultSize="50%">right</Panel>
       </Group>
+      <div>
+        If you want to differentiate between keyboard-initiated focus and
+        pointer-initiated focus, you can use the <code>:focus</code> and{" "}
+        <code>:focus-visible</code> CSS pseudo-class instead.
+      </div>
+      <Code html={SeparatorCustomStylesFocusVisibleHTML} />
+      <Group>
+        <Panel>left</Panel>
+        <Separator useFocusPseudoClasses />
+        <Panel defaultSize="50%">right</Panel>
+      </Group>
     </Box>
   );
 }