@tomorrowevening/theatre-studio 1.0.5 → 1.0.6

package/dist/uiComponents/icons/EllipsisFill.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-function EllipsisFill(props) {
-    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { d: "M10.667 8a1.333 1.333 0 112.666 0 1.333 1.333 0 01-2.666 0zm-4 0a1.333 1.333 0 112.666 0 1.333 1.333 0 01-2.666 0zm-4 0a1.333 1.333 0 112.666 0 1.333 1.333 0 01-2.666 0z", fill: "currentColor" })));
-}
-export default EllipsisFill;

package/dist/uiComponents/icons/GlobeSimple.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-function GlobeSimple(props) {
-    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm4.75-5.216A5.505 5.505 0 002.522 7.5H5.01c.051-1.468.328-2.807.764-3.825.14-.326.298-.626.477-.89zM13.478 7.5A5.505 5.505 0 009.75 2.784c.179.265.338.565.477.891.436 1.018.713 2.357.764 3.825h2.487zm0 1a5.505 5.505 0 01-3.729 4.716c.18-.264.339-.566.478-.892.436-1.018.713-2.356.764-3.824h2.487zM6.25 13.216A5.505 5.505 0 012.522 8.5H5.01c.051 1.468.328 2.806.764 3.824.14.326.299.627.478.892zm.44-9.147c-.374.874-.63 2.074-.682 3.431h3.982c-.051-1.357-.308-2.557-.683-3.431-.21-.491-.448-.857-.686-1.092-.236-.234-.446-.315-.622-.315s-.386.081-.622.315c-.238.235-.476.6-.686 1.092zm2.617 7.862c.375-.875.631-2.075.683-3.431H6.009c.052 1.356.308 2.556.683 3.43.21.492.448.857.686 1.093.236.233.446.314.622.314s.386-.081.622-.314c.238-.236.476-.601.686-1.092z", fill: "currentColor" })));
-}
-export default GlobeSimple;

package/dist/uiComponents/icons/Outline.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-function Outline(props) {
-    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.775 2.781a.5.5 0 01.5.5v1.7H4.67c.108-.957.92-1.7 1.905-1.7h6.608a1.917 1.917 0 110 3.834H6.574c-.78 0-1.452-.466-1.751-1.135H2.275v5.03h2.39a2.032 2.032 0 012.023-1.854h6.38a2.031 2.031 0 110 4.063h-6.38c-.83 0-1.543-.497-1.858-1.21H1.775a.5.5 0 01-.5-.5V3.281a.5.5 0 01.5-.5zm4.799 1.5h6.608a.917.917 0 110 1.834H6.574a.917.917 0 110-1.834zm.114 5.875h6.38a1.031 1.031 0 110 2.063h-6.38a1.032 1.032 0 110-2.063z", fill: "currentColor" })));
-}
-export default Outline;

package/dist/uiComponents/icons/Package.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-function Package(props) {
-    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { d: "M8.339 4.5l-2.055.644 4.451 1.393v2.748l-2.966.928-2.504-.783V6.738l2.42.758 2.055-.644-4.458-1.395L4 5.858v4.463L7.768 11.5 12 10.175V5.646L8.339 4.5z", fill: "currentColor" })));
-}
-export default Package;

package/dist/uiComponents/icons/Resize.js

@@ -1,7 +0,0 @@
-import * as React from 'react';
-function Resize(props) {
-    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.452 3.452a2 2 0 012-2h9.096a2 2 0 012 2v9.096a2 2 0 01-2 2H3.452a2 2 0 01-2-2V3.452zm2-1h9.096a1 1 0 011 1v9.096a1 1 0 01-1 1h-5.06V8.511H2.451V3.452a1 1 0 011-1z", fill: "currentColor" }),
-        React.createElement("path", { d: "M12.501 4.09a.5.5 0 00-.5-.5H8.95a.5.5 0 100 1h1.98l-2.45 2.449a.5.5 0 10.707.707l2.315-2.315v1.627a.5.5 0 001 0V4.09z", fill: "currentColor" })));
-}
-export default Resize;

