react-cosmos-ui 6.2.3 → 6.2.4-canary.0ff5b03.0

package/dist/components/SidePanel.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { grey128, grey160, grey32, white10 } from '../style/colors.js';
+import { grey128, grey160, grey32 } from '../style/colors.js';
 export const SidePanelContainer = styled.div `
   background: ${grey32};
-  border-top: 1px solid ${white10};
 
   :first-child {
     border-top: none;
@@ -25,14 +24,7 @@ export function SidePanelTitle({ label, componentName }) {
 export const SidePanelActions = styled.div `
   display: flex;
   flex-direction: row;
-
-  > button {
-    margin-left: 4px;
-
-    :first-child {
-      margin-left: 0;
-    }
-  }
+  gap: 4px;
 `;
 export const SidePanelBody = styled.div `
   padding: 0 4px 8px 4px;

package/dist/components/ValueInputTree/ExpandCollapseValues.js

@@ -7,5 +7,5 @@ export function ExpandCollapseValues({ values, expansion, setExpansion, }) {
     const rootNode = createValueTree(values);
     if (!hasExpandableNodes(rootNode))
         return null;
-    return isTreeFullyCollapsed(expansion) ? (React.createElement(IconButton32, { title: "Expand all fixture tree folders", icon: React.createElement(PlusSquareIcon, null), onClick: () => setExpansion(getFullTreeExpansion(rootNode)) })) : (React.createElement(IconButton32, { title: "Collapse all fixture tree folders", icon: React.createElement(MinusSquareIcon, null), onClick: () => setExpansion({}) }));
+    return isTreeFullyCollapsed(expansion) ? (React.createElement(IconButton32, { title: "Expand all nested values", icon: React.createElement(PlusSquareIcon, null), onClick: () => setExpansion(getFullTreeExpansion(rootNode)) })) : (React.createElement(IconButton32, { title: "Collapse all nested values", icon: React.createElement(MinusSquareIcon, null), onClick: () => setExpansion({}) }));
 }

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

@@ -8,6 +8,7 @@ type StyledButtonProps = {
     disabled: boolean;
 };
 export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, StyledButtonProps, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
     color: string;
 }, never>;

package/dist/components/buttons/shared.js

@@ -37,6 +37,9 @@ export const StyledButton = styled.button `
     border: 0;
   }
 `;
