storybook-addon-pseudo-states 0.0.0-pr-31123-sha-1dad2d39

package/README.md

@@ -0,0 +1,83 @@
+<img src="https://user-images.githubusercontent.com/321738/105224055-f6c29c00-5b5c-11eb-83c9-ba28a7fbadf2.gif" width="80" height="80" alt="">
+
+# Storybook Pseudo States
+
+Toggle CSS pseudo states for your components in Storybook.
+
+<p>
+  <img src="https://user-images.githubusercontent.com/321738/105100903-51e98580-5aae-11eb-82bf-2b625c5a88a3.gif" width="560" alt="" />
+</p>
+
+## 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`) 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
+
+Because this addon rewrites your stylesheets rather than toggle the actual browser behavior like DevTools does, it won't render any of the default user agent (browser) styles. Unfortunately there's no JavaScript API to toggle real pseudo states without using a browser extension.
+
+## Getting Started
+
+To install the addon:
+
+```sh
+npx storybook add storybook-addon-pseudo-states
+```
+
+For Storybook versions before 9.0, use v4.0.3 of the addon:
+
+```sh
+npx storybook add storybook-addon-pseudo-states@4.0.3
+```
+
+### Setting default story states
+
+You can have your stories automatically use a specific set of pseudo states, by setting the `pseudo` property on `parameters`:
+
+```jsx
+export const Hover = () => <Button>Label</Button>
+Hover.parameters = { pseudo: { hover: true } }
+```
+
+This is what enables snapshot testing your pseudo states in [Chromatic](https://www.chromatic.com/).
+
+### Targeting specific elements
+
+If you don't want to force or toggle pseudo styles to all elements that use them, but rather only enable them on specific elements, you can set a string or array value instead of a boolean:
+
+```jsx
+export const Buttons = () => (
+  <>
+    <Button id="one">Hover</Button>
+    <Button id="two">Hover focus</Button>
+    <Button id="three">Hover focus active</Button>
+  </>
+)
+Buttons.parameters = {
+  pseudo: {
+    hover: ["#one", "#two", "#three"],
+    focus: ["#two", "#three"],
+    active: "#three",
+  },
+}
+```
+
+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 injects 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/index.d.ts

@@ -0,0 +1,7 @@
+import * as core_dist_types from 'storybook/internal/types';
+
+declare const PARAM_KEY = "pseudo";
+
+declare const _default: () => core_dist_types.ProjectAnnotations<core_dist_types.Renderer>;
+
+export { PARAM_KEY, _default as default };

package/dist/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var previewApi = require('storybook/preview-api');
+var coreEvents = require('storybook/internal/core-events');
+
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals});var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let cssRule of ruleContainer.cssRules){index++;let numRewritten=0;if(cssRule.__processed)numRewritten=cssRule.__pseudoStatesRewrittenCount;else {if("cssRules"in cssRule&&cssRule.cssRules.length)numRewritten=rewriteRuleContainer(cssRule,rewriteLimit-count,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=previewApi.addons.getChannel(),shadowHosts=new Set,applyClasses=(element,classnames)=>{Object.values(PSEUDO_STATES).forEach(state=>{element.classList.remove(`pseudo-${state}`),element.classList.remove(`pseudo-${state}-all`);}),classnames.forEach(classname=>element.classList.add(classname));};function querySelectorPiercingShadowDOM(root,selector){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=previewApi.useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=previewApi.useRef(globals);return previewApi.useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(coreEvents.UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),previewApi.useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),shadowRoot&&shadowHosts&&shadowHosts.add(shadowRoot.host);};channel.on(coreEvents.STORY_CHANGED,()=>shadowHosts.clear());channel.on(coreEvents.STORY_RENDERED,()=>rewriteStyleSheets());channel.on(coreEvents.GLOBALS_UPDATED,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_RE_RENDER,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_REMOUNT,()=>rewriteStyleSheets());channel.on(coreEvents.DOCS_RENDERED,()=>rewriteStyleSheets());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};var index_default=()=>previewApi.definePreview(preview_exports);
+
+exports.PARAM_KEY = PARAM_KEY;
+exports.default = index_default;

package/dist/index.mjs

@@ -0,0 +1,6 @@
+import { addons, definePreview, useMemo, useRef, useEffect } from 'storybook/preview-api';
+import { STORY_CHANGED, STORY_RENDERED, GLOBALS_UPDATED, FORCE_RE_RENDER, FORCE_REMOUNT, DOCS_RENDERED, UPDATE_GLOBALS } from 'storybook/internal/core-events';
+
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators,initialGlobals:()=>initialGlobals});var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let cssRule of ruleContainer.cssRules){index++;let numRewritten=0;if(cssRule.__processed)numRewritten=cssRule.__pseudoStatesRewrittenCount;else {if("cssRules"in cssRule&&cssRule.cssRules.length)numRewritten=rewriteRuleContainer(cssRule,rewriteLimit-count,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=addons.getChannel(),shadowHosts=new Set,applyClasses=(element,classnames)=>{Object.values(PSEUDO_STATES).forEach(state=>{element.classList.remove(`pseudo-${state}`),element.classList.remove(`pseudo-${state}-all`);}),classnames.forEach(classname=>element.classList.add(classname));};function querySelectorPiercingShadowDOM(root,selector){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=useRef(globals);return useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),shadowRoot&&shadowHosts&&shadowHosts.add(shadowRoot.host);};channel.on(STORY_CHANGED,()=>shadowHosts.clear());channel.on(STORY_RENDERED,()=>rewriteStyleSheets());channel.on(GLOBALS_UPDATED,()=>rewriteStyleSheets());channel.on(FORCE_RE_RENDER,()=>rewriteStyleSheets());channel.on(FORCE_REMOUNT,()=>rewriteStyleSheets());channel.on(DOCS_RENDERED,()=>rewriteStyleSheets());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};var index_default=()=>definePreview(preview_exports);
+
+export { PARAM_KEY, index_default as default };

package/dist/manager.js

@@ -0,0 +1,7 @@
+import { addons, types, useGlobals } from 'storybook/manager-api';
+import React, { useCallback } from 'react';
+import { Checkbox, WithTooltip, TooltipLinkList, IconButton } from 'storybook/internal/components';
+import { styled, color } from 'storybook/internal/theming';
+import { RefreshIcon, ButtonIcon } from '@storybook/icons';
+
+var ADDON_ID="storybook/pseudo-states",TOOL_ID=`${ADDON_ID}/tool`,PARAM_KEY="pseudo";var PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var LinkTitle=styled.span(({active})=>({color:active?color.secondary:"inherit"})),options=Object.keys(PSEUDO_STATES).sort(),PseudoStateTool=()=>{let[globals,updateGlobals]=useGlobals(),pseudo=globals[PARAM_KEY],isActive=useCallback(option=>pseudo?pseudo[option]===!0:!1,[pseudo]),hasActive=options.some(isActive),reset={id:"reset",title:"Reset pseudo states",icon:React.createElement(RefreshIcon,{style:{opacity:hasActive?1:.7}}),disabled:!hasActive,onClick:()=>updateGlobals({[PARAM_KEY]:{}})},toggleOption=useCallback(option=>()=>{let{[option]:value,...rest}=pseudo;updateGlobals({[PARAM_KEY]:value===!0?rest:{...rest,[option]:!0}});},[pseudo,updateGlobals]),links=options.map(option=>{let active=isActive(option);return {id:option,title:React.createElement(LinkTitle,{active},":",PSEUDO_STATES[option]),input:React.createElement(Checkbox,{checked:active,onChange:toggleOption(option)}),active}});return React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnOutsideClick:!0,tooltip:React.createElement(TooltipLinkList,{links:[[reset],links]})},React.createElement(IconButton,{key:"pseudo-states",title:"Select CSS pseudo states",active:hasActive},React.createElement(ButtonIcon,null)))};addons.register(ADDON_ID,()=>{addons.add(TOOL_ID,{type:types.TOOL,title:"CSS pseudo states",match:({viewMode})=>viewMode==="story",render:PseudoStateTool});});