package/dist/uiComponents/icons/Trash.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-function Trash(props) {
-    return (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { d: "M6.8 11.6a.6.6 0 00.6-.6V7.4a.6.6 0 00-1.2 0V11a.6.6 0 00.6.6zm6-7.2h-2.4v-.6A1.8 1.8 0 008.6 2H7.4a1.8 1.8 0 00-1.8 1.8v.6H3.2a.6.6 0 100 1.2h.6v6.6A1.8 1.8 0 005.6 14h4.8a1.8 1.8 0 001.8-1.8V5.6h.6a.6.6 0 100-1.2zm-6-.6a.6.6 0 01.6-.6h1.2a.6.6 0 01.6.6v.6H6.8v-.6zm4.2 8.4a.6.6 0 01-.6.6H5.6a.6.6 0 01-.6-.6V5.6h6v6.6zm-1.8-.6a.6.6 0 00.6-.6V7.4a.6.6 0 00-1.2 0V11a.6.6 0 00.6.6z", fill: "currentColor" })));
-}
-export default Trash;

package/dist/uiComponents/icons/index.js

@@ -1,20 +0,0 @@
-export { default as Outline } from './Outline';
-export { default as ArrowClockwise } from './ArrowClockwise';
-export { default as ArrowsOutCardinal } from './ArrowsOutCardinal';
-export { default as Camera } from './Camera';
-export { default as ChevronDown } from './ChevronDown';
-export { default as ChevronRight } from './ChevronRight';
-export { default as ChevronLeft } from './ChevronLeft';
-export { default as Cube } from './Cube';
-export { default as CubeFull } from './CubeFull';
-export { default as CubeHalf } from './CubeHalf';
-export { default as CubeRendered } from './CubeRendered';
-export { default as Details } from './Details';
-export { default as Ellipsis } from './Ellipsis';
-export { default as GlobeSimple } from './GlobeSimple';
-export { default as Resize } from './Resize';
-export { default as Package } from './Package';
-export { default as Bell } from './Bell';
-export { default as Trash } from './Trash';
-export { default as AddImage } from './AddImage';
-export { default as EllipsisFill } from './EllipsisFill';

package/dist/uiComponents/isSafari.js

@@ -1,2 +0,0 @@
-export const isSafari = typeof window !== 'undefined' &&
-    /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

package/dist/uiComponents/onPointerOutside.js

@@ -1,19 +0,0 @@
-/**
- * Calls the callback when the mouse pointer moves outside the
- * bounds of the node.
- */
-export default function onPointerOutside(node, threshold, onPointerOutside) {
-    const containerRect = node.getBoundingClientRect();
-    const onMouseMove = (e) => {
-        if (e.clientX < containerRect.left - threshold ||
-            e.clientX > containerRect.left + containerRect.width + threshold ||
-            e.clientY < containerRect.top - threshold ||
-            e.clientY > containerRect.top + containerRect.height + threshold) {
-            onPointerOutside(e);
-        }
-    };
-    window.addEventListener('mousemove', onMouseMove);
-    return () => {
-        window.removeEventListener('mousemove', onMouseMove);
-    };
-}

package/dist/uiComponents/selects/BasicSelect.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-const Container = styled.div `
-  display: flex;
-  flex-grow: 1;
-`;
-const Label = styled.div `
-  flex-grow: 0;
-  color: hsl(0, 0%, 80%);
-`;
-const SelectedValueLabel = styled.div `
-  flex-grow: 1;
-  padding-left: 8px;
-`;
-const BasicSelect = (props) => {
-    // const [isOpen, setIsOpen] = useState<boolean>(false)
-    const selectedValue = typeof props.value === 'string' ? props.value : props.defaultOption;
-    const selectedLabel = props.options.find((opt) => opt.value === selectedValue)?.label;
-    return (React.createElement(Container, null,
-        React.createElement(Label, null,
-            React.createElement(React.Fragment, null, props.label)),
-        React.createElement(SelectedValueLabel, null, selectedLabel)));
-};
-export default BasicSelect;

package/dist/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import Item from './Item';
-import styled from 'styled-components';
-import { transparentize } from 'polished';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-const minWidth = 190;
-const SHOW_OPTIONAL_MENU_TITLE = true;
-const MenuContainer = styled.ul `
-  position: absolute;
-  min-width: ${minWidth}px;
-  z-index: 10000;
-  background: ${transparentize(0.2, '#111')};
-  backdrop-filter: blur(2px);
-  color: white;
-  list-style-type: none;
-  padding: 2px 0;
-  margin: 0;
-  border-radius: 1px;
-  cursor: default;
-  ${pointerEventsAutoInNormalMode};
-  border-radius: 3px;
-`;
-const MenuTitle = styled.div `
-  padding: 4px 10px;
-  border-bottom: 1px solid #6262626d;
-  color: #adadadb3;
-  font-size: 11px;
-  font-weight: 500;
-`;
-const BaseMenu = React.forwardRef((props, ref) => {
-    return (React.createElement(MenuContainer, { ref: ref },
-        SHOW_OPTIONAL_MENU_TITLE && props.displayName ? (React.createElement(MenuTitle, null, props.displayName)) : null,
-        props.items.map((item, i) => (React.createElement(Item, { key: `item-${i}`, label: item.label, enabled: item.enabled === false ? false : true, onClick: (e) => {
-                if (item.callback) {
-                    item.callback(e);
-                }
-                props.onRequestClose();
-            } })))));
-});
-export default BaseMenu;

package/dist/uiComponents/simpleContextMenu/ContextMenu/ContextMenu.js

