react-cosmos-ui - npm Package Compare versions

Comparing version 6.0.0-canary.ab59b01.0 to 6.0.0-canary.abd71bd.0

dist/components/BaseSvg.d.ts

@@ -8,3 +8,3 @@ import React from 'react';
 };
-export declare function BaseSvg({ children, ...attrs }: Props): JSX.Element;
+export declare function BaseSvg({ children, ...attrs }: Props): React.JSX.Element;
 export {};

dist/components/buttons/Button32.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/buttons/Button8.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/buttons/IconButton32.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 };
-export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/buttons/IconButton8.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 };
-export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

dist/components/Icon.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
@@ -10,3 +10,3 @@ export type IconProps = {
 };
-export declare function Icon({ children, size, strokeWidth }: Props): JSX.Element;
+export declare function Icon({ children, size, strokeWidth }: Props): React.JSX.Element;
 export {};

dist/components/icons/index.d.ts

@@ -1,31 +0,31 @@
-/// <reference types="react" />
+import React from 'react';
 import { IconProps } from '../Icon.js';
-export declare const ChevronLeftIcon: () => JSX.Element;
-export declare const ChevronRightIcon: () => JSX.Element;
-export declare const ChevronDownIcon: () => JSX.Element;
-export declare const FolderIcon: () => JSX.Element;
-export declare const XIcon: () => JSX.Element;
-export declare const XCircleIcon: () => JSX.Element;
-export declare const MaximizeIcon: () => JSX.Element;
-export declare const SmartphoneIcon: () => JSX.Element;
-export declare const Minimize2Icon: () => JSX.Element;
-export declare const RefreshCwIcon: () => JSX.Element;
-export declare const RefreshCcwIcon: (props: IconProps) => JSX.Element;
-export declare const HomeIcon: () => JSX.Element;
-export declare const CastIcon: () => JSX.Element;
-export declare const EditIcon: () => JSX.Element;
-export declare const CheckCircleIcon: (props: IconProps) => JSX.Element;
-export declare const AlertCircleIcon: () => JSX.Element;
-export declare const InfoIcon: () => JSX.Element;
-export declare const LoaderIcon: () => JSX.Element;
-export declare const SlidersIcon: () => JSX.Element;
-export declare const CopyIcon: () => JSX.Element;
-export declare const RotateCcwIcon: () => JSX.Element;
-export declare const FileIcon: () => JSX.Element;
-export declare const SearchIcon: () => JSX.Element;
-export declare const MenuIcon: () => JSX.Element;
-export declare const ExternalIcon: () => JSX.Element;
-export declare const HelpCircleIcon: () => JSX.Element;
-export declare const MinusSquareIcon: () => JSX.Element;
-export declare const PlusSquareIcon: () => JSX.Element;
-export declare const StarIcon: () => JSX.Element;
+export declare const ChevronLeftIcon: () => React.JSX.Element;
+export declare const ChevronRightIcon: () => React.JSX.Element;
+export declare const ChevronDownIcon: () => React.JSX.Element;
+export declare const FolderIcon: () => React.JSX.Element;
+export declare const XIcon: () => React.JSX.Element;
+export declare const XCircleIcon: () => React.JSX.Element;
+export declare const MaximizeIcon: () => React.JSX.Element;
+export declare const SmartphoneIcon: () => React.JSX.Element;
+export declare const Minimize2Icon: () => React.JSX.Element;
+export declare const RefreshCwIcon: () => React.JSX.Element;
+export declare const RefreshCcwIcon: (props: IconProps) => React.JSX.Element;
+export declare const HomeIcon: () => React.JSX.Element;
+export declare const CastIcon: () => React.JSX.Element;
+export declare const EditIcon: () => React.JSX.Element;
+export declare const CheckCircleIcon: (props: IconProps) => React.JSX.Element;
+export declare const AlertCircleIcon: () => React.JSX.Element;
+export declare const InfoIcon: () => React.JSX.Element;
+export declare const LoaderIcon: () => React.JSX.Element;
+export declare const SlidersIcon: () => React.JSX.Element;
+export declare const CopyIcon: () => React.JSX.Element;
+export declare const RotateCcwIcon: () => React.JSX.Element;
+export declare const FileIcon: () => React.JSX.Element;
+export declare const SearchIcon: () => React.JSX.Element;
+export declare const MenuIcon: () => React.JSX.Element;
+export declare const ExternalIcon: () => React.JSX.Element;
+export declare const HelpCircleIcon: () => React.JSX.Element;
+export declare const MinusSquareIcon: () => React.JSX.Element;
+export declare const PlusSquareIcon: () => React.JSX.Element;
+export declare const StarIcon: () => React.JSX.Element;

dist/components/Illustration.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
@@ -8,3 +8,3 @@ type Props = {
 };
-export declare function Illustration({ children, viewBox, size }: Props): JSX.Element;
+export declare function Illustration({ children, viewBox, size }: Props): React.JSX.Element;
 export {};

dist/components/illustrations/ArtificialIntelligence.d.ts

@@ -1,4 +0,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const ArtificialIntelligenceIllustration: ({ title, }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

dist/components/illustrations/Astronaut.d.ts

@@ -1,4 +0,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const AstronautIllustration: ({ title }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

dist/components/illustrations/BlankCanvas.d.ts

@@ -1,4 +0,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const BlankCanvasIllustration: ({ title }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

dist/components/inputs/NumberInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 export type NumberInputStyles = {
@@ -15,3 +15,3 @@ focusedColor: string;
 };
-export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): JSX.Element;
+export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): React.JSX.Element;
 export {};

dist/components/inputs/Select.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type BaseOption = {
@@ -16,3 +16,3 @@ value: string;
 };
-export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): JSX.Element;
+export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): React.JSX.Element;
 export {};

dist/components/KeyBox.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -9,3 +9,3 @@ value: string;
 };
-export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): JSX.Element;
+export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): React.JSX.Element;
 export {};

dist/components/SidePanel.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const SidePanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -8,5 +8,5 @@ export declare const SidePanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 };
-export declare function SidePanelTitle({ label, componentName }: TitleProps): JSX.Element;
+export declare function SidePanelTitle({ label, componentName }: TitleProps): React.JSX.Element;
 export declare const SidePanelActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SidePanelBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

dist/components/Space.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -7,3 +7,3 @@ width: number;
 };
-export declare function Space(props: Props): JSX.Element;
+export declare function Space(props: Props): React.JSX.Element;
 export {};

dist/components/TreeView.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TreeNode } from 'react-cosmos-core';
@@ -18,3 +18,3 @@ import { TreeExpansion } from '../shared/treeExpansion.js';
 };
-export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): JSX.Element;
+export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ExpandCollapseValues.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureStateValues } from 'react-cosmos-core';
@@ -9,3 +9,3 @@ import { TreeExpansion } from '../../shared/treeExpansion.js';
 };
-export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): JSX.Element | null;
+export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): React.JSX.Element | null;
 export {};

dist/components/ValueInputTree/index.d.ts

 export { ValueInputTree } from './ValueInputTree.js';
-export { stringifyElementId, stringifyFixtureId } from './shared.js';
+export { stringifyElementId } from './shared.js';
 export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
 export { FixtureExpansion, FixtureExpansionGroup, OnElementExpansionChange, getFixtureExpansion, updateElementExpansion, } from './valueTreeExpansion.js';

dist/components/ValueInputTree/index.js

 export { ValueInputTree } from './ValueInputTree.js';
-export { stringifyElementId, stringifyFixtureId } from './shared.js';
+export { stringifyElementId } from './shared.js';
 export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
 export { getFixtureExpansion, updateElementExpansion, } from './valueTreeExpansion.js';

dist/components/ValueInputTree/shared.d.ts

@@ -1,2 +0,2 @@
-import { FixtureElementId, FixtureId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
+import { FixtureElementId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
 export type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
@@ -15,3 +15,2 @@ export type ValueNodeData = {
 export declare function stringifyElementId(elementId: FixtureElementId): string;
-export declare function stringifyFixtureId(fixtureId: FixtureId): string;
 export {};

dist/components/ValueInputTree/shared.js

@@ -9,8 +9,4 @@ import styled from 'styled-components';
 }
-export function stringifyFixtureId(fixtureId) {
-    const { path, name } = fixtureId;
-    return name ? `${path}-${name}` : path;
-}
 function getLeftPadding(depth) {
     return depth * 12;
 }

dist/components/ValueInputTree/ValueInput/BooleanValueInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -8,3 +8,3 @@ id: string;
 };
-export declare function BooleanValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function BooleanValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/NullValueInput.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     name: string;
 };
-export declare function NullValueInput({ name }: Props): JSX.Element;
+export declare function NullValueInput({ name }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/NumberValueInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -8,3 +8,3 @@ id: string;
 };
-export declare function NumberValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function NumberValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/StringValueInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -8,3 +8,3 @@ id: string;
 };
-export declare function StringValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function StringValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/UndefinedValueInput.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     name: string;
 };
-export declare function UndefinedValueInput({ name }: Props): JSX.Element;
+export declare function UndefinedValueInput({ name }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/UnserializableValueInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -6,3 +6,3 @@ name: string;
 };
-export declare function UnserializableValueInput({ name, data }: Props): JSX.Element;
+export declare function UnserializableValueInput({ name, data }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInput/ValueInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { PrimitiveData } from 'react-cosmos-core';
@@ -11,3 +11,3 @@ import { LeafValue } from '../shared.js';
 };
-export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): JSX.Element;
+export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/ValueInputDir.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -9,3 +9,3 @@ name: string;
 };
-export declare function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }: Props): JSX.Element;
+export declare function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }: Props): React.JSX.Element;
 export {};

dist/components/ValueInputTree/valueTreeExpansion.js

 import { clone, setWith } from 'lodash-es';
-import { stringifyElementId, stringifyFixtureId } from './shared.js';
+import { stringifyFixtureId, } from 'react-cosmos-core';
+import { stringifyElementId } from './shared.js';
 const DEFAULT_EXPANSION = {};
@@ -4,0 +5,0 @@ export function getFixtureExpansion(groupExpansion, fixtureId) {

dist/cosmos.decorator.d.ts

 import React from 'react';
 declare const _default: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

dist/cosmos.loadPlugins.js

 import { loadPlugins } from 'react-plugin';
 import './plugins/pluginEntry.js';
 import { DEFAULT_PLUGIN_CONFIG } from './shared/defaultPluginConfig.js';
+const rendererConfig = {
+    ...DEFAULT_PLUGIN_CONFIG,
+    core: {
+        projectId: 'testProjectId',
+        fixturesDir: '__fixtures__',
+        fixtureFileSuffix: 'fixture',
+        devServerOn: true,
+    },
+    rendererCore: {
+        fixtures: {},
+        rendererUrl: '/renderer.html',
+    },
+};
 // This file is required to run globally with side effects for the "inception"
 // fixture to work.
 loadPlugins({
-    config: {
-        ...DEFAULT_PLUGIN_CONFIG,
-        core: {
-            projectId: 'testProjectId',
-            fixturesDir: '__fixtures__',
-            fixtureFileSuffix: 'fixture',
-            devServerOn: true,
-            webRendererUrl: '/_renderer.html',
-        },
-    },
+    config: rendererConfig,
 });

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

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureState, FixtureStateClassState, StateUpdater } from 'react-cosmos-core';
@@ -10,3 +10,3 @@ import { FixtureExpansion, OnElementExpansionChange } from '../../../components/ValueInputTree/index.js';
 };
