storybook-addon-pseudo-states 1.15.2 → 1.15.3

package/dist/cjs/withPseudoState.js

@@ -1,129 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withPseudoState = void 0;
-var _addons = require("@storybook/addons");
-var _coreEvents = require("@storybook/core-events");
-var _constants = require("./constants");
-var _rewriteStyleSheet = require("./rewriteStyleSheet");
-/* eslint-env browser */
-
-const channel = _addons.addons.getChannel();
-const shadowHosts = new Set();
-
-// 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.
-const applyClasses = (element, classnames) => {
-  element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
-};
-const applyParameter = (rootElement, parameter) => {
-  const map = new Map([[rootElement, new Set()]]);
-  const add = (target, state) => map.set(target, new Set([...(map.get(target) || []), state]));
-  Object.entries(parameter || {}).forEach(_ref => {
-    let [state, value] = _ref;
-    if (typeof value === "boolean") {
-      // default API - applying pseudo class to root element.
-      add(rootElement, value && state);
-    } else if (typeof value === "string") {
-      // explicit selectors API - applying pseudo class to a specific element
-      rootElement.querySelectorAll(value).forEach(el => add(el, state));
-    } else if (Array.isArray(value)) {
-      // explicit selectors API - we have an array (of strings) recursively handle each one
-      value.forEach(sel => rootElement.querySelectorAll(sel).forEach(el => add(el, state)));
-    }
-  });
-  map.forEach((states, target) => {
-    const classnames = [];
-    states.forEach(key => _constants.PSEUDO_STATES[key] && classnames.push(`pseudo-${_constants.PSEUDO_STATES[key]}`));
-    applyClasses(target, classnames);
-  });
-};
-
-// 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.
-const updateShadowHost = shadowHost => {
-  const classnames = new Set();
-  for (let element = shadowHost.parentElement; element; element = element.parentElement) {
-    if (!element.className) continue;
-    element.className.split(" ").filter(classname => classname.indexOf("pseudo-") === 0).forEach(classname => classnames.add(classname));
-  }
-  applyClasses(shadowHost, classnames);
-};
-
-// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
-const withPseudoState = (StoryFn, _ref2) => {
-  let {
-    viewMode,
-    parameters,
-    id,
-    globals: globalsArgs
-  } = _ref2;
-  const {
-    pseudo: parameter
-  } = parameters;
-  const {
-    pseudo: globals
-  } = globalsArgs;
-
-  // 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)(() => {
-    if (parameter !== globals && viewMode === "story") {
-      channel.emit(_coreEvents.UPDATE_GLOBALS, {
-        globals: {
-          pseudo: parameter
-        }
-      });
-    }
-  }, [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)(() => {
-    const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
-      applyParameter(element, globals || parameter);
-      shadowHosts.forEach(updateShadowHost);
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [globals, parameter, viewMode]);
-  return StoryFn();
-};
-
-// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
-exports.withPseudoState = withPseudoState;
-const rewriteStyleSheets = shadowRoot => {
-  let styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
-  if (shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets;
-  Array.from(styleSheets).forEach(sheet => (0, _rewriteStyleSheet.rewriteStyleSheet)(sheet, shadowRoot, shadowHosts));
-};
-
-// Only track shadow hosts for the current story
-channel.on(_coreEvents.STORY_CHANGED, () => shadowHosts.clear());
-
-// Reinitialize CSS enhancements every time the story changes
-channel.on(_coreEvents.STORY_RENDERED, () => rewriteStyleSheets());
-
-// Reinitialize CSS enhancements every time a docs page is rendered
-channel.on(_coreEvents.DOCS_RENDERED, () => 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
-    const shadowRoot = this._attachShadow({
-      ...init,
-      mode: "open"
-    });
-    // Wait for it to render and apply its styles before rewriting them
-    requestAnimationFrame(() => {
-      rewriteStyleSheets(shadowRoot);
-      updateShadowHost(shadowRoot.host);
-    });
-    return shadowRoot;
-  };
-}

package/dist/esm/PseudoStateTool.js

