react-cosmos-ui 6.0.0-beta.5 → 6.0.0-beta.7

package/dist/components/BaseSvg.d.ts

@@ -5,5 +5,5 @@ type Props = {
     children: SvgChildren;
     [attr: string]: unknown;
 };
-export declare function BaseSvg({ children, ...attrs }: Props): JSX.Element;
+export declare function BaseSvg({ children, ...attrs }: Props): React.JSX.Element;
 export {};

package/dist/components/Icon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
 export type IconProps = {
     size?: number | string;
@@ -7,5 +7,5 @@ export type IconProps = {
 type Props = IconProps & {
     children: SvgChildren;
 };
-export declare function Icon({ children, size, strokeWidth }: Props): JSX.Element;
+export declare function Icon({ children, size, strokeWidth }: Props): React.JSX.Element;
 export {};

package/dist/components/Illustration.d.ts

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

package/dist/components/KeyBox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     value: string;
     bgColor: string;
@@ -6,5 +6,5 @@ type Props = {
     size?: number;
     fontSize?: number;
 };
-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 {};

package/dist/components/SidePanel.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const SidePanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SidePanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 type TitleProps = {
     label: string;
     componentName?: string;
 };
-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 {};

package/dist/components/Space.d.ts

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

package/dist/components/TreeView.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TreeNode } from 'react-cosmos-core';
 import { TreeExpansion } from '../shared/treeExpansion.js';
 type Props<Item> = {
@@ -15,5 +15,5 @@ type Props<Item> = {
         onToggle: () => unknown;
     }) => ReactNode;
 };
-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 {};

package/dist/components/ValueInputTree/ExpandCollapseValues.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PrimitiveData } from 'react-cosmos-core';
 import { LeafValue } from '../shared.js';
 type Props = {
@@ -8,5 +8,5 @@ type Props = {
     indentLevel: number;
     onChange: (data: PrimitiveData) => unknown;
 };
-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 {};

package/dist/components/ValueInputTree/ValueInputDir.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 type Props = {
     name: string;
-    childNames: string[];
+    childrenText: string;
+    disabled: boolean;
     expanded: boolean;
     indentLevel: number;
     onToggle: () => unknown;
 };
-export declare function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }: Props): JSX.Element;
+export declare function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInputDir.js

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 import { blue, disabledColors, grey128, grey160, grey224, } from '../../style/colors.js';
 import { ChevronDownIcon, ChevronRightIcon } from '../icons/index.js';
 import { ValueTreeItem } from './shared.js';
-export function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }) {
-    const disabled = childNames.length === 0;
+export function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }) {
     return (React.createElement(ValueTreeItem, { indentLevel: indentLevel },
         React.createElement(ButtonContainer, null,
             React.createElement(Button, { disabled: disabled, onClick: onToggle },
@@ -12,10 +11,7 @@ export function ValueInputDir({ name, childNames, expanded, indentLevel, onToggl
                     !disabled && (React.createElement(ChevronContainer, null, expanded ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null))),
                     React.createElement(Text, null,
                         React.createElement(DirName, { disabled: disabled }, name),
-                        React.createElement(ChildrenInfo, null, getChildInfo(childNames))))))));
-}
-function getChildInfo(childNames) {
-    return childNames.length > 0 ? `{ ${childNames.join(', ')} }` : `{}`;
+                        React.createElement(ChildrenInfo, null, childrenText)))))));
 }
 const ButtonContainer = styled.div `
   padding: 2px 0;

package/dist/components/ValueInputTree/ValueInputTree.js

@@ -11,9 +11,16 @@ export const ValueInputTree = React.memo(function ValueInputTree({ id, values, e
     return (React.createElement(Container, null,
         React.createElement(TreeView, { node: rootNode, expansion: expansion, setExpansion: setExpansion, renderNode: ({ node, name, parents, expanded, onToggle }) => {
                 const { data, children } = node;
-                if (data.type === 'item')
+                if (data.type === 'item') {
                     return (React.createElement(ValueInput, { value: data.value, name: name, id: getInputId(id, parents, name), indentLevel: parents.length, onChange: newData => onValueChange(setValueAtPath(values, { type: 'primitive', data: newData }, getValuePath(name, parents))) }));
-                return (children && (React.createElement(ValueInputDir, { name: name, childNames: Object.keys(children), expanded: expanded, indentLevel: parents.length, onToggle: onToggle })));
+                }
+                if (children) {
+                    const childKeys = Object.keys(children);
+                    return (React.createElement(ValueInputDir, { name: name, childrenText: getChildrenText(childKeys, data.isArray), disabled: childKeys.length === 0, expanded: expanded, indentLevel: parents.length, onToggle: onToggle }));
+                }
+                else {
+                    return null;
+                }
             } })));
 });
 function getInputId(treeId, parents, name) {
@@ -26,6 +33,14 @@ function setValueAtPath(values, newValue, valuePath) {
     // Inspired by https://github.com/lodash/lodash/issues/1696#issuecomment-328335502
     return setWith(clone(values), valuePath, newValue, clone);
 }
+function getChildrenText(childKeys, isArray) {
+    if (childKeys.length > 0) {
+        return isArray ? `[ ${childKeys.length} ]` : `{ ${childKeys.join(', ')} }`;
+    }
+    else {
+        return isArray ? `[]` : `{}`;
+    }
+}
 const Container = styled.div `
   background: ${grey32};
   color: ${grey248};

