@storybook/addon-backgrounds 7.5.0-alpha.2 → 7.5.0-alpha.3

package/dist/{chunk-GRJZJKJ4.mjs → chunk-OKHCZ3TL.mjs}

@@ -6,6 +6,6 @@ var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var {document,window
         Backgrounds Addon: could not find the default color "${defaultName}".
         These are the available colors for your story based on your configuration:
         ${availableColors}.
-      `);}return "transparent"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};
+      `);}return "transparent"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};
 
 export { ADDON_ID, PARAM_KEY, addBackgroundStyle, addGridStyle, clearStyles, getBackgroundColorByName, isReduceMotionEnabled };

package/dist/index.js

@@ -1 +1 @@
-var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{default:()=>src_default});module.exports=__toCommonJS(src_exports);var src_default={};
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{default:()=>src_default});module.exports=__toCommonJS(src_exports);var src_default={};

package/dist/manager.js

@@ -1,4 +1,4 @@
-var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react3=__toESM(require("react")),import_manager_api3=require("@storybook/manager-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_react=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_manager_api=require("@storybook/manager-api"),import_client_logger2=require("@storybook/client-logger"),import_components=require("@storybook/components");var import_theming=require("@storybook/theming"),ColorIcon=import_theming.styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global;var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react3=__toESM(require("react")),import_manager_api3=require("@storybook/manager-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_react=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_manager_api=require("@storybook/manager-api"),import_client_logger2=require("@storybook/client-logger"),import_components=require("@storybook/components");var import_theming=require("@storybook/theming"),ColorIcon=import_theming.styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global;var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
         Backgrounds Addon: could not find the default color "${defaultName}".
         These are the available colors for your story based on your configuration:
         ${availableColors}.

package/dist/manager.mjs

@@ -1,4 +1,4 @@
-import { PARAM_KEY, getBackgroundColorByName, ADDON_ID } from './chunk-GRJZJKJ4.mjs';
+import { PARAM_KEY, getBackgroundColorByName, ADDON_ID } from './chunk-OKHCZ3TL.mjs';
 import React, { memo, useState, useMemo, useCallback, Fragment } from 'react';
 import { useParameter, useGlobals, addons, types } from '@storybook/manager-api';
 import memoize from 'memoizerific';

package/dist/preview.js

@@ -1,8 +1,8 @@
-var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,globals:()=>globals,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_preview_api=require("@storybook/preview-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global,isReduceMotionEnabled=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,globals:()=>globals,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_preview_api=require("@storybook/preview-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global,isReduceMotionEnabled=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
         Backgrounds Addon: could not find the default color "${defaultName}".
         These are the available colors for your story based on your configuration:
         ${availableColors}.
-      `)}return"transparent"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle)},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement.removeChild(element)},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else{let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style)}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else{let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement.insertBefore(style,existingGridStyle):document.head.appendChild(style)}};var withBackground=(StoryFn,context)=>{var _a;let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=(_a=globals2[PARAM_KEY])==null?void 0:_a.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=(0,import_preview_api.useMemo)(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=(0,import_preview_api.useMemo)(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=(0,import_preview_api.useMemo)(()=>{let transitionStyle="transition: background-color 0.3s;";return`
+      `)}return"transparent"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle)},clearStyle=selector=>{var _a;let element=document.getElementById(selector);element&&((_a=element.parentElement)==null||_a.removeChild(element))},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else{let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style)}},addBackgroundStyle=(selector,css,storyId)=>{var _a;let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else{let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?(_a=existingGridStyle.parentElement)==null||_a.insertBefore(style,existingGridStyle):document.head.appendChild(style)}};var withBackground=(StoryFn,context)=>{var _a;let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=(_a=globals2[PARAM_KEY])==null?void 0:_a.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=(0,import_preview_api.useMemo)(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=(0,import_preview_api.useMemo)(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=(0,import_preview_api.useMemo)(()=>{let transitionStyle="transition: background-color 0.3s;";return`
       ${selector} {
         background: ${selectedBackgroundColor} !important;
         ${isReduceMotionEnabled()?"":transitionStyle}

package/dist/preview.mjs

@@ -1,4 +1,4 @@
-import { PARAM_KEY, getBackgroundColorByName, isReduceMotionEnabled, clearStyles, addBackgroundStyle, addGridStyle } from './chunk-GRJZJKJ4.mjs';
+import { PARAM_KEY, getBackgroundColorByName, isReduceMotionEnabled, clearStyles, addBackgroundStyle, addGridStyle } from './chunk-OKHCZ3TL.mjs';
 import { useMemo, useEffect } from '@storybook/preview-api';
 
 var withBackground=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=globals2[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=useMemo(()=>{let transitionStyle="transition: background-color 0.3s;";return `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.5.0-alpha.2",
+  "version": "7.5.0-alpha.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -77,14 +77,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.5.0-alpha.2",
-    "@storybook/components": "7.5.0-alpha.2",
-    "@storybook/core-events": "7.5.0-alpha.2",
+    "@storybook/client-logger": "7.5.0-alpha.3",
+    "@storybook/components": "7.5.0-alpha.3",
+    "@storybook/core-events": "7.5.0-alpha.3",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.5.0-alpha.2",
-    "@storybook/preview-api": "7.5.0-alpha.2",
-    "@storybook/theming": "7.5.0-alpha.2",
-    "@storybook/types": "7.5.0-alpha.2",
+    "@storybook/manager-api": "7.5.0-alpha.3",
+    "@storybook/preview-api": "7.5.0-alpha.3",
+    "@storybook/theming": "7.5.0-alpha.3",
+    "@storybook/types": "7.5.0-alpha.3",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },