react-cosmos-ui 6.0.0-alpha.0

package/dist/plugins/FixtureTree/index.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from 'react';
+import { createPlugin } from 'react-plugin';
+import { FixtureTreeContainer } from './FixtureTreeContainer.js';
+import { revealFixture } from './revealFixture.js';
+import { getTreeExpansion, setTreeExpansion } from './shared.js';
+const { namedPlug, register } = createPlugin({
+    name: 'fixtureTree',
+    methods: {
+        revealFixture,
+    },
+});
+namedPlug('navRow', 'fixtureTree', ({ pluginContext }) => {
+    const { getMethodsOf } = pluginContext;
+    const storage = pluginContext.getMethodsOf('storage');
+    const router = getMethodsOf('router');
+    const core = getMethodsOf('core');
+    const { fixturesDir, fixtureFileSuffix } = core.getFixtureFileVars();
+    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 }));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

@@ -0,0 +1,3 @@
+import { FixtureId } from 'react-cosmos-core';
+import { FixtureTreeContext } from './shared.js';
+export declare function revealFixture(context: FixtureTreeContext, fixtureId: FixtureId): void;

package/dist/plugins/FixtureTree/revealFixture.js

@@ -0,0 +1,48 @@
+import { createFixtureTree, } from 'react-cosmos-core';
+import { nodeContainsFixtureId } from '../../shared/fixtureTree.js';
+import { getTreeExpansion, setTreeExpansion, } from './shared.js';
+export function revealFixture(context, fixtureId) {
+    const { getMethodsOf } = context;
+    const storage = context.getMethodsOf('storage');
+    const core = getMethodsOf('core');
+    const rendererCore = getMethodsOf('rendererCore');
+    const { fixturesDir, fixtureFileSuffix } = core.getFixtureFileVars();
+    const fixtures = rendererCore.getFixtures();
+    const rootNode = createFixtureTree({
+        fixtures,
+        fixturesDir,
+        fixtureFileSuffix,
+    });
+    const dirPath = findDirPath(rootNode, fixtureId);
+    if (dirPath) {
+        const treeExpansion = getTreeExpansion(storage);
+        const curDirPath = [];
+        const curTreeExpansion = { ...treeExpansion };
+        for (let pathIndex = 0; pathIndex < dirPath.length; pathIndex++) {
+            curDirPath.push(dirPath[pathIndex]);
+            curTreeExpansion[curDirPath.join('/')] = true;
+        }
+        setTreeExpansion(storage, curTreeExpansion);
+    }
+}
+function findDirPath({ data, children }, fixtureId, parents = []) {
+    if (data.type !== 'fileDir' || !children)
+        return null;
+    const childNames = Object.keys(children);
+    for (let childName of childNames) {
+        const childNode = children[childName];
+        if (childNode.data.type !== 'fileDir') {
+            if (nodeContainsFixtureId(childNode, fixtureId))
+                return parents;
+        }
+        else {
+            const dirPath = findDirPath(childNode, fixtureId, [
+                ...parents,
+                childName,
+            ]);
+            if (dirPath)
+                return dirPath;
+        }
+    }
+    return null;
+}

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

@@ -0,0 +1,7 @@
+import { PluginContext } from 'react-plugin';
+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 setTreeExpansion({ setItem }: StorageSpec['methods'], treeExpansion: TreeExpansion): void;

package/dist/plugins/FixtureTree/shared.js

@@ -0,0 +1,8 @@
+const TREE_EXPANSION_STORAGE_KEY = 'fixtureTreeExpansion';
+const DEFAULT_TREE_EXPANSION = {};
+export function getTreeExpansion({ getItem }) {
+    return (getItem(TREE_EXPANSION_STORAGE_KEY) || DEFAULT_TREE_EXPANSION);
+}
+export function setTreeExpansion({ setItem }, treeExpansion) {
+    setItem(TREE_EXPANSION_STORAGE_KEY, treeExpansion);
+}

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

