storybook-addon-pseudo-states 2.0.2 → 2.1.0

package/README.md

@@ -13,7 +13,7 @@ Toggle CSS pseudo states for your components in Storybook.
 
 ## Introduction
 
-This addon attempts to "force" your components' pseudo states. It rewrites all document stylesheets to add a class name selector to any rules that target a pseudo-class (`:hover`, `:focus`, etc.). The tool then allows you to toggle these class names on the story container (`#root`). Additionally, you can set the `pseudo` property on your story `parameters` to set a default value for each pseudo class. This makes it possible to test such states with [Chromatic](https://www.chromatic.com/).
+This addon attempts to "force" your components' pseudo states. It rewrites all document stylesheets to add a class name selector to any rules that target a pseudo-class (`:hover`, `:focus`, etc.). The tool then allows you to toggle these class names on the story container (`#root`) or any other root element you want (via the `rootSelector` param). Additionally, you can set the `pseudo` property on your story `parameters` to set a default value for each pseudo class. This makes it possible to test such states with [Chromatic](https://www.chromatic.com/).
 
 ### Limitations
 
@@ -70,3 +70,21 @@ Buttons.parameters = {
 ```
 
 This accepts a single CSS selector (string), or an array of CSS selectors on which to enable that pseudo style.
+
+### Overriding the default root element
+
+By default, we use `#storybook-root` (or `#root` before Storybook 7) element as the root element for all pseudo classes. If you need to render elements outside Storybook's root element, you can set `parameters.pseudo.rootSelector` to override it. This is convenient for portals, dialogs, tooltips, etc.
+
+For example, consider a `Dialog` component that inject itself to the document's `body` node:
+
+```jsx
+export const DialogButton = () => (
+  <Dialog>
+    <Button>Hover</Button>
+  </Dialog>
+)
+
+DialogButton.parameters = {
+  pseudo: { hover: true, rootSelector: "body" },
+}
+```

package/dist/preview.js

@@ -158,7 +158,7 @@ var applyClasses = (element, classnames) => {
   Object.values(PSEUDO_STATES).forEach((state) => element.classList.remove(`pseudo-${state}`));
   classnames.forEach((classname) => element.classList.add(classname));
 };
-var applyParameter = (rootElement, parameter) => {
+var applyParameter = (rootElement, parameter = {}) => {
   const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
   const add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
   Object.entries(parameter || {}).forEach(([state, value]) => {
@@ -186,31 +186,43 @@ var updateShadowHost = (shadowHost) => {
   }
   applyClasses(shadowHost, classnames);
 };
+var pseudoConfig = (parameter) => {
+  const { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+};
+var equals = (a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
+  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+);
 var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
   const { pseudo: parameter } = parameters;
   const { pseudo: globals2 } = globalsArgs;
-  const canvasElement = (0, import_preview_api.useMemo)(() => {
+  const { rootSelector } = parameter || {};
+  const rootElement = (0, import_preview_api.useMemo)(() => {
+    if (rootSelector) {
+      return document.querySelector(rootSelector);
+    }
     if (viewMode === "docs") {
       return document.getElementById(`story--${id}`);
     }
     return document.getElementById("storybook-root") || document.getElementById("root");
-  }, [viewMode, id]);
+  }, [rootSelector, viewMode, id]);
   (0, import_preview_api.useEffect)(() => {
-    if (parameter !== globals2 && viewMode === "story") {
+    const config = pseudoConfig(parameter);
+    if (viewMode === "story" && !equals(config, globals2)) {
       channel.emit(import_core_events.UPDATE_GLOBALS, {
-        globals: { pseudo: parameter }
+        globals: { pseudo: config }
       });
     }
   }, [parameter, viewMode]);
   (0, import_preview_api.useEffect)(() => {
-    if (!canvasElement)
+    if (!rootElement)
       return;
     const timeout = setTimeout(() => {
-      applyParameter(canvasElement, globals2 || parameter);
+      applyParameter(rootElement, globals2 || pseudoConfig(parameter));
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [canvasElement, globals2, parameter]);
+  }, [rootElement, globals2, parameter]);
   return StoryFn();
 };
 var rewriteStyleSheets = (shadowRoot) => {

package/dist/preview.mjs

@@ -126,7 +126,7 @@ var applyClasses = (element, classnames) => {
   Object.values(PSEUDO_STATES).forEach((state) => element.classList.remove(`pseudo-${state}`));
   classnames.forEach((classname) => element.classList.add(classname));
 };
-var applyParameter = (rootElement, parameter) => {
+var applyParameter = (rootElement, parameter = {}) => {
   const map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]);
   const add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
   Object.entries(parameter || {}).forEach(([state, value]) => {
@@ -154,31 +154,43 @@ var updateShadowHost = (shadowHost) => {
   }
   applyClasses(shadowHost, classnames);
 };
+var pseudoConfig = (parameter) => {
+  const { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+};
+var equals = (a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
+  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+);
 var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
   const { pseudo: parameter } = parameters;
   const { pseudo: globals2 } = globalsArgs;
-  const canvasElement = useMemo(() => {
+  const { rootSelector } = parameter || {};
+  const rootElement = useMemo(() => {
+    if (rootSelector) {
+      return document.querySelector(rootSelector);
+    }
     if (viewMode === "docs") {
       return document.getElementById(`story--${id}`);
     }
     return document.getElementById("storybook-root") || document.getElementById("root");
-  }, [viewMode, id]);
+  }, [rootSelector, viewMode, id]);
   useEffect(() => {
-    if (parameter !== globals2 && viewMode === "story") {
+    const config = pseudoConfig(parameter);
+    if (viewMode === "story" && !equals(config, globals2)) {
       channel.emit(UPDATE_GLOBALS, {
-        globals: { pseudo: parameter }
+        globals: { pseudo: config }
       });
     }
   }, [parameter, viewMode]);
   useEffect(() => {
-    if (!canvasElement)
+    if (!rootElement)
       return;
     const timeout = setTimeout(() => {
-      applyParameter(canvasElement, globals2 || parameter);
+      applyParameter(rootElement, globals2 || pseudoConfig(parameter));
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [canvasElement, globals2, parameter]);
+  }, [rootElement, globals2, parameter]);
   return StoryFn();
 };
 var rewriteStyleSheets = (shadowRoot) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",