package/dist/components/ValueInputTree/shared.d.ts

@@ -2,6 +2,7 @@ import { FixtureElementId, FixtureStatePrimitiveValue, FixtureStateUnserializabl
 export type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
 export type ValueNodeData = {
     type: 'collection';
+    isArray: boolean;
 } | {
     type: 'item';
     value: LeafValue;

package/dist/components/ValueInputTree/valueTree.d.ts

@@ -1,3 +1,3 @@
 import { FixtureStateValues } from 'react-cosmos-core';
 import { ValueNode } from './shared.js';
-export declare function createValueTree(values: FixtureStateValues): ValueNode;
+export declare function createValueTree(values: FixtureStateValues, isArray?: boolean): ValueNode;

package/dist/components/ValueInputTree/valueTree.js

@@ -1,20 +1,25 @@
-export function createValueTree(values) {
+export function createValueTree(values, isArray = false) {
     const children = {};
     Object.keys(values).forEach(key => {
         const value = values[key];
         if (value.type === 'object') {
-            children[key] = createValueTree(value.values);
+            children[key] = createValueTree(value.values, false);
         }
         else if (value.type === 'array') {
             const objValues = {};
             value.values.forEach((v, idx) => {
                 objValues[idx] = v;
             });
-            children[key] = createValueTree(objValues);
+            children[key] = createValueTree(objValues, true);
         }
         else {
-            children[key] = { data: { type: 'item', value } };
+            children[key] = {
+                data: { type: 'item', value },
+            };
         }
     });
-    return { data: { type: 'collection' }, children };
+    return {
+        data: { type: 'collection', isArray },
+        children,
+    };
 }

package/dist/components/buttons/Button32.d.ts

@@ -7,5 +7,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-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 {};

package/dist/components/buttons/Button8.d.ts

@@ -7,5 +7,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-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 {};

package/dist/components/buttons/IconButton32.d.ts

@@ -6,5 +6,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-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 {};

package/dist/components/buttons/IconButton8.d.ts

@@ -6,5 +6,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-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 {};

package/dist/components/buttons/shared.js

@@ -14,7 +14,10 @@ export const StyledButton = styled.button `
   white-space: nowrap;
   user-select: none;
   outline: none;
-  transition: background ${quick}s, color ${quick}s, opacity ${quick}s;
+  transition:
+    background ${quick}s,
+    color ${quick}s,
+    opacity ${quick}s;
 
   :hover {
     background: ${props => (props.selected ? props.bgSelect : props.bgHover)};

package/dist/components/icons/index.d.ts

@@ -1,31 +1,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;

package/dist/components/illustrations/ArtificialIntelligence.d.ts

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

package/dist/components/illustrations/Astronaut.d.ts

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

package/dist/components/illustrations/BlankCanvas.d.ts

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

package/dist/components/inputs/NumberInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export type NumberInputStyles = {
     focusedColor: string;
     focusedBg: string;
@@ -12,5 +12,5 @@ type Props = {
     styles: NumberInputStyles;
     onChange: (newValue: number) => unknown;
 };
-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 {};

package/dist/components/inputs/Select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 type BaseOption = {
     value: string;
     label: string;
@@ -13,5 +13,5 @@ type Props<Option extends BaseOption> = {
     padding: number;
     onChange: (newValue: Option) => unknown;
 };
-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 {};

package/dist/cosmos.decorator.d.ts

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