-export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): JSX.Element;
+export declare function ComponentClassState({ fsClassState, fixtureExpansion, onFixtureStateChange, onElementExpansionChange, }: Props): React.JSX.Element;
 export {};

dist/plugins/ControlPanel/ControlPanel.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureState, StateUpdater } from 'react-cosmos-core';
@@ -8,3 +8,3 @@ type Props = {
 };
-export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): JSX.Element | null;
+export declare function ControlPanel({ fixtureState, controlActionOrder, onFixtureStateChange, }: Props): React.JSX.Element | null;
 export {};

dist/plugins/ControlSelect/SelectValueInput.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureStateSelectControl } from 'react-cosmos-core';
@@ -8,3 +8,3 @@ type Props = {
 };
-export declare function SelectValueInput({ name, control, onChange }: Props): JSX.Element;
+export declare function SelectValueInput({ name, control, onChange }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureBookmark/BookmarkFixtureButton.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -6,3 +6,3 @@ selected: boolean;
 };
-export declare function BookmarkFixtureButton({ selected, onClick }: Props): JSX.Element;
+export declare function BookmarkFixtureButton({ selected, onClick }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureBookmark/FixtureBookmarks.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FlatFixtureTree, FlatFixtureTreeItem } from 'react-cosmos-core';
@@ -9,3 +9,3 @@ type Props = {
 };
-export declare function FixtureBookmarks({ bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): JSX.Element | null;
+export declare function FixtureBookmarks({ bookmarks, selectedFixtureId, onFixtureSelect, onBookmarkDelete, }: Props): React.JSX.Element | null;
 export {};

dist/plugins/FixtureBookmark/FixtureBookmarks.js

 import { isEqual, sortBy } from 'lodash-es';
 import React from 'react';
+import { stringifyFixtureId, } from 'react-cosmos-core';
 import styled from 'styled-components';
-import { stringifyFixtureId } from '../../components/ValueInputTree/index.js';
 import { XIcon } from '../../components/icons/index.js';
@@ -6,0 +6,0 @@ import { createRelativePlaygroundUrl } from '../../shared/url.js';

dist/plugins/FixtureSearch/FixtureSearchHeader.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -7,3 +7,3 @@ fixtureSelected: boolean;
 };
-export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): JSX.Element;
+export declare function FixtureSearchHeader({ fixtureSelected, onOpen, onCloseNav, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchOverlay.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FixtureList } from 'react-cosmos-core';
@@ -13,3 +13,3 @@ type Props = {
 };
-export declare function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffix, fixtures, selectedFixtureId, onSetSearchText, onClose, onSelect, }: Props): JSX.Element;
+export declare function FixtureSearchOverlay({ searchText, fixturesDir, fixtureFileSuffix, fixtures, selectedFixtureId, onSetSearchText, onClose, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchResult.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FlatFixtureTreeItem } from 'react-cosmos-core';
@@ -9,3 +9,3 @@ type Props = {
 };
-export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): JSX.Element;
+export declare function FixtureSearchResult({ active, cleanFixturePath, fixtureItem, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureSearch/FixtureSearchShortcuts.d.ts

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

dist/plugins/FixtureTree/BlankState.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -6,5 +6,5 @@ fixturesDir: string;
 };
-export declare function BlankState({ fixturesDir, fixtureFileSuffix }: Props): JSX.Element;
+export declare function BlankState({ fixturesDir, fixtureFileSuffix }: Props): React.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 {};

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

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -11,3 +11,3 @@ type Props = {
 };
-export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function FixtureButton({ name, fixturePath, indentLevel, selected, selectedRef, onSelect, }: Props): React.JSX.Element;
 export {};

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

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -9,3 +9,3 @@ name: string;
 };
-export declare function FixtureDir({ name, expanded, indentLevel, selected, onToggle, }: Props): JSX.Element;
+export declare function FixtureDir({ name, expanded, indentLevel, selected, onToggle, }: Props): React.JSX.Element;
 export {};

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

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

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

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -13,3 +13,3 @@ type Props = {
 };
-export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function MultiFixtureButton({ name, fixturePath, fixtureNames, indentLevel, selected, selectedFixtureId, selectedRef, onSelect, }: Props): React.JSX.Element;
 export {};

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

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -11,3 +11,3 @@ type Props = {
 };
-export declare function MultiFixtureChildButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): JSX.Element;
+export declare function MultiFixtureChildButton({ name, fixtureId, indentLevel, selected, selectedRef, onSelect, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTreeContainer.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FixtureList } from 'react-cosmos-core';
@@ -13,3 +13,3 @@ import { TreeExpansion } from '../../shared/treeExpansion.js';
 };
-export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): JSX.Element;
+export declare function FixtureTreeContainer({ fixturesDir, fixtureFileSuffix, selectedFixtureId, fixtures, expansion, selectFixture, setExpansion, }: Props): React.JSX.Element;
 export {};

dist/plugins/FixtureTree/FixtureTreeHeader.d.ts

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