@@ -1,63 +0,0 @@
-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";
-const LinkTitle = styled.span(_ref => {
-  let {
-    active
-  } = _ref;
-  return {
-    color: active ? color.secondary : "inherit"
-  };
-});
-const LinkIcon = styled(Icons)(_ref2 => {
-  let {
-    active
-  } = _ref2;
-  return {
-    opacity: active ? 1 : 0,
-    path: {
-      fill: active ? color.secondary : "inherit"
-    }
-  };
-});
-const options = Object.keys(PSEUDO_STATES).sort();
-export const PseudoStateTool = () => {
-  const [{
-    pseudo
-  }, updateGlobals] = useGlobals();
-  const isActive = useCallback(option => pseudo?.[option] === true, [pseudo]);
-  const toggleOption = useCallback(option => () => updateGlobals({
-    pseudo: {
-      ...pseudo,
-      [option]: !isActive(option)
-    }
-  }), [pseudo]);
-  return /*#__PURE__*/React.createElement(WithTooltip, {
-    placement: "top",
-    trigger: "click",
-    tooltip: () => /*#__PURE__*/React.createElement(TooltipLinkList, {
-      links: options.map(option => ({
-        id: option,
-        title: /*#__PURE__*/React.createElement(LinkTitle, {
-          active: isActive(option)
-        }, ":", PSEUDO_STATES[option]),
-        right: /*#__PURE__*/React.createElement(LinkIcon, {
-          icon: "check",
-          width: 12,
-          height: 12,
-          active: isActive(option)
-        }),
-        onClick: toggleOption(option),
-        active: isActive(option)
-      }))
-    })
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    key: "pseudo-state",
-    title: "Select CSS pseudo states",
-    active: options.some(isActive)
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "button"
-  })));
-};

package/dist/esm/constants.js

@@ -1,20 +0,0 @@
-export const ADDON_ID = "storybook/pseudo-states";
-export const TOOL_ID = `${ADDON_ID}/tool`;
-
-// Pseudo-elements which are not allowed to have classes applied on them
-// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector
-export const EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
-
-// Dynamic pseudo-classes
-// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos
-export const 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

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

package/dist/esm/preset/preview.js

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

package/dist/esm/rewriteStyleSheet.js