@@ -0,0 +1,7 @@
+import { FixtureId } from 'react-cosmos-core';
+export type FixtureTreeSpec = {
+    name: 'fixtureTree';
+    methods: {
+        revealFixture: (fixtureId: FixtureId) => unknown;
+    };
+};

package/dist/plugins/FixtureTree/spec.js

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FixtureId } from 'react-cosmos-core';
+export declare function useScrollToSelected(selectedFixtureId: FixtureId | null): {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    selectedRef: import("react").RefObject<HTMLElement>;
+};

package/dist/plugins/FixtureTree/useScrollToSelected.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+export function useScrollToSelected(selectedFixtureId) {
+    const containerRef = useRef(null);
+    const selectedRef = useRef(null);
+    useEffect(() => {
+        const { current: selectedEl } = selectedRef;
+        const { current: containerEl } = containerRef;
+        if (containerEl && selectedEl && !isVisibleInside(selectedEl, containerEl))
+            selectedEl.scrollIntoView({ block: 'center' });
+    }, [selectedFixtureId]);
+    return { containerRef, selectedRef };
+}
+function isVisibleInside(element, container) {
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    return (containerRect.top < elementRect.top &&
+        elementRect.bottom < containerRect.bottom);
+}

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

@@ -0,0 +1,5 @@
+type Props = {
+    onClick: () => void;
+};
+export declare function FullScreenButton({ onClick }: Props): JSX.Element;
+export {};

package/dist/plugins/FullScreenButton/FullScreenButton.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconButton32 } from '../../components/buttons/index.js';
+import { ExternalIcon } from '../../components/icons/index.js';
+export function FullScreenButton({ onClick }) {
+    return (React.createElement(IconButton32, { icon: React.createElement(ExternalIcon, null), title: "Go fullscreen", onClick: onClick }));
+}

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

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

