react-cosmos-ui 6.0.0-alpha.9 → 6.0.0-beta.2

package/dist/playground.js

@@ -28,9 +28,20 @@ export default async function mount({ playgroundConfig, pluginConfigs, }) {
 }
 async function loadPluginScript(scriptPath) {
     console.log(`[Cosmos] Loading plugin script at ${scriptPath}`);
-    // Handle both absolute (dev server) and relative paths (static export)
+    // Paths are absolute with the dev server, and relative with static
+    // exports. Why aren't they always relative? Because in dev mode
+    // the plugins could be loaded from folders outside the project rootDir,
+    // for example when using a monorepo. In that case relative paths would
+    // have to contain "../" segments, which are not allowed in URLs, and
+    // for this reason we pass full paths when using the dev server.
     const normalizedPath = scriptPath.startsWith('/')
         ? scriptPath
         : `/${scriptPath}`;
-    await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+    try {
+        await import(/* webpackIgnore: true */ `./_plugin${normalizedPath}`);
+    }
+    catch (err) {
+        console.log(`[Cosmos] Failed to load plugin script ${scriptPath}`);
+        console.log(err);
+    }
 }

package/dist/playgroundConfig.d.ts

@@ -1,7 +1,9 @@
 import { CosmosPluginConfig } from 'react-cosmos-core';
 import { CoreSpec } from './plugins/Core/spec.js';
+import { RendererCoreSpec } from './plugins/RendererCore/spec.js';
 export type PlaygroundConfig = {
     core: CoreSpec['config'];
+    rendererCore: RendererCoreSpec['config'];
     [pluginName: string]: {};
 };
 export type PlaygroundMountArgs = {

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
 import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
 type Props = {

package/dist/plugins/ClassStatePanel/ClassStatePanel/ComponentClassState.js

@@ -1,11 +1,11 @@
 import { isEqual } from 'lodash-es';
 import React, { useCallback } from 'react';
 import { updateFixtureStateClassState, } from 'react-cosmos-core';
-import { IconButton32 } from '../../../components/buttons/index.js';
-import { RotateCcwIcon } from '../../../components/icons/index.js';
 import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../../components/SidePanel.js';
 import { ExpandCollapseValues } from '../../../components/ValueInputTree/ExpandCollapseValues.js';
-import { stringifyElementId, ValueInputTree, } from '../../../components/ValueInputTree/index.js';
+import { ValueInputTree, stringifyElementId, } from '../../../components/ValueInputTree/index.js';
+import { IconButton32 } from '../../../components/buttons/index.js';
+import { RotateCcwIcon } from '../../../components/icons/index.js';
 import { createClassStateFsUpdater } from './shared.js';
 export function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }) {
     const { componentName, elementId, values } = fsClassState;

package/dist/plugins/ControlPanel/ControlPanel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureState, StateUpdater } from 'react-cosmos-core';
 type Props = {
     fixtureState: FixtureState;

package/dist/plugins/ControlPanel/ControlPanel.js

@@ -1,8 +1,8 @@
 import { isEqual } from 'lodash-es';
 import React from 'react';
+import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../components/SidePanel.js';
 import { IconButton32 } from '../../components/buttons/index.js';
 import { RotateCcwIcon } from '../../components/icons/index.js';
-import { SidePanelActions, SidePanelBody, SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../components/SidePanel.js';
 import { ControlActionSlot } from '../../slots/ControlActionSlot.js';
 import { ControlSlot } from '../../slots/ControlSlot.js';
 export function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }) {

package/dist/plugins/ControlSelect/SelectValueInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureStateSelectControl } from 'react-cosmos-core';
 type Props = {
     name: string;

package/dist/plugins/ControlSelect/SelectValueInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Select } from '../../components/inputs/Select.js';
 import { Label, ValueDataContainer, ValueInputContainer, } from '../../components/ValueInputTree/ValueInput/shared.js';
