storybook 10.3.3 → 10.4.1

package/README.md

@@ -33,6 +33,6 @@ The `storybook` package contains Storybook's core. It includes:
 - User-facing utility libraries such as `storybook/test`, `theming`, and `viewport`
 - Libraries used by Storybook's ecosystem of frameworks, addons, and builders
 
-It also contains a variety of other libraries and utilities under the `stroybook/internal` namespace, such as utilities for CSF, MDX & Docs.
+It also contains a variety of other libraries and utilities under the `storybook/internal` namespace, such as utilities for CSF, MDX & Docs.
 
 Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

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

@@ -112,11 +112,11 @@
     border-radius: 10px;
     background: rgb(247, 247, 247);
     color: rgb(46, 52, 56);
+  }
 
-    & * {
-      background: rgb(247, 247, 247);
-      color: rgb(46, 52, 56);
-    }
+  .sb-nopreview_main * {
+    background: rgb(247, 247, 247);
+    color: rgb(46, 52, 56);
   }
 
   .sb-nopreview_heading {
@@ -147,84 +147,89 @@
     border: 1px solid #ff0000;
     box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
     gap: 24px;
+  }
 
-    & ol {
-      padding-left: 18px;
-      margin: 0;
-    }
+  .sb-errordisplay_main ol {
+    padding-left: 18px;
+    margin: 0;
+  }
 
-    /* Redefine colors to ensure readability regardless of user-provided * selectors. */
-    * {
-      background: white;
-      color: black;
-    }
+  /* Redefine colors to ensure readability regardless of user-provided * selectors. */
+  .sb-errordisplay_main * {
+    background: white;
+    color: black;
+  }
 
-    & h1 {
-      font-family: Nunito Sans;
-      font-size: 22px;
-      font-weight: 400;
-      line-height: 30px;
-      font-weight: normal;
-      margin: 0;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        background: #ff4400;
-        border-radius: 50%;
-        margin-right: 8px;
-      }
-    }
+  /* Exclude error code block from the universal reset to preserve ANSI colors and dark theme */
+  .sb-errordisplay_main .sb-errordisplay_code,
+  .sb-errordisplay_main .sb-errordisplay_code * {
+    background: #242424;
+    color: #c6c6c6;
+  }
 
-    & p,
-    & ol {
-      font-family: Nunito Sans;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 19px;
-      margin: 0;
-    }
+  .sb-errordisplay_main h1 {
+    font-family: inherit;
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 30px;
+    margin: 0;
+  }
 
-    & li + li {
-      margin: 0;
-      padding: 0;
-      padding-top: 12px;
-    }
+  .sb-errordisplay_main h1::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background: #ff4400;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
 
-    & a {
-      color: currentColor;
-    }
+  .sb-errordisplay_main p,
+  .sb-errordisplay_main ol {
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    margin: 0;
+  }
 
-    & .sb-errordisplay_code {
-      padding: 10px;
-      flex: 1;
-      background: #242424;
-      color: #c6c6c6;
-      box-sizing: border-box;
-
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 19px;
-      border-radius: 4px;
-
-      font-family:
-        'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
-        'Lucida Console', Consolas, Monaco, monospace;
-      margin: 0;
-      overflow: auto;
-
-      & code {
-        background-color: inherit;
-        color: inherit;
-      }
-    }
+  .sb-errordisplay_main li + li {
+    margin: 0;
+    padding: 0;
+    padding-top: 12px;
+  }
 