package/dist/plugins/FullScreenButton/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { stringifyRendererUrlQuery } from 'react-cosmos-core';
+import { FullScreenButton } from './FullScreenButton.js';
+const { namedPlug, register } = createPlugin({
+    name: 'fullScreenButton',
+});
+namedPlug('rendererAction', 'fullScreen', ({ pluginContext, slotProps }) => {
+    const { getMethodsOf } = pluginContext;
+    const { fixtureId } = slotProps;
+    const core = getMethodsOf('core');
+    const rendererUrl = core.getWebRendererUrl();
+    const onSelect = React.useCallback(() => {
+        const query = stringifyRendererUrlQuery({ _fixtureId: fixtureId });
+        const fixtureUrl = `${rendererUrl}?${query}`;
+        window.open(fixtureUrl, '_blank');
+    }, [fixtureId, rendererUrl]);
+    React.useEffect(() => {
+        return core.registerCommands({ goFullScreen: onSelect });
+    }, [core, onSelect]);
+    return rendererUrl ? React.createElement(FullScreenButton, { onClick: onSelect }) : null;
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

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

package/dist/plugins/FullScreenButton/spec.js

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

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

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

package/dist/plugins/MessageHandler/index.js

@@ -0,0 +1,12 @@
+import { createPlugin } from 'react-plugin';
+import { initSocket, postRendererRequest } from './socket.js';
+const { onLoad, register } = createPlugin({
+    name: 'messageHandler',
+    methods: {
+        postRendererRequest,
+    },
+});
+onLoad(initSocket);
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

@@ -0,0 +1,3 @@
+import { PluginContext } from 'react-plugin';
+import { MessageHandlerSpec } from './spec.js';
+export type MessageHandlerContext = PluginContext<MessageHandlerSpec>;

package/dist/plugins/MessageHandler/shared.js

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

package/dist/plugins/MessageHandler/socket.d.ts

@@ -0,0 +1,4 @@
+import { MessageType } from 'react-cosmos-core';
+import { MessageHandlerContext } from './shared.js';
+export declare function initSocket(context: MessageHandlerContext): (() => void) | undefined;
+export declare function postRendererRequest(context: MessageHandlerContext, msg: MessageType): void;

package/dist/plugins/MessageHandler/socket.js

@@ -0,0 +1,45 @@
+import { rendererSocketMessage, } from 'react-cosmos-core';
+let socket = null;
+let pendingMessages = [];
+export function initSocket(context) {
+    const core = context.getMethodsOf('core');
+    if (!core.isDevServerOn()) {
+        return;
+    }
+    socket = new WebSocket(location.origin.replace(/^https?:/, 'ws:'));
+    socket.addEventListener('open', () => {
+        if (socket && pendingMessages.length > 0) {
+            for (const msg of pendingMessages)
+                socket.send(JSON.stringify(msg));
+            pendingMessages = [];
+        }
+    });
+    function handleMessage(event) {
+        const message = JSON.parse(event.data);
+        switch (message.channel) {
+            case 'renderer':
+                return context.emit('rendererResponse', message.message);
+            case 'server':
+                return context.emit('serverMessage', message.message);
+            default:
+                console.log('Unknown socket message', message);
+        }
+    }
+    socket.addEventListener('message', handleMessage);
+    return () => {
+        if (socket) {
+            socket.removeEventListener('message', handleMessage);
+            socket.close();
+            socket = null;
+        }
+    };
+}
+export function postRendererRequest(context, msg) {
+    const socketMessage = rendererSocketMessage(msg);
+    if (socket && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify(socketMessage));
+    }
+    else {
+        pendingMessages.push(socketMessage);
+    }
+}

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

@@ -0,0 +1,11 @@
+import { MessageType } from 'react-cosmos-core';
+export type MessageHandlerSpec = {
+    name: 'messageHandler';
+    methods: {
+        postRendererRequest(msg: MessageType): unknown;
+    };
+    events: {
+        serverMessage(msg: MessageType): void;
+        rendererResponse(msg: MessageType): void;
+    };
+};

package/dist/plugins/MessageHandler/spec.js

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

package/dist/plugins/Notifications/Notifications.d.ts

@@ -0,0 +1,6 @@
+import { NotificationItem } from './spec.js';
+type Props = {
+    notifications: NotificationItem[];
+};
+export declare function Notifications({ notifications }: Props): JSX.Element;
+export {};

package/dist/plugins/Notifications/Notifications.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AlertCircleIcon, CheckCircleIcon, InfoIcon, LoaderIcon, } from '../../components/icons/index.js';
+import { grey128, grey32, grey64, grey8, white95 } from '../../style/colors.js';
+import { quick } from '../../style/vars.js';
+export function Notifications({ notifications }) {
+    return (React.createElement(Container, null, notifications.map(({ id, type, title, info }) => {
+        const Icon = IconTypes[type];
+        return (React.createElement(Item, { key: id },
+            React.createElement(IconContainer, null,
+                React.createElement(Icon, null)),
+            React.createElement(Content, null,
+                React.createElement(Title, null, title),
+                React.createElement(Info, null, info))));
+    })));
+}
+const Container = styled.div `
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+`;
+const Item = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  min-height: 56px;
+  margin-top: 6px;
+  border-radius: 6px;
+  background: ${white95};
+  box-shadow: 0 2px 10px -4px ${grey8};
+  line-height: 20px;
+  animation: fadeScaleIn ${quick}s forwards;
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  @keyframes fadeScaleIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;
+const iconSize = 20;
+const IconContainer = styled.div `
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  margin: 18px 16px;
+  color: ${grey128};
+`;
+const Content = styled.div `
+  width: 288px;
+  padding: 8px 16px 8px 0;
+`;
+const Title = styled.div `
+  color: ${grey32};
+  font-weight: 500;
+`;
+const Info = styled.div `
+  margin: 2px 0 0 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: ${grey64};
+`;
+const IconTypes = {
+    success: CheckCircleIcon,
+    error: AlertCircleIcon,
+    info: InfoIcon,
+    loading: LoaderIcon,
+};

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

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