dist/plugins/FullScreenButton/FullScreenButton.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     onClick: () => void;
 };
-export declare function FullScreenButton({ onClick }: Props): JSX.Element;
+export declare function FullScreenButton({ onClick }: Props): React.JSX.Element;
 export {};

dist/plugins/FullScreenButton/index.js

 import React from 'react';
-import { buildRendererQueryString } from 'react-cosmos-core';
+import { createRendererUrl } from 'react-cosmos-core';
 import { createPlugin } from 'react-plugin';
@@ -13,11 +13,12 @@ import { FullScreenButton } from './FullScreenButton.js';
     const rendererCore = getMethodsOf('rendererCore');
-    const rendererUrl = rendererCore.getWebRendererUrl();
+    const rendererUrl = rendererCore.getRendererUrl();
     const onSelect = React.useCallback(() => {
-        const query = buildRendererQueryString({ fixtureId, locked: true });
-        const fixtureUrl = `${rendererUrl}${query}`;
-        // noopener is required to prevent reuse of sessionStorage from the
-        // Playground window, thus making sure the remote renderer will generate
-        // a different rendererId from the iframe renderer.
-        // https://stackoverflow.com/a/73821739
-        window.open(fixtureUrl, '_blank', 'noopener=true');
+        if (rendererUrl) {
+            const fixtureUrl = createRendererUrl(rendererUrl, fixtureId, true);
+            // noopener is required to prevent reuse of sessionStorage from the
+            // Playground window, thus making sure the remote renderer will generate
+            // a different rendererId from the iframe renderer.
+            // https://stackoverflow.com/a/73821739
+            window.open(fixtureUrl, '_blank', 'noopener=true');
+        }
     }, [fixtureId, rendererUrl]);
@@ -24,0 +25,0 @@ React.useEffect(() => {

dist/plugins/MessageHandler/socket.js

@@ -9,3 +9,3 @@ import { rendererSocketMessage, } from 'react-cosmos-core';
     }
-    socket = new WebSocket(location.origin.replace(/^https?:/, 'ws:'));
+    socket = new WebSocket(location.origin.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:'));
     socket.addEventListener('open', () => {
@@ -12,0 +12,0 @@ if (socket && pendingMessages.length > 0) {

dist/plugins/Notifications/Notifications.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { NotificationItem } from './spec.js';
@@ -6,3 +6,3 @@ type Props = {
 };
-export declare function Notifications({ notifications }: Props): JSX.Element;
+export declare function Notifications({ notifications }: Props): React.JSX.Element;
 export {};

dist/plugins/PluginList/PluginList.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 export type SimplePlugin = {
@@ -10,3 +10,3 @@ name: string;
 };
-export declare function PluginList({ plugins, enable }: Props): JSX.Element;
+export declare function PluginList({ plugins, enable }: Props): React.JSX.Element;
 export {};

dist/plugins/PropsPanel/BlankState.d.ts

@@ -1,4 +0,4 @@
-/// <reference types="react" />
-export declare function BlankState(): JSX.Element;
+import React from 'react';
+export declare function BlankState(): React.JSX.Element;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NoWrap: import("styled-components").StyledComponent<"span", any, {}, never>;

dist/plugins/PropsPanel/index.js

@@ -42,6 +42,3 @@ import React from 'react';
 function shouldShowBlankState(fixtureState) {
-    // Don't show blank state until props (empty or not) have been read
-    if (!fixtureState.props)
-        return false;
-    const hasProps = fixtureState.props.some(hasFsValues);
+    const hasProps = fixtureState.props && fixtureState.props.some(hasFsValues);
     if (hasProps)
@@ -48,0 +45,0 @@ return false;

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

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

dist/plugins/RemoteRenderer/index.js

@@ -29,3 +29,3 @@ import React from 'react';
     const notifications = getMethodsOf('notifications');
-    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), webRendererUrl: rendererCore.getWebRendererUrl(), pushNotification: notifications.pushTimedNotification }));
+    return (React.createElement(RemoteButton, { devServerOn: core.isDevServerOn(), rendererUrl: rendererCore.getRendererUrl(), pushNotification: notifications.pushTimedNotification }));
 });
@@ -32,0 +32,0 @@ export { register };

dist/plugins/RemoteRenderer/RemoteButton/index.d.ts

@@ -1,9 +0,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { NotificationItem } from '../../Notifications/spec.js';
 type Props = {
     devServerOn: boolean;
-    webRendererUrl: null | string;
+    rendererUrl: null | string;
     pushNotification: (notification: NotificationItem) => unknown;
 };
-export declare function RemoteButton({ devServerOn, webRendererUrl, pushNotification, }: Props): JSX.Element | null;
+export declare function RemoteButton({ devServerOn, rendererUrl, pushNotification, }: Props): React.JSX.Element | null;
 export {};

dist/plugins/RemoteRenderer/RemoteButton/index.js

 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { IconButton32 } from '../../../components/buttons/index.js';
 import { CastIcon } from '../../../components/icons/index.js';
 import { copyToClipboard } from './copyToClipboard.js';
