storybook 10.1.0-beta.2 → 10.1.0-beta.3

package/dist/manager/runtime.js

@@ -293,9 +293,9 @@ var require_memoizerific = __commonJS({
         module3.exports = function(limit) {
           var cache = new MapOrSimilar(!1), lru = [];
           return function(fn) {
-            var memoizerific2 = function() {
+            var memoizerific3 = function() {
               var currentCache = cache, newMap, fnResult, argsLengthMinusOne = arguments.length - 1, lruPath = Array(argsLengthMinusOne + 1), isMemoized = !0, i2;
-              if ((memoizerific2.numArgs || memoizerific2.numArgs === 0) && memoizerific2.numArgs !== argsLengthMinusOne + 1)
+              if ((memoizerific3.numArgs || memoizerific3.numArgs === 0) && memoizerific3.numArgs !== argsLengthMinusOne + 1)
                 throw new Error("Memoizerific functions should always be called with the same number of arguments");
               for (i2 = 0; i2 < argsLengthMinusOne; i2++) {
                 if (lruPath[i2] = {
@@ -310,9 +310,9 @@ var require_memoizerific = __commonJS({
               return isMemoized && (currentCache.has(arguments[argsLengthMinusOne]) ? fnResult = currentCache.get(arguments[argsLengthMinusOne]) : isMemoized = !1), isMemoized || (fnResult = fn.apply(null, arguments), currentCache.set(arguments[argsLengthMinusOne], fnResult)), limit > 0 && (lruPath[argsLengthMinusOne] = {
                 cacheItem: currentCache,
                 arg: arguments[argsLengthMinusOne]
-              }, isMemoized ? moveToMostRecentLru(lru, lruPath) : lru.push(lruPath), lru.length > limit && removeCachedResult(lru.shift())), memoizerific2.wasMemoized = isMemoized, memoizerific2.numArgs = argsLengthMinusOne + 1, fnResult;
+              }, isMemoized ? moveToMostRecentLru(lru, lruPath) : lru.push(lruPath), lru.length > limit && removeCachedResult(lru.shift())), memoizerific3.wasMemoized = isMemoized, memoizerific3.numArgs = argsLengthMinusOne + 1, fnResult;
             };
-            return memoizerific2.limit = limit, memoizerific2.wasMemoized = !1, memoizerific2.cache = cache, memoizerific2.lru = lru, memoizerific2;
+            return memoizerific3.limit = limit, memoizerific3.wasMemoized = !1, memoizerific3.cache = cache, memoizerific3.lru = lru, memoizerific3;
           };
         };
         function moveToMostRecentLru(lru, lruPath) {
@@ -2259,7 +2259,7 @@ var icons_default = __STORYBOOK_ICONS__, { AccessibilityAltIcon, AccessibilityIc
 var manager_api_default = __STORYBOOK_API__, { ActiveTabs, Consumer, ManagerContext, Provider, RequestResponseError, addons, combineParameters, controlOrMetaKey, controlOrMetaSymbol, eventMatchesShortcut, eventToShortcut, experimental_MockUniversalStore, experimental_UniversalStore, experimental_getStatusStore, experimental_getTestProviderStore, experimental_requestResponse, experimental_useStatusStore, experimental_useTestProviderStore, experimental_useUniversalStore, internal_checklistStore, internal_fullStatusStore, internal_fullTestProviderStore, internal_universalChecklistStore, internal_universalStatusStore, internal_universalTestProviderStore, isMacLike, isShortcutTaken, keyToSymbol, merge, mockChannel, optionOrAltSymbol, shortcutMatchesShortcut, shortcutToAriaKeyshortcuts, shortcutToHumanString, types, useAddonState, useArgTypes, useArgs, useChannel, useGlobalTypes, useGlobals, useParameter, useSharedState, useStoryPrepared, useStorybookApi, useStorybookState } = __STORYBOOK_API__;
 
 // global-externals:storybook/theming
-var theming_default = __STORYBOOK_THEMING__, { CacheProvider, ClassNames, Global, ThemeProvider, background, color, convert, create, createCache, createGlobal, createReset, css, darken, ensure, getPreferredColorScheme, ignoreSsrWarning, isPropValid, jsx, keyframes, lighten, styled, themes, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
+var theming_default = __STORYBOOK_THEMING__, { CacheProvider, ClassNames, Global, ThemeProvider, background, color, convert, create, createCache, createGlobal, createReset, css, darken, ensure, getPreferredColorScheme, ignoreSsrWarning, isPropValid, jsx, keyframes, lighten, styled, themes, tokens, typography, useTheme, withTheme } = __STORYBOOK_THEMING__;
 
 // global-externals:storybook/internal/components
 var components_default = __STORYBOOK_COMPONENTS__, { A, AbstractToolbar, ActionBar, AddonPanel, Badge, Bar, Blockquote, Button, Card, ClipboardCode, Code, Collapsible, DL, Div, DocumentWrapper, EmptyTabContent, ErrorFormatter, FlexBar, Form, H1, H2, H3, H4, H5, H6, HR, IconButton, Img, LI, Link, ListItem, Listbox, Loader, Modal, ModalDecorator, OL, P, Placeholder, Popover, PopoverProvider, Pre, ProgressSpinner, ResetWrapper, ScrollArea, Select, Separator, Spaced, Span, StatelessTab, StatelessTabList, StatelessTabPanel, StatelessTabsView, StorybookIcon: StorybookIcon2, StorybookLogo, SyntaxHighlighter, TT, TabBar, TabButton, TabList, TabPanel, TabWrapper, Table, Tabs, TabsState, TabsView, ToggleButton, Toolbar, Tooltip, TooltipLinkList, TooltipMessage, TooltipNote, TooltipProvider, UL, WithTooltip, WithTooltipPure, Zoom, codeCommon, components, convertToReactAriaPlacement, createCopyToClipboardFunction, getStoryHref, interleaveSeparators, nameSpaceClassNames, resetComponents, useTabsState, withReset } = __STORYBOOK_COMPONENTS__;
@@ -13919,6 +13919,9 @@ var { document: document4, window: globalWindow3 } = scope, IndicatorPlacement =
   return react_default.createElement(Message, { href: "https://storybook.js.org/docs/sharing/storybook-composition?ref=ui" }, react_default.createElement(LightningIcon, { color: theme.color.gold }), react_default.createElement("div", null, react_default.createElement(MessageTitle, null, "Reduce lag"), react_default.createElement("div", null, "Learn how to speed up Composition performance.")));
 };
 
+// src/manager/utils/status.tsx
+var import_memoizerific3 = __toESM(require_memoizerific(), 1);
+
 // src/manager/components/sidebar/IconSymbols.tsx
 var Svg2 = styled.svg`
   position: absolute;
@@ -14015,7 +14018,7 @@ var SmallIcons = styled(CircleIcon)({
   "status-value:success",
   "status-value:warning",
   "status-value:error"
-], statusMapping = {
+], getStatus = (0, import_memoizerific3.default)(5)((theme, status) => ({
   "status-value:unknown": [null, null],
   "status-value:pending": [react_default.createElement(LoadingIcons, { key: "icon" }), "currentColor"],
   "status-value:success": [
@@ -14024,13 +14027,13 @@ var SmallIcons = styled(CircleIcon)({
   ],
   "status-value:warning": [
     react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })),
-    "#A15C20"
+    theme.fgColor.warning
   ],
   "status-value:error": [
     react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })),
-    "#D43900"
+    theme.fgColor.negative
   ]
-}, getMostCriticalStatusValue = (statusValues) => statusPriority.reduce(
+})[status]), getMostCriticalStatusValue = (statusValues) => statusPriority.reduce(
   (acc, value) => statusValues.includes(value) ? value : acc,
   "status-value:unknown"
 );
@@ -14575,7 +14578,7 @@ var statusOrder = [
     setExpanded,
     onSelectStoryId,
     api
-  } = props, { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout(), { counts, statusesByValue } = useStatusSummary(item);
+  } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout(), { counts, statusesByValue } = useStatusSummary(item);
   if (!isDisplayed)
     return null;
   let statusLinks = useMemo(() => {
@@ -14617,6 +14620,52 @@ var statusOrder = [
     return [];
   }, [counts, item.id, item.type, onSelectStoryId, statuses, statusesByValue]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
   } };
+  if (item.type === "story" && !("children" in item && item.children) && (!("subtype" in item) || item.subtype !== "test") || item.type === "docs") {
+    let LeafNode3 = item.type === "docs" ? DocumentNode : StoryNode, statusValue = getMostCriticalStatusValue(
+      Object.values(statuses || {}).map((s2) => s2.value)
+    ), [icon, textColor] = getStatus(theme, statusValue);
+    return react_default.createElement(
+      LeafNodeStyleWrapper,
+      {
+        key: id,
+        className: "sidebar-item",
+        "data-selected": isSelected,
+        "data-ref-id": refId,
+        "data-item-id": item.id,
+        "data-parent-id": item.parent,
+        "data-nodetype": item.type === "docs" ? "document" : "story",
+        "data-highlightable": isDisplayed,
+        onMouseEnter: contextMenu.onMouseEnter
+      },
+      react_default.createElement(
+        LeafNode3,
+        {
+          style: isSelected ? {} : { color: textColor },
+          href: getLink(item, refId),
+          id,
+          depth: isOrphan ? item.depth : item.depth - 1,
+          onClick: (event) => {
+            event.preventDefault(), onSelectStoryId(item.id), isMobile2 && setMobileMenuOpen(!1);
+          },
+          ...item.type === "docs" && { docsMode }
+        },
+        item.renderLabel?.(item, api) || item.name
+      ),
+      isSelected && react_default.createElement(SkipToContentLink, { asChild: !0, ariaLabel: !1 }, react_default.createElement("a", { href: "#storybook-preview-wrapper" }, "Skip to canvas")),
+      contextMenu.node,
+      icon ? react_default.createElement(
+        StatusButton,
+        {
+          ariaLabel: `Test status: ${statusValue.replace("status-value:", "")}`,
+          "data-testid": "tree-status-button",
+          type: "button",
+          status: statusValue,
+          selectedItem: isSelected
+        },
+        icon
+      ) : null
+    );
+  }
   if (item.type === "root")
     return react_default.createElement(
       RootNode,
@@ -14658,7 +14707,7 @@ var statusOrder = [
         isFullyExpanded ? react_default.createElement(CollapseIcon, null) : react_default.createElement(ExpandAltIcon, null)
       )
     );
-  let itemStatus = getMostCriticalStatusValue(Object.values(statuses || {}).map((s2) => s2.value)), [itemIcon, itemColor] = statusMapping[itemStatus], itemStatusButton = itemIcon ? react_default.createElement(
+  let itemStatus = getMostCriticalStatusValue(Object.values(statuses || {}).map((s2) => s2.value)), [itemIcon, itemColor] = getStatus(theme, itemStatus), itemStatusButton = itemIcon ? react_default.createElement(
     StatusButton,
     {
       ariaLabel: `Test status: ${itemStatus.replace("status-value:", "")}`,
@@ -14671,7 +14720,7 @@ var statusOrder = [
     itemIcon
   ) : null;
   if (item.type === "component" || item.type === "group" || item.type === "story" && "children" in item && item.children) {
-    let { children = [] } = item, BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type], status = getMostCriticalStatusValue([itemStatus, groupStatus?.[item.id]]), color2 = status ? statusMapping[status][1] : null, showBranchStatus = status === "status-value:error" || status === "status-value:warning";
+    let { children = [] } = item, BranchNode2 = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type], status = getMostCriticalStatusValue([itemStatus, groupStatus?.[item.id]]), color2 = status ? getStatus(theme, status)[1] : null, showBranchStatus = status === "status-value:error" || status === "status-value:warning";
     return react_default.createElement(
       LeafNodeStyleWrapper,
       {
@@ -14745,8 +14794,7 @@ var statusOrder = [
         depth: isOrphan ? item.depth : item.depth - 1,
         onClick: (event) => {
           event.preventDefault(), onSelectStoryId(item.id), isMobile2 && setMobileMenuOpen(!1);
-        },
-        ...item.type === "docs" && { docsMode }
+        }
       },
       item.renderLabel?.(item, api) || item.name
     ),
@@ -17581,13 +17629,13 @@ var { document: document7 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
         openMenu,
         closeMenu,
         inputValue,
-        clearSelection,
         getInputProps,
         getItemProps,
         getLabelProps,
         getMenuProps,
         getRootProps,
-        highlightedIndex
+        highlightedIndex,
+        reset
       }) => {
         let input = inputValue ? inputValue.trim() : "", results = input ? getResults(input) : [], lastViewed = !input && getLastViewed();
         lastViewed && lastViewed.length && (results = lastViewed.reduce((acc, { storyId, refId }) => {
@@ -17630,7 +17678,9 @@ var { document: document7 } = scope, DEFAULT_MAX_SEARCH_RESULTS = 50, options =
               padding: "small",
               variant: "ghost",
               ariaLabel: "Clear search",
-              onClick: () => clearSelection()
+              onClick: () => {
+                reset({ inputValue: "" }), closeMenu();
+              }
             },
             react_default.createElement(CloseIcon, null)
           ), searchFieldContent)
@@ -17745,7 +17795,7 @@ var { document: document8 } = scope, ResultsList = styled.ol({
     }
   }
 })), Result = react_default.memo(function({ item, matches, onClick, ...props }) {
-  let click = useCallback(
+  let theme = useTheme(), click = useCallback(
     (event) => {
       event.preventDefault(), onClick?.(event);
     },
@@ -17753,8 +17803,8 @@ var { document: document8 } = scope, ResultsList = styled.ol({
   ), api = useStorybookApi();
   useEffect(() => {
     api && props.isHighlighted && item.type === "component" && api.emit(PRELOAD_ENTRIES, { ids: [item.children[0]] }, { options: { target: item.refId } });
-  }, [props.isHighlighted, item]);
-  let nameMatch = matches.find((match) => match.key === "name"), pathMatches = matches.filter((match) => match.key === "path"), [icon] = item.status ? statusMapping[item.status] : [];
+  }, [api, props.isHighlighted, item]);
+  let nameMatch = matches.find((match) => match.key === "name"), pathMatches = matches.filter((match) => match.key === "path"), [icon] = item.status ? getStatus(theme, item.status) : [];
   return react_default.createElement(ResultRow, { ...props, onClick: click }, react_default.createElement(IconWrapper2, null, item.type === "component" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "component" }, react_default.createElement(UseSymbol, { type: "component" })), item.type === "story" && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: item.subtype }, react_default.createElement(UseSymbol, { type: item.subtype })), !(item.type === "component" || item.type === "story") && react_default.createElement(TypeIcon2, { viewBox: "0 0 14 14", width: "14", height: "14", type: "document" }, react_default.createElement(UseSymbol, { type: "document" }))), react_default.createElement(ResultRowContent, { className: "search-result-item--label" }, react_default.createElement(Title, null, react_default.createElement(Highlight, { match: nameMatch }, item.name)), react_default.createElement(Path, null, item.path.map((group, index) => react_default.createElement("span", { key: index }, react_default.createElement(Highlight, { match: pathMatches.find((match) => match.arrayIndex === index) }, group))))), item.status ? react_default.createElement(StatusLabel, { status: item.status }, icon) : null);
 }), SearchResults = react_default.memo(function({
   query,