storybook-addon-pseudo-states 1.0.2 → 1.0.3--canary.d752c59.0

package/CHANGELOG.md

@@ -1,22 +1,3 @@
-# v1.0.0 (Fri Mar 11 2022)
-
-#### 🐛 Bug Fix
-
-- Add support for custom elements using `:host(:hover)` like styling. [#17](https://github.com/chromaui/storybook-addon-pseudo-states/pull/17) (jeroen.zwartepoorte@iddinkgroup.com [@ghengeveld](https://github.com/ghengeveld))
-- Setup auto [#7](https://github.com/chromaui/storybook-addon-pseudo-states/pull/7) ([@ghengeveld](https://github.com/ghengeveld))
-
-#### ⚠️ Pushed to `main`
-
-- Upgrade Storybook ([@ghengeveld](https://github.com/ghengeveld))
-- Ignore .env file ([@ghengeveld](https://github.com/ghengeveld))
-
-#### Authors: 2
-
-- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
-- Jeroen Zwartepoorte ([@jpzwarte](https://github.com/jpzwarte))
-
----
-
 # v1.0.0 (Sat Feb 27 2021)
 
 #### 🐛 Bug Fix

package/dist/cjs/withPseudoState.js

@@ -50,6 +50,21 @@ var applyClasses = function applyClasses(element, classnames) {
   element.className = (_element$className$sp = element.className.split(" ").filter(function (classname) {
     return classname && classname.indexOf("pseudo-") !== 0;
   })).concat.apply(_element$className$sp, _toConsumableArray(classnames)).join(" ");
+};
+
+var applyParameter = function applyParameter(element, parameter) {
+  return applyClasses(element, Object.entries(parameter || {}).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        _ = _ref2[0],
+        value = _ref2[1];
+
+    return value;
+  }).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+        key = _ref4[0];
+
+    return "pseudo-".concat(_constants.PSEUDO_STATES[key]);
+  }));
 }; // Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
 // Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
 
@@ -77,37 +92,35 @@ _addons.addons.getChannel().on(_coreEvents.STORY_CHANGED, function () {
 }); // Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
 
 
-var withPseudoState = function withPseudoState(StoryFn) {
-  var parameter = (0, _addons.useParameter)("pseudo");
+var withPseudoState = function withPseudoState(StoryFn, _ref5) {
+  var viewMode = _ref5.viewMode,
+      parameters = _ref5.parameters,
+      id = _ref5.id;
+  var parameter = parameters.pseudo;
 
   var _useGlobals = (0, _addons.useGlobals)(),
       _useGlobals2 = _slicedToArray(_useGlobals, 2),
       globals = _useGlobals2[0].pseudo,
-      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar
+      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar (only in canvas as this
+  // doesn't make sense for docs because many stories are displayed at once)
 
 
   (0, _addons.useEffect)(function () {
-    if (parameter !== globals) updateGlobals({
+    if (parameter !== globals && viewMode === "story") updateGlobals({
       pseudo: parameter
     });
-  }, [parameter]); // Convert selected states to classnames and apply them to the story root element.
+  }, [parameter, viewMode]); // Convert selected states to classnames and apply them to the story root element.
   // Then update each shadow host to redetermine its own pseudo classnames.
 
   (0, _addons.useEffect)(function () {
-    applyClasses(document.getElementById("root"), Object.entries(globals || {}).filter(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          _ = _ref2[0],
-          value = _ref2[1];
-
-      return value;
-    }).map(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-          key = _ref4[0];
-
-      return "pseudo-".concat(_constants.PSEUDO_STATES[key]);
-    }));
-    shadowHosts.forEach(updateShadowHost);
-  }, [globals]);
+    var timeout = setTimeout(function () {
+      applyParameter(document.getElementById(viewMode === "docs" ? "story--".concat(id) : "root"));
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [parameter, viewMode]);
   return StoryFn();
 };
 
@@ -215,6 +228,11 @@ function rewriteStyleSheets(shadowRoot) {
 
 _addons.addons.getChannel().on(_coreEvents.STORY_RENDERED, function () {
   return rewriteStyleSheets();
+}); // Reinitialize CSS enhancements every time a docs page is rendered
+
+
+_addons.addons.getChannel().on(_coreEvents.DOCS_RENDERED, function () {
+  return rewriteStyleSheets();
 }); // IE doesn't support shadow DOM
 
 

package/dist/esm/withPseudoState.js

@@ -27,8 +27,8 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 /* eslint-env browser */
-import { addons, useEffect, useGlobals, useParameter } from "@storybook/addons";
-import { STORY_CHANGED, STORY_RENDERED } from "@storybook/core-events";
+import { addons, useEffect, useGlobals } from "@storybook/addons";
+import { DOCS_RENDERED, STORY_CHANGED, STORY_RENDERED } from "@storybook/core-events";
 import { PSEUDO_STATES } from "./constants";
 var pseudoStates = Object.values(PSEUDO_STATES);
 var matchOne = new RegExp(":(".concat(pseudoStates.join("|"), ")"));
@@ -41,6 +41,21 @@ var applyClasses = function applyClasses(element, classnames) {
   element.className = (_element$className$sp = element.className.split(" ").filter(function (classname) {
     return classname && classname.indexOf("pseudo-") !== 0;
   })).concat.apply(_element$className$sp, _toConsumableArray(classnames)).join(" ");
+};
+
+var applyParameter = function applyParameter(element, parameter) {
+  return applyClasses(element, Object.entries(parameter || {}).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        _ = _ref2[0],
+        value = _ref2[1];
+
+    return value;
+  }).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+        key = _ref4[0];
+
+    return "pseudo-".concat(PSEUDO_STATES[key]);
+  }));
 }; // Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
 // Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
 
@@ -66,37 +81,35 @@ addons.getChannel().on(STORY_CHANGED, function () {
   return shadowHosts.clear();
 }); // Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
 
-export var withPseudoState = function withPseudoState(StoryFn) {
-  var parameter = useParameter("pseudo");
+export var withPseudoState = function withPseudoState(StoryFn, _ref5) {
+  var viewMode = _ref5.viewMode,
+      parameters = _ref5.parameters,
+      id = _ref5.id;
+  var parameter = parameters.pseudo;
 
   var _useGlobals = useGlobals(),
       _useGlobals2 = _slicedToArray(_useGlobals, 2),
       globals = _useGlobals2[0].pseudo,
-      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar
+      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar (only in canvas as this
+  // doesn't make sense for docs because many stories are displayed at once)
 
 
   useEffect(function () {
-    if (parameter !== globals) updateGlobals({
+    if (parameter !== globals && viewMode === "story") updateGlobals({
       pseudo: parameter
     });
-  }, [parameter]); // Convert selected states to classnames and apply them to the story root element.
+  }, [parameter, viewMode]); // Convert selected states to classnames and apply them to the story root element.
   // Then update each shadow host to redetermine its own pseudo classnames.
 
   useEffect(function () {
-    applyClasses(document.getElementById("root"), Object.entries(globals || {}).filter(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          _ = _ref2[0],
-          value = _ref2[1];
-
-      return value;
-    }).map(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-          key = _ref4[0];
-
-      return "pseudo-".concat(PSEUDO_STATES[key]);
-    }));
-    shadowHosts.forEach(updateShadowHost);
-  }, [globals]);
+    var timeout = setTimeout(function () {
+      applyParameter(document.getElementById(viewMode === "docs" ? "story--".concat(id) : "root"));
+      shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [parameter, viewMode]);
   return StoryFn();
 };
 var warnings = new Set();
@@ -202,6 +215,10 @@ function rewriteStyleSheets(shadowRoot) {
 
 addons.getChannel().on(STORY_RENDERED, function () {
   return rewriteStyleSheets();
+}); // Reinitialize CSS enhancements every time a docs page is rendered
+
+addons.getChannel().on(DOCS_RENDERED, function () {
+  return rewriteStyleSheets();
 }); // IE doesn't support shadow DOM
 
 if (Element.prototype.attachShadow) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "1.0.2",
+  "version": "1.0.3--canary.d752c59.0",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",
@@ -37,6 +37,7 @@
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
+    "@storybook/addon-docs": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "auto": "^10.16.8",
     "babel-loader": "^8.1.0",