-export function RemoteButton({ devServerOn, webRendererUrl, pushNotification, }) {
-    if (!devServerOn || !webRendererUrl) {
+export function RemoteButton({ devServerOn, rendererUrl, pushNotification, }) {
+    if (!devServerOn || !rendererUrl) {
         return null;
     }
-    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(webRendererUrl) }));
+    return (React.createElement(IconButton32, { icon: React.createElement(CastIcon, null), title: "Copy remote renderer URL", onClick: () => copyRendererUrlToClipboard(createRendererUrl(rendererUrl)) }));
     async function copyRendererUrlToClipboard(url) {
@@ -11,0 +12,0 @@ const fullUrl = getFullUrl(url);

dist/plugins/RendererCore/index.js

 import { createPlugin } from 'react-plugin';
-import { onRouterFixtureChange } from './onRouterFixtureChange.js';
+import { onRouterFixtureReselect } from './onRouterFixtureReselect.js';
+import { onRouterFixtureSelect } from './onRouterFixtureSelect.js';
+import { onRouterFixtureUnselect } from './onRouterFixtureUnselect.js';
 import { receiveResponse } from './receiveResponse/index.js';
@@ -10,3 +12,3 @@ import { reloadRenderer } from './reloadRenderer.js';
         fixtures: {},
-        webRendererUrl: null,
+        rendererUrl: null,
     },
@@ -20,3 +22,3 @@ initialState: {
     methods: {
-        getWebRendererUrl,
+        getRendererUrl,
         getConnectedRendererIds,
@@ -37,8 +39,12 @@ getPrimaryRendererId,
 });
-on('router', { fixtureChange: onRouterFixtureChange });
+on('router', {
+    fixtureSelect: onRouterFixtureSelect,
+    fixtureReselect: onRouterFixtureReselect,
+    fixtureUnselect: onRouterFixtureUnselect,
+});
 export { register };
 if (process.env.NODE_ENV !== 'test')
     register();
-function getWebRendererUrl({ getConfig }) {
-    return getConfig().webRendererUrl;
+function getRendererUrl({ getConfig }) {
+    return getConfig().rendererUrl;
 }
@@ -45,0 +51,0 @@ function getConnectedRendererIds({ getState }) {

dist/plugins/RendererCore/receiveResponse/rendererReady.js

@@ -0,1 +1,2 @@
+import { isEqual } from 'lodash-es';
 import { postSelectFixtureRequest } from '../shared/postRequest.js';
@@ -19,18 +20,5 @@ export function receiveRendererReadyResponse(context, { payload }) {
         const router = context.getMethodsOf('router');
-        const { primaryRendererId } = context.getState();
         const rendererFixtureId = payload.selectedFixtureId;
         const routerFixtureId = router.getSelectedFixtureId();
-        // This looks a bit hairy but here's the idea:
-        // - If a renderer connects with a fixture selected, go to that fixture
-        //   in the Cosmos UI if a) no fixture is already selected and b) the
-        //   connected renderer is the primary one.
-        // - If a renderer connects without a fixture selected and a fixture is
-        //   selected in the Cosmos UI, sent a request to load the selected fixture
-        //   in the connected renderer.
-        if (rendererFixtureId) {
-            if (!routerFixtureId && rendererId === primaryRendererId) {
-                router.selectFixture(rendererFixtureId);
-            }
-        }
-        else if (routerFixtureId) {
+        if (routerFixtureId && !isEqual(routerFixtureId, rendererFixtureId)) {
             const { fixtureState } = context.getState();
@@ -37,0 +25,0 @@ postSelectFixtureRequest(context, rendererId, routerFixtureId, fixtureState);

dist/plugins/RendererCore/spec.d.ts

@@ -6,3 +6,3 @@ import { FixtureList, FixtureState, MessageType, RendererId, StateUpdater } from 'react-cosmos-core';
         fixtures: FixtureList;
-        webRendererUrl: null | string;
+        rendererUrl: null | string;
     };
@@ -16,3 +16,3 @@ state: {
     methods: {
-        getWebRendererUrl(): null | string;
+        getRendererUrl(): null | string;
         getConnectedRendererIds(): RendererId[];
@@ -19,0 +19,0 @@ getPrimaryRendererId(): null | RendererId;

dist/plugins/RendererPreview/index.js

@@ -39,3 +39,3 @@ import React from 'react';
 function getRendererUrl({ getMethodsOf }) {
-    return getMethodsOf('rendererCore').getWebRendererUrl();
+    return getMethodsOf('rendererCore').getRendererUrl();
 }
@@ -42,0 +42,0 @@ function getRendererConnected({ getMethodsOf }) {

dist/plugins/RendererPreview/RendererOverlay/RemoteRendererConnected.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
-export declare function RemoteRendererConnected(): JSX.Element;
+import React from 'react';
+export declare function RemoteRendererConnected(): React.JSX.Element;

dist/plugins/RendererPreview/RendererOverlay/RemoteRendererOverlay.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     rendererConnected: boolean;
 };
-export declare function RemoteRendererOverlay({ rendererConnected }: Props): JSX.Element;
+export declare function RemoteRendererOverlay({ rendererConnected }: Props): React.JSX.Element;
 export {};

dist/plugins/RendererPreview/RendererOverlay/RendererOverlay.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { RuntimeStatus } from '../spec.js';
@@ -6,3 +6,3 @@ type Props = {
 };
-export declare function RendererOverlay({ runtimeStatus }: Props): JSX.Element | null;
+export declare function RendererOverlay({ runtimeStatus }: Props): React.JSX.Element | null;
 export {};

dist/plugins/RendererPreview/RendererOverlay/WaitingForRenderer.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
-export declare function WaitingForRenderer(): JSX.Element;
+import React from 'react';
+export declare function WaitingForRenderer(): React.JSX.Element;

dist/plugins/RendererPreview/RendererPreview.js

 import React from 'react';
+import { createRendererUrl } from 'react-cosmos-core';
 import { Slot } from 'react-plugin';
@@ -14,3 +15,3 @@ import styled from 'styled-components';
         React.createElement(Container, null,
-            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: rendererUrl, frameBorder: 0, allow: "clipboard-write *" }),
+            React.createElement(Iframe, { "data-testid": "previewIframe", ref: onIframeRef, src: createRendererUrl(rendererUrl), frameBorder: 0, allow: "clipboard-write *; fullscreen *;" }),
             React.createElement(RendererOverlay, { runtimeStatus: runtimeStatus }))));
@@ -17,0 +18,0 @@ });

