storybook-addon-pseudo-states 2.0.1 → 2.0.2

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) => {
@@ -186,7 +188,7 @@ var updateShadowHost = (shadowHost) => {
 };
 var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
   const { pseudo: parameter } = parameters;
-  const { pseudo: globals } = globalsArgs;
+  const { pseudo: globals2 } = globalsArgs;
   const canvasElement = (0, import_preview_api.useMemo)(() => {
     if (viewMode === "docs") {
       return document.getElementById(`story--${id}`);
@@ -194,7 +196,7 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
     return document.getElementById("storybook-root") || document.getElementById("root");
   }, [viewMode, id]);
   (0, import_preview_api.useEffect)(() => {
-    if (parameter !== globals && viewMode === "story") {
+    if (parameter !== globals2 && viewMode === "story") {
       channel.emit(import_core_events.UPDATE_GLOBALS, {
         globals: { pseudo: parameter }
       });
@@ -204,11 +206,11 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
     if (!canvasElement)
       return;
     const timeout = setTimeout(() => {
-      applyParameter(canvasElement, globals || parameter);
+      applyParameter(canvasElement, globals2 || parameter);
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [canvasElement, globals, parameter]);
+  }, [canvasElement, globals2, parameter]);
   return StoryFn();
 };
 var rewriteStyleSheets = (shadowRoot) => {
@@ -234,7 +236,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 {
@@ -155,7 +156,7 @@ var updateShadowHost = (shadowHost) => {
 };
 var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
   const { pseudo: parameter } = parameters;
-  const { pseudo: globals } = globalsArgs;
+  const { pseudo: globals2 } = globalsArgs;
   const canvasElement = useMemo(() => {
     if (viewMode === "docs") {
       return document.getElementById(`story--${id}`);
@@ -163,7 +164,7 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
     return document.getElementById("storybook-root") || document.getElementById("root");
   }, [viewMode, id]);
   useEffect(() => {
-    if (parameter !== globals && viewMode === "story") {
+    if (parameter !== globals2 && viewMode === "story") {
       channel.emit(UPDATE_GLOBALS, {
         globals: { pseudo: parameter }
       });
@@ -173,11 +174,11 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
     if (!canvasElement)
       return;
     const timeout = setTimeout(() => {
-      applyParameter(canvasElement, globals || parameter);
+      applyParameter(canvasElement, globals2 || parameter);
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [canvasElement, globals, parameter]);
+  }, [canvasElement, globals2, parameter]);
   return StoryFn();
 };
 var rewriteStyleSheets = (shadowRoot) => {
@@ -203,6 +204,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.0.2",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",