react-cosmos-ui 6.0.0-alpha.0

package/dist/plugins/FixtureBookmark/FixtureBookmarks.js

@@ -0,0 +1,123 @@
+import { isEqual } from 'lodash-es';
+import React from 'react';
+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)
+        return null;
+    return (React.createElement(Container, null,
+        React.createElement(Header, null,
+            React.createElement(HeaderTitle, null, "Bookmarks")),
+        bookmarkedItems.map(fixtureItem => {
+            const { fixtureId } = fixtureItem;
+            const itemKey = stringifyFixtureId(fixtureId);
+            const selected = isEqual(fixtureId, selectedFixtureId);
+            function handleClick(e) {
+                e.preventDefault();
+                if (e.metaKey) {
+                    openAnchorInNewTab(e.currentTarget);
+                }
+                else {
+                    onFixtureSelect(fixtureId);
+                }
+            }
+            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(DeleteIconContainer, null,
+                        React.createElement(XIcon, null)))));
+        })));
+}
+function openAnchorInNewTab(anchorEl) {
+    // Allow users to cmd+click to open fixtures in new tab
+    window.open(anchorEl.href, '_blank');
+}
+function getFixtureName({ name, fileName }) {
+    return name ? `${fileName} ${name}` : fileName;
+}
+const Container = styled.div `
+  padding: 0 0 8px 0;
+  background: ${grey32};
+`;
+const Header = 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 HeaderTitle = styled.div `
+  padding: 0 4px 0 20px;
+  color: ${grey128};
+  line-height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+`;
+const FixtureLink = styled.a `
+  flex: 1;
+  padding: 0 0 0 24px;
+  font-size: 14px;
+  color: ${selectedColors(grey224, grey248)};
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  :focus {
+    outline: none;
+    box-shadow: inset 2px 0px 0 0 ${blue};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+const DeleteButton = styled.span `
+  flex-shrink: 0;
+  width: 32px;
+  height: 28px;
+  padding: 0 4px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity ${quick}s;
+`;
+const DeleteIconContainer = styled.div `
+  width: 16px;
+  height: 16px;
+  color: ${grey128};
+`;
+const ListItem = styled.span `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 28px;
+  background: ${selectedColors(grey32, grey8)};
+  line-height: 28px;
+  user-select: none;
+  cursor: default;
+  transition: color ${quick}s;
+
+  :hover {
+    background: ${selectedColors(grey24, grey8)};
+  }
+
+  :hover ${DeleteButton} {
+    opacity: 0.6;
+    :hover {
+      opacity: 1;
+    }
+  }
+`;

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

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

package/dist/plugins/FixtureBookmark/index.js

@@ -0,0 +1,46 @@
+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';
+const { namedPlug, register } = createPlugin({
+    name: 'fixtureBookmark',
+});
+namedPlug('fixtureAction', 'bookmarkFixture', ({ pluginContext, slotProps }) => {
+    const { fixtureId } = slotProps;
+    const { getBookmarks, setBookmarks } = getStorageApi(pluginContext);
+    const bookmarks = getBookmarks();
+    const selected = bookmarks.some(b => isEqual(b, fixtureId));
+    return (React.createElement(BookmarkFixtureButton, { selected: selected, onClick: () => setBookmarks(selected
+            ? bookmarks.filter(b => !isEqual(b, fixtureId))
+            : [...bookmarks, fixtureId]) }));
+});
+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))) }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();
+function getStorageApi(pluginContext) {
+    const storage = pluginContext.getMethodsOf('storage');
+    function getBookmarks() {
+        return storage.getItem('fixtureBookmarks') || [];
+    }
+    function setBookmarks(bookmarks) {
+        storage.setItem('fixtureBookmarks', 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/FixtureBookmark/spec.d.ts

@@ -0,0 +1,3 @@
+export type FixtureBookmarkSpec = {
+    name: 'fixtureBookmark';
+};

package/dist/plugins/FixtureBookmark/spec.js

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

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

@@ -0,0 +1,7 @@
+type Props = {
+    validFixtureSelected: boolean;
+    onOpen: () => unknown;
+    onCloseNav: () => unknown;
+};
+export declare function FixtureSearchHeader({ validFixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export {};

package/dist/plugins/FixtureSearch/FixtureSearchHeader.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled from 'styled-components';
+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, }) {
+    return (React.createElement(Container, null,
+        React.createElement(SearchButton, { onClick: onOpen },
+            React.createElement(SearchIconContainer, null,
+                React.createElement(SearchIcon, null)),
+            React.createElement(SearchLabel, null, "Search fixtures"),
+            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 }))));
+}
+const Container = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  margin: 0 1px 0 0;
+  background: ${grey32};
+`;
+const SearchButton = styled.button `
+  flex: 1;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: ${grey160};
+  padding: 0 0 0 16px;
+  overflow: hidden;
+  cursor: text;
+
+  :focus {
+    outline: none;
+    box-shadow: inset 2px 0px 0 0 ${blue};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+const SearchIconContainer = styled.span `
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin: 1px 8px 0 6px;
+  opacity: 0.64;
+`;
+const SearchLabel = styled.span `
+  padding: 0 3px 0 0;
+  line-height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+`;
+const NavButtonContainer = styled.div `
+  padding: 0 4px;
+`;

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

@@ -0,0 +1,13 @@
+import { FixtureId, FixtureList } from 'react-cosmos-core';
+type Props = {
+    searchText: string;
+    fixturesDir: string;
+    fixtureFileSuffix: string;
+    fixtures: FixtureList;
+    selectedFixtureId: null | FixtureId;
+    onSetSearchText: (searchText: string) => unknown;
+    onClose: () => unknown;
+    onSelect: (fixtureId: FixtureId, revealFixture: boolean) => unknown;
+};
+export declare function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffix, fixtures, selectedFixtureId, onSetSearchText, onClose, onSelect, }: Props): JSX.Element;
+export {};

package/dist/plugins/FixtureSearch/FixtureSearchOverlay.js

@@ -0,0 +1,312 @@
+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 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';
+import { quick } from '../../style/vars.js';
+import { FixtureSearchResult } from './FixtureSearchResult.js';
+import { FixtureSearchShortcuts } from './FixtureSearchShortcuts.js';
+export function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffix, fixtures, selectedFixtureId, onSetSearchText, onClose, onSelect, }) {
+    // Fixture items are memoized purely to minimize computation
+    const fixtureItems = useMemo(() => {
+        const fixtureTree = createFixtureTree({
+            fixtures,
+            fixturesDir,
+            fixtureFileSuffix,
+        });
+        const flatFixtureTree = flattenFixtureTree(fixtureTree);
+        return flatFixtureTree.reduce((acc, item) => {
+            const cleanPath = [...item.parents, item.fileName];
+            if (item.name)
+                cleanPath.push(item.name);
+            return { ...acc, [cleanPath.join(' ')]: item };
+        }, {});
+    }, [fixtures, fixturesDir, fixtureFileSuffix]);
+    const onInputChange = useCallback((e) => {
+        onSetSearchText(e.currentTarget.value);
+    }, [onSetSearchText]);
+    const [matchingFixturePaths, setMatchingFixturePaths] = useState(getMatchingFixturePaths(fixtureItems, searchText));
+    const [activeFixturePath, setActiveFixturePath] = useState(() => {
+        const selectedFixturePath = selectedFixtureId && findFixturePath(fixtureItems, selectedFixtureId);
+        return selectedFixturePath || getFirstFixturePath(matchingFixturePaths);
+    });
+    useEffect(() => {
+        const newMatchingFixturePaths = getMatchingFixturePaths(fixtureItems, searchText);
+        if (!isEqual(newMatchingFixturePaths, matchingFixturePaths)) {
+            setMatchingFixturePaths(newMatchingFixturePaths);
+            // Reset active fixture to first matching fixture when search changes
+            // WARNING: Putting this in a separate effect with only matchingFixturePaths
+            // as a dependency looks nicer, but creates a flicker between some renders.
+            // On searchText change, the component would first render a new list of
+            // matching fixture paths (which may or may not contain the activeFixturePath),
+            // and only in the (albeit almost instant) 2nd render would activeFixturePath
+            // be updated to equal the first of the new list of matching fixture paths.
+            setActiveFixturePath(getFirstFixturePath(newMatchingFixturePaths));
+        }
+    }, [fixtureItems, matchingFixturePaths, searchText]);
+    const onInputKeyDown = useMemo(() => {
+        function handleEscape() {
+            onClose();
+        }
+        function handleEnter() {
+            if (activeFixturePath !== null) {
+                const { fixtureId } = fixtureItems[activeFixturePath];
+                onSelect(fixtureId, true);
+            }
+        }
+        function handleUp() {
+            if (activeFixturePath) {
+                const fixtureIndex = matchingFixturePaths.indexOf(activeFixturePath);
+                if (fixtureIndex > 0) {
+                    setActiveFixturePath(matchingFixturePaths[fixtureIndex - 1]);
+                }
+            }
+        }
+        function handleDown() {
+            if (activeFixturePath) {
+                const fixtureIndex = matchingFixturePaths.indexOf(activeFixturePath);
+                if (fixtureIndex < matchingFixturePaths.length - 1) {
+                    setActiveFixturePath(matchingFixturePaths[fixtureIndex + 1]);
+                }
+            }
+        }
+        function handleTab() {
+            const matchingFixtureCount = matchingFixturePaths.length;
+            if (matchingFixtureCount > 0) {
+                if (!activeFixturePath) {
+                    setActiveFixturePath(matchingFixturePaths[0]);
+                }
+                else {
+                    const fixtureIndex = matchingFixturePaths.indexOf(activeFixturePath);
+                    const lastMatch = fixtureIndex === matchingFixtureCount - 1;
+                    if (lastMatch) {
+                        setActiveFixturePath(matchingFixturePaths[0]);
+                    }
+                    else {
+                        setActiveFixturePath(matchingFixturePaths[fixtureIndex + 1]);
+                    }
+                }
+            }
+        }
+        function handleTabReverse() {
+            const matchingFixtureCount = matchingFixturePaths.length;
+            if (matchingFixtureCount > 0) {
+                if (!activeFixturePath) {
+                    setActiveFixturePath(matchingFixturePaths[matchingFixtureCount - 1]);
+                }
+                else {
+                    const fixtureIndex = matchingFixturePaths.indexOf(activeFixturePath);
+                    const lastMatch = fixtureIndex === 0;
+                    if (lastMatch) {
+                        setActiveFixturePath(matchingFixturePaths[matchingFixtureCount - 1]);
+                    }
+                    else {
+                        setActiveFixturePath(matchingFixturePaths[fixtureIndex - 1]);
+                    }
+                }
+            }
+        }
+        function handleQuestionMark(e) {
+            if (e.shiftKey) {
+                e.preventDefault();
+                setShowShortcuts(prev => !prev);
+            }
+        }
+        return (e) => {
+            switch (e.keyCode) {
+                case KEY_ESC:
+                    e.preventDefault();
+                    return handleEscape();
+                case KEY_ENTER:
+                    e.preventDefault();
+                    return handleEnter();
+                case KEY_UP:
+                    e.preventDefault();
+                    return handleUp();
+                case KEY_DOWN:
+                    e.preventDefault();
+                    return handleDown();
+                case KEY_TAB:
+                    e.preventDefault();
+                    return e.shiftKey ? handleTabReverse() : handleTab();
+                case KEY_FWD_SLASH:
+                    return handleQuestionMark(e);
+                default:
+                // Nada
+            }
+        };
+    }, [
+        onClose,
+        activeFixturePath,
+        fixtureItems,
+        onSelect,
+        matchingFixturePaths,
+    ]);
+    const inputRef = useRef(null);
+    // Auto focus when search input is created
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, []);
+    // 1. Prevent click propagation to overlay element (which calls onClose)
+    // 2. Keep user focused on search input while search is open
+    const onContentClick = useCallback((e) => {
+        e.stopPropagation();
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const [showShortcuts, setShowShortcuts] = useState(false);
+    const handleToggleHelp = useCallback(() => {
+        setShowShortcuts(prev => !prev);
+    }, []);
+    return (React.createElement(OverlayIE11, { "data-testid": "fixtureSearchOverlay", onClick: onClose },
+        React.createElement(Content, { "data-testid": "fixtureSearchContent", onClick: onContentClick },
+            React.createElement(InputContainer, null,
+                React.createElement(SearchIconContainer, null,
+                    React.createElement(SearchIcon, null)),
+                React.createElement(SearchInput, { ref: inputRef, type: "text", placeholder: "Fixture search", value: searchText, onChange: onInputChange, onKeyDown: onInputKeyDown }),
+                React.createElement(HelpButton, { selected: showShortcuts, onClick: handleToggleHelp },
+                    React.createElement(HelpCircleIcon, null))),
+            React.createElement(ShortcutsContainer, { visible: showShortcuts },
+                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.length === 0 && (React.createElement(NoResults, null, "No results")))))));
+}
+function findFixturePath(fixtureItems, fixtureId) {
+    const fixturePaths = Object.keys(fixtureItems);
+    return fixturePaths.find(fixturePath => isEqual(fixtureItems[fixturePath].fixtureId, fixtureId));
+}
+function getFirstFixturePath(fixturePaths) {
+    return fixturePaths.length > 0 ? fixturePaths[0] : null;
+}
+function getMatchingFixturePaths(fixtureItems, searchText) {
+    const fixturePaths = Object.keys(fixtureItems);
+    if (searchText === '') {
+        return fixturePaths;
+    }
+    const fixtureSearchTexts = [];
+    fixturePaths.forEach(cleanFixturePath => {
+        const { fixtureId, parents } = fixtureItems[cleanFixturePath];
+        const { path, name } = fixtureId;
+        // Allow fixtures to be searched by their entire file path, suffixed by
+        // their name in the case of named fixtures, as well as by parent path,
+        // allowing users to query results in the format they are displayed
+        const searchPath = [path];
+        if (name)
+            searchPath.push(name);
+        searchPath.push(...parents);
+        fixtureSearchTexts.push(searchPath.join(' '));
+    });
+    const machingFixtureSearchTexts = filter(fixtureSearchTexts, searchText);
+    return machingFixtureSearchTexts.map(fixtureSearchText => {
+        const fixtureIndex = fixtureSearchTexts.indexOf(fixtureSearchText);
+        return fixturePaths[fixtureIndex];
+    });
+}
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: ${black60};
+`;
+const OverlayIE11 = styled(Overlay) `
+  z-index: 10;
+`;
+const Content = styled.div `
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 80%;
+  max-width: 640px;
+  border-radius: 3px;
+  background: ${grey248};
+  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const InputContainer = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+  padding: 0 12px;
+  user-select: none;
+  cursor: text;
+`;
+const SearchIconContainer = styled.div `
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  margin: 2px 0 0 0;
+  padding: 0 10px 0 6px;
+  color: ${grey176};
+`;
+const SearchInput = styled.input `
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: ${grey64};
+  outline: none;
+  font-size: 16px;
+  line-height: 32px;
+
+  ::placeholder {
+    color: ${grey160};
+  }
+`;
+const HelpButton = styled.div `
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  margin: 2px 0 0 0;
+  padding: 6px;
+  border-radius: 50%;
+  background: ${props => (props.selected ? grey224 : 'transparent')};
+  color: ${props => (props.selected ? grey128 : grey176)};
+  cursor: pointer;
+  transition: background ${quick}s, color ${quick}s;
+
+  :hover {
+    color: ${grey128};
+  }
+`;
+const ShortcutsContainer = styled.div `
+  height: ${props => (props.visible ? 72 : 0)}px;
+  overflow: hidden;
+  opacity: ${props => (props.visible ? 1 : 0)};
+  transition: height ${quick}s, opacity ${quick}s;
+  user-select: none;
+`;
+const ResultsViewport = styled.div `
+  max-height: 336px;
+  border-top: 1px solid ${grey208};
+  background: ${grey224};
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+const ResultsContainer = styled.div `
+  padding: 8px 0;
+`;
+const NoResults = styled.div `
+  padding: 0 24px 0 48px;
+  line-height: 32px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  color: ${grey128};
+`;

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

@@ -0,0 +1,9 @@
+import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
+type Props = {
+    active: boolean;
+    cleanFixturePath: string;
+    fixtureItem: FlatFixtureTreeItem;
+    onSelect: (fixtureId: FixtureId, revealFixture: boolean) => unknown;
+};
+export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): JSX.Element;
+export {};

package/dist/plugins/FixtureSearch/FixtureSearchResult.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { blue, createGreyColor, grey64, selectedColors, } from '../../style/colors.js';
+export function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }) {
+    const { fixtureId, fileName, name, parents } = fixtureItem;
+    const containerRef = useScrollToActive(cleanFixturePath, active);
+    const onClick = React.useCallback(() => onSelect(fixtureId, true), [fixtureId, onSelect]);
+    return (React.createElement(Container, { ref: containerRef, selected: active, onClick: onClick },
+        React.createElement(Text, null,
+            React.createElement(Name, { selected: active }, name ? `${fileName} ${name}` : fileName),
+            parents.length > 0 && React.createElement(Parents, null, parents.join('/')))));
+}
+function useScrollToActive(cleanFixturePath, active) {
+    const containerRef = React.useRef(null);
+    // Scroll to results when they become active
+    React.useLayoutEffect(() => {
+        const containerNode = containerRef.current;
+        if (active && containerNode) {
+            scrollIntoView(containerNode);
+        }
+    }, [cleanFixturePath, active]);
+    return containerRef;
+}
+function scrollIntoView(node) {
+    if (typeof node.scrollIntoView === 'function') {
+        node.scrollIntoView({ block: 'center' });
+    }
+}
+const Container = styled.div `
+  padding: 0 24px 0 48px;
+  background: ${selectedColors('transparent', blue)};
+  color: ${selectedColors(createGreyColor(64, 0.64), createGreyColor(255, 0.64))};
+`;
+const Text = styled.div `
+  font-size: 14px;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+`;
+const Name = styled.span `
+  color: ${selectedColors(grey64, 'white')};
+  font-weight: 500;
+`;
+const Parents = styled.span `
+  padding: 0 0 0 8px;
+`;

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

@@ -0,0 +1 @@
+export declare function FixtureSearchShortcuts(): JSX.Element;