dist/plugins/ResponsivePreview/index.js

@@ -25,3 +25,3 @@ import React from 'react';
     const { enabled, viewport } = viewportState;
-    if (!rendererCore.getWebRendererUrl())
+    if (!rendererCore.getRendererUrl())
         return null;
@@ -28,0 +28,0 @@ return (React.createElement(ToggleButton, { selected: enabled, onToggle: () => {

dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.d.ts

@@ -1,2 +0,2 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction } from 'react';
 import { ResponsiveDevice, ResponsiveViewport } from '../spec.js';
@@ -12,3 +12,3 @@ type Props = {
 };
-export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }: Props): JSX.Element;
+export declare function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }: Props): React.JSX.Element;
 export {};

dist/plugins/ResponsivePreview/ResponsivePreview/ResponsivePreview.js

@@ -6,3 +6,3 @@ import { isEqual } from 'lodash-es';
 import { grey64, grey8 } from '../../../style/colors.js';
-import { Header } from './Header.js';
+import { ResponsiveHeader } from './ResponsiveHeader.js';
 import { getStyles, getViewportScaleFactor, responsivePreviewBorderWidth, responsivePreviewPadding, stretchStyle, } from './style.js';
@@ -67,3 +67,3 @@ export function ResponsivePreview({ children, devices, enabled, viewport, scaled, setViewport, setScaled, }) {
     return (React.createElement(Container, null,
-        React.createElement(Header, { devices: devices, selectedViewport: viewport, scaleFactor: scaleFactor, scaled: scaled, selectViewport: setViewport, toggleScale: () => setScaled(!scaled) }),
+        React.createElement(ResponsiveHeader, { devices: devices, selectedViewport: viewport, scaleFactor: scaleFactor, scaled: scaled, selectViewport: setViewport, toggleScale: () => setScaled(!scaled) }),
         React.createElement("div", { key: "preview", ref: handleContainerRef, style: maskContainerStyle },
@@ -70,0 +70,0 @@ React.createElement("div", { style: padContainerStyle },

dist/plugins/ResponsivePreview/shared.js

 export const DEFAULT_DEVICES = [
-    { label: 'iPhone 5/SE', width: 320, height: 568 },
-    { label: 'iPhone 6/7/8', width: 375, height: 667 },
-    { label: 'iPhone 6/7/8 Plus', width: 414, height: 736 },
-    { label: 'iPhone X', width: 375, height: 812 },
-    { label: 'iPad', width: 768, height: 1024 },
-    { label: 'iPad Pro', width: 1024, height: 1366 },
+    { label: 'iPhone SE', width: 375, height: 667 },
+    { label: 'iPhone 12/13/14', width: 390, height: 844 },
+    { label: 'iPhone 14 Pro', width: 393, height: 852 },
+    { label: 'iPhone 14 Plus', width: 428, height: 926 },
+    { label: 'iPhone 14 Pro Max', width: 430, height: 932 },
+    { label: 'iPad mini', width: 744, height: 1133 },
+    { label: 'iPad', width: 820, height: 1180 },
+    { label: 'iPad Pro 11"', width: 834, height: 1194 },
+    { label: 'iPad Pro 12.9"', width: 1024, height: 1366 },
     { label: 'Small laptop', width: 1280, height: 720 },
     { label: 'Laptop', width: 1366, height: 768 },
-    { label: 'Large laptop', width: 1600, height: 900 },
-    { label: 'Full HD', width: 1920, height: 1080 },
-    { label: 'Quad HD', width: 2560, height: 1440 },
+    { label: 'Large laptop', width: 1536, height: 864 },
+    { label: '1080p', width: 1920, height: 1080 },
+    { label: '1440p', width: 2560, height: 1440 },
 ];
@@ -18,3 +21,3 @@ export const VIEWPORT_STORAGE_KEY = 'responsiveViewportState';
     scaled: true,
-    viewport: { width: 320, height: 568 },
+    viewport: { width: 375, height: 667 },
 };

dist/plugins/ResponsivePreview/ToggleButton/index.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -6,3 +6,3 @@ selected: boolean;
 };
-export declare function ToggleButton({ selected, onToggle }: Props): JSX.Element;
+export declare function ToggleButton({ selected, onToggle }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/GlobalHeader.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -6,3 +6,3 @@ rendererConnected: boolean;
 };
-export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): JSX.Element;
+export declare function GlobalHeader({ rendererConnected, globalActionOrder }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/HomeOverlay/HomeOverlay.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -7,3 +7,3 @@ welcomeDismissed: boolean;
 };
-export declare function HomeOverlay({ welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
+export declare function HomeOverlay({ welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/HomeOverlay/KeyShortcut.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -6,3 +6,3 @@ keys: string[];
 };
-export declare function KeyShortcut({ keys, label }: Props): JSX.Element;
+export declare function KeyShortcut({ keys, label }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/HomeOverlay/NoFixtureSelected.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     onShowWelcome: () => unknown;
 };
-export declare function NoFixtureSelected({ onShowWelcome }: Props): JSX.Element;
+export declare function NoFixtureSelected({ onShowWelcome }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/HomeOverlay/WelcomeCosmos.d.ts

@@ -1,6 +0,6 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     onDismissWelcome: () => unknown;
 };
-export declare function WelcomeCosmos({ onDismissWelcome }: Props): JSX.Element;
+export declare function WelcomeCosmos({ onDismissWelcome }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/navOpen.js

 export const NAV_OPEN_STORAGE_KEY = 'navOpen';
-const NAV_OPEN_DEFAULT = true;
+const NAV_OPEN_DEFAULT = window.innerWidth >= 640;
 export function isNavOpen(context) {
@@ -4,0 +4,0 @@ const storage = context.getMethodsOf('storage');

dist/plugins/Root/panelOpen.js

 export const PANEL_OPEN_STORAGE_KEY = 'sidePanelOpen';
-const PANEL_OPEN_DEFAULT = true;
+const PANEL_OPEN_DEFAULT = window.innerWidth >= 960;
 export function isPanelOpen(context) {
@@ -4,0 +4,0 @@ const storage = context.getMethodsOf('storage');

dist/plugins/Root/Root.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FixtureState, FlatFixtureTreeItem, StateUpdater } from 'react-cosmos-core';
@@ -29,3 +29,3 @@ type Props = {
 };
-export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): JSX.Element;
+export declare function Root({ fixtureItems, selectedFixtureId, rendererConnected, fixtureState, navOpen, panelOpen, navWidth, panelWidth, sidePanelRowOrder, globalActionOrder, globalOrder, navRowOrder, fixtureActionOrder, rendererActionOrder, onToggleNav, onTogglePanel, onReloadRenderer, onCloseFixture, onFixtureStateChange, setNavWidth, setPanelWidth, welcomeDismissed, onDismissWelcome, onShowWelcome, }: Props): React.JSX.Element;
 export {};

dist/plugins/Root/ToggleNavButton.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
@@ -7,3 +7,3 @@ disabled?: boolean;
 };
-export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): JSX.Element;
+export declare function ToggleNavButton({ disabled, selected, onToggle }: Props): React.JSX.Element;
 export {};

dist/plugins/Router/index.js

@@ -6,2 +6,5 @@ import { isEqual } from 'lodash-es';
     name: 'router',
+    defaultConfig: {
+        initialFixtureId: null,
+    },
     initialState: {
@@ -17,4 +20,8 @@ urlParams: {},
 onLoad(context => {
-    const { setState } = context;
+    const { getConfig, setState } = context;
     setState({ urlParams: getUrlParams() });
+    const { initialFixtureId } = getConfig();
+    if (initialFixtureId) {
+        selectFixture(context, initialFixtureId);
+    }
     return subscribeToLocationChanges((urlParams) => {
@@ -25,3 +32,3 @@ const { fixtureId } = context.getState().urlParams;
             if (fixtureChanged) {
-                emitFixtureChangeEvent(context);
+                emitFixtureChangeEvent(context, true);
             }
@@ -47,14 +54,26 @@ });
     const urlParamsEqual = isEqual(nextUrlParams, urlParams);
-    context.setState({ urlParams: nextUrlParams }, () => {
-        // Setting identical url params is considered a "reset" request
-        if (fixtureChanged || urlParamsEqual) {
-            emitFixtureChangeEvent(context);
-        }
-        if (!urlParamsEqual) {
+    if (urlParamsEqual) {
+        // Setting identical URL params can be considered a "reset" request, but
+        // this will only re-render the fixture if the renderer implements an
+        // auto-incrementing render key in its state
+        emitFixtureChangeEvent(context, false);
+    }
+    else {
+        context.setState({ urlParams: nextUrlParams }, () => {
             pushUrlParams(context.getState().urlParams);
-        }
-    });
+            emitFixtureChangeEvent(context, fixtureChanged);
+        });
+    }
 }
-function emitFixtureChangeEvent(context) {
-    context.emit('fixtureChange', getSelectedFixtureId(context));
+function emitFixtureChangeEvent(context, fixtureChanged) {
+    const fixtureId = getSelectedFixtureId(context);
+    if (!fixtureId) {
+        context.emit('fixtureUnselect');
+    }
+    else if (fixtureChanged) {
+        context.emit('fixtureSelect', fixtureId);
+    }
+    else {
+        context.emit('fixtureReselect', fixtureId);
+    }
 }

dist/plugins/Router/spec.d.ts

@@ -1,6 +0,9 @@
-import { FixtureId, PlaygroundSearchParams } from 'react-cosmos-core';
+import { FixtureId, PlaygroundParams } from 'react-cosmos-core';
 export type RouterSpec = {
     name: 'router';
+    config: {
+        initialFixtureId: null | FixtureId;
+    };
     state: {
-        urlParams: PlaygroundSearchParams;
+        urlParams: PlaygroundParams;
     };
@@ -13,4 +16,6 @@ methods: {
     events: {
-        fixtureChange(fixtureId: null | FixtureId): void;
+        fixtureSelect(fixtureId: FixtureId): void;
+        fixtureReselect(fixtureId: FixtureId): void;
+        fixtureUnselect(): void;
     };
 };

dist/shared/url.d.ts

@@ -1,6 +0,6 @@
-import { PlaygroundSearchParams } from 'react-cosmos-core';
-export declare function getUrlParams(): PlaygroundSearchParams;
-export declare function pushUrlParams(urlParams: PlaygroundSearchParams): void;
-export declare function subscribeToLocationChanges(userHandler: (urlParams: PlaygroundSearchParams) => unknown): () => void;
-export declare function createRelativePlaygroundUrl(urlParams: PlaygroundSearchParams): string;
+import { PlaygroundParams } from 'react-cosmos-core';
+export declare function getUrlParams(): PlaygroundParams;
+export declare function pushUrlParams(urlParams: PlaygroundParams): void;
+export declare function subscribeToLocationChanges(userHandler: (urlParams: PlaygroundParams) => unknown): () => void;
+export declare function createRelativePlaygroundUrl(urlParams: PlaygroundParams): string;
 export declare function createRelativeUrlWithQuery(query: string): string;

dist/slots/ControlActionSlot.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureStateControls } from 'react-cosmos-core';
@@ -10,3 +10,3 @@ export type ControlActionSlotProps = {
 };
-export declare function ControlActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function ControlActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/ControlSlot.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureState, FixtureStateControl, StateUpdater } from 'react-cosmos-core';
@@ -11,3 +11,3 @@ export type ControlSlotProps<TControl extends FixtureStateControl> = {
 };
-export declare function ControlSlot({ slotProps }: Props): JSX.Element;
+export declare function ControlSlot({ slotProps }: Props): React.JSX.Element;
 export {};

dist/slots/FixtureActionSlot.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FlatFixtureTreeItem } from 'react-cosmos-core';
@@ -10,3 +10,3 @@ export type FixtureActionSlotProps = {
 };
-export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function FixtureActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/NavRowSlot.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 export type NavRowSlotProps = {
@@ -9,3 +9,3 @@ onCloseNav: () => unknown;
 };
-export declare function NavRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function NavRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/RendererActionSlot.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId } from 'react-cosmos-core';
@@ -10,3 +10,3 @@ export type RendererActionSlotProps = {
 };
-export declare function RendererActionSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function RendererActionSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/SidePanelRowSlot.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import React from 'react';
 import { FixtureId, FixtureState, StateUpdater } from 'react-cosmos-core';
@@ -12,3 +12,3 @@ export type SidePanelRowSlotProps = {
 };
-export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): JSX.Element;
+export declare function SidePanelRowSlot({ slotProps, plugOrder }: Props): React.JSX.Element;
 export {};

dist/slots/ValueInputSlot.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FixtureStatePrimitiveValue, FixtureStateUnserializableValue, PrimitiveData } from 'react-cosmos-core';
@@ -15,3 +15,3 @@ type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
 };
-export declare function ValueInputSlot({ children, slotProps }: Props): JSX.Element;
+export declare function ValueInputSlot({ children, slotProps }: Props): React.JSX.Element;
 export {};

dist/testHelpers/pluginMocks.d.ts

@@ -35,3 +35,3 @@ /// <reference types="jest" />
 export declare function getRendererCoreMethods(): {
-    getWebRendererUrl(): string | null;
+    getRendererUrl(): string | null;
     getConnectedRendererIds(): string[];
@@ -79,3 +79,3 @@ getPrimaryRendererId(): string | null;
 export declare function mockRendererCore(methods?: MethodsOf<RendererCoreSpec>): {
-    getWebRendererUrl: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
+    getRendererUrl: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
     getConnectedRendererIds: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string[]);
@@ -107,3 +107,5 @@ getPrimaryRendererId: jest.Mock<any, any, any> | ((context: import("react-plugin").PluginContext<RendererCoreSpec>) => string | null);
 export declare function onRouter(events?: EventsOf<RouterSpec>): {
-    fixtureChange: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId | null]>;
+    fixtureSelect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId]>;
+    fixtureReselect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, [fixtureId: import("react-cosmos-core").FixtureId]>;
+    fixtureUnselect: jest.Mock<any, any, any> | import("ui-plugin/dist/types/PluginContextHandlers.js").PluginEventHandler<any, []>;
 };