+import { Select } from '../../components/inputs/Select.js';
 import { lightBlue } from '../../style/colors.js';
 export function SelectValueInput({ name, control, onChange }) {
     const { options, currentValue } = control;

package/dist/plugins/Core/index.js

@@ -11,7 +11,6 @@ const { onLoad, register } = createPlugin({
         fixturesDir: '__fixtures__',
         fixtureFileSuffix: 'fixture',
         devServerOn: false,
-        webRendererUrl: null,
     },
     methods: {
         registerCommands,
@@ -19,7 +18,6 @@ const { onLoad, register } = createPlugin({
         getProjectId,
         getFixtureFileVars,
         isDevServerOn,
-        getWebRendererUrl,
     },
 });
 export { register };
@@ -63,6 +61,3 @@ function getFixtureFileVars({ getConfig }) {
 function isDevServerOn({ getConfig }) {
     return getConfig().devServerOn;
 }
-function getWebRendererUrl({ getConfig }) {
-    return getConfig().webRendererUrl;
-}

package/dist/plugins/Core/spec.d.ts

@@ -6,7 +6,6 @@ export type CoreSpec = {
         fixturesDir: string;
         fixtureFileSuffix: string;
         devServerOn: boolean;
-        webRendererUrl: null | string;
     };
     state: {
         commands: Commands;
@@ -20,6 +19,5 @@ export type CoreSpec = {
             fixtureFileSuffix: string;
         };
         isDevServerOn(): boolean;
-        getWebRendererUrl(): null | string;
     };
 };

package/dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     selected: boolean;
     onClick: () => unknown;

package/dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts

@@ -1,10 +1,10 @@
-import { FixtureId, FlatFixtureTree } from 'react-cosmos-core';
+/// <reference types="react" />
+import { FixtureId, FlatFixtureTree, FlatFixtureTreeItem } from 'react-cosmos-core';
 type Props = {
-    fixtureItems: FlatFixtureTree;
-    bookmarks: FixtureId[];
+    bookmarks: FlatFixtureTree;
     selectedFixtureId: FixtureId | null;
     onFixtureSelect: (fixtureId: FixtureId) => void;
-    onBookmarkDelete: (fixtureId: FixtureId) => void;
+    onBookmarkDelete: (fixtureItem: FlatFixtureTreeItem) => void;
 };
-export declare function FixtureBookmarks({ fixtureItems, bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): JSX.Element | null;
+export declare function FixtureBookmarks({ bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): JSX.Element | null;
 export {};

package/dist/plugins/FixtureBookmark/FixtureBookmarks.js

@@ -1,19 +1,19 @@
-import { isEqual } from 'lodash-es';
+import { isEqual, sortBy } from 'lodash-es';
 import React from 'react';
+import { stringifyFixtureId, } from 'react-cosmos-core';
 import styled from 'styled-components';
 import { XIcon } from '../../components/icons/index.js';
-import { stringifyFixtureId } from '../../components/ValueInputTree/index.js';
 import { createRelativePlaygroundUrl } from '../../shared/url.js';
 import { blue, grey128, grey224, grey24, grey248, grey32, grey8, selectedColors, white10, } from '../../style/colors.js';
 import { quick } from '../../style/vars.js';
-export function FixtureBookmarks({ fixtureItems, bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }) {
-    const bookmarkedItems = fixtureItems.filter(item => bookmarks.some(b => isEqual(b, item.fixtureId)));
-    if (!bookmarkedItems.length)
+export function FixtureBookmarks({ bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }) {
+    const sortedBookmarks = useSortedBookmarks(bookmarks);
+    if (!sortedBookmarks.length)
         return null;
     return (React.createElement(Container, null,
         React.createElement(Header, null,
             React.createElement(HeaderTitle, null, "Bookmarks")),
-        bookmarkedItems.map(fixtureItem => {
+        sortedBookmarks.map(fixtureItem => {
             const { fixtureId } = fixtureItem;
             const itemKey = stringifyFixtureId(fixtureId);
             const selected = isEqual(fixtureId, selectedFixtureId);
@@ -28,11 +28,14 @@ export function FixtureBookmarks({ fixtureItems, bookmarks, selectedFixtureId, o
             }
             return (React.createElement(ListItem, { key: itemKey, selected: selected },
                 React.createElement(FixtureLink, { href: createRelativePlaygroundUrl({ fixtureId }), selected: selected, onClick: handleClick }, getFixtureName(fixtureItem)),
-                React.createElement(DeleteButton, { onClick: () => onBookmarkDelete(fixtureId) },
+                React.createElement(DeleteButton, { onClick: () => onBookmarkDelete(fixtureItem) },
                     React.createElement(DeleteIconContainer, null,
                         React.createElement(XIcon, null)))));
         })));
 }
+function useSortedBookmarks(bookmarks) {
+    return React.useMemo(() => sortBy(bookmarks, b => b.fixtureId.path, b => b.fixtureId.name), [bookmarks]);
+}
 function openAnchorInNewTab(anchorEl) {
     // Allow users to cmd+click to open fixtures in new tab
     window.open(anchorEl.href, '_blank');

package/dist/plugins/FixtureBookmark/index.js

@@ -1,6 +1,5 @@
 import { isEqual } from 'lodash-es';
 import React from 'react';
-import { createFixtureTree, flattenFixtureTree, } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
 import { BookmarkFixtureButton } from './BookmarkFixtureButton.js';
 import { FixtureBookmarks } from './FixtureBookmarks.js';
@@ -8,20 +7,19 @@ const { namedPlug, register } = createPlugin({
     name: 'fixtureBookmark',
 });
 namedPlug('fixtureAction', 'bookmarkFixture', ({ pluginContext, slotProps }) => {
-    const { fixtureId } = slotProps;
+    const { fixtureItem } = slotProps;
     const { getBookmarks, setBookmarks } = getStorageApi(pluginContext);
     const bookmarks = getBookmarks();
-    const selected = bookmarks.some(b => isEqual(b, fixtureId));
+    const selected = bookmarks.some(b => isEqual(b, fixtureItem));
     return (React.createElement(BookmarkFixtureButton, { selected: selected, onClick: () => setBookmarks(selected
-            ? bookmarks.filter(b => !isEqual(b, fixtureId))
-            : [...bookmarks, fixtureId]) }));
+            ? bookmarks.filter(b => !isEqual(b, fixtureItem))
+            : [...bookmarks, fixtureItem]) }));
 });
 namedPlug('navRow', 'fixtureBookmarks', ({ pluginContext }) => {
     const router = pluginContext.getMethodsOf('router');
     const { getBookmarks, setBookmarks } = getStorageApi(pluginContext);
     const bookmarks = getBookmarks();
-    const fixtureItems = useFixtureItems(pluginContext);
-    return (React.createElement(FixtureBookmarks, { fixtureItems: fixtureItems, bookmarks: bookmarks, selectedFixtureId: router.getSelectedFixtureId(), onFixtureSelect: router.selectFixture, onBookmarkDelete: fixtureId => setBookmarks(bookmarks.filter(b => !isEqual(b, fixtureId))) }));
+    return (React.createElement(FixtureBookmarks, { bookmarks: bookmarks, selectedFixtureId: router.getSelectedFixtureId(), onFixtureSelect: router.selectFixture, onBookmarkDelete: fixtureItem => setBookmarks(bookmarks.filter(b => !isEqual(b, fixtureItem))) }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')
@@ -29,18 +27,10 @@ if (process.env.NODE_ENV !== 'test')
 function getStorageApi(pluginContext) {
     const storage = pluginContext.getMethodsOf('storage');
     function getBookmarks() {
-        return storage.getItem('fixtureBookmarks') || [];
+        return storage.getItem('fixtureBookmarks.1') || [];
     }
     function setBookmarks(bookmarks) {
-        storage.setItem('fixtureBookmarks', bookmarks);
+        storage.setItem('fixtureBookmarks.1', bookmarks);
     }
     return { getBookmarks, setBookmarks };
 }
-function useFixtureItems(pluginContext) {
-    const { getMethodsOf } = pluginContext;
-    const core = getMethodsOf('core');
-    const { fixturesDir, fixtureFileSuffix } = core.getFixtureFileVars();
-    const rendererCore = getMethodsOf('rendererCore');
-    const fixtures = rendererCore.getFixtures();
-    return React.useMemo(() => flattenFixtureTree(createFixtureTree({ fixturesDir, fixtureFileSuffix, fixtures })), [fixtureFileSuffix, fixtures, fixturesDir]);
-}

package/dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 type Props = {
-    validFixtureSelected: boolean;
+    fixtureSelected: boolean;
     onOpen: () => unknown;
     onCloseNav: () => unknown;
 };
-export declare function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureSearch/FixtureSearchHeader.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
+import { KeyBox } from '../../components/KeyBox.js';
 import { IconButton32 } from '../../components/buttons/index.js';
 import { ChevronLeftIcon, SearchIcon } from '../../components/icons/index.js';
-import { KeyBox } from '../../components/KeyBox.js';
 import { blue, grey160, grey32, white10 } from '../../style/colors.js';
-export function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }) {
+export function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }) {
     return (React.createElement(Container, null,
         React.createElement(SearchButton, { onClick: onOpen },
             React.createElement(SearchIconContainer, null,
@@ -13,7 +13,7 @@ export function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav,
             React.createElement(KeyBox, { value: '⌘', bgColor: white10, textColor: grey160, size: 20 }),
             React.createElement(KeyBox, { value: 'P', bgColor: white10, textColor: grey160, size: 20 })),
         React.createElement(NavButtonContainer, null,
-            React.createElement(IconButton32, { icon: React.createElement(ChevronLeftIcon, null), title: "Hide fixture list", disabled: !validFixtureSelected, selected: false, onClick: onCloseNav }))));
+            React.createElement(IconButton32, { icon: React.createElement(ChevronLeftIcon, null), title: "Hide fixture list", disabled: !fixtureSelected, selected: false, onClick: onCloseNav }))));
 }
 const Container = styled.div `
   display: flex;

package/dist/plugins/FixtureSearch/FixtureSearchOverlay.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureId, FixtureList } from 'react-cosmos-core';
 type Props = {
     searchText: string;

package/dist/plugins/FixtureSearch/FixtureSearchOverlay.js

@@ -1,7 +1,7 @@
 import { filter } from 'fuzzaldrin-plus';
 import { isEqual } from 'lodash-es';
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { createFixtureTree, flattenFixtureTree, KEY_DOWN, KEY_ENTER, KEY_ESC, KEY_FWD_SLASH, KEY_TAB, KEY_UP, } from 'react-cosmos-core';
+import { KEY_DOWN, KEY_ENTER, KEY_ESC, KEY_FWD_SLASH, KEY_TAB, KEY_UP, createFixtureTree, flattenFixtureTree, } from 'react-cosmos-core';
 import styled from 'styled-components';
 import { HelpCircleIcon, SearchIcon } from '../../components/icons/index.js';
 import { black60, grey128, grey160, grey176, grey208, grey224, grey248, grey64, } from '../../style/colors.js';
@@ -176,7 +176,7 @@ export function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffi
                 React.createElement(FixtureSearchShortcuts, null)),
             React.createElement(ResultsViewport, null,
                 React.createElement(ResultsContainer, null,
-                    matchingFixturePaths.map(cleanFixturePath => (React.createElement(FixtureSearchResult, { key: cleanFixturePath, cleanFixturePath: cleanFixturePath, fixtureItem: fixtureItems[cleanFixturePath], active: cleanFixturePath === activeFixturePath, onSelect: onSelect }))),
+                    matchingFixturePaths.map(cleanFixturePath => fixtureItems[cleanFixturePath] && (React.createElement(FixtureSearchResult, { key: cleanFixturePath, cleanFixturePath: cleanFixturePath, fixtureItem: fixtureItems[cleanFixturePath], active: cleanFixturePath === activeFixturePath, onSelect: onSelect }))),
                     matchingFixturePaths.length === 0 && (React.createElement(NoResults, null, "No results")))))));
 }
 function findFixturePath(fixtureItems, fixtureId) {

package/dist/plugins/FixtureSearch/FixtureSearchResult.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
 type Props = {
     active: boolean;

package/dist/plugins/FixtureSearch/FixtureSearchShortcuts.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function FixtureSearchShortcuts(): JSX.Element;

package/dist/plugins/FixtureSearch/index.js

@@ -18,6 +18,7 @@ onLoad(pluginContext => {
 });
 namedPlug('navRow', 'fixtureSearch', ({ pluginContext, slotProps }) => {
     const { getMethodsOf } = pluginContext;
+    const router = getMethodsOf('router');
     const rendererCore = getMethodsOf('rendererCore');
     const fixtures = rendererCore.getFixtures();
     const onOpen = useOnOpen(pluginContext);
@@ -26,7 +27,7 @@ namedPlug('navRow', 'fixtureSearch', ({ pluginContext, slotProps }) => {
     if (Object.keys(fixtures).length === 0) {
         return null;
     }
-    return (React.createElement(FixtureSearchHeader, { validFixtureSelected: rendererCore.isValidFixtureSelected(), onOpen: onOpen, onCloseNav: onCloseNav }));
+    return (React.createElement(FixtureSearchHeader, { fixtureSelected: router.getSelectedFixtureId() !== null, onOpen: onOpen, onCloseNav: onCloseNav }));
 });
 namedPlug('global', 'fixtureSearch', ({ pluginContext }) => {
     const { getState, getMethodsOf } = pluginContext;

package/dist/plugins/FixtureTree/BlankState.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     fixturesDir: string;
     fixtureFileSuffix: string;

package/dist/plugins/FixtureTree/BlankState.js

@@ -1,32 +1,31 @@
 import React from 'react';
+import { DelayRender } from 'react-cosmos-core';
 import styled from 'styled-components';
 import { FileIcon } from '../../components/icons/index.js';
 import { grey160, grey224, grey32, grey64, grey8 } from '../../style/colors.js';
 export function BlankState({ fixturesDir, fixtureFileSuffix }) {
-    return (React.createElement(Container, { "data-testid": "nav-blank-state" },
-        React.createElement(IconContainer, null,
-            React.createElement(FileIcon, null)),
-        React.createElement(Title, null,
-            "No component ",
-            React.createElement(NoWrap, null, "fixtures found")),
-        React.createElement(Description, null,
-            React.createElement("ol", null,
-                React.createElement("li", null,
-                    "Place fixture files under ",
-                    React.createElement("code", null, fixturesDir),
-                    " dirs or add the",
-                    ' ',
-                    React.createElement("code", null,
-                        ".",
-                        fixtureFileSuffix),
-                    " suffix to",
-                    ' ',
-                    React.createElement(NoWrap, null, "their name")),
-                React.createElement("li", null,
-                    "Default exports from your fixtures (any React element or component)",
-                    ' ',
-                    "will ",
-                    React.createElement(NoWrap, null, "appear here"))))));
+    return (React.createElement(DelayRender, { delay: 500 },
+        React.createElement(Container, { "data-testid": "nav-blank-state" },
+            React.createElement(IconContainer, null,
+                React.createElement(FileIcon, null)),
+            React.createElement(Title, null,
+                "No component ",
+                React.createElement(NoWrap, null, "fixtures found")),
+            React.createElement(Description, null,
+                React.createElement("ol", null,
+                    React.createElement("li", null,
+                        "Place fixture files under ",
+                        React.createElement("code", null, fixturesDir),
+                        " dirs or add the ",
+                        React.createElement("code", null,
+                            ".",
+                            fixtureFileSuffix),
+                        " suffix to",
+                        ' ',
+                        React.createElement(NoWrap, null, "their name")),
+                    React.createElement("li", null,
+                        "Default exports from your fixtures (any React element or component) will ",
+                        React.createElement(NoWrap, null, "appear here")))))));
 }
 const Container = styled.div `
   padding: 16px 24px;

package/dist/plugins/FixtureTree/FixtureTree/FixtureButton.d.ts

@@ -2,11 +2,11 @@ import { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
-    fixtureId: FixtureId;
+    fixturePath: string;
     indentLevel: number;
     selected: boolean;
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-export declare function FixtureButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureTree/FixtureTree/FixtureButton.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { quick } from '../../../style/vars.js';
 import { FixtureLink } from './FixtureLink.js';
 import { FixtureTreeItem } from './FixtureTreeItem.js';
-export function FixtureButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }) {
-    return (React.createElement(FixtureLink, { fixtureId: fixtureId, onSelect: onSelect },
+export function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }) {
+    return (React.createElement(FixtureLink, { fixtureId: { path: fixturePath }, onSelect: onSelect },
         React.createElement(FixtureTreeItem, { ref: selected ? selectedRef : undefined, indentLevel: indentLevel, selected: selected },
             React.createElement(Name, null, name))));
 }

package/dist/plugins/FixtureTree/FixtureTree/FixtureDir.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     name: string;
     expanded: boolean;

package/dist/plugins/FixtureTree/FixtureTree/FixtureTree.js

@@ -1,8 +1,7 @@
-import { isEqual } from 'lodash-es';
 import React from 'react';
 import styled from 'styled-components';
 import { TreeView } from '../../../components/TreeView.js';
-import { nodeContainsFixtureId, recordContainsFixtureId, } from '../../../shared/fixtureTree.js';
+import { fixtureTreeNodeContainsFixtureId } from '../../../shared/fixtureTree.js';
 import { grey32 } from '../../../style/colors.js';
 import { FixtureButton } from './FixtureButton.js';
 import { FixtureDir } from './FixtureDir.js';
@@ -12,19 +11,18 @@ export const FixtureTree = React.memo(function FixtureTree({ rootNode, selectedF
         React.createElement(TreeView, { node: rootNode, expansion: expansion, setExpansion: setExpansion, renderNode: ({ node, name, parents, expanded, onToggle }) => {
                 const { data, children } = node;
                 if (data.type === 'fixture') {
-                    const selected = isEqual(selectedFixtureId, data.fixtureId);
-                    return (React.createElement(FixtureButton, { name: name, fixtureId: data.fixtureId, indentLevel: parents.length, selected: selected, selectedRef: selectedRef, onSelect: onSelect }));
+                    const selected = selectedFixtureId?.path === data.path;
+                    return (React.createElement(FixtureButton, { name: name, fixturePath: data.path, indentLevel: parents.length, selected: selected, selectedRef: selectedRef, onSelect: onSelect }));
                 }
                 if (data.type === 'multiFixture') {
-                    const selected = selectedFixtureId !== null &&
-                        recordContainsFixtureId(data.fixtureIds, selectedFixtureId);
-                    return (React.createElement(MultiFixtureButton, { name: name, fixtureIds: data.fixtureIds, indentLevel: parents.length, selected: selected, selectedFixtureId: selectedFixtureId, selectedRef: selectedRef, onSelect: onSelect }));
+                    const selected = selectedFixtureId?.path === data.path;
+                    return (React.createElement(MultiFixtureButton, { name: name, fixturePath: data.path, fixtureNames: data.names, indentLevel: parents.length, selected: selected, selectedFixtureId: selectedFixtureId, selectedRef: selectedRef, onSelect: onSelect }));
                 }
                 if (!children)
                     return null;
                 const selected = !expanded &&
                     selectedFixtureId !== null &&
-                    nodeContainsFixtureId(node, selectedFixtureId);
+                    fixtureTreeNodeContainsFixtureId(node, selectedFixtureId);
                 return (React.createElement(FixtureDir, { name: name, indentLevel: parents.length, expanded: expanded, selected: selected, onToggle: onToggle }));
             } })));
 });

package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.d.ts

@@ -2,12 +2,13 @@ import { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
 type Props = {
     name: string;
-    fixtureIds: Record<string, FixtureId>;
+    fixturePath: string;
+    fixtureNames: string[];
     indentLevel: number;
     selected: boolean;
     selectedFixtureId: null | FixtureId;
     selectedRef: RefObject<HTMLElement>;
     onSelect: (fixtureId: FixtureId) => unknown;
 };
-export declare function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element | null;
+export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureTree/FixtureTree/MultiFixtureButton.js

@@ -1,27 +1,32 @@
-import { isEqual } from 'lodash-es';
 import React from 'react';
 import styled from 'styled-components';
 import { grey8 } from '../../../style/colors.js';
 import { FixtureLink } from './FixtureLink.js';
 import { FixtureTreeItem } from './FixtureTreeItem.js';
 import { MultiFixtureChildButton } from './MultiFixtureChildButton.js';
-export function MultiFixtureButton({ name, fixtureIds, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }) {
-    const fixtureNames = Object.keys(fixtureIds);
-    const firstFixtureId = fixtureIds[fixtureNames[0]];
-    if (!firstFixtureId)
-        return null;
-    if (!selected)
-        return (React.createElement(FixtureLink, { fixtureId: firstFixtureId, onSelect: onSelect },
+export function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }) {
+    if (!selected) {
+        const [firstFixtureName] = fixtureNames;
+        const fixtureId = firstFixtureName
+            ? { path: fixturePath, name: firstFixtureName }
+            : { path: fixturePath };
+        return (React.createElement(FixtureLink, { fixtureId: fixtureId, onSelect: onSelect },
             React.createElement(FixtureTreeItem, { indentLevel: indentLevel, selected: false },
                 React.createElement(Name, null, name),
                 React.createElement(Count, null, fixtureNames.length))));
+    }
     return (React.createElement(React.Fragment, null,
         React.createElement(FixtureTreeItem, { indentLevel: indentLevel, selected: true },
             React.createElement(Name, null, name),
             React.createElement(Count, null, fixtureNames.length)),
-        fixtureNames.map(fixtureName => {
-            const fixtureId = fixtureIds[fixtureName];
-            const childSelected = isEqual(fixtureId, selectedFixtureId);
+        fixtureNames.map((fixtureName, index) => {
+            const fixtureId = { path: fixturePath, name: fixtureName };
+            // Select first child when only the path of a multi fixture is selected
+            const childSelected = selectedFixtureId !== null &&
+                selectedFixtureId.path === fixturePath &&
+                (selectedFixtureId.name === undefined
+                    ? index === 0
+                    : fixtureName === selectedFixtureId.name);
             return (React.createElement(MultiFixtureChildButton, { key: fixtureName, name: fixtureName, fixtureId: fixtureId, indentLevel: indentLevel + 1, selected: childSelected, selectedRef: selectedRef, onSelect: onSelect }));
         }),
         React.createElement(FooterPadding, null)));

package/dist/plugins/FixtureTree/FixtureTreeContainer.d.ts

@@ -1,14 +1,14 @@
+/// <reference types="react" />
 import { FixtureId, FixtureList } from 'react-cosmos-core';
 import { TreeExpansion } from '../../shared/treeExpansion.js';
 type Props = {
     fixturesDir: string;
     fixtureFileSuffix: string;
     selectedFixtureId: null | FixtureId;
-    rendererConnected: boolean;
     fixtures: FixtureList;
     expansion: TreeExpansion;
     selectFixture: (fixtureId: FixtureId) => void;
     setExpansion: (expansion: TreeExpansion) => unknown;
 };
-export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, rendererConnected, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
+export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
 export {};

package/dist/plugins/FixtureTree/FixtureTreeContainer.js

@@ -6,11 +6,9 @@ import { BlankState } from './BlankState.js';
 import { FixtureTree } from './FixtureTree/FixtureTree.js';
 import { FixtureTreeHeader } from './FixtureTreeHeader.js';
 import { useScrollToSelected } from './useScrollToSelected.js';
-export function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, rendererConnected, fixtures, expansion, selectFixture, setExpansion, }) {
+export function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }) {
     const rootNode = useMemo(() => createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix }), [fixtures, fixturesDir, fixtureFileSuffix]);
     const { containerRef, selectedRef } = useScrollToSelected(selectedFixtureId);
-    if (!rendererConnected)
-        return React.createElement(TreeContainer, null);
     if (Object.keys(fixtures).length === 0) {
         return (React.createElement(TreeContainer, null,
             React.createElement(BlankState, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix })));

package/dist/plugins/FixtureTree/FixtureTreeHeader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FixtureList } from 'react-cosmos-core';
 import { TreeExpansion } from '../../shared/treeExpansion.js';
 type Props = {

package/dist/plugins/FixtureTree/index.js

@@ -18,7 +18,7 @@ namedPlug('navRow', 'fixtureTree', ({ pluginContext }) => {
     const rendererCore = getMethodsOf('rendererCore');
     const expansion = getTreeExpansion(storage);
     const setExpansionMemo = useCallback((newExpansion) => setTreeExpansion(storage, newExpansion), [storage]);
-    return (React.createElement(FixtureTreeContainer, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, selectedFixtureId: router.getSelectedFixtureId(), rendererConnected: rendererCore.isRendererConnected(), fixtures: rendererCore.getFixtures(), expansion: expansion, selectFixture: router.selectFixture, setExpansion: setExpansionMemo }));
+    return (React.createElement(FixtureTreeContainer, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, selectedFixtureId: router.getSelectedFixtureId(), fixtures: rendererCore.getFixtures(), expansion: expansion, selectFixture: router.selectFixture, setExpansion: setExpansionMemo }));
 });
 export { register };
 if (process.env.NODE_ENV !== 'test')

package/dist/plugins/FixtureTree/revealFixture.js

@@ -1,5 +1,5 @@
 import { createFixtureTree, } from 'react-cosmos-core';
-import { nodeContainsFixtureId } from '../../shared/fixtureTree.js';
+import { fixtureTreeNodeContainsFixtureId } from '../../shared/fixtureTree.js';
 import { getTreeExpansion, setTreeExpansion, } from './shared.js';
 export function revealFixture(context, fixtureId) {
     const { getMethodsOf } = context;
@@ -32,7 +32,7 @@ function findDirPath({ data, children }, fixtureId, parents = []) {
     for (let childName of childNames) {
         const childNode = children[childName];
         if (childNode.data.type !== 'fileDir') {
-            if (nodeContainsFixtureId(childNode, fixtureId))
+            if (fixtureTreeNodeContainsFixtureId(childNode, fixtureId))
                 return parents;
         }
         else {

package/dist/plugins/FixtureTree/shared.d.ts

@@ -3,5 +3,5 @@ import { TreeExpansion } from '../../shared/treeExpansion.js';
 import { StorageSpec } from '../Storage/spec.js';
 import { FixtureTreeSpec } from './spec.js';
 export type FixtureTreeContext = PluginContext<FixtureTreeSpec>;
-export declare function getTreeExpansion({ getItem }: StorageSpec['methods']): TreeExpansion;
+export declare function getTreeExpansion({ getItem }: StorageSpec['methods']): {};
 export declare function setTreeExpansion({ setItem }: StorageSpec['methods'], treeExpansion: TreeExpansion): void;

package/dist/plugins/FullScreenButton/FullScreenButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     onClick: () => void;
 };