package/dist/plugins/Notifications/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createPlugin } from 'react-plugin';
+import { Notifications } from './Notifications.js';
+import { clearTimedNotification, pushStickyNotification, pushTimedNotification, removeStickyNotification, } from './pushNotification.js';
+const { register, onLoad, namedPlug } = createPlugin({
+    name: 'notifications',
+    initialState: {
+        stickyNotifications: [],
+        timedNotifications: null,
+    },
+    methods: {
+        pushStickyNotification,
+        removeStickyNotification,
+        pushTimedNotification,
+    },
+});
+onLoad(context => {
+    return () => {
+        // Clean up timed notifications when plugin unloads
+        const { timedNotifications } = context.getState();
+        if (timedNotifications) {
+            window.clearInterval(timedNotifications.timeoutId);
+            clearTimedNotification(context);
+        }
+    };
+});
+namedPlug('global', 'notifications', ({ pluginContext }) => {
+    const { stickyNotifications, timedNotifications } = pluginContext.getState();
+    const notifications = timedNotifications === null
+        ? stickyNotifications
+        : [...stickyNotifications, ...timedNotifications.items];
+    return React.createElement(Notifications, { notifications: notifications });
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

package/dist/plugins/Notifications/pushNotification.d.ts

@@ -0,0 +1,6 @@
+import { NotificationsContext } from './shared.js';
+import { NotificationItem } from './spec.js';
+export declare function pushStickyNotification(context: NotificationsContext, notification: NotificationItem): void;
+export declare function removeStickyNotification(context: NotificationsContext, notificationId: string): void;
+export declare function pushTimedNotification(context: NotificationsContext, notification: NotificationItem): void;
+export declare function clearTimedNotification(context: NotificationsContext): void;

package/dist/plugins/Notifications/pushNotification.js

@@ -0,0 +1,40 @@
+import { removeItemMatch, replaceOrAddItem } from 'react-cosmos-core';
+const TIMEOUT = 3000;
+export function pushStickyNotification(context, notification) {
+    context.setState(prevState => ({
+        ...prevState,
+        stickyNotifications: replaceOrAddItem(prevState.stickyNotifications, i => i.id === notification.id, notification),
+    }));
+}
+export function removeStickyNotification(context, notificationId) {
+    context.setState(prevState => ({
+        ...prevState,
+        stickyNotifications: removeItemMatch(prevState.stickyNotifications, i => i.id === notificationId),
+    }));
+}
+export function pushTimedNotification(context, notification) {
+    const { timedNotifications } = context.getState();
+    if (timedNotifications !== null) {
+        window.clearTimeout(timedNotifications.timeoutId);
+    }
+    context.setState(prevState => ({
+        ...prevState,
+        timedNotifications: {
+            timeoutId: createNotificationTimeout(context),
+            items: replaceOrAddItem(getTimedNotifications(prevState), i => i.id === notification.id, notification),
+        },
+    }));
+}
+export function clearTimedNotification(context) {
+    context.setState(prevState => ({
+        ...prevState,
+        timedNotifications: null,
+    }));
+}
+function createNotificationTimeout(context) {
+    return window.setTimeout(() => clearTimedNotification(context), TIMEOUT);
+}
+function getTimedNotifications(prevState) {
+    const { timedNotifications } = prevState;
+    return timedNotifications !== null ? timedNotifications.items : [];
+}

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

@@ -0,0 +1,3 @@
+import { PluginContext } from 'react-plugin';
+import { NotificationsSpec } from './spec.js';
+export type NotificationsContext = PluginContext<NotificationsSpec>;

package/dist/plugins/Notifications/shared.js

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

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

@@ -0,0 +1,22 @@
+export type NotificationType = 'success' | 'error' | 'info' | 'loading';
+export type NotificationItem = {
+    id: string;
+    type: NotificationType;
+    title: string;
+    info: string;
+};
+export type NotificationsSpec = {
+    name: 'notifications';
+    state: {
+        stickyNotifications: NotificationItem[];
+        timedNotifications: null | {
+            timeoutId: number;
+            items: NotificationItem[];
+        };
+    };
+    methods: {
+        pushStickyNotification(notification: NotificationItem): void;
+        removeStickyNotification(notificationId: string): void;
+        pushTimedNotification(notification: NotificationItem): void;
+    };
+};

package/dist/plugins/Notifications/spec.js

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

package/dist/plugins/PluginList/PluginList.d.ts

@@ -0,0 +1,10 @@
+export type SimplePlugin = {
+    name: string;
+    enabled: boolean;
+};
+type Props = {
+    plugins: SimplePlugin[];
+    enable: (pluginName: string, enabled: boolean) => void;
+};
+export declare function PluginList({ plugins, enable }: Props): JSX.Element;
+export {};

package/dist/plugins/PluginList/PluginList.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SidePanelContainer, SidePanelHeader, SidePanelTitle, } from '../../components/SidePanel.js';
+import { grey224 } from '../../style/colors.js';
+const requiredPlugins = [
+    'core',
+    'messageHandler',
+    'rendererCore',
+    'rendererPreview',
+    'root',
+    'router',
+    'storage',
+];
+export function PluginList({ plugins, enable }) {
+    return (React.createElement(SidePanelContainer, null,
+        React.createElement(SidePanelHeader, null,
+            React.createElement(SidePanelTitle, { label: "Plugins" })),
+        React.createElement(Body, null, [...plugins]
+            .sort((p1, p2) => p1.name.localeCompare(p2.name))
+            .map(({ name, enabled }) => (React.createElement(Label, { key: name },
+            React.createElement("input", { disabled: requiredPlugins.indexOf(name) !== -1, type: "checkbox", checked: enabled, onChange: e => enable(name, e.target.checked) }),
+            React.createElement(Name, { style: { opacity: enabled ? 1 : 0.6 } }, name)))))));
+}
+const Body = styled.div `
+  padding: 0 24px 20px 24px;
+`;
+const Label = styled.label `
+  height: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 24px;
+`;
+const Name = styled.span `
+  margin-left: 8px;
+  color: ${grey224};
+  user-select: none;
+`;

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

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

package/dist/plugins/PluginList/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createPlugin, PluginsConsumer } from 'react-plugin';
+import { PluginList } from './PluginList.js';
+const { plug, register } = createPlugin({
+    name: 'pluginList',
+});
+plug('sidePanelRow', () => {
+    return (React.createElement(PluginsConsumer, null, ({ plugins, enable }) => (React.createElement(PluginList, { plugins: plugins.map(p => ({ name: p.name, enabled: p.enabled })), enable: enable }))));
+});
+export { register };
+if (process.env.NODE_ENV !== 'test')
+    register();

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

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

