Add data-separator "focus" state (#706)

Author: bvaughn

integrations/tests/src/components/Separator.tsx

@@ -19,7 +19,7 @@ export function Separator({
         "min-h-2 min-w-2 shrink-0 rounded rounded-xs overflow-hidden",
         "bg-slate-600 [&[data-separator='hover']]:bg-slate-500 [&[data-separator='active']]:bg-slate-300",
         "text-slate-900 [&[data-separator='hover']]:text-slate-950 [&[data-separator='active']]:text-slate-950",
-        "focus:outline-none",
+        "[&[data-separator='hover']]:outline-none",
         className
       )}
       {...rest}

integrations/tests/tests/keyboard-interactions.spec.tsx

@@ -84,7 +84,12 @@ test.describe("keyboard interactions: window splitter api", () => {
 
     const separator = page.getByRole("separator");
 
+    await expect(separator).toHaveAttribute("data-separator", "inactive");
+
     await separator.focus();
+
+    await expect(separator).toHaveAttribute("data-separator", "focus");
+
     await page.keyboard.press("ArrowDown");
 
     await assertLayoutChangeCounts(mainPage, 2);

integrations/tests/tests/pointer-interactions.spec.tsx

@@ -592,6 +592,10 @@ test.describe("pointer interactions", () => {
     await expect(separator).toHaveAttribute("data-separator", "active");
 
     await page.mouse.up();
+    await expect(separator).toHaveAttribute("data-separator", "focus");
+
+    await page.mouse.move(0, 0);
+    await page.mouse.down();
     await expect(separator).toHaveAttribute("data-separator", "inactive");
   });
 

integrations/tests/tests/stacking-order.spec.tsx

@@ -120,9 +120,9 @@ test.describe("stacking order", () => {
 
     // Releasing the cursor under the overlaid element should do two things:
     // It should deactivate the separator
-    // It should transition to an "inactive" state because it's now blocked
+    // It should update the data state
     await page.mouse.up();
-    await expect(separator).toHaveAttribute("data-separator", "inactive");
+    await expect(separator).not.toHaveAttribute("data-separator", "active");
     await assertLayoutChangeCounts(mainPage, 3, 2);
 
     // No-op

lib/components/separator/Separator.tsx

@@ -54,6 +54,7 @@ export function Separator({
 
   const [dragState, setDragState] =
     useState<InteractionState["state"]>("inactive");
+  const [isFocused, setIsFocused] = useState(false);
 
   const elementRef = useRef<HTMLDivElement | null>(null);
 
@@ -137,6 +138,25 @@ export function Separator({
     cursor = "not-allowed";
   }
 
+  let dataSeparator = undefined;
+  if (disabled) {
+    dataSeparator = "disabled";
+  } else {
+    switch (dragState) {
+      case "active": {
+        dataSeparator = "active";
+        break;
+      }
+      default: {
+        if (isFocused) {
+          dataSeparator = "focus";
+        } else {
+          dataSeparator = dragState;
+        }
+      }
+    }
+  }
+
   return (
     <div
       {...rest}
@@ -148,9 +168,11 @@ export function Separator({
       aria-valuenow={aria.valueNow}
       children={children}
       className={className}
-      data-separator={disabled ? "disabled" : dragState}
+      data-separator={dataSeparator}
       data-testid={id}
       id={id}
+      onBlur={() => setIsFocused(false)}
+      onFocus={() => setIsFocused(true)}
       ref={mergedRef}
       role="separator"
       style={{

public/generated/examples/SeparatorCustomStyles.json

@@ -1,3 +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\">  \"</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">/&#62;</span></div>"
+  "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\">    [&#38;[data-separator='focus']]: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/SeparatorDataAttributes.json

@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"disabled\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"inactive\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"hover\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"active\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span></div>"
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"disabled\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"inactive\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"hover\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"active\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-separator</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"focus\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span></div>"
 }

public/generated/search-index.json

@@ -288,8 +288,8 @@
           "n": 1
         },
         "2": {
-          "v": "  Examples     Custom CSS styles   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\"   />    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   \"   \n   />    ",
-          "n": 0.082
+          "v": "  Examples     Custom CSS styles   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   />    ",
+          "n": 0.08
         }
       }
     },

public/generated/search-records.json

@@ -90,7 +90,7 @@
   {
     "path": "/examples/custom-css-styles",
     "section": "Examples",
-    "text": "  Examples     Custom CSS styles   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\"   />    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   \"   \n   />    ",
+    "text": "  Examples     Custom CSS styles   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   />    ",
     "title": "Custom CSS styles"
   },
   {

src/components/styled-panels/Separator.tsx

@@ -22,7 +22,7 @@ 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",
-        "focus:bg-slate-400",
+        "[&[data-separator='focus']]:bg-sky-400",
         orientation === "horizontal" ? "w-4 sm:w-2" : "h-4 sm:h-2",
         className
       )}