storybook 9.0.0-alpha.8 → 9.0.0-beta.0

package/assets/server/base-preview-head.html

@@ -1,8 +1,7 @@
 <base target="_parent" />
 
 <style>
-  /* While we aren't showing the main block yet, but still preparing, we want everything the user
-     has rendered, which may or may not be in #storybook-root, to be display none */
+  /* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
   .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
     display: none;
   }
@@ -437,7 +436,6 @@
 
 <script>
   /* globals window */
-  /* eslint-disable no-underscore-dangle */
   try {
     if (window.top !== window) {
       window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;

package/bin/index.cjs

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 const majorNodeVersion = parseInt(process.versions.node, 10);
-if (majorNodeVersion < 18) {
-  console.error('To run Storybook you need to have Node.js 18 or higher');
+if (majorNodeVersion < 20) {
+  console.error('To run Storybook you need to have Node.js 20 or higher');
   process.exit(1);
 }
 

package/dist/actions/decorator.js

@@ -1,18 +1,17 @@
-var j = Object.defineProperty;
-var r = (o, e) => j(o, "name", { value: e, configurable: !0 });
+var R = Object.defineProperty;
+var r = (e, o) => R(e, "name", { value: o, configurable: !0 });
 
 // src/actions/decorator.ts
-import { global as F } from "@storybook/global";
-import { makeDecorator as M, useEffect as C } from "storybook/preview-api";
+import { makeDecorator as T, useEffect as k } from "storybook/preview-api";
 
 // src/actions/constants.ts
-var h = "actions", y = "storybook/actions", L = `${y}/panel`, g = `${y}/action-event`, W = `${y}/action-clear`;
+var h = "actions", y = "storybook/actions", B = `${y}/panel`, g = `${y}/action-event`, H = `${y}/action-clear`;
 
 // src/actions/runtime/action.ts
-import { ImplicitActionsDuringRendering as S } from "storybook/internal/preview-errors";
+import { ImplicitActionsDuringRendering as D } from "storybook/internal/preview-errors";
 import { global as E } from "@storybook/global";
-import { addons as I } from "storybook/preview-api";
-import { v4 as P } from "uuid";
+import { addons as j } from "storybook/preview-api";
+import { v4 as S } from "uuid";
 
 // src/actions/runtime/configureActions.ts
 var a = {
@@ -22,72 +21,68 @@ var a = {
 };
 
 // src/actions/runtime/action.ts
-var A = /* @__PURE__ */ r((o, e) => {
-  let t = Object.getPrototypeOf(o);
-  return !t || e(t) ? t : A(t, e);
-}, "findProto"), x = /* @__PURE__ */ r((o) => !!(typeof o == "object" && o && A(o, (e) => /^Synthetic(?:Base)?Event$/.test(e.constructor.name)) &&
-typeof o.persist == "function"), "isReactSyntheticEvent"), k = /* @__PURE__ */ r((o) => {
-  if (x(o)) {
-    let e = Object.create(
-      o.constructor.prototype,
-      Object.getOwnPropertyDescriptors(o)
+var A = /* @__PURE__ */ r((e, o) => {
+  let t = Object.getPrototypeOf(e);
+  return !t || o(t) ? t : A(t, o);
+}, "findProto"), I = /* @__PURE__ */ r((e) => !!(typeof e == "object" && e && A(e, (o) => /^Synthetic(?:Base)?Event$/.test(o.constructor.name)) &&
+typeof e.persist == "function"), "isReactSyntheticEvent"), P = /* @__PURE__ */ r((e) => {
+  if (I(e)) {
+    let o = Object.create(
+      e.constructor.prototype,
+      Object.getOwnPropertyDescriptors(e)
     );
-    e.persist();
-    let t = Object.getOwnPropertyDescriptor(e, "view"), n = t?.value;
-    return typeof n == "object" && n?.constructor.name === "Window" && Object.defineProperty(e, "view", {
+    o.persist();
+    let t = Object.getOwnPropertyDescriptor(o, "view"), n = t?.value;
+    return typeof n == "object" && n?.constructor.name === "Window" && Object.defineProperty(o, "view", {
       ...t,
       value: Object.create(n.constructor.prototype)
-    }), e;
+    }), o;
   }
-  return o;
-}, "serializeArg"), T = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? P() : (
+  return e;
+}, "serializeArg"), x = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? S() : (
   // pseudo random id, example response lo1e7zm4832bkr7yfl7
   Date.now().toString(36) + Math.random().toString(36).substring(2)
 ), "generateId");
-function O(o, e = {}) {
+function O(e, o = {}) {
   let t = {
     ...a,
-    ...e
+    ...o
   }, n = /* @__PURE__ */ r(function(...i) {
-    if (e.implicit) {
-      let u = ("__STORYBOOK_PREVIEW__" in E ? (
-        // eslint-disable-next-line no-underscore-dangle
-        E.__STORYBOOK_PREVIEW__
-      ) : void 0)?.storyRenders.find(
-        (s) => s.phase === "playing" || s.phase === "rendering"
+    if (o.implicit) {
+      let d = ("__STORYBOOK_PREVIEW__" in E ? E.__STORYBOOK_PREVIEW__ : void 0)?.storyRenders.find(
+        (c) => c.phase === "playing" || c.phase === "rendering"
       );
-      if (u) {
-        let s = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, d = new S({
-          phase: u.phase,
-          name: o,
-          deprecated: s
+      if (d) {
+        let c = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, u = new D({
+          phase: d.phase,
+          name: e,
+          deprecated: c
         });
-        if (s)
-          console.warn(d);
+        if (c)
+          console.warn(u);
         else
-          throw d;
+          throw u;
       }
     }
-    let m = I.getChannel(), p = T(), l = 5, f = i.map(k), R = i.length > 1 ? f : f[0], D = {
+    let m = j.getChannel(), p = x(), l = 5, f = i.map(P), w = i.length > 1 ? f : f[0], _ = {
       id: p,
       count: 0,
-      data: { name: o, args: R },
+      data: { name: e, args: w },
       options: {
         ...t,
-        maxDepth: l + (t.depth || 3),
-        allowFunction: t.allowFunction || !1
+        maxDepth: l + (t.depth || 3)
       }
     };
-    m.emit(g, D);
+    m.emit(g, _);
   }, "actionHandler");
-  return n.isAction = !0, n.implicit = e.implicit, n;
+  return n.isAction = !0, n.implicit = o.implicit, n;
 }
 r(O, "action");
 
 // src/actions/runtime/actions.ts
-var b = /* @__PURE__ */ r((...o) => {
-  let e = a, t = o;
-  t.length === 1 && Array.isArray(t[0]) && ([t] = t), t.length !== 1 && typeof t[t.length - 1] != "string" && (e = {
+var b = /* @__PURE__ */ r((...e) => {
+  let o = a, t = e;
+  t.length === 1 && Array.isArray(t[0]) && ([t] = t), t.length !== 1 && typeof t[t.length - 1] != "string" && (o = {
     ...a,
     ...t.pop()
   });
@@ -95,45 +90,45 @@ var b = /* @__PURE__ */ r((...o) => {
   (t.length !== 1 || typeof n == "string") && (n = {}, t.forEach((i) => {
     n[i] = i;
   }));
-  let c = {};
+  let s = {};
   return Object.keys(n).forEach((i) => {
-    c[i] = O(n[i], e);
-  }), c;
+    s[i] = O(n[i], o);
+  }), s;
 }, "actions");
 
 // src/actions/decorator.ts
-var { document: v, Element: w } = F, N = /^(\S+)\s*(.*)$/, V = w != null && !w.prototype.matches, Y = V ? "msMatchesSelector" : "matches", _ = /* @__PURE__ */ r(
-(o, e) => {
-  if (o[Y](e))
+var F = /^(\S+)\s*(.*)$/, M = Element != null && !Element.prototype.matches, C = M ? "msMatchesSelector" : "matches", v = /* @__PURE__ */ r(
+(e, o) => {
+  if (e[C](o))
     return !0;
-  let t = o.parentElement;
-  return t ? _(t, e) : !1;
-}, "hasMatchInAncestry"), $ = /* @__PURE__ */ r((o, ...e) => {
-  let t = o(...e);
-  return Object.entries(t).map(([n, c]) => {
-    let [i, m, p] = n.match(N) || [];
+  let t = e.parentElement;
+  return t ? v(t, o) : !1;
+}, "hasMatchInAncestry"), N = /* @__PURE__ */ r((e, ...o) => {
+  let t = e(...o);
+  return Object.entries(t).map(([n, s]) => {
+    let [i, m, p] = n.match(F) || [];
     return {
       eventName: m,
       handler: /* @__PURE__ */ r((l) => {
-        (!p || _(l.target, p)) && c(l);
+        (!p || v(l.target, p)) && s(l);
       }, "handler")
     };
   });
-}, "createHandlers"), B = /* @__PURE__ */ r((o, ...e) => {
-  let t = v && v.getElementById("storybook-root");
-  C(() => {
-    if (t != null) {
-      let n = $(o, ...e);
-      return n.forEach(({ eventName: c, handler: i }) => t.addEventListener(c, i)), () => n.forEach(({ eventName: c, handler: i }) => t.removeEventListener(
-      c, i));
+}, "createHandlers"), V = /* @__PURE__ */ r((e, ...o) => {
+  let t = typeof globalThis.document < "u" && globalThis.document.getElementById("storybook-root");
+  k(() => {
+    if (t) {
+      let n = N(e, ...o);
+      return n.forEach(({ eventName: s, handler: i }) => t.addEventListener(s, i)), () => n.forEach(({ eventName: s, handler: i }) => t.removeEventListener(
+      s, i));
     }
-  }, [t, o, e]);
-}, "applyEventHandlers"), mt = M({
+  }, [t, e, o]);
+}, "applyEventHandlers"), ct = T({
   name: "withActions",
   parameterName: h,
   skipIfNoParametersOrOptions: !0,
-  wrapper: /* @__PURE__ */ r((o, e, { parameters: t }) => (t?.handles && B(b, ...t.handles), o(e)), "wrapper")
+  wrapper: /* @__PURE__ */ r((e, o, { parameters: t }) => (t?.handles && V(b, ...t.handles), e(o)), "wrapper")
 });
 export {
-  mt as withActions
+  ct as withActions
 };

package/dist/actions/index.cjs

@@ -3,14 +3,14 @@ var a = Object.defineProperty;
 var x = Object.getOwnPropertyDescriptor;
 var R = Object.getOwnPropertyNames;
 var j = Object.prototype.hasOwnProperty;
-var i = (t, o) => a(t, "name", { value: o, configurable: !0 });
+var r = (t, o) => a(t, "name", { value: o, configurable: !0 });
 var I = (t, o) => {
   for (var n in o)
     a(t, n, { get: o[n], enumerable: !0 });
 }, P = (t, o, n, e) => {
   if (o && typeof o == "object" || typeof o == "function")
-    for (let r of R(o))
-      !j.call(t, r) && r !== n && a(t, r, { get: () => o[r], enumerable: !(e = x(o, r)) || e.enumerable });
+    for (let i of R(o))
+      !j.call(t, i) && i !== n && a(t, i, { get: () => o[i], enumerable: !(e = x(o, i)) || e.enumerable });
   return t;
 };
 var S = (t) => P(a({}, "__esModule", { value: !0 }), t);
@@ -18,13 +18,13 @@ var S = (t) => P(a({}, "__esModule", { value: !0 }), t);
 // src/actions/index.ts
 var K = {};
 I(K, {
-  ADDON_ID: () => l,
-  CLEAR_ID: () => F,
-  CYCLIC_KEY: () => C,
-  EVENT_ID: () => f,
+  ADDON_ID: () => m,
+  CLEAR_ID: () => C,
+  CYCLIC_KEY: () => F,
+  EVENT_ID: () => y,
   PANEL_ID: () => k,
   PARAM_KEY: () => T,
-  action: () => y,
+  action: () => l,
   actions: () => B,
   config: () => s,
   configureActions: () => V
@@ -32,26 +32,26 @@ I(K, {
 module.exports = S(K);
 
 // src/actions/constants.ts
-var T = "actions", l = "storybook/actions", k = `${l}/panel`, f = `${l}/action-event`, F = `${l}/action-clear`, C = "$___storybook.isCyclic";
+var T = "actions", m = "storybook/actions", k = `${m}/panel`, y = `${m}/action-event`, C = `${m}/action-clear`, F = "$___storybook.isCyclic";
 
 // src/actions/runtime/action.ts
-var A = require("storybook/internal/preview-errors"), m = require("@storybook/global"), O = require("storybook/preview-api"), h = require("uuid");
+var A = require("storybook/internal/preview-errors"), f = require("@storybook/global"), O = require("storybook/preview-api"), h = require("uuid");
 
 // src/actions/runtime/configureActions.ts
 var s = {
   depth: 10,
   clearOnStoryChange: !0,
   limit: 50
-}, V = /* @__PURE__ */ i((t = {}) => {
+}, V = /* @__PURE__ */ r((t = {}) => {
   Object.assign(s, t);
 }, "configureActions");
 
 // src/actions/runtime/action.ts
-var b = /* @__PURE__ */ i((t, o) => {
+var b = /* @__PURE__ */ r((t, o) => {
   let n = Object.getPrototypeOf(t);
   return !n || o(n) ? n : b(n, o);
-}, "findProto"), W = /* @__PURE__ */ i((t) => !!(typeof t == "object" && t && b(t, (o) => /^Synthetic(?:Base)?Event$/.test(o.constructor.name)) &&
-typeof t.persist == "function"), "isReactSyntheticEvent"), Y = /* @__PURE__ */ i((t) => {
+}, "findProto"), W = /* @__PURE__ */ r((t) => !!(typeof t == "object" && t && b(t, (o) => /^Synthetic(?:Base)?Event$/.test(o.constructor.name)) &&
+typeof t.persist == "function"), "isReactSyntheticEvent"), Y = /* @__PURE__ */ r((t) => {
   if (W(t)) {
     let o = Object.create(
       t.constructor.prototype,
@@ -65,20 +65,17 @@ typeof t.persist == "function"), "isReactSyntheticEvent"), Y = /* @__PURE__ */ i
     }), o;
   }
   return t;
-}, "serializeArg"), $ = /* @__PURE__ */ i(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? (0, h.v4)() : (
+}, "serializeArg"), $ = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? (0, h.v4)() : (
   // pseudo random id, example response lo1e7zm4832bkr7yfl7
   Date.now().toString(36) + Math.random().toString(36).substring(2)
 ), "generateId");
-function y(t, o = {}) {
+function l(t, o = {}) {
   let n = {
     ...s,
     ...o
-  }, e = /* @__PURE__ */ i(function(...c) {
+  }, e = /* @__PURE__ */ r(function(...c) {
     if (o.implicit) {
-      let d = ("__STORYBOOK_PREVIEW__" in m.global ? (
-        // eslint-disable-next-line no-underscore-dangle
-        m.global.__STORYBOOK_PREVIEW__
-      ) : void 0)?.storyRenders.find(
+      let d = ("__STORYBOOK_PREVIEW__" in f.global ? f.global.__STORYBOOK_PREVIEW__ : void 0)?.storyRenders.find(
         (p) => p.phase === "playing" || p.phase === "rendering"
       );
       if (d) {
@@ -93,24 +90,23 @@ function y(t, o = {}) {
           throw g;
       }
     }
-    let w = O.addons.getChannel(), E = $(), v = 5, u = c.map(Y), _ = c.length > 1 ? u : u[0], D = {
-      id: E,
+    let E = O.addons.getChannel(), v = $(), w = 5, u = c.map(Y), _ = c.length > 1 ? u : u[0], D = {
+      id: v,
       count: 0,
       data: { name: t, args: _ },
       options: {
         ...n,
-        maxDepth: v + (n.depth || 3),
-        allowFunction: n.allowFunction || !1
+        maxDepth: w + (n.depth || 3)
       }
     };
-    w.emit(f, D);
+    E.emit(y, D);
   }, "actionHandler");
   return e.isAction = !0, e.implicit = o.implicit, e;
 }
-i(y, "action");
+r(l, "action");
 
 // src/actions/runtime/actions.ts
-var B = /* @__PURE__ */ i((...t) => {
+var B = /* @__PURE__ */ r((...t) => {
   let o = s, n = t;
   n.length === 1 && Array.isArray(n[0]) && ([n] = n), n.length !== 1 && typeof n[n.length - 1] != "string" && (o = {
     ...s,
@@ -120,8 +116,8 @@ var B = /* @__PURE__ */ i((...t) => {
   (n.length !== 1 || typeof e == "string") && (e = {}, n.forEach((c) => {
     e[c] = c;
   }));
-  let r = {};
+  let i = {};
   return Object.keys(e).forEach((c) => {
-    r[c] = y(e[c], o);
-  }), r;
+    i[c] = l(e[c], o);
+  }), i;
 }, "actions");

package/dist/actions/index.d.ts

@@ -7,15 +7,12 @@ declare const CYCLIC_KEY = "$___storybook.isCyclic";
 
 interface Options$1 {
     allowRegExp: boolean;
-    allowFunction: boolean;
     allowSymbol: boolean;
     allowDate: boolean;
     allowUndefined: boolean;
-    allowClass: boolean;
     allowError: boolean;
     maxDepth: number;
     space: number | undefined;
-    lazyEval: boolean;
 }
 
 interface Options {

package/dist/actions/index.js

@@ -1,11 +1,11 @@
-var E = Object.defineProperty;
-var i = (o, n) => E(o, "name", { value: n, configurable: !0 });
+var v = Object.defineProperty;
+var r = (o, n) => v(o, "name", { value: n, configurable: !0 });
 
 // src/actions/constants.ts
-var S = "actions", a = "storybook/actions", T = `${a}/panel`, y = `${a}/action-event`, k = `${a}/action-clear`, F = "$___storybook.isCyclic";
+var S = "actions", a = "storybook/actions", T = `${a}/panel`, l = `${a}/action-event`, k = `${a}/action-clear`, C = "$___storybook.isCyclic";
 
 // src/actions/runtime/action.ts
-import { ImplicitActionsDuringRendering as v } from "storybook/internal/preview-errors";
+import { ImplicitActionsDuringRendering as w } from "storybook/internal/preview-errors";
 import { global as u } from "@storybook/global";
 import { addons as _ } from "storybook/preview-api";
 import { v4 as D } from "uuid";
@@ -15,16 +15,16 @@ var c = {
   depth: 10,
   clearOnStoryChange: !0,
   limit: 50
-}, V = /* @__PURE__ */ i((o = {}) => {
+}, V = /* @__PURE__ */ r((o = {}) => {
   Object.assign(c, o);
 }, "configureActions");
 
 // src/actions/runtime/action.ts
-var d = /* @__PURE__ */ i((o, n) => {
+var d = /* @__PURE__ */ r((o, n) => {
   let t = Object.getPrototypeOf(o);
   return !t || n(t) ? t : d(t, n);
-}, "findProto"), x = /* @__PURE__ */ i((o) => !!(typeof o == "object" && o && d(o, (n) => /^Synthetic(?:Base)?Event$/.test(n.constructor.name)) &&
-typeof o.persist == "function"), "isReactSyntheticEvent"), R = /* @__PURE__ */ i((o) => {
+}, "findProto"), x = /* @__PURE__ */ r((o) => !!(typeof o == "object" && o && d(o, (n) => /^Synthetic(?:Base)?Event$/.test(n.constructor.name)) &&
+typeof o.persist == "function"), "isReactSyntheticEvent"), R = /* @__PURE__ */ r((o) => {
   if (x(o)) {
     let n = Object.create(
       o.constructor.prototype,
@@ -38,7 +38,7 @@ typeof o.persist == "function"), "isReactSyntheticEvent"), R = /* @__PURE__ */ i
     }), n;
   }
   return o;
-}, "serializeArg"), j = /* @__PURE__ */ i(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? D() : (
+}, "serializeArg"), j = /* @__PURE__ */ r(() => typeof crypto == "object" && typeof crypto.getRandomValues == "function" ? D() : (
   // pseudo random id, example response lo1e7zm4832bkr7yfl7
   Date.now().toString(36) + Math.random().toString(36).substring(2)
 ), "generateId");
@@ -46,63 +46,59 @@ function g(o, n = {}) {
   let t = {
     ...c,
     ...n
-  }, e = /* @__PURE__ */ i(function(...r) {
+  }, e = /* @__PURE__ */ r(function(...i) {
     if (n.implicit) {
-      let f = ("__STORYBOOK_PREVIEW__" in u ? (
-        // eslint-disable-next-line no-underscore-dangle
-        u.__STORYBOOK_PREVIEW__
-      ) : void 0)?.storyRenders.find(
+      let y = ("__STORYBOOK_PREVIEW__" in u ? u.__STORYBOOK_PREVIEW__ : void 0)?.storyRenders.find(
         (s) => s.phase === "playing" || s.phase === "rendering"
       );
-      if (f) {
-        let s = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, m = new v({
-          phase: f.phase,
+      if (y) {
+        let s = !globalThis?.FEATURES?.disallowImplicitActionsInRenderV8, f = new w({
+          phase: y.phase,
           name: o,
           deprecated: s
         });
         if (s)
-          console.warn(m);
+          console.warn(f);
         else
-          throw m;
+          throw f;
       }
     }
-    let A = _.getChannel(), O = j(), h = 5, l = r.map(R), b = r.length > 1 ? l : l[0], w = {
+    let A = _.getChannel(), O = j(), h = 5, m = i.map(R), b = i.length > 1 ? m : m[0], E = {
       id: O,
       count: 0,
       data: { name: o, args: b },
       options: {
         ...t,
-        maxDepth: h + (t.depth || 3),
-        allowFunction: t.allowFunction || !1
+        maxDepth: h + (t.depth || 3)
       }
     };
-    A.emit(y, w);
+    A.emit(l, E);
   }, "actionHandler");
   return e.isAction = !0, e.implicit = n.implicit, e;
 }
-i(g, "action");
+r(g, "action");
 
 // src/actions/runtime/actions.ts
-var G = /* @__PURE__ */ i((...o) => {
+var G = /* @__PURE__ */ r((...o) => {
   let n = c, t = o;
   t.length === 1 && Array.isArray(t[0]) && ([t] = t), t.length !== 1 && typeof t[t.length - 1] != "string" && (n = {
     ...c,
     ...t.pop()
   });
   let e = t[0];
-  (t.length !== 1 || typeof e == "string") && (e = {}, t.forEach((r) => {
-    e[r] = r;
+  (t.length !== 1 || typeof e == "string") && (e = {}, t.forEach((i) => {
+    e[i] = i;
   }));
   let p = {};
-  return Object.keys(e).forEach((r) => {
-    p[r] = g(e[r], n);
+  return Object.keys(e).forEach((i) => {
+    p[i] = g(e[i], n);
   }), p;
 }, "actions");
 export {
   a as ADDON_ID,
   k as CLEAR_ID,
-  F as CYCLIC_KEY,
-  y as EVENT_ID,
+  C as CYCLIC_KEY,
+  l as EVENT_ID,
   T as PANEL_ID,
   S as PARAM_KEY,
   g as action,