@@ -1,87 +0,0 @@
-import useBoundingClientRect from '@tomorrowevening/theatre-studio/uiComponents/useBoundingClientRect';
-import { useMemo } from 'react';
-import { useContext } from 'react';
-import React, { useLayoutEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import useWindowSize from 'react-use/esm/useWindowSize';
-import { height as itemHeight } from './Item';
-import { PortalContext } from 'reakit';
-import useOnKeyDown from '@tomorrowevening/theatre-studio/uiComponents/useOnKeyDown';
-import BaseMenu from './BaseMenu';
-/**
- * How far from the menu should the pointer travel to auto close the menu
- */
-const pointerDistanceThreshold = 20;
-/**
- * TODO let's make sure that triggering a context menu would close
- * the other open context menu (if one _is_ open).
- */
-const ContextMenu = (props) => {
-    const [container, setContainer] = useState(null);
-    const rect = useBoundingClientRect(container);
-    const windowSize = useWindowSize();
-    useLayoutEffect(() => {
-        if (!rect || !container)
-            return;
-        const preferredAnchorPoint = {
-            left: rect.width / 2,
-            // if there is a displayName, make sure to move the context menu up by one item,
-            // so that the first active item is the one the mouse is hovering over
-            top: itemHeight / 2 + (props.displayName ? itemHeight : 0),
-        };
-        const pos = {
-            left: props.clickPoint.clientX - preferredAnchorPoint.left,
-            top: props.clickPoint.clientY - preferredAnchorPoint.top,
-        };
-        if (pos.left < 0) {
-            pos.left = 0;
-        }
-        else if (pos.left + rect.width > windowSize.width) {
-            pos.left = windowSize.width - rect.width;
-        }
-        if (pos.top < 0) {
-            pos.top = 0;
-        }
-        else if (pos.top + rect.height > windowSize.height) {
-            pos.top = windowSize.height - rect.height;
-        }
-        container.style.left = pos.left + 'px';
-        container.style.top = pos.top + 'px';
-        const onMouseMove = (e) => {
-            if (e.clientX < pos.left - pointerDistanceThreshold ||
-                e.clientX > pos.left + rect.width + pointerDistanceThreshold ||
-                e.clientY < pos.top - pointerDistanceThreshold ||
-                e.clientY > pos.top + rect.height + pointerDistanceThreshold) {
-                props.onRequestClose();
-            }
-        };
-        window.addEventListener('mousemove', onMouseMove);
-        return () => {
-            window.removeEventListener('mousemove', onMouseMove);
-        };
-    }, [rect, container, props.clickPoint, windowSize, props.onRequestClose]);
-    const portalLayer = useContext(PortalContext);
-    useOnKeyDown((ev) => {
-        if (ev.key === 'Escape')
-            props.onRequestClose();
-    });
-    const items = useMemo(() => {
-        const itemsArr = Array.isArray(props.items) ? props.items : props.items();
-        if (itemsArr.length > 0)
-            return itemsArr;
-        else
-            return [
-                {
-                    /**
-                     * TODO Need design for this
-                     */
-                    label: props.displayName
-                        ? `No actions for ${props.displayName}`
-                        : `No actions found`,
-                    enabled: false,
-                },
-            ];
-    }, [props.items]);
-    return createPortal(React.createElement(BaseMenu, { items: items, onRequestClose: props.onRequestClose, displayName: props.displayName, ref: setContainer }), portalLayer);
-};
-export default ContextMenu;

package/dist/uiComponents/simpleContextMenu/ContextMenu/Item.js

@@ -1,37 +0,0 @@
-import noop from '@tomorrowevening/theatre-shared/utils/noop';
-import React from 'react';
-import styled from 'styled-components';
-export const height = 26;
-const ItemContainer = styled.li `
-  height: ${height}px;
-  padding: 0 12px;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  font-size: 11px;
-  font-weight: 400;
-  position: relative;
-  color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')};
-  cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};
-
-  &:after {
-    position: absolute;
-    inset: 2px 1px;
-    display: block;
-    content: ' ';
-    pointer-events: none;
-    z-index: -1;
-    border-radius: 3px;
-  }
-
-  &:hover:after {
-    background-color: ${(props) => props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'};
-  }
-`;
-const ItemLabel = styled.span ``;
-const Item = (props) => {
-    return (React.createElement(ItemContainer, { onClick: props.enabled ? props.onClick : noop, enabled: props.enabled, title: props.enabled ? undefined : 'Disabled' },
-        React.createElement(ItemLabel, null,
-            React.createElement(React.Fragment, null, props.label))));
-};
-export default Item;

package/dist/uiComponents/simpleContextMenu/useContextMenu.js

@@ -1,20 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import ContextMenu from './ContextMenu/ContextMenu';
-import useRequestContextMenu from './useRequestContextMenu';
-import { contextMenuShownContext } from '@tomorrowevening/theatre-studio/panels/DetailPanel/DetailPanel';
-const emptyNode = React.createElement(React.Fragment, null);
-export default function useContextMenu(target, opts) {
-    const [status, close] = useRequestContextMenu(target, opts);
-    // TODO: this lock is now exported from the detail panel, do refactor it when you get the chance
-    const [, addContextMenu] = useContext(contextMenuShownContext);
-    useEffect(() => {
-        let removeContextMenu;
-        if (status.isOpen) {
-            opts.onOpen?.();
-            removeContextMenu = addContextMenu();
-        }
-        return () => removeContextMenu?.();
-    }, [status.isOpen, opts.onOpen]);
-    const node = !status.isOpen ? (emptyNode) : (React.createElement(ContextMenu, { items: opts.menuItems, displayName: opts.displayName, clickPoint: status.event, onRequestClose: close }));
-    return [node, close, status.isOpen];
-}

package/dist/uiComponents/simpleContextMenu/useRequestContextMenu.js

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-const useRequestContextMenu = (target, opts) => {
-    const [state, setState] = useState({ isOpen: false });
-    const close = useCallback(() => setState({ isOpen: false }), []);
-    useEffect(() => {
-        if (!target || opts.disabled === true) {
-            setState({ isOpen: false });
-            return;
-        }
-        const onTrigger = (event) => {
-            setState({ isOpen: true, event });
-            event.preventDefault();
-            event.stopPropagation();
-        };
-        target.addEventListener('contextmenu', onTrigger);
-        return () => {
-            target.removeEventListener('contextmenu', onTrigger);
-        };
-    }, [target, opts.disabled]);
-    return [state, close];
-};
-export default useRequestContextMenu;

package/dist/uiComponents/toolbar/ToolbarDropdownSelect.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-const Container = styled.div ``;
-const ToolbarDropdownSelect = (props) => {
-    return React.createElement(Container, null);
-};
-export default ToolbarDropdownSelect;

package/dist/uiComponents/toolbar/ToolbarIconButton.js

@@ -1,74 +0,0 @@
-import styled from 'styled-components';
-import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
-import React from 'react';
-import useTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/useTooltip';
-import { mergeRefs } from 'react-merge-refs';
-import MinimalTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/MinimalTooltip';
-import ToolbarSwitchSelectContainer from './ToolbarSwitchSelectContainer';
-export const Container = styled.button `
-  ${pointerEventsAutoInNormalMode};
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 600;
-  width: 32px;
-  height: 32px;
-  outline: none;
-
-  color: #a8a8a9;
-
-  background: rgba(40, 43, 47, 0.8);
-  backdrop-filter: blur(14px);
-  border: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 2px;
-
-  svg {
-    display: block;
-  }
-
-  &:hover {
-    background: rgba(59, 63, 69, 0.8);
-  }
-
-  &:active {
-    background: rgba(82, 88, 96, 0.8);
-  }
-
-  &.selected {
-    color: rgba(255, 255, 255, 0.8);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
-  }
-
-  // Don't blur if in a button group, because it already blurs. We need to blur
-  // on the group-level, otherwise we get seams.
-  ${ToolbarSwitchSelectContainer} > & {
-    backdrop-filter: none;
-    filter: none;
-    border-radius: 0;
-
-    &:first-child {
-      border-top-left-radius: 2px;
-      border-bottom-left-radius: 2px;
-    }
-
-    &:last-child {
-      border-bottom-right-radius: 2px;
-      border-top-right-radius: 2px;
-    }
-  }
-
-  @supports not (backdrop-filter: blur()) {
-    background: rgba(40, 43, 47, 0.95);
-  }
-`;
-const ToolbarIconButton = React.forwardRef(({ title, ...props }, ref) => {
-    const [tooltip, localRef] = useTooltip({ enabled: typeof title === 'string' }, () => React.createElement(MinimalTooltip, null, title));
-    return (React.createElement(React.Fragment, null,
-        tooltip,
-        React.createElement(Container, { ref: mergeRefs([localRef, ref]), ...props }),
-        ' '));
-});
-export default ToolbarIconButton;

package/dist/uiComponents/toolbar/ToolbarSwitchSelect.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Button } from 'reakit';
-import ButtonImpl from './ToolbarIconButton';
-import Container from './ToolbarSwitchSelectContainer';
-function OptionButton({ value, label, icon, onClick, isSelected, }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ButtonImpl, { forwardedAs: Button, className: isSelected ? 'selected' : undefined, "aria-label": label, onClick: onClick, title: label }, icon)));
-}
-const ToolbarSwitchSelect = ({ value: valueOfSwitch, onChange, options, }) => {
-    return (React.createElement(Container, null, options.map(({ label, icon, value: optionValue }) => (React.createElement(OptionButton, { key: optionValue, value: optionValue, isSelected: valueOfSwitch === optionValue, label: label, icon: icon, onClick: () => onChange(optionValue) })))));
-};
-export default ToolbarSwitchSelect;

package/dist/uiComponents/toolbar/ToolbarSwitchSelectContainer.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { Group } from 'reakit';
-const Container = styled(Group) `
-  display: flex;
-  height: fit-content;
-  backdrop-filter: blur(14px);
-  border-radius: 2px;
-`;
-export default Container;

package/dist/uiComponents/useBoundingClientRect.js

@@ -1,13 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-export default function useBoundingClientRect(node) {
-    const [bounds, set] = useState(null);
-    useLayoutEffect(() => {
-        if (node) {
-            set(node.getBoundingClientRect());
-        }
-        return () => {
-            set(null);
-        };
-    }, [node]);
-    return bounds;
-}

package/dist/uiComponents/useDebugRefreshEvery.js

@@ -1,19 +0,0 @@
-import { useEffect, useState } from 'react';
-/**
- * Little utility hook that refreshes a react element every `ms` milliseconds. Use
- * it to debug whether the props of the element, or the return values of its hooks
- * are getting properly updated.
- *
- * @param ms - interval in milliseconds
- */
-export default function useDebugRefreshEvery(ms = 500) {
-    const [_, setState] = useState(0);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setState((i) => i + 1);
-        }, ms);
-        return () => {
-            clearInterval(interval);
-        };
-    }, []);
-}