react-cosmos-ui 6.0.0-alpha.0

package/dist/plugins/FixtureSearch/FixtureSearchShortcuts.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { KeyBox } from '../../components/KeyBox.js';
+import { grey224, grey64, grey96 } from '../../style/colors.js';
+export function FixtureSearchShortcuts() {
+    return (React.createElement(Container, null,
+        React.createElement(Column, null,
+            React.createElement(Shortcut, { keys: ['↑', '↓'], label: "Navigate", title: "Navigate up and down through results" }),
+            React.createElement(Shortcut, { keys: ['Tab'], label: "Cycle", title: "Cycle through results" })),
+        React.createElement(Column, null,
+            React.createElement(Shortcut, { keys: ['Enter'], label: "Open fixture", title: "Open selected fixture" }),
+            React.createElement(Shortcut, { keys: ['Esc'], label: "Close search", title: "Close search modal" }))));
+}
+const Container = styled.div `
+  padding: 4px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  cursor: text;
+`;
+const Column = styled.div `
+  flex: 1;
+  padding: 0 0 8px 0;
+  max-width: 224px;
+  display: flex;
+  flex-direction: column;
+`;
+function Shortcut({ keys, label, title }) {
+    return (React.createElement(ShortcutContainer, { title: title },
+        React.createElement(Keys, null, keys.map(key => (React.createElement(KeyBox, { key: key, value: key, bgColor: grey224, textColor: grey64 })))),
+        React.createElement(Label, null, label)));
+}
+const ShortcutContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  height: 24px;
+  margin: 0 0 8px 0;
+  padding: 0 10px;
+  line-height: 24px;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+`;
+const Keys = styled.div `
+  flex: 1;
+  min-width: 53px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+const Label = styled.div `
+  flex: 1.4;
+  padding: 0 0 0 10px;
+  color: ${grey96};
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };

package/dist/plugins/FixtureSearch/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { FixtureSearchHeader } from './FixtureSearchHeader.js';
+import { FixtureSearchOverlay } from './FixtureSearchOverlay.js';
+const { onLoad, namedPlug, register } = createPlugin({
+    name: 'fixtureSearch',
+    initialState: {
+        open: false,
+        searchText: '',
+    },
+});
+onLoad(pluginContext => {
+    const { getMethodsOf, setState } = pluginContext;
+    const core = getMethodsOf('core');
+    return core.registerCommands({
+        searchFixtures: () => setState(prevState => ({ ...prevState, open: true })),
+    });
+});
+namedPlug('navRow', 'fixtureSearch', ({ pluginContext, slotProps }) => {
+    const { getMethodsOf } = pluginContext;
+    const rendererCore = getMethodsOf('rendererCore');
+    const fixtures = rendererCore.getFixtures();
+    const onOpen = useOnOpen(pluginContext);
+    const { onCloseNav } = slotProps;
+    // No point in showing fixture search button unless user has fixtures
+    if (Object.keys(fixtures).length === 0) {
+        return null;
+    }
+    return (React.createElement(FixtureSearchHeader, { validFixtureSelected: rendererCore.isValidFixtureSelected(), onOpen: onOpen, onCloseNav: onCloseNav }));
+});
+namedPlug('global', 'fixtureSearch', ({ pluginContext }) => {
+    const { getState, getMethodsOf } = pluginContext;
+    const { open, searchText } = getState();
+    const core = getMethodsOf('core');
+    const router = getMethodsOf('router');
+    const { fixturesDir, fixtureFileSuffix } = core.getFixtureFileVars();
+    const rendererCore = getMethodsOf('rendererCore');
+    const fixtures = rendererCore.getFixtures();
+    const onSetSearchText = useOnSetSearchText(pluginContext);
+    const onClose = useOnClose(pluginContext);
+    const onSelect = useOnSelect(pluginContext);
+    if (!open) {
+        return null;
+    }
+    return (React.createElement(FixtureSearchOverlay, { searchText: searchText, fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, fixtures: fixtures, selectedFixtureId: router.getSelectedFixtureId(), onSetSearchText: onSetSearchText, onClose: onClose, onSelect: onSelect }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function useOnSetSearchText({ setState }) {
+    return React.useCallback((newSearchText) => {
+        setState(prevState => ({ ...prevState, searchText: newSearchText }));
+    }, [setState]);
+}
+function useOnOpen({ setState }) {
+    return React.useCallback(() => setState(prevState => ({ ...prevState, open: true })), [setState]);
+}
+function useOnClose({ setState }) {
+    return React.useCallback(() => setState(prevState => ({ ...prevState, open: false })), [setState]);
+}
+function useOnSelect(context) {
+    const { setState, getMethodsOf } = context;
+    const router = getMethodsOf('router');
+    const fixtureTree = getMethodsOf('fixtureTree');
+    return React.useCallback((fixtureId, revealFixture) => {
+        router.selectFixture(fixtureId);
+        if (revealFixture) {
+            fixtureTree.revealFixture(fixtureId);
+        }
+        setState(prevState => ({ ...prevState, open: false }));
+    }, [setState, fixtureTree, router]);
+}

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

@@ -0,0 +1,7 @@
+export type FixtureSearchSpec = {
+    name: 'fixtureSearch';
+    state: {
+        open: boolean;
+        searchText: string;
+    };
+};

package/dist/plugins/FixtureSearch/spec.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+type Props = {
+    fixturesDir: string;
+    fixtureFileSuffix: string;
+};
+export declare function BlankState({ fixturesDir, fixtureFileSuffix }: Props): JSX.Element;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/dist/plugins/FixtureTree/BlankState.js

@@ -0,0 +1,75 @@
+import React from 'react';
+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"))))));
+}
+const Container = styled.div `
+  padding: 16px 24px;
+  background: ${grey32};
+  font-size: 14px;
+  line-height: 22px;
+`;
+const iconSize = 32;
+export const IconContainer = styled.div `
+  margin: 16px auto;
+  display: flex;
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  color: ${grey64};
+`;
+const Title = styled.div `
+  margin: 0 0 24px 0;
+  color: ${grey224};
+  text-align: center;
+  font-weight: 500;
+`;
+const Description = styled.div `
+  margin: 0 auto;
+  max-width: 256px;
+  color: ${grey160};
+  text-align: left;
+
+  ol {
+    padding: 0 0 0 16px;
+  }
+
+  li {
+    margin-bottom: 12px;
+  }
+
+  code {
+    padding: 0 4px;
+    border-radius: 3px;
+    background: ${grey8};
+    color: ${grey224};
+    font-family: 'Dank Mono', Courier, monospace;
+  }
+`;
+export const NoWrap = styled.span `
+  white-space: nowrap;
+`;

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

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { FixtureId } from 'react-cosmos-core';
+type Props = {
+    name: string;
+    fixtureId: FixtureId;
+    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 {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+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 },
+        React.createElement(FixtureTreeItem, { ref: selected ? selectedRef : undefined, indentLevel: indentLevel, selected: selected },
+            React.createElement(Name, null, name))));
+}
+const Name = styled.span `
+  flex-shrink: 0;
+  padding: 0 8px 0 16px;
+  white-space: nowrap;
+  transition: opacity ${quick}s;
+`;

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

@@ -0,0 +1,9 @@
+type Props = {
+    name: string;
+    expanded: boolean;
+    indentLevel: number;
+    selected: boolean;
+    onToggle: () => unknown;
+};
+export declare function FixtureDir({ name, expanded, indentLevel, selected, onToggle, }: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ChevronDownIcon, ChevronRightIcon, } from '../../../components/icons/index.js';
+import { blue, grey128 } from '../../../style/colors.js';
+import { FixtureTreeItem } from './FixtureTreeItem.js';
+export function FixtureDir({ name, expanded, indentLevel, selected, onToggle, }) {
+    return (React.createElement(DirButton, { onClick: onToggle },
+        React.createElement(FixtureTreeItem, { indentLevel: indentLevel, selected: selected },
+            React.createElement(CevronContainer, null, expanded ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null)),
+            React.createElement(Name, null, name))));
+}
+const DirButton = styled.button `
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: 14px;
+
+  :focus {
+    outline: none;
+    > span {
+      box-shadow: inset 2px 0px 0 0 ${blue};
+    }
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+const iconSize = 16;
+const CevronContainer = styled.span `
+  flex-shrink: 0;
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  color: ${grey128};
+
+  svg {
+    margin-left: -2px;
+  }
+`;
+const Name = styled.span `
+  flex-shrink: 0;
+  padding-right: 8px;
+  white-space: nowrap;
+`;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { FixtureId } from 'react-cosmos-core';
+type Props = {
+    children: ReactNode;
+    fixtureId: FixtureId;
+    onSelect: (fixtureId: FixtureId) => unknown;
+};
+export declare function FixtureLink({ children, fixtureId, onSelect }: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import { createRelativePlaygroundUrl } from '../../../shared/url.js';
+import { blue } from '../../../style/colors.js';
+export function FixtureLink({ children, fixtureId, onSelect }) {
+    return (React.createElement(Link, { href: createRelativePlaygroundUrl({ fixtureId }), onClick: e => {
+            e.preventDefault();
+            if (e.metaKey)
+                openAnchorInNewTab(e.currentTarget);
+            else
+                onSelect(fixtureId);
+        } }, children));
+}
+function openAnchorInNewTab(anchorEl) {
+    // Allow users to cmd+click to open fixtures in new tab
+    window.open(anchorEl.href, '_blank');
+}
+const Link = styled.a `
+  display: block;
+  width: 100%;
+  font-size: 14px;
+  text-decoration: none;
+
+  :focus {
+    outline: none;
+    > span {
+      box-shadow: inset 2px 0px 0 0 ${blue};
+    }
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;

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

@@ -0,0 +1,13 @@
+import React, { RefObject } from 'react';
+import { FixtureId, FixtureTreeNode } from 'react-cosmos-core';
+import { TreeExpansion } from '../../../shared/treeExpansion.js';
+type Props = {
+    rootNode: FixtureTreeNode;
+    selectedFixtureId: null | FixtureId;
+    selectedRef: RefObject<HTMLElement>;
+    expansion: TreeExpansion;
+    setExpansion: (expansion: TreeExpansion) => unknown;
+    onSelect: (fixtureId: FixtureId) => unknown;
+};
+export declare const FixtureTree: React.NamedExoticComponent<Props>;
+export {};

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

@@ -0,0 +1,37 @@
+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 { grey32 } from '../../../style/colors.js';
+import { FixtureButton } from './FixtureButton.js';
+import { FixtureDir } from './FixtureDir.js';
+import { MultiFixtureButton } from './MultiFixtureButton.js';
+export const FixtureTree = React.memo(function FixtureTree({ rootNode, selectedFixtureId, selectedRef, expansion, setExpansion, onSelect, }) {
+    return (React.createElement(Container, null,
+        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 }));
+                }
+                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 }));
+                }
+                if (!children)
+                    return null;
+                const selected = !expanded &&
+                    selectedFixtureId !== null &&
+                    nodeContainsFixtureId(node, selectedFixtureId);
+                return (React.createElement(FixtureDir, { name: name, indentLevel: parents.length, expanded: expanded, selected: selected, onToggle: onToggle }));
+            } })));
+});
+// Reason for inline-block: https://stackoverflow.com/a/53895622/128816
+const Container = styled.div `
+  display: inline-block;
+  min-width: 100%;
+  padding: 0 0 8px 0;
+  background: ${grey32};
+`;

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

@@ -0,0 +1,6 @@
+type Props = {
+    indentLevel: number;
+    selected?: boolean;
+};
+export declare const FixtureTreeItem: import("styled-components").StyledComponent<"span", any, Props, never>;
+export {};

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { grey224, grey24, grey248, grey32, grey8, selectedColors, } from '../../../style/colors.js';
+import { quick } from '../../../style/vars.js';
+const itemHeight = 28;
+export const FixtureTreeItem = styled.span `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: ${itemHeight}px;
+  padding: 0 0 0 ${props => getLeftPadding(props.indentLevel)}px;
+  background: ${selectedColors(grey32, grey8)};
+  color: ${selectedColors(grey224, grey248)};
+  line-height: ${itemHeight}px;
+  user-select: none;
+  cursor: default;
+  transition: color ${quick}s;
+
+  :hover {
+    background: ${selectedColors(grey24, grey8)};
+  }
+`;
+function getLeftPadding(depth) {
+    return 8 + depth * 12;
+}

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

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { FixtureId } from 'react-cosmos-core';
+type Props = {
+    name: string;
+    fixtureIds: Record<string, FixtureId>;
+    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 {};

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

@@ -0,0 +1,46 @@
+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 },
+            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);
+            return (React.createElement(MultiFixtureChildButton, { key: fixtureName, name: fixtureName, fixtureId: fixtureId, indentLevel: indentLevel + 1, selected: childSelected, selectedRef: selectedRef, onSelect: onSelect }));
+        }),
+        React.createElement(FooterPadding, null)));
+}
+const Name = styled.span `
+  flex-shrink: 0;
+  padding: 0 8px 0 16px;
+  white-space: nowrap;
+`;
+const Count = styled.span `
+  margin: 0 8px 0 -3px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  line-height: 18px;
+`;
+const FooterPadding = styled.div `
+  height: 2px;
+  background-color: ${grey8};
+`;

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { grey144, grey192, grey248, grey8, selectedColors, } from '../../../style/colors.js';
+import { quick } from '../../../style/vars.js';
+import { FixtureLink } from './FixtureLink.js';
+import { FixtureTreeItem } from './FixtureTreeItem.js';
+export function MultiFixtureChildButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }) {
+    return (React.createElement(FixtureLink, { fixtureId: fixtureId, onSelect: onSelect },
+        React.createElement(TreeItem, { ref: selected ? selectedRef : undefined, indentLevel: indentLevel, selected: selected },
+            React.createElement(Name, null, name))));
+}
+const Name = styled.span `
+  flex-shrink: 0;
+  padding: 0 8px 0 16px;
+  white-space: nowrap;
+  transition: opacity ${quick}s;
+`;
+const TreeItem = styled(FixtureTreeItem) `
+  background: ${grey8};
+  color: ${selectedColors(grey144, grey248)};
+
+  :hover {
+    background: ${grey8};
+    color: ${selectedColors(grey192, grey248)};
+  }
+`;

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

@@ -0,0 +1,14 @@
+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 {};

package/dist/plugins/FixtureTree/FixtureTreeContainer.js

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+import { createFixtureTree } from 'react-cosmos-core';
+import styled from 'styled-components';
+import { grey32 } from '../../style/colors.js';
+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, }) {
+    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 })));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FixtureTreeHeader, { fixturesDir: fixturesDir, fixtureFileSuffix: fixtureFileSuffix, fixtures: fixtures, expansion: expansion, setExpansion: setExpansion }),
+        React.createElement(TreeContainer, { ref: containerRef },
+            React.createElement(FixtureTree, { rootNode: rootNode, selectedFixtureId: selectedFixtureId, expansion: expansion, selectedRef: selectedRef, setExpansion: setExpansion, onSelect: selectFixture }))));
+}
+// The background color is required for the proper scroll bar color theme
+const TreeContainer = styled.div `
+  flex: 1;
+  background: ${grey32};
+  overflow: auto;
+`;

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

@@ -0,0 +1,11 @@
+import { FixtureList } from 'react-cosmos-core';
+import { TreeExpansion } from '../../shared/treeExpansion.js';
+type Props = {
+    fixturesDir: string;
+    fixtureFileSuffix: string;
+    fixtures: FixtureList;
+    expansion: TreeExpansion;
+    setExpansion: (treeExpansion: TreeExpansion) => unknown;
+};
+export declare function FixtureTreeHeader({ fixturesDir, fixtureFileSuffix, fixtures, expansion, setExpansion, }: Props): JSX.Element;
+export {};

package/dist/plugins/FixtureTree/FixtureTreeHeader.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { createFixtureTree } from 'react-cosmos-core';
+import styled from 'styled-components';
+import { IconButton32 } from '../../components/buttons/index.js';
+import { MinusSquareIcon, PlusSquareIcon, } from '../../components/icons/index.js';
+import { getFullTreeExpansion, hasExpandableNodes, isTreeFullyCollapsed, } from '../../shared/treeExpansion.js';
+import { grey128, grey32, white10 } from '../../style/colors.js';
+export function FixtureTreeHeader({ fixturesDir, fixtureFileSuffix, fixtures, expansion, setExpansion, }) {
+    const rootNode = useMemo(() => createFixtureTree({ fixtures, fixturesDir, fixtureFileSuffix }), [fixtures, fixturesDir, fixtureFileSuffix]);
+    return (React.createElement(Container, null,
+        React.createElement(Title, null, "All fixtures"),
+        !hasExpandableNodes(rootNode) ? (React.createElement(IconButton32, { title: "Collapse all fixture tree folders", icon: React.createElement(MinusSquareIcon, null), disabled: true, onClick: () => { } })) : isTreeFullyCollapsed(expansion) ? (React.createElement(IconButton32, { title: "Expand all fixture tree folders", icon: React.createElement(PlusSquareIcon, null), onClick: () => setExpansion(getFullTreeExpansion(rootNode)) })) : (React.createElement(IconButton32, { title: "Collapse all fixture tree folders", icon: React.createElement(MinusSquareIcon, null), onClick: () => setExpansion({}) }))));
+}
+const Container = styled.div `
+  flex-shrink: 0;
+  height: 40px;
+  padding: 0 4px;
+  border-top: 1px solid ${white10};
+  background: ${grey32};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+const Title = styled.div `
+  padding: 0 4px 0 20px;
+  color: ${grey128};
+  line-height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+`;

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

@@ -0,0 +1,2 @@
+declare const register: () => void;
+export { register };