package/dist/preview.d.ts

@@ -0,0 +1,8 @@
+import * as core_dist_csf from 'storybook/internal/csf';
+
+declare const decorators: core_dist_csf.DecoratorFunction[];
+declare const initialGlobals: {
+    pseudo: boolean;
+};
+
+export { decorators, initialGlobals };

package/dist/preview.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var coreEvents = require('storybook/internal/core-events');
+var previewApi = require('storybook/preview-api');
+
+var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let cssRule of ruleContainer.cssRules){index++;let numRewritten=0;if(cssRule.__processed)numRewritten=cssRule.__pseudoStatesRewrittenCount;else {if("cssRules"in cssRule&&cssRule.cssRules.length)numRewritten=rewriteRuleContainer(cssRule,rewriteLimit-count,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=previewApi.addons.getChannel(),shadowHosts=new Set,applyClasses=(element,classnames)=>{Object.values(PSEUDO_STATES).forEach(state=>{element.classList.remove(`pseudo-${state}`),element.classList.remove(`pseudo-${state}-all`);}),classnames.forEach(classname=>element.classList.add(classname));};function querySelectorPiercingShadowDOM(root,selector){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=previewApi.useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=previewApi.useRef(globals);return previewApi.useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(coreEvents.UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),previewApi.useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),shadowRoot&&shadowHosts&&shadowHosts.add(shadowRoot.host);};channel.on(coreEvents.STORY_CHANGED,()=>shadowHosts.clear());channel.on(coreEvents.STORY_RENDERED,()=>rewriteStyleSheets());channel.on(coreEvents.GLOBALS_UPDATED,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_RE_RENDER,()=>rewriteStyleSheets());channel.on(coreEvents.FORCE_REMOUNT,()=>rewriteStyleSheets());channel.on(coreEvents.DOCS_RENDERED,()=>rewriteStyleSheets());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};
+
+exports.decorators = decorators;
+exports.initialGlobals = initialGlobals;

package/dist/preview.mjs

@@ -0,0 +1,6 @@
+import { STORY_CHANGED, STORY_RENDERED, GLOBALS_UPDATED, FORCE_RE_RENDER, FORCE_REMOUNT, DOCS_RENDERED, UPDATE_GLOBALS } from 'storybook/internal/core-events';
+import { addons, useMemo, useRef, useEffect } from 'storybook/preview-api';
+
+var PARAM_KEY="pseudo",EXCLUDED_PSEUDO_ELEMENT_PATTERNS=["::-(webkit|moz|ms)-[a-z-]+","::part\\([^)]+\\)"],PSEUDO_STATES={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var isAtRule=selector=>selector.indexOf("@")===0,splitSelectors=selectors=>{if(isAtRule(selectors))return [selectors];let result=[],parentheses=0,brackets=0,selector="";for(let i=0,len=selectors.length;i<len;i++){let 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===","&&!parentheses&&!brackets){result.push(selector.trim()),selector="";continue}selector+=char;}return result.push(selector.trim()),result};var pseudoStates=Object.values(PSEUDO_STATES),pseudoStatesPattern=`:(${pseudoStates.join("|")})`,matchOne=new RegExp(pseudoStatesPattern),matchAll=new RegExp(pseudoStatesPattern,"g"),warnings=new Set,warnOnce=message=>{warnings.has(message)||(console.warn(message),warnings.add(message));},replacePseudoStates=(selector,allClass)=>{let negativeLookbehind=`(?<!(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*)`;return pseudoStates.reduce((acc,state)=>acc.replace(new RegExp(`${negativeLookbehind}:${state}`,"g"),`.pseudo-${state}${allClass?"-all":""}`),selector)},replacePseudoStatesWithAncestorSelector=(selector,forShadowDOM,additionalHostSelectors)=>{let extracted=extractPseudoStates(selector);if(extracted.states.length===0&&!additionalHostSelectors)return selector;let selectors=`${additionalHostSelectors??""}${extracted.states.map(s=>`.pseudo-${s}-all`).join("")}`,{withoutPseudoStates}=extracted;return withoutPseudoStates=withoutPseudoStates.replace(":host-context(*)","").trimStart(),withoutPseudoStates.startsWith(":host-context(")?withoutPseudoStates.replace(/(?<=:host-context\(\S+)\)/,`)${selectors}`):forShadowDOM?`:host(${selectors}) ${withoutPseudoStates}`:`${selectors} ${withoutPseudoStates}`},extractPseudoStates=selector=>{let states=new Set,withoutPseudoStates=selector.replace(matchAll,(_,state)=>(states.add(state),"")).replaceAll(/(?<!is)\(\)/g,"(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,"")||"*";return {states:Array.from(states),withoutPseudoStates}},rewriteNotSelectors=(selector,forShadowDOM)=>[...selector.matchAll(/:not\(([^)]+)\)/g)].reduce((acc,match)=>{let originalNot=match[0],selectorList=match[1],rewrittenNot=rewriteNotSelector(selectorList,forShadowDOM);return acc.replace(originalNot,rewrittenNot)},selector),rewriteNotSelector=(negatedSelectorList,forShadowDOM)=>{let rewrittenSelectors=[];for(let negatedSelector of negatedSelectorList.split(/,\s*/))rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector,forShadowDOM));return `:not(${rewrittenSelectors.join(", ")})`},rewriteRule=({cssText,selectorText},forShadowDOM)=>cssText.replace(selectorText,splitSelectors(selectorText).flatMap(selector=>{if(selector.includes(".pseudo-"))return [];let replacementSelectors=[selector];if(!matchOne.test(selector))return replacementSelectors;let classSelector=replacePseudoStates(selector);classSelector!==selector&&replacementSelectors.push(classSelector);let ancestorSelector="";if(selector.startsWith(":host(")){let matches=selector.match(/^:host\((\S+)\)\s+(.+)$/);if(matches&&matchOne.test(matches[2])){let hostInnerSelector=matches[1],descendantSelector=matches[2];hostInnerSelector=replacePseudoStates(hostInnerSelector,!0),descendantSelector=rewriteNotSelectors(descendantSelector,!0),ancestorSelector=replacePseudoStatesWithAncestorSelector(descendantSelector,!0,hostInnerSelector);}else ancestorSelector=replacePseudoStates(selector,!0);}else {let withNotsReplaced=rewriteNotSelectors(selector,forShadowDOM);ancestorSelector=replacePseudoStatesWithAncestorSelector(withNotsReplaced,forShadowDOM);}return replacementSelectors.push(ancestorSelector),replacementSelectors}).join(", ")),rewriteStyleSheet=(sheet,forShadowDOM=!1)=>{try{let count=rewriteRuleContainer(sheet,1e3,forShadowDOM);return count>=1e3&&warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."),count>0}catch(e){return String(e).includes("cssRules")?warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`):console.error(e,sheet.href),!1}},rewriteRuleContainer=(ruleContainer,rewriteLimit,forShadowDOM)=>{let count=0,index=-1;for(let cssRule of ruleContainer.cssRules){index++;let numRewritten=0;if(cssRule.__processed)numRewritten=cssRule.__pseudoStatesRewrittenCount;else {if("cssRules"in cssRule&&cssRule.cssRules.length)numRewritten=rewriteRuleContainer(cssRule,rewriteLimit-count,forShadowDOM);else {if(!("selectorText"in cssRule))continue;let styleRule=cssRule;if(matchOne.test(styleRule.selectorText)){let newRule=rewriteRule(styleRule,forShadowDOM);ruleContainer.deleteRule(index),ruleContainer.insertRule(newRule,index),numRewritten=1;}}cssRule.__processed=!0,cssRule.__pseudoStatesRewrittenCount=numRewritten;}if(count+=numRewritten,count>=rewriteLimit)break}return count};var channel=addons.getChannel(),shadowHosts=new Set,applyClasses=(element,classnames)=>{Object.values(PSEUDO_STATES).forEach(state=>{element.classList.remove(`pseudo-${state}`),element.classList.remove(`pseudo-${state}-all`);}),classnames.forEach(classname=>element.classList.add(classname));};function querySelectorPiercingShadowDOM(root,selector){let results=[];return root.querySelectorAll("*").forEach(el=>{el.shadowRoot&&results.push(...querySelectorPiercingShadowDOM(el.shadowRoot,selector));}),results.push(...root.querySelectorAll(selector).values()),results}var applyParameter=(rootElement,parameter={})=>{let map=new Map([[rootElement,new Set]]),add=(target,state)=>map.set(target,new Set([...map.get(target)||[],state]));Object.entries(parameter||{}).forEach(([state,value])=>{typeof value=="boolean"?value&&add(rootElement,`${state}-all`):typeof value=="string"?querySelectorPiercingShadowDOM(rootElement,value).forEach(el=>add(el,state)):Array.isArray(value)&&value.forEach(sel=>querySelectorPiercingShadowDOM(rootElement,sel).forEach(el=>add(el,state)));}),map.forEach((states,target)=>{let classnames=new Set;states.forEach(key=>{let keyWithoutAll=key.replace("-all","");PSEUDO_STATES[key]?classnames.add(`pseudo-${PSEUDO_STATES[key]}`):PSEUDO_STATES[keyWithoutAll]&&classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);}),applyClasses(target,classnames);});},updateShadowHost=shadowHost=>{let classnames=new Set;shadowHost.className.split(" ").filter(classname=>classname.match(/^pseudo-(.(?!-all))+$/)).forEach(classname=>classnames.add(classname));for(let node=shadowHost.parentNode;node;){if(node instanceof ShadowRoot){node=node.host;continue}if(node instanceof Element){let element=node;element.className&&element.className.split(" ").filter(classname=>classname.match(/^pseudo-.+-all$/)!==null).forEach(classname=>classnames.add(classname));}node=node.parentNode;}applyClasses(shadowHost,classnames);},pseudoConfig=parameter=>{let{rootSelector,...pseudoStateConfig}=parameter||{};return pseudoStateConfig},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])),withPseudoState=(StoryFn,{viewMode,parameters,id,globals:globalsArgs})=>{let{pseudo:parameter}=parameters,{pseudo:globals}=globalsArgs,{rootSelector}=parameter||{},rootElement=useMemo(()=>rootSelector?document.querySelector(rootSelector):viewMode==="docs"?document.getElementById(`story--${id}`):document.getElementById("storybook-root")||document.getElementById("root"),[rootSelector,viewMode,id]),globalsRef=useRef(globals);return useEffect(()=>{let config=pseudoConfig(parameter);viewMode==="story"&&!equals(config,globalsRef.current)&&channel.emit(UPDATE_GLOBALS,{globals:{pseudo:config}});},[parameter,viewMode]),useEffect(()=>{if(!rootElement)return;let timeout=setTimeout(()=>{applyParameter(rootElement,globals||pseudoConfig(parameter)),shadowHosts.forEach(updateShadowHost);},0);return ()=>clearTimeout(timeout)},[rootElement,globals,parameter]),StoryFn()},rewriteStyleSheets=shadowRoot=>{let styleSheets=Array.from(shadowRoot?shadowRoot.styleSheets:document.styleSheets);shadowRoot?.adoptedStyleSheets?.length&&(styleSheets=shadowRoot.adoptedStyleSheets),styleSheets.forEach(sheet=>rewriteStyleSheet(sheet,!!shadowRoot)),shadowRoot&&shadowHosts&&shadowHosts.add(shadowRoot.host);};channel.on(STORY_CHANGED,()=>shadowHosts.clear());channel.on(STORY_RENDERED,()=>rewriteStyleSheets());channel.on(GLOBALS_UPDATED,()=>rewriteStyleSheets());channel.on(FORCE_RE_RENDER,()=>rewriteStyleSheets());channel.on(FORCE_REMOUNT,()=>rewriteStyleSheets());channel.on(DOCS_RENDERED,()=>rewriteStyleSheets());Element.prototype.attachShadow&&(Element.prototype._attachShadow=Element.prototype.attachShadow,Element.prototype.attachShadow=function(init){let shadowRoot=this._attachShadow({...init,mode:"open"});return requestAnimationFrame(()=>{rewriteStyleSheets(shadowRoot),shadowHosts.has(shadowRoot.host)&&updateShadowHost(shadowRoot.host);}),shadowRoot});var decorators=[withPseudoState],initialGlobals={[PARAM_KEY]:!1};
+
+export { decorators, initialGlobals };

package/manager.js

@@ -0,0 +1 @@
+import './dist/manager';

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "storybook-addon-pseudo-states",
+  "version": "0.0.0-pr-31123-sha-1dad2d39",
+  "description": "CSS pseudo states for Storybook",
+  "keywords": [
+    "storybook",
+    "pseudo states",
+    "style",
+    "test"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/pseudo-states",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/addons/pseudo-states"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.mjs",
+      "require": "./dist/preview.js"
+    },
+    "./manager": "./dist/manager.js",
+    "./register": "./dist/manager.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "dist/**/*",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
+  },
+  "devDependencies": {
+    "@storybook/icons": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "storybook": "^0.0.0-pr-31123-sha-1dad2d39"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "exportEntries": [
+      "./src/index.ts"
+    ],
+    "managerEntries": [
+      "./src/manager.ts"
+    ],
+    "previewEntries": [
+      "./src/preview.ts"
+    ]
+  },
+  "storybook": {
+    "displayName": "Pseudo States",
+    "icon": "https://user-images.githubusercontent.com/321738/105224055-f6c29c00-5b5c-11eb-83c9-ba28a7fbadf2.gif",
+    "unsupportedFrameworks": [
+      "react-native"
+    ]
+  }
+}

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/preview';