@@ -1,67 +0,0 @@
-import { PSEUDO_STATES, EXCLUDED_PSEUDO_ELEMENTS } from "./constants";
-import { splitSelectors } from "./splitSelectors";
-const pseudoStates = Object.values(PSEUDO_STATES);
-const matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
-const matchAll = new RegExp(`:(${pseudoStates.join("|")})`, "g");
-const warnings = new Set();
-const warnOnce = message => {
-  if (warnings.has(message)) return;
-  // eslint-disable-next-line no-console
-  console.warn(message);
-  warnings.add(message);
-};
-const isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some(element => selector.endsWith(`${element}:${pseudoState}`));
-const rewriteRule = (cssText, selectorText, shadowRoot) => {
-  return cssText.replace(selectorText, splitSelectors(selectorText).flatMap(selector => {
-    if (selector.includes(".pseudo-")) {
-      return [];
-    }
-    if (!matchOne.test(selector)) {
-      return [selector];
-    }
-    const states = [];
-    const plainSelector = selector.replace(matchAll, (_, state) => {
-      states.push(state);
-      return "";
-    });
-    const classSelector = states.reduce((acc, state) => !isExcludedPseudoElement(selector, state) && acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`), selector);
-    if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
-      return [selector, classSelector].filter(Boolean);
-    }
-    const ancestorSelector = shadowRoot ? `:host(${states.map(s => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map(s => `.pseudo-${s}`).join("")} ${plainSelector}`;
-    return [selector, classSelector, ancestorSelector].filter(selector => selector && !selector.includes(":not()"));
-  }).join(", "));
-};
-
-// Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.
-// A sheet can only be rewritten once, and may carry over between stories.
-export const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
-  if (sheet.__pseudoStatesRewritten) return;
-  sheet.__pseudoStatesRewritten = true;
-  try {
-    let index = 0;
-    for (const {
-      cssText,
-      selectorText
-    } of sheet.cssRules) {
-      if (matchOne.test(selectorText)) {
-        const newRule = rewriteRule(cssText, selectorText, shadowRoot);
-        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 (e) {
-    if (e.toString().includes("cssRules")) {
-      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(e, sheet.href);
-    }
-  }
-};

package/dist/esm/rewriteStyleSheet.test.js

@@ -1,67 +0,0 @@
-import { rewriteStyleSheet } from "./rewriteStyleSheet";
-class Sheet {
-  constructor() {
-    this.__pseudoStatesRewritten = false;
-    for (var _len = arguments.length, rules = new Array(_len), _key = 0; _key < _len; _key++) {
-      rules[_key] = arguments[_key];
-    }
-    this.cssRules = rules.map(cssText => ({
-      cssText,
-      selectorText: cssText.slice(0, cssText.indexOf(" {"))
-    }));
-  }
-  deleteRule(index) {
-    this.cssRules.splice(index, 1);
-  }
-  insertRule(cssText, index) {
-    this.cssRules.splice(index, 0, cssText);
-  }
-}
-describe("rewriteStyleSheet", () => {
-  it("adds alternative selector targeting the element directly", () => {
-    const sheet = new Sheet("a:hover { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toContain("a.pseudo-hover");
-  });
-  it("adds alternative selector targeting an ancestor", () => {
-    const sheet = new Sheet("a:hover { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toContain(".pseudo-hover a");
-  });
-  it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
-    const sheet = new Sheet("::-webkit-scrollbar-thumb:hover { border-color: transparent; }");
-    rewriteStyleSheet(sheet);
-    console.log(sheet.cssRules[0]);
-    expect(sheet.cssRules[0]).not.toContain("::-webkit-scrollbar-thumb.pseudo-hover");
-  });
-  it("adds alternative selector for each pseudo selector", () => {
-    const sheet = new Sheet("a:hover, a:focus { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toContain("a.pseudo-hover");
-    expect(sheet.cssRules[0]).toContain("a.pseudo-focus");
-    expect(sheet.cssRules[0]).toContain(".pseudo-hover a");
-    expect(sheet.cssRules[0]).toContain(".pseudo-focus a");
-  });
-  it("keeps non-pseudo selectors as-is", () => {
-    const sheet = new Sheet("a.class, a:hover, a:focus, a#id { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toContain("a.class");
-    expect(sheet.cssRules[0]).toContain("a#id");
-  });
-  it("supports combined pseudo selectors", () => {
-    const sheet = new Sheet("a:hover:focus { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toContain("a.pseudo-hover.pseudo-focus");
-    expect(sheet.cssRules[0]).toContain(".pseudo-hover.pseudo-focus a");
-  });
-  it('supports ":host"', () => {
-    const sheet = new Sheet(":host(:hover) { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toEqual(":host(:hover), :host(.pseudo-hover) { color: red }");
-  });
-  it('supports ":not"', () => {
-    const sheet = new Sheet(":not(:hover) { color: red }");
-    rewriteStyleSheet(sheet);
-    expect(sheet.cssRules[0]).toEqual(":not(:hover), :not(.pseudo-hover) { color: red }");
-  });
-});

package/dist/esm/splitSelectors.js

@@ -1,29 +0,0 @@
-const isAtRule = selector => selector.indexOf("@") === 0;
-export const splitSelectors = selectors => {
-  if (isAtRule(selectors)) return [selectors];
-  let result = [];
-  let parentheses = 0;
-  let brackets = 0;
-  let selector = "";
-  for (let i = 0, len = selectors.length; i < len; i++) {
-    const char = selectors[i];
-    if (char === "(") {
-      parentheses += 1;
-    } else if (char === ")") {
-      parentheses -= 1;
-    } else if (char === "[") {
-      brackets += 1;
-    } else if (char === "]") {
-      brackets -= 1;
-    } else if (char === ",") {
-      if (!parentheses && !brackets) {
-        result.push(selector.trim());
-        selector = "";
-        continue;
-      }
-    }
-    selector += char;
-  }
-  result.push(selector.trim());
-  return result;
-};

package/dist/esm/splitSelectors.test.js

@@ -1,15 +0,0 @@
-import { splitSelectors } from "./splitSelectors";
-describe("splitSelectors", () => {
-  test("handles basic selectors", () => {
-    expect(splitSelectors(".a")).toEqual([".a"]);
-    expect(splitSelectors(".a, .b")).toEqual([".a", ".b"]);
-  });
-  test("supports ::slotted and :is", () => {
-    expect(splitSelectors("::slotted(:is(button, a):active)")).toEqual(["::slotted(:is(button, a):active)"]);
-    expect(splitSelectors("::slotted(:is(button, a):active), ::slotted(:is(button, a):hover)")).toEqual(["::slotted(:is(button, a):active)", "::slotted(:is(button, a):hover)"]);
-  });
-  test("supports :host", () => {
-    expect(splitSelectors(":host([type='secondary']) ::slotted(:is(button, a)), :host([type='primary']) ::slotted(:is(button, a):active)")).toEqual([":host([type='secondary']) ::slotted(:is(button, a))", ":host([type='primary']) ::slotted(:is(button, a):active)"]);
-    expect(splitSelectors(":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))")).toEqual([":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))"]);
-  });
-});

package/dist/esm/withPseudoState.js

@@ -1,121 +0,0 @@
-/* eslint-env browser */
-import { addons, useEffect } from "@storybook/addons";
-import { DOCS_RENDERED, STORY_CHANGED, STORY_RENDERED, UPDATE_GLOBALS } from "@storybook/core-events";
-import { PSEUDO_STATES } from "./constants";
-import { rewriteStyleSheet } from "./rewriteStyleSheet";
-const channel = addons.getChannel();
-const shadowHosts = new Set();
-
-// 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.
-const applyClasses = (element, classnames) => {
-  element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
-};
-const applyParameter = (rootElement, parameter) => {
-  const map = new Map([[rootElement, new Set()]]);
-  const add = (target, state) => map.set(target, new Set([...(map.get(target) || []), state]));
-  Object.entries(parameter || {}).forEach(_ref => {
-    let [state, value] = _ref;
-    if (typeof value === "boolean") {
-      // default API - applying pseudo class to root element.
-      add(rootElement, value && state);
-    } else if (typeof value === "string") {
-      // explicit selectors API - applying pseudo class to a specific element
-      rootElement.querySelectorAll(value).forEach(el => add(el, state));
-    } else if (Array.isArray(value)) {
-      // explicit selectors API - we have an array (of strings) recursively handle each one
-      value.forEach(sel => rootElement.querySelectorAll(sel).forEach(el => add(el, state)));
-    }
-  });
-  map.forEach((states, target) => {
-    const classnames = [];
-    states.forEach(key => PSEUDO_STATES[key] && classnames.push(`pseudo-${PSEUDO_STATES[key]}`));
-    applyClasses(target, classnames);
-  });
-};
-
-// 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.
-const updateShadowHost = shadowHost => {
-  const classnames = new Set();
-  for (let element = shadowHost.parentElement; element; element = element.parentElement) {
-    if (!element.className) continue;
-    element.className.split(" ").filter(classname => classname.indexOf("pseudo-") === 0).forEach(classname => classnames.add(classname));
-  }
-  applyClasses(shadowHost, classnames);
-};
-
-// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
-export const withPseudoState = (StoryFn, _ref2) => {
-  let {
-    viewMode,
-    parameters,
-    id,
-    globals: globalsArgs
-  } = _ref2;
-  const {
-    pseudo: parameter
-  } = parameters;
-  const {
-    pseudo: globals
-  } = globalsArgs;
-
-  // 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(() => {
-    if (parameter !== globals && viewMode === "story") {
-      channel.emit(UPDATE_GLOBALS, {
-        globals: {
-          pseudo: parameter
-        }
-      });
-    }
-  }, [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(() => {
-    const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
-      applyParameter(element, globals || parameter);
-      shadowHosts.forEach(updateShadowHost);
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [globals, parameter, viewMode]);
-  return StoryFn();
-};
-
-// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
-const rewriteStyleSheets = shadowRoot => {
-  let styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
-  if (shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets;
-  Array.from(styleSheets).forEach(sheet => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
-};
-
-// Only track shadow hosts for the current story
-channel.on(STORY_CHANGED, () => shadowHosts.clear());
-
-// Reinitialize CSS enhancements every time the story changes
-channel.on(STORY_RENDERED, () => rewriteStyleSheets());
-
-// Reinitialize CSS enhancements every time a docs page is rendered
-channel.on(DOCS_RENDERED, () => 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
-    const shadowRoot = this._attachShadow({
-      ...init,
-      mode: "open"
-    });
-    // Wait for it to render and apply its styles before rewriting them
-    requestAnimationFrame(() => {
-      rewriteStyleSheets(shadowRoot);
-      updateShadowHost(shadowRoot.host);
-    });
-    return shadowRoot;
-  };
-}

package/preset.js

@@ -1,9 +0,0 @@
-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 };