package/dist/plugins/PluginList/spec.js

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

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

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

package/dist/plugins/PropsPanel/BlankState.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SlidersIcon } from '../../components/icons/index.js';
+import { grey160, grey224, grey32, grey64 } from '../../style/colors.js';
+export function BlankState() {
+    return (React.createElement(Container, null,
+        React.createElement(IconContainer, null,
+            React.createElement(SlidersIcon, null)),
+        React.createElement(Title, null,
+            "No visible props in ",
+            React.createElement(NoWrap, null, "selected fixture")),
+        React.createElement(Description, null,
+            "Props of exported JSX ",
+            React.createElement(NoWrap, null, "elements from"),
+            " your fixtures",
+            ' ',
+            React.createElement(NoWrap, null, "will 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 16px 0;
+  color: ${grey224};
+  text-align: center;
+  font-weight: 500;
+`;
+const Description = styled.div `
+  margin: 0 auto;
+  max-width: 256px;
+  color: ${grey160};
+  text-align: center;
+`;
+export const NoWrap = styled.span `
+  white-space: nowrap;
+`;

package/dist/plugins/PropsPanel/PropsPanel/ComponentProps.d.ts

@@ -0,0 +1,10 @@
+import { FixtureState, FixtureStateProps, StateUpdater } from 'react-cosmos-core';
+import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
+type Props = {
+    fsProps: FixtureStateProps;
+    fixtureExpansion: FixtureExpansion;
+    onFixtureStateChange: (stateUpdater: StateUpdater<FixtureState>) => void;
+    onElementExpansionChange: OnElementExpansionChange;
+};
+export declare function ComponentProps({ fsProps, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export {};