+export const StyledLink = styled(StyledButton.withComponent('a')) `
+  text-decoration: none;
+`;
 const iconSize = 16;
 export const StyledIcon = styled.span `
   width: ${iconSize}px;

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

@@ -29,3 +29,7 @@ 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;
+export declare const LockIcon: () => React.JSX.Element;
+export declare const UnlockIcon: () => React.JSX.Element;
+export declare const LayersIcon: () => React.JSX.Element;
+export declare const MessageSquareIcon: () => React.JSX.Element;

package/dist/components/icons/index.js

@@ -105,3 +105,15 @@ export const PlusSquareIcon = () => (React.createElement(Icon, null,
     React.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })));
 export const StarIcon = () => (React.createElement(Icon, null,
     React.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })));
+export const LockIcon = () => (React.createElement(Icon, null,
+    React.createElement("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    React.createElement("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })));
+export const UnlockIcon = () => (React.createElement(Icon, null,
+    React.createElement("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    React.createElement("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })));
+export const LayersIcon = () => (React.createElement(Icon, null,
+    React.createElement("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+    React.createElement("polyline", { points: "2 17 12 22 22 17" }),
+    React.createElement("polyline", { points: "2 12 12 17 22 12" })));
+export const MessageSquareIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })));

package/dist/cosmos.decorator.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { CosmosGlobalStyle, GlobalStyle } from './style/globalStyle.js';
+import { GlobalStyle } from './style/globalStyle.js';
 export default ({ children }) => (React.createElement(React.Fragment, null,
     React.createElement(GlobalStyle, null),
-    React.createElement(CosmosGlobalStyle, null),
     children));

package/dist/hooks/useDrag.js

@@ -4,9 +4,10 @@ export function useDrag({ value, direction = 'horizontal', reverse = false, doub
     const handleDrag = useCallback((e) => {
         if (dragState) {
             const { startValue, startOffset } = dragState;
+            const coords = getEventCoords(e);
             let diff = direction === 'horizontal'
-                ? e.clientX - startOffset
-                : e.clientY - startOffset;
+                ? coords.x - startOffset
+                : coords.y - startOffset;
             if (reverse)
                 diff *= -1;
             if (double)
@@ -19,18 +20,23 @@ export function useDrag({ value, direction = 'horizontal', reverse = false, doub
         setDragState(null);
     }, []);
     const handleDragStart = useCallback((e) => {
+        const coords = getEventCoords(e);
         setDragState({
             startValue: value,
-            startOffset: direction === 'horizontal' ? e.clientX : e.clientY,
+            startOffset: direction === 'horizontal' ? coords.x : coords.y,
         });
     }, [direction, value]);
     useEffect(() => {
         if (dragState) {
             document.addEventListener('mousemove', handleDrag);
+            document.addEventListener('touchmove', handleDrag);
             document.addEventListener('mouseup', handleDragEnd);
+            document.addEventListener('touchend', handleDragEnd);
             return () => {
                 document.removeEventListener('mousemove', handleDrag);
+                document.removeEventListener('touchmove', handleDrag);
                 document.removeEventListener('mouseup', handleDragEnd);
+                document.removeEventListener('touchend', handleDragEnd);
             };
         }
     }, [dragState, handleDrag, handleDragEnd]);
@@ -47,7 +53,11 @@ export function useDrag({ value, direction = 'horizontal', reverse = false, doub
     const dragElRef = useCallback((elRef) => {
         if (elRef) {
             elRef.addEventListener('mousedown', handleDragStart);
-            onUnmount.current = () => elRef.removeEventListener('mousedown', handleDragStart);
+            elRef.addEventListener('touchstart', handleDragStart);
+            onUnmount.current = () => {
+                elRef.removeEventListener('mousedown', handleDragStart);
+                elRef.removeEventListener('touchstart', handleDragStart);
+            };
         }
         else if (onUnmount.current) {
             onUnmount.current();
@@ -56,3 +66,8 @@ export function useDrag({ value, direction = 'horizontal', reverse = false, doub
     }, [handleDragStart]);
     return { dragElRef, dragging: dragState !== null };
 }
+function getEventCoords(e) {
+    if ('touches' in e)
+        return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    return { x: e.clientX, y: e.clientY };
+}

package/dist/index.d.ts

@@ -23,12 +23,12 @@ export * from './plugins/Router/spec.js';
 export * from './plugins/SelectInput/spec.js';
 export * from './plugins/StandardInput/spec.js';
 export * from './plugins/Storage/spec.js';
+export * from './slots/ControlPanelRowSlot.js';
 export * from './slots/FixtureActionSlot.js';
-export * from './slots/InputSlot.js';
 export * from './slots/InputsActionSlot.js';
-export * from './slots/NavRowSlot.js';
+export * from './slots/InputSlot.js';
+export * from './slots/NavPanelRowSlot.js';
 export * from './slots/RendererActionSlot.js';
-export * from './slots/SidePanelRowSlot.js';
 export * from './slots/ValueInputSlot.js';
 export * from './style/colors.js';
 export * from './style/vars.js';

package/dist/index.js

@@ -23,12 +23,12 @@ export * from './plugins/Router/spec.js';
 export * from './plugins/SelectInput/spec.js';
 export * from './plugins/StandardInput/spec.js';
 export * from './plugins/Storage/spec.js';
+export * from './slots/ControlPanelRowSlot.js';
 export * from './slots/FixtureActionSlot.js';
-export * from './slots/InputSlot.js';
 export * from './slots/InputsActionSlot.js';
-export * from './slots/NavRowSlot.js';
+export * from './slots/InputSlot.js';
+export * from './slots/NavPanelRowSlot.js';
 export * from './slots/RendererActionSlot.js';
-export * from './slots/SidePanelRowSlot.js';
 export * from './slots/ValueInputSlot.js';
 export * from './style/colors.js';
 export * from './style/vars.js';