-    & .sb-errordisplay pre {
-      white-space: pre-wrap;
-      white-space: revert;
-    }
+  .sb-errordisplay_main a {
+    color: currentColor;
+  }
+
+  .sb-errordisplay_main .sb-errordisplay_code {
+    padding: 10px;
+    flex: 1;
+    background: #242424;
+    color: #c6c6c6;
+    box-sizing: border-box;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    border-radius: 4px;
+
+    font-family:
+      'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
+    margin: 0;
+    overflow: auto;
+  }
+
+  .sb-errordisplay_main .sb-errordisplay_code code {
+    background-color: inherit;
+    color: inherit;
+  }
+
+  .sb-errordisplay_main .sb-errordisplay_code {
+    white-space: pre-wrap;
   }
 
   @-webkit-keyframes sb-rotate360 {

package/dist/_browser-chunks/{Color-KPF66X3F.js → Color-QOVTYR6E.js}

@@ -1,6 +1,6 @@
 import {
   getControlId
-} from "./chunk-2FRVAXCZ.js";
+} from "./chunk-4AB3IUR2.js";
 import "./chunk-NZMVUW5T.js";
 import {
   __commonJS,
@@ -999,12 +999,18 @@ var Wrapper = styled.div({
     setValue(updatedValue), onChange(updatedValue);
   }, [color, colorSpace, onChange]);
   return { value, realValue, updateValue, color, colorSpace, cycleColorSpace };
-}, id = (value) => value.replace(/\s*/, "").toLowerCase(), usePresets = (presetColors, currentColor, colorSpace) => {
+}, id = (value) => value.replace(/\s*/, "").toLowerCase(), usePresets = (presetColors, currentColor, colorSpace, maxPresetColors = 27) => {
   let [selectedColors, setSelectedColors] = useState(currentColor?.valid ? [currentColor] : []);
   useEffect(() => {
     currentColor === void 0 && setSelectedColors([]);
   }, [currentColor]);
-  let presets = useMemo(() => (presetColors || []).map((preset) => typeof preset == "string" ? parseValue(preset) : preset.title ? { ...parseValue(preset.color), keyword: preset.title } : parseValue(preset.color)).concat(selectedColors).filter(Boolean).slice(-27), [presetColors, selectedColors]), addPreset = useCallback(
+  let presets = useMemo(() => {
+    let combined = (presetColors || []).map((preset) => typeof preset == "string" ? parseValue(preset) : preset.title ? { ...parseValue(preset.color), keyword: preset.title } : parseValue(preset.color)).concat(selectedColors).filter(Boolean);
+    if (maxPresetColors === 0 || maxPresetColors === 1 / 0)
+      return combined;
+    let limit = Number.isInteger(maxPresetColors) && maxPresetColors > 0 ? maxPresetColors : 27;
+    return combined.slice(-limit);
+  }, [presetColors, selectedColors, maxPresetColors]), addPreset = useCallback(
     (color) => {
       color?.valid && (presets.some(
         (preset) => preset && preset[colorSpace] && id(preset[colorSpace] || "") === id(color[colorSpace] || "")
@@ -1015,18 +1021,20 @@ var Wrapper = styled.div({
   return { presets, addPreset };
 }, ColorControl = ({
   name,
+  storyId,
   value: initialValue,
   onChange,
   onFocus,
   onBlur,
   presetColors,
+  maxPresetColors,
   startOpen = !1,
   argType
 }) => {
   let debouncedOnChange = useCallback(debounce(onChange, 200), [onChange]), { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
     initialValue,
     debouncedOnChange
-  ), { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace), Picker = ColorPicker[colorSpace], readOnly = !!argType?.table?.readonly, controlId = getControlId(name);
+  ), { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace, maxPresetColors), Picker = ColorPicker[colorSpace], readOnly = !!argType?.table?.readonly, controlId = getControlId(name, storyId);
   return React.createElement(Wrapper, null, React.createElement("label", { htmlFor: controlId, className: "sb-sr-only" }, name), React.createElement(
     Input,
     {

package/dist/_browser-chunks/{chunk-JVRDBUUP.js → chunk-2HVKLHKJ.js}

@@ -18,7 +18,10 @@ function appendErrorRef(url) {
 }
 var StorybookError = class _StorybookError extends Error {
   constructor(props) {
-    super(_StorybookError.getFullMessage(props));
+    super(
+      _StorybookError.getFullMessage(props),
+      props.cause === void 0 ? void 0 : { cause: props.cause }
+    );
     /**
      * Data associated with the error. Used to provide additional information in the error message or
      * to be passed to telemetry.

package/dist/_browser-chunks/chunk-4AB3IUR2.js

@@ -0,0 +1,13 @@
+// ../addons/docs/src/blocks/controls/helpers.ts
+var getControlId = (value, storyId) => {
+  let base = value.replace(/\s+/g, "-");
+  return storyId ? `control-${storyId}-${base}` : `control-${base}`;
+}, getControlSetterButtonId = (value, storyId) => {
+  let base = value.replace(/\s+/g, "-");
+  return storyId ? `set-${storyId}-${base}` : `set-${base}`;
+};
+
+export {
+  getControlId,
+  getControlSetterButtonId
+};

package/dist/_browser-chunks/{chunk-V5NV5R37.js → chunk-C3TKC4WX.js}

@@ -1,6 +1,6 @@
 import {
   StorybookError
-} from "./chunk-JVRDBUUP.js";
+} from "./chunk-2HVKLHKJ.js";
 
 // src/manager-errors.ts
 var Category = /* @__PURE__ */ ((Category2) => (Category2.MANAGER_UNCAUGHT = "MANAGER_UNCAUGHT", Category2.MANAGER_UI = "MANAGER_UI", Category2.MANAGER_API = "MANAGER_API", Category2.MANAGER_CLIENT_LOGGER = "MANAGER_CLIENT-LOGGER", Category2.MANAGER_CHANNELS = "MANAGER_CHANNELS", Category2.MANAGER_CORE_EVENTS = "MANAGER_CORE-EVENTS", Category2.MANAGER_ROUTER = "MANAGER_ROUTER", Category2.MANAGER_THEMING = "MANAGER_THEMING", Category2))(Category || {}), ProviderDoesNotExtendBaseProviderError = class extends StorybookError {

package/dist/_browser-chunks/{chunk-RD3KTAHR.js → chunk-JT6NUAUC.js}

@@ -950,26 +950,7 @@ var ScrollAreaRoot = styled2(Root)(
 );
 ScrollArea2.displayName = "ScrollArea";
 
-// src/components/components/syntaxhighlighter/clipboard.ts
-import { global } from "@storybook/global";
-var { document: document2, window: globalWindow } = global;
-async function copyUsingClipboardAPI(text) {
-  try {
-    await globalWindow.top?.navigator.clipboard.writeText(text);
-  } catch {
-    await globalWindow.navigator.clipboard.writeText(text);
-  }
-}
-async function copyUsingWorkAround(text) {
-  let tmp = document2.createElement("TEXTAREA"), focus = document2.activeElement;
-  tmp.value = text, document2.body.appendChild(tmp), tmp.select(), document2.execCommand("copy"), document2.body.removeChild(tmp), focus.focus();
-}
-function createCopyToClipboardFunction() {
-  return globalWindow.navigator?.clipboard ? copyUsingClipboardAPI : copyUsingWorkAround;
-}
-
 export {
   ActionBar,
-  ScrollArea2 as ScrollArea,
-  createCopyToClipboardFunction
+  ScrollArea2 as ScrollArea
 };

package/dist/_browser-chunks/chunk-LITCR56V.js

@@ -0,0 +1,53 @@
+// ../../node_modules/@react-aria/live-announcer/dist/LiveAnnouncer.mjs
+var $319e236875307eab$var$liveAnnouncer = null;
+function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = "assertive", timeout = 7e3) {
+  $319e236875307eab$var$liveAnnouncer ? $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout) : ($319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer(), (typeof IS_REACT_ACT_ENVIRONMENT == "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest < "u") ? $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout) : setTimeout(() => {
+    $319e236875307eab$var$liveAnnouncer?.isAttached() && $319e236875307eab$var$liveAnnouncer?.announce(message, assertiveness, timeout);
+  }, 100));
+}
+function $319e236875307eab$export$d10ae4f68404609a(assertiveness) {
+  $319e236875307eab$var$liveAnnouncer && $319e236875307eab$var$liveAnnouncer.clear(assertiveness);
+}
+var $319e236875307eab$var$LiveAnnouncer = class {
+  isAttached() {
+    var _this_node;
+    return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
+  }
+  createLog(ariaLive) {
+    let node = document.createElement("div");
+    return node.setAttribute("role", "log"), node.setAttribute("aria-live", ariaLive), node.setAttribute("aria-relevant", "additions"), node;
+  }
+  destroy() {
+    this.node && (document.body.removeChild(this.node), this.node = null);
+  }
+  announce(message, assertiveness = "assertive", timeout = 7e3) {
+    var _this_assertiveLog, _this_politeLog;
+    if (!this.node) return;
+    let node = document.createElement("div");
+    typeof message == "object" ? (node.setAttribute("role", "img"), node.setAttribute("aria-labelledby", message["aria-labelledby"])) : node.textContent = message, assertiveness === "assertive" ? (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 || _this_assertiveLog.appendChild(node) : (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 || _this_politeLog.appendChild(node), message !== "" && setTimeout(() => {
+      node.remove();
+    }, timeout);
+  }
+  clear(assertiveness) {
+    this.node && ((!assertiveness || assertiveness === "assertive") && this.assertiveLog && (this.assertiveLog.innerHTML = ""), (!assertiveness || assertiveness === "polite") && this.politeLog && (this.politeLog.innerHTML = ""));
+  }
+  constructor() {
+    this.node = null, this.assertiveLog = null, this.politeLog = null, typeof document < "u" && (this.node = document.createElement("div"), this.node.dataset.liveAnnouncer = "true", Object.assign(this.node.style, {
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      width: "1px",
+      whiteSpace: "nowrap"
+    }), this.assertiveLog = this.createLog("assertive"), this.node.appendChild(this.assertiveLog), this.politeLog = this.createLog("polite"), this.node.appendChild(this.politeLog), document.body.prepend(this.node));
+  }
+};
+
+export {
+  $319e236875307eab$export$a9b970dcc4ae71a9,
+  $319e236875307eab$export$d10ae4f68404609a
+};

package/dist/_browser-chunks/{chunk-POMIZRJL.js → chunk-MFQQ5L5I.js}

@@ -1,6 +1,6 @@
 import {
   StorybookError
-} from "./chunk-JVRDBUUP.js";
+} from "./chunk-2HVKLHKJ.js";
 import {
   dedent
 } from "./chunk-3LY4VQVK.js";
@@ -301,6 +301,15 @@ This is deprecated and won't work in Storybook 8 anymore.
     });
     this.data = data;
   }
+}, InvalidBlockOfPropError = class extends StorybookError {
+  constructor() {
+    super({
+      name: "InvalidBlockOfPropError",
+      category: "BLOCKS" /* BLOCKS */,
+      code: 1,
+      message: "Unexpected `of={undefined}`, did you mistype a CSF file reference?"
+    });
+  }
 }, UnsupportedViewportDimensionError = class extends StorybookError {
   constructor(data) {
     super({
@@ -352,6 +361,7 @@ export {
   NextJsSharpError,
   NextjsRouterMocksNotAvailable,
   UnknownArgTypesError,
+  InvalidBlockOfPropError,
   UnsupportedViewportDimensionError,
   ElementA11yParameterError
 };

package/dist/_browser-chunks/chunk-QIIJQEST.js

@@ -0,0 +1,174 @@
+import {
+  StatusTypeIdMismatchError
+} from "./chunk-C3TKC4WX.js";
+import {
+  StatusTypeIdMismatchError as StatusTypeIdMismatchError2
+} from "./chunk-MFQQ5L5I.js";
+import {
+  StorybookError
+} from "./chunk-2HVKLHKJ.js";
+import {
+  require_picocolors_browser
+} from "./chunk-7YGTGCDG.js";
+import {
+  __toESM
+} from "./chunk-A242L54C.js";
+
+// src/server-errors.ts
+var import_picocolors = __toESM(require_picocolors_browser(), 1);
+var StatusTypeIdMismatchError3 = class extends StorybookError {
+  constructor(data) {
+    super({
+      name: "StatusTypeIdMismatchError",
+      category: "CORE-SERVER" /* CORE_SERVER */,
+      code: 16,
+      message: `Status has typeId "${data.status.typeId}" but was added to store with typeId "${data.typeId}". Full status: ${JSON.stringify(
+        data.status,
+        null,
+        2
+      )}`
+    });
+    this.data = data;
+  }
+};
+
+// src/shared/status-store/index.ts
+var STATUS_VALUE_PREFIX = "status-value:", STATUS_VALUES = [
+  "status-value:pending",
+  "status-value:success",
+  "status-value:new",
+  "status-value:modified",
+  "status-value:affected",
+  "status-value:warning",
+  "status-value:error",
+  "status-value:unknown"
+], toStatusValue = (shortName) => {
+  if (shortName === "related") return "status-value:affected";
+  let candidate = `${STATUS_VALUE_PREFIX}${shortName}`;
+  return STATUS_VALUES.includes(candidate) ? candidate : void 0;
+}, statusValueShortName = (value) => value === "status-value:affected" ? "related" : value.slice(STATUS_VALUE_PREFIX.length);
+var CHANGE_DETECTION_STATUS_TYPE_ID = "storybook/change-detection", UNIVERSAL_STATUS_STORE_OPTIONS = {
+  id: "storybook/status",
+  leader: !0,
+  initialState: {}
+}, StatusStoreEventType = {
+  SELECT: "select"
+};
+function countStatusesByValue(allStatuses) {
+  let counts = {};
+  for (let statusByTypeId of Object.values(allStatuses))
+    for (let status of Object.values(statusByTypeId))
+      counts[status.value] = (counts[status.value] ?? 0) + 1;
+  return counts;
+}
+function createStatusStore({
+  universalStatusStore,
+  useUniversalStore,
+  environment
+}) {
+  let fullStatusStore = {
+    getAll() {
+      return universalStatusStore.getState();
+    },
+    set(statuses) {
+      universalStatusStore.setState((state) => {
+        let newState = { ...state };
+        for (let status of statuses) {
+          let { storyId, typeId } = status;
+          newState[storyId] = { ...newState[storyId] ?? {}, [typeId]: status };
+        }
+        return newState;
+      });
+    },
+    onAllStatusChange(listener) {
+      return universalStatusStore.onStateChange((state, prevState) => {
+        listener(state, prevState);
+      });
+    },
+    onSelect(listener) {
+      return universalStatusStore.subscribe(StatusStoreEventType.SELECT, (event) => {
+        listener(event.payload);
+      });
+    },
+    selectStatuses: (statuses) => {
+      universalStatusStore.send({ type: StatusStoreEventType.SELECT, payload: statuses });
+    },
+    unset(storyIds) {
+      if (!storyIds) {
+        universalStatusStore.setState({});
+        return;
+      }
+      universalStatusStore.setState((state) => {
+        let newState = { ...state };
+        for (let storyId of storyIds)
+          delete newState[storyId];
+        return newState;
+      });
+    },
+    typeId: void 0
+  }, getStatusStoreByTypeId = (typeId) => ({
+    getAll: fullStatusStore.getAll,
+    set(statuses) {
+      universalStatusStore.setState((state) => {
+        let newState = { ...state };
+        for (let status of statuses) {
+          let { storyId } = status;
+          if (status.typeId !== typeId)
+            switch (environment) {
+              case "server":
+                throw new StatusTypeIdMismatchError3({
+                  status,
+                  typeId
+                });
+              case "manager":
+                throw new StatusTypeIdMismatchError({
+                  status,
+                  typeId
+                });
+              case "preview":
+              default:
+                throw new StatusTypeIdMismatchError2({
+                  status,
+                  typeId
+                });
+            }
+          newState[storyId] = { ...newState[storyId] ?? {}, [typeId]: status };
+        }
+        return newState;
+      });
+    },
+    onAllStatusChange: fullStatusStore.onAllStatusChange,
+    onSelect(listener) {
+      return universalStatusStore.subscribe(StatusStoreEventType.SELECT, (event) => {
+        event.payload.some((status) => status.typeId === typeId) && listener(event.payload);
+      });
+    },
+    unset(storyIds) {
+      universalStatusStore.setState((state) => {
+        let newState = { ...state };
+        for (let storyId in newState)
+          if (newState[storyId]?.[typeId] && (!storyIds || storyIds?.includes(storyId))) {
+            let { [typeId]: omittedStatus, ...storyStatusesWithoutTypeId } = newState[storyId];
+            newState[storyId] = storyStatusesWithoutTypeId;
+          }
+        return newState;
+      });
+    },
+    typeId
+  });
+  return useUniversalStore ? {
+    getStatusStoreByTypeId,
+    fullStatusStore,
+    universalStatusStore,
+    useStatusStore: (selector) => useUniversalStore(universalStatusStore, selector)[0]
+  } : { getStatusStoreByTypeId, fullStatusStore, universalStatusStore };
+}
+
+export {
+  toStatusValue,
+  statusValueShortName,
+  CHANGE_DETECTION_STATUS_TYPE_ID,
+  UNIVERSAL_STATUS_STORE_OPTIONS,
+  countStatusesByValue,
+  createStatusStore
+};