storybook-addon-pseudo-states 2.0.1 → 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/{chunk-A7FPDXSC.mjs → chunk-OZNRRAVT.mjs}

@@ -1,6 +1,7 @@
 // src/constants.ts
 var ADDON_ID = "storybook/pseudo-states";
 var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
 var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
 var PSEUDO_STATES = {
   hover: "hover",
@@ -16,6 +17,7 @@ var PSEUDO_STATES = {
 export {
   ADDON_ID,
   TOOL_ID,
+  PARAM_KEY,
   EXCLUDED_PSEUDO_ELEMENTS,
   PSEUDO_STATES
 };

package/dist/manager.js

@@ -24,6 +24,7 @@ var import_manager_api2 = require("@storybook/manager-api");
 // src/constants.ts
 var ADDON_ID = "storybook/pseudo-states";
 var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
 var PSEUDO_STATES = {
   hover: "hover",
   active: "active",
@@ -49,14 +50,25 @@ var LinkIcon = (0, import_theming.styled)(import_components.Icons)(({ active })
 }));
 var options = Object.keys(PSEUDO_STATES).sort();
 var PseudoStateTool = () => {
-  const [{ pseudo }, updateGlobals] = (0, import_manager_api.useGlobals)();
-  const isActive = (0, import_react.useCallback)((option) => {
-    if (!pseudo)
-      return false;
-    return pseudo[option] === true;
-  }, [pseudo]);
+  const [globals, updateGlobals] = (0, import_manager_api.useGlobals)();
+  const pseudo = globals[PARAM_KEY];
+  const isActive = (0, import_react.useCallback)(
+    (option) => {
+      if (!pseudo)
+        return false;
+      return pseudo[option] === true;
+    },
+    [pseudo]
+  );
   const toggleOption = (0, import_react.useCallback)(
-    (option) => () => updateGlobals({ pseudo: { ...pseudo, [option]: !isActive(option) } }),
+    (option) => () => {
+      updateGlobals({
+        [PARAM_KEY]: {
+          ...pseudo,
+          [option]: !isActive(option)
+        }
+      });
+    },
     [pseudo]
   );
   return /* @__PURE__ */ import_react.default.createElement(

package/dist/manager.mjs

@@ -1,8 +1,9 @@
 import {
   ADDON_ID,
+  PARAM_KEY,
   PSEUDO_STATES,
   TOOL_ID
-} from "./chunk-A7FPDXSC.mjs";
+} from "./chunk-OZNRRAVT.mjs";
 
 // src/manager.ts
 import { addons, types } from "@storybook/manager-api";
@@ -21,14 +22,25 @@ var LinkIcon = styled(Icons)(({ active }) => ({
 }));
 var options = Object.keys(PSEUDO_STATES).sort();
 var PseudoStateTool = () => {
-  const [{ pseudo }, updateGlobals] = useGlobals();
-  const isActive = useCallback((option) => {
-    if (!pseudo)
-      return false;
-    return pseudo[option] === true;
-  }, [pseudo]);
+  const [globals, updateGlobals] = useGlobals();
+  const pseudo = globals[PARAM_KEY];
+  const isActive = useCallback(
+    (option) => {
+      if (!pseudo)
+        return false;
+      return pseudo[option] === true;
+    },
+    [pseudo]
+  );
   const toggleOption = useCallback(
-    (option) => () => updateGlobals({ pseudo: { ...pseudo, [option]: !isActive(option) } }),
+    (option) => () => {
+      updateGlobals({
+        [PARAM_KEY]: {
+          ...pseudo,
+          [option]: !isActive(option)
+        }
+      });
+    },
     [pseudo]
   );
   return /* @__PURE__ */ React.createElement(

package/dist/preview.d.ts

@@ -1,5 +1,8 @@
 import * as _storybook_types from '@storybook/types';
 
 declare const decorators: _storybook_types.DecoratorFunction<_storybook_types.Renderer, _storybook_types.Args>[];
+declare const globals: {
+    pseudo: boolean;
+};
 
-export { decorators };
+export { decorators, globals };

package/dist/preview.js

@@ -20,17 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/preview.ts
 var preview_exports = {};
 __export(preview_exports, {
-  decorators: () => decorators
+  decorators: () => decorators,
+  globals: () => globals
 });
 module.exports = __toCommonJS(preview_exports);
 
-// src/preview/withPseudoState.ts
-var import_core_events = require("@storybook/core-events");
-var import_preview_api = require("@storybook/preview-api");
-
 // src/constants.ts
 var ADDON_ID = "storybook/pseudo-states";
 var TOOL_ID = `${ADDON_ID}/tool`;
+var PARAM_KEY = "pseudo";
 var EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
 var PSEUDO_STATES = {
   hover: "hover",
@@ -43,6 +41,10 @@ var PSEUDO_STATES = {
   target: "target"
 };
 
+// src/preview/withPseudoState.ts
+var import_core_events = require("@storybook/core-events");
+var import_preview_api = require("@storybook/preview-api");
+
 // src/preview/splitSelectors.ts
 var isAtRule = (selector) => selector.indexOf("@") === 0;
 var splitSelectors = (selectors) => {
@@ -156,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]) => {
@@ -184,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: globals } = globalsArgs;
-  const canvasElement = (0, import_preview_api.useMemo)(() => {
+  const { pseudo: globals2 } = globalsArgs;
+  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 !== globals && 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, globals || parameter);
+      applyParameter(rootElement, globals2 || pseudoConfig(parameter));
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [canvasElement, globals, parameter]);
+  }, [rootElement, globals2, parameter]);
   return StoryFn();
 };
 var rewriteStyleSheets = (shadowRoot) => {
@@ -234,7 +248,9 @@ if (Element.prototype.attachShadow) {
 
 // src/preview.ts
 var decorators = [withPseudoState];
+var globals = { [PARAM_KEY]: false };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  decorators
+  decorators,
+  globals
 });

package/dist/preview.mjs

@@ -1,7 +1,8 @@
 import {
   EXCLUDED_PSEUDO_ELEMENTS,
+  PARAM_KEY,
   PSEUDO_STATES
-} from "./chunk-A7FPDXSC.mjs";
+} from "./chunk-OZNRRAVT.mjs";
 
 // src/preview/withPseudoState.ts
 import {
@@ -125,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]) => {
@@ -153,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: globals } = globalsArgs;
-  const canvasElement = useMemo(() => {
+  const { pseudo: globals2 } = globalsArgs;
+  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 !== globals && 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, globals || parameter);
+      applyParameter(rootElement, globals2 || pseudoConfig(parameter));
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [canvasElement, globals, parameter]);
+  }, [rootElement, globals2, parameter]);
   return StoryFn();
 };
 var rewriteStyleSheets = (shadowRoot) => {
@@ -203,6 +216,8 @@ if (Element.prototype.attachShadow) {
 
 // src/preview.ts
 var decorators = [withPseudoState];
+var globals = { [PARAM_KEY]: false };
 export {
-  decorators
+  decorators,
+  globals
 };

package/package.json

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