storybook-addon-pseudo-states 1.0.0 → 1.0.2

package/.babelrc.js

@@ -1,3 +1,14 @@
+const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
+
 module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"],
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                targets: 'defaults',
+                modules
+            }
+        ],
+        "@babel/preset-react"
+    ],
 }

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# 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/{PseudoStateTool.js → cjs/PseudoStateTool.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -17,13 +17,13 @@ var _theming = require("@storybook/theming");
 
 var _constants = require("./constants");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -35,7 +35,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 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; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -76,18 +76,18 @@ var PseudoStateTool = function PseudoStateTool() {
       });
     };
   }, [pseudo, getValue]);
-  return /*#__PURE__*/_react["default"].createElement(_components.WithTooltip, {
+  return /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
     placement: "top",
     trigger: "click",
     tooltip: function tooltip() {
-      return /*#__PURE__*/_react["default"].createElement(_components.TooltipLinkList, {
+      return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
         links: options.map(function (option) {
           return {
             id: option,
-            title: /*#__PURE__*/_react["default"].createElement(LinkTitle, {
+            title: /*#__PURE__*/_react.default.createElement(LinkTitle, {
               active: getValue(option)
             }, ":", _constants.PSEUDO_STATES[option]),
-            right: /*#__PURE__*/_react["default"].createElement(LinkIcon, {
+            right: /*#__PURE__*/_react.default.createElement(LinkIcon, {
               icon: "check",
               width: 12,
               height: 12,
@@ -99,11 +99,11 @@ var PseudoStateTool = function PseudoStateTool() {
         })
       });
     }
-  }, /*#__PURE__*/_react["default"].createElement(_components.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_components.IconButton, {
     key: "pseudo-state",
     title: "Select CSS pseudo states",
     active: hasSelection
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icons, {
+  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
     icon: "button"
   })));
 };

package/dist/{constants.js → cjs/constants.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PSEUDO_STATES = exports.TOOL_ID = exports.ADDON_ID = void 0;
+exports.TOOL_ID = exports.PSEUDO_STATES = exports.ADDON_ID = void 0;
 var ADDON_ID = "storybook/pseudo-states";
 exports.ADDON_ID = ADDON_ID;
 var TOOL_ID = "".concat(ADDON_ID, "/tool"); // Dynamic pseudo-classes

package/dist/{withPseudoState.js → cjs/withPseudoState.js}

@@ -11,19 +11,19 @@ var _coreEvents = require("@storybook/core-events");
 
 var _constants = require("./constants");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -33,7 +33,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
@@ -123,13 +123,24 @@ var warnOnce = function warnOnce(message) {
 
 
 function rewriteStyleSheets(shadowRoot) {
-  var _iterator = _createForOfIteratorHelper((shadowRoot || document).styleSheets),
+  var _shadowRoot$adoptedSt;
+
+  var styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
+  if (shadowRoot !== null && shadowRoot !== void 0 && (_shadowRoot$adoptedSt = shadowRoot.adoptedStyleSheets) !== null && _shadowRoot$adoptedSt !== void 0 && _shadowRoot$adoptedSt.length) styleSheets = shadowRoot.adoptedStyleSheets;
+
+  var _iterator = _createForOfIteratorHelper(styleSheets),
       _step;
 
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var sheet = _step.value;
 
+      if (sheet._pseudoStatesRewritten) {
+        continue;
+      } else {
+        sheet._pseudoStatesRewritten = true;
+      }
+
       try {
         var index = 0;
 
@@ -147,10 +158,25 @@ function rewriteStyleSheets(shadowRoot) {
                 if (selector.includes(".pseudo-")) return [];
                 var states = [];
                 var plainSelector = selector.replace(matchAll, function (_, state) {
-                  states.push(".pseudo-".concat(state));
+                  states.push(state);
                   return "";
                 });
-                var stateSelector = shadowRoot ? ":host(".concat(states.join(""), ") ").concat(plainSelector) : "".concat(states.join(""), " ").concat(plainSelector);
+                var stateSelector;
+
+                if (selector.startsWith(":host(")) {
+                  stateSelector = states.reduce(function (acc, state) {
+                    return acc.replaceAll(":".concat(state), ".pseudo-".concat(state));
+                  }, selector);
+                } else if (shadowRoot) {
+                  stateSelector = ":host(".concat(states.map(function (s) {
+                    return ".pseudo-".concat(s);
+                  }).join(""), ") ").concat(plainSelector);
+                } else {
+                  stateSelector = "".concat(states.map(function (s) {
+                    return ".pseudo-".concat(s);
+                  }).join(""), " ").concat(plainSelector);
+                }
+
                 return [selector, stateSelector];
               }).join(", "));
               sheet.deleteRule(index);

package/dist/esm/PseudoStateTool.js

@@ -0,0 +1,89 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+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; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useCallback, useMemo } from "react";
+import { useGlobals } from "@storybook/api";
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from "@storybook/components";
+import { styled, color } from "@storybook/theming";
+import { PSEUDO_STATES } from "./constants";
+var LinkTitle = styled.span(function (_ref) {
+  var active = _ref.active;
+  return {
+    color: active ? color.secondary : "inherit"
+  };
+});
+var LinkIcon = styled(Icons)(function (_ref2) {
+  var active = _ref2.active;
+  return {
+    opacity: active ? 1 : 0,
+    path: {
+      fill: active ? color.secondary : "inherit"
+    }
+  };
+});
+var options = Object.keys(PSEUDO_STATES).sort();
+export var PseudoStateTool = function PseudoStateTool() {
+  var _useGlobals = useGlobals(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 2),
+      pseudo = _useGlobals2[0].pseudo,
+      updateGlobals = _useGlobals2[1];
+
+  var hasSelection = useMemo(function () {
+    return !!pseudo && Object.values(pseudo).includes(true);
+  }, [pseudo]);
+  var getValue = useCallback(function (option) {
+    return pseudo ? pseudo[option] : false;
+  }, [pseudo]);
+  var toggleOption = useCallback(function (option) {
+    return function () {
+      return updateGlobals({
+        pseudo: _objectSpread(_objectSpread({}, pseudo), {}, _defineProperty({}, option, !getValue(option)))
+      });
+    };
+  }, [pseudo, getValue]);
+  return /*#__PURE__*/React.createElement(WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    tooltip: function tooltip() {
+      return /*#__PURE__*/React.createElement(TooltipLinkList, {
+        links: options.map(function (option) {
+          return {
+            id: option,
+            title: /*#__PURE__*/React.createElement(LinkTitle, {
+              active: getValue(option)
+            }, ":", PSEUDO_STATES[option]),
+            right: /*#__PURE__*/React.createElement(LinkIcon, {
+              icon: "check",
+              width: 12,
+              height: 12,
+              active: getValue(option)
+            }),
+            onClick: toggleOption(option),
+            active: getValue(option)
+          };
+        })
+      });
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    key: "pseudo-state",
+    title: "Select CSS pseudo states",
+    active: hasSelection
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "button"
+  })));
+};

package/dist/esm/constants.js

@@ -0,0 +1,15 @@
+export var ADDON_ID = "storybook/pseudo-states";
+export var TOOL_ID = "".concat(ADDON_ID, "/tool"); // Dynamic pseudo-classes
+// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos
+
+export var PSEUDO_STATES = {
+  hover: "hover",
+  active: "active",
+  focusVisible: "focus-visible",
+  focusWithin: "focus-within",
+  focus: "focus",
+  // must come after its alternatives
+  visited: "visited",
+  link: "link",
+  target: "target"
+};

package/dist/esm/preset/manager.js

@@ -0,0 +1,14 @@
+import { addons, types } from "@storybook/addons";
+import { ADDON_ID, TOOL_ID } from "../constants";
+import { PseudoStateTool } from "../PseudoStateTool";
+addons.register(ADDON_ID, function () {
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "CSS pseudo states",
+    match: function match(_ref) {
+      var viewMode = _ref.viewMode;
+      return viewMode === "story";
+    },
+    render: PseudoStateTool
+  });
+});

package/dist/esm/preset/preview.js

@@ -0,0 +1,2 @@
+import { withPseudoState } from "../withPseudoState";
+export var decorators = [withPseudoState];

package/dist/esm/withPseudoState.js

@@ -0,0 +1,224 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 { PSEUDO_STATES } from "./constants";
+var pseudoStates = Object.values(PSEUDO_STATES);
+var matchOne = new RegExp(":(".concat(pseudoStates.join("|"), ")"));
+var matchAll = new RegExp(":(".concat(pseudoStates.join("|"), ")"), "g"); // Drops any existing pseudo state classnames that carried over from a previously viewed story
+// before adding the new classnames. We do this the old-fashioned way, for IE compatibility.
+
+var applyClasses = function applyClasses(element, classnames) {
+  var _element$className$sp;
+
+  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(" ");
+}; // 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.
+
+
+var updateShadowHost = function updateShadowHost(shadowHost) {
+  var classnames = new Set();
+
+  for (var element = shadowHost.parentElement; element; element = element.parentElement) {
+    if (!element.className) continue;
+    element.className.split(" ").filter(function (classname) {
+      return classname.indexOf("pseudo-") === 0;
+    }).forEach(function (classname) {
+      return classnames.add(classname);
+    });
+  }
+
+  applyClasses(shadowHost, classnames);
+}; // Keep track of attached shadow host elements for the current story
+
+
+var shadowHosts = new Set();
+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");
+
+  var _useGlobals = useGlobals(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 2),
+      globals = _useGlobals2[0].pseudo,
+      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar
+
+
+  useEffect(function () {
+    if (parameter !== globals) updateGlobals({
+      pseudo: parameter
+    });
+  }, [parameter]); // 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]);
+  return StoryFn();
+};
+var warnings = new Set();
+
+var warnOnce = function warnOnce(message) {
+  if (warnings.has(message)) return; // eslint-disable-next-line no-console
+
+  console.warn(message);
+  warnings.add(message);
+}; // Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
+
+
+function rewriteStyleSheets(shadowRoot) {
+  var _shadowRoot$adoptedSt;
+
+  var styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
+  if (shadowRoot !== null && shadowRoot !== void 0 && (_shadowRoot$adoptedSt = shadowRoot.adoptedStyleSheets) !== null && _shadowRoot$adoptedSt !== void 0 && _shadowRoot$adoptedSt.length) styleSheets = shadowRoot.adoptedStyleSheets;
+
+  var _iterator = _createForOfIteratorHelper(styleSheets),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var sheet = _step.value;
+
+      if (sheet._pseudoStatesRewritten) {
+        continue;
+      } else {
+        sheet._pseudoStatesRewritten = true;
+      }
+
+      try {
+        var index = 0;
+
+        var _iterator2 = _createForOfIteratorHelper(sheet.cssRules),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _step2$value = _step2.value,
+                cssText = _step2$value.cssText,
+                selectorText = _step2$value.selectorText;
+
+            if (matchOne.test(selectorText)) {
+              var newRule = cssText.replace(selectorText, selectorText.split(", ").flatMap(function (selector) {
+                if (selector.includes(".pseudo-")) return [];
+                var states = [];
+                var plainSelector = selector.replace(matchAll, function (_, state) {
+                  states.push(state);
+                  return "";
+                });
+                var stateSelector;
+
+                if (selector.startsWith(":host(")) {
+                  stateSelector = states.reduce(function (acc, state) {
+                    return acc.replaceAll(":".concat(state), ".pseudo-".concat(state));
+                  }, selector);
+                } else if (shadowRoot) {
+                  stateSelector = ":host(".concat(states.map(function (s) {
+                    return ".pseudo-".concat(s);
+                  }).join(""), ") ").concat(plainSelector);
+                } else {
+                  stateSelector = "".concat(states.map(function (s) {
+                    return ".pseudo-".concat(s);
+                  }).join(""), " ").concat(plainSelector);
+                }
+
+                return [selector, stateSelector];
+              }).join(", "));
+              sheet.deleteRule(index);
+              sheet.insertRule(newRule, index);
+              if (shadowRoot) shadowHosts.add(shadowRoot.host);
+            }
+
+            index++;
+
+            if (index > 1000) {
+              warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      } catch (e) {
+        if (e.toString().includes("cssRules")) {
+          warnOnce("Can't access cssRules, likely due to CORS restrictions: ".concat(sheet.href));
+        } else {
+          // eslint-disable-next-line no-console
+          console.error(e, sheet.href);
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+} // Reinitialize CSS enhancements every time the story changes
+
+
+addons.getChannel().on(STORY_RENDERED, function () {
+  return rewriteStyleSheets();
+}); // IE doesn't support shadow DOM
+
+if (Element.prototype.attachShadow) {
+  // Monkeypatch the attachShadow method so we can handle pseudo styles inside shadow DOM
+  Element.prototype._attachShadow = Element.prototype.attachShadow;
+
+  Element.prototype.attachShadow = function attachShadow(init) {
+    // Force "open" mode, so we can access the shadowRoot
+    var shadowRoot = this._attachShadow(_objectSpread(_objectSpread({}, init), {}, {
+      mode: "open"
+    })); // Wait for it to render and apply its styles before rewriting them
+
+
+    requestAnimationFrame(function () {
+      rewriteStyleSheets(shadowRoot);
+      updateShadowHost(shadowRoot.host);
+    });
+    return shadowRoot;
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",
@@ -14,7 +14,8 @@
   },
   "author": "ghengeveld",
   "license": "MIT",
-  "main": "dist/preset.js",
+  "main": "dist/cjs/preset.js",
+  "module": "dist/esm/preset.js",
   "files": [
     "dist/**/*",
     "README.md",
@@ -25,7 +26,7 @@
     "start": "concurrently \"yarn storybook --no-manager-cache --quiet\" \"yarn build:dist --watch\"",
     "storybook": "start-storybook -p 6006",
     "chromatic": "chromatic",
-    "build:dist": "babel ./src --out-dir ./dist",
+    "build:dist": "babel ./src --out-dir ./dist/cjs && BABEL_ESM=\"true\" babel ./src --out-dir ./dist/esm",
     "build:storybook": "build-storybook",
     "prepublish": "yarn clean && yarn build:dist",
     "release": "auto shipit --base-branch=main"
@@ -36,7 +37,7 @@
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
-    "@storybook/react": "^6.1.14",
+    "@storybook/react": "^6.4.19",
     "auto": "^10.16.8",
     "babel-loader": "^8.1.0",
     "chromatic": "^5.6.0",
@@ -46,11 +47,11 @@
     "rimraf": "^3.0.2"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.1.14",
-    "@storybook/api": "^6.1.14",
-    "@storybook/components": "^6.1.14",
-    "@storybook/core-events": "^6.1.14",
-    "@storybook/theming": "^6.1.14",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/api": "^6.4.19",
+    "@storybook/components": "^6.4.19",
+    "@storybook/core-events": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/preset.js

@@ -1 +1,9 @@
-module.exports = require("./dist/preset")
+function managerEntries(entry = []) {
+    return [...entry, require.resolve("./dist/esm/preset/manager")]
+}
+
+function config(entry = []) {
+    return [...entry, require.resolve("./dist/esm/preset/preview")]
+}
+
+module.exports = { managerEntries, config };

package/dist/preset/index.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = config;
-exports.managerEntries = managerEntries;
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-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; }
-
-function config() {
-  var entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return [].concat(_toConsumableArray(entry), [require.resolve("./preview")]);
-}
-
-function managerEntries() {
-  var entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return [].concat(_toConsumableArray(entry), [require.resolve("./manager")]);
-}