@@ -110,0 +112,0 @@ export declare function onMessageHandler(events?: EventsOf<MessageHandlerSpec>): {

dist/testHelpers/pluginMocks.js

@@ -72,3 +72,3 @@ import { getPluginContext, } from 'react-plugin';
     const allMethods = {
-        getWebRendererUrl: jest.fn(),
+        getRendererUrl: jest.fn(),
         getConnectedRendererIds: jest.fn(),
@@ -117,3 +117,5 @@ getPrimaryRendererId: jest.fn(),
     const allEvents = {
-        fixtureChange: jest.fn(),
+        fixtureSelect: jest.fn(),
+        fixtureReselect: jest.fn(),
+        fixtureUnselect: jest.fn(),
         ...events,
@@ -120,0 +122,0 @@ };

package.json

 {
   "name": "react-cosmos-ui",
-  "version": "6.0.0-canary.ab59b01.0+ab59b01",
+  "version": "6.0.0-canary.abd71bd.0+abd71bd",
   "description": "React Cosmos UI",
@@ -18,3 +18,3 @@ "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-ui",
     "lodash-es": "^4.17.21",
-    "react-cosmos-core": "6.0.0-canary.ab59b01.0+ab59b01"
+    "react-cosmos-core": "6.0.0-canary.abd71bd.0+abd71bd"
   },
@@ -27,3 +27,3 @@ "devDependencies": {
   },
-  "gitHead": "ab59b011ccf0b9e1f6969e3aed3e45228836bee8"
+  "gitHead": "abd71bd5b7ff4bc4d0ed91e49878a351230d9e11"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2891169

increased by0.98%

Number of package files

381

increased by1.06%

Lines of code

10336

increased by0.54%

Dependency changes

• [e-mail]71bd.0+abd71bd