@remotion/cli 2.3.3 → 2.3.4

package/dist/editor/components/CopyButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CopyButton: React.FC<{
+    textToCopy: string;
+    label: string;
+    labelWhenCopied: string;
+}>;
+//# sourceMappingURL=CopyButton.d.ts.map

package/dist/editor/components/CopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/editor/components/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AA2C9D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;CACxB,CAyBA,CAAC"}

package/dist/editor/components/CopyButton.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
+const layout_1 = require("./layout");
+const copyIcon = ((0, jsx_runtime_1.jsx)("svg", Object.assign({ "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: { width: 16, height: 16, color: 'white' } }, { children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }, void 0) }), void 0));
+const container = {
+    padding: 10,
+    cursor: 'pointer',
+    fontSize: 14,
+};
+const button = {
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    borderRadius: 4,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    appearance: 'none',
+    fontFamily: 'inherit',
+    fontSize: 16,
+    color: 'white',
+};
+const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyCmd)(textToCopy);
+        setCopied(Date.now());
+    }, [textToCopy]);
+    (0, react_1.useEffect)(() => {
+        if (!copied) {
+            return;
+        }
+        const to = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(to);
+    }, [copied]);
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick, style: button, type: "button" }, { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ style: container }, { children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }, void 0), " ", copied ? labelWhenCopied : label] }), void 0) }), void 0));
+};
+exports.CopyButton = CopyButton;
+//# sourceMappingURL=CopyButton.js.map

package/dist/editor/components/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../src/editor/components/CopyButton.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8D;AAC9D,8CAG2B;AAC3B,oDAA6C;AAC7C,qCAAsC;AAEtC,MAAM,QAAQ,GAAG,CAChB,6DACa,MAAM,EAClB,SAAS,EAAC,OAAO,iBACL,KAAK,eACP,WAAW,EACrB,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAC,gBAE9C,iCACC,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,qWAAqW,WACtW,YACG,CACN,CAAC;AAEF,MAAM,SAAS,GAAwB;IACtC,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,EAAE;CACZ,CAAC;AAEF,MAAM,MAAM,GAAwB;IACnC,MAAM,EAAE,aAAa,qCAA4B,EAAE;IACnD,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,yBAAgB;IACjC,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,OAAO;CACd,CAAC;AAEK,MAAM,UAAU,GAIlB,CAAC,EAAC,UAAU,EAAE,KAAK,EAAE,eAAe,EAAC,EAAE,EAAE;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAiB,KAAK,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,IAAA,mBAAO,EAAC,UAAU,CAAC,CAAC;QACpB,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,CAAC,MAAM,EAAE;YACZ,OAAO;SACP;QAED,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACN,iDAAQ,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAC,QAAQ,gBACrD,wBAAC,YAAG,kBAAC,KAAK,EAAE,SAAS,iBACnB,QAAQ,EACT,uBAAC,gBAAO,IAAC,CAAC,EAAE,GAAG,WAAI,OAAE,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,aAChD,YACE,CACT,CAAC;AACH,CAAC,CAAC;AA7BW,QAAA,UAAU,cA6BrB"}

package/dist/editor/components/GlobalKeybindings.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const GlobalKeybindings: React.FC;
+//# sourceMappingURL=GlobalKeybindings.d.ts.map

package/dist/editor/components/GlobalKeybindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalKeybindings.d.ts","sourceRoot":"","sources":["../../../src/editor/components/GlobalKeybindings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EA8BrC,CAAC"}

package/dist/editor/components/GlobalKeybindings.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalKeybindings = void 0;
+const react_1 = require("react");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const checkerboard_1 = require("../state/checkerboard");
+const modals_1 = require("../state/modals");
+const GlobalKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    (0, react_1.useEffect)(() => {
+        const nKey = keybindings.registerKeybinding('keypress', 'n', () => {
+            setSelectedModal({
+                type: 'new-comp',
+                compType: 'composition',
+            });
+        });
+        const cKey = keybindings.registerKeybinding('keypress', 't', () => {
+            setCheckerboard((c) => !c);
+        });
+        const questionMark = keybindings.registerKeybinding('keypress', '?', () => {
+            setSelectedModal({
+                type: 'shortcuts',
+            });
+        });
+        return () => {
+            nKey.unregister();
+            cKey.unregister();
+            questionMark.unregister();
+        };
+    }, [keybindings, setCheckerboard, setSelectedModal]);
+    return null;
+};
+exports.GlobalKeybindings = GlobalKeybindings;
+//# sourceMappingURL=GlobalKeybindings.js.map

package/dist/editor/components/GlobalKeybindings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalKeybindings.js","sourceRoot":"","sources":["../../../src/editor/components/GlobalKeybindings.tsx"],"names":[],"mappings":";;;AAAA,iCAAmD;AACnD,8DAAwD;AACxD,wDAA0D;AAC1D,4CAA8C;AAEvC,MAAM,iBAAiB,GAAa,GAAG,EAAE;IAC/C,MAAM,WAAW,GAAG,IAAA,8BAAa,GAAE,CAAC;IACpC,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,kBAAU,EAAC,sBAAa,CAAC,CAAC;IACrD,MAAM,EAAC,eAAe,EAAC,GAAG,IAAA,kBAAU,EAAC,kCAAmB,CAAC,CAAC;IAE1D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,WAAW,CAAC,kBAAkB,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE;YACjE,gBAAgB,CAAC;gBAChB,IAAI,EAAE,UAAU;gBAChB,QAAQ,EAAE,aAAa;aACvB,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,WAAW,CAAC,kBAAkB,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE;YACjE,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,WAAW,CAAC,kBAAkB,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE;YACzE,gBAAgB,CAAC;gBAChB,IAAI,EAAE,WAAW;aACjB,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACX,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,YAAY,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AA9BW,QAAA,iBAAiB,qBA8B5B"}

package/dist/editor/components/KeyboardShortcuts.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=KeyboardShortcuts.d.ts.map

package/dist/editor/components/KeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../src/editor/components/KeyboardShortcuts.tsx"],"names":[],"mappings":""}

package/dist/editor/components/KeyboardShortcuts.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=KeyboardShortcuts.js.map

package/dist/editor/components/KeyboardShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcuts.js","sourceRoot":"","sources":["../../../src/editor/components/KeyboardShortcuts.tsx"],"names":[],"mappings":""}

package/dist/editor/components/KeyboardShortcutsModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const KeyboardShortcuts: React.FC;
+//# sourceMappingURL=KeyboardShortcutsModal.d.ts.map

package/dist/editor/components/KeyboardShortcutsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcutsModal.d.ts","sourceRoot":"","sources":["../../../src/editor/components/KeyboardShortcutsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmCrD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EA8ErC,CAAC"}

package/dist/editor/components/KeyboardShortcutsModal.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardShortcuts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const keys_1 = require("../icons/keys");
+const modals_1 = require("../state/modals");
+const layout_1 = require("./layout");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalHeader_1 = require("./ModalHeader");
+const left = {
+    width: 100,
+    paddingTop: 8,
+    paddingBottom: 8,
+};
+const key = {
+    background: '#333',
+    padding: '3px 6px',
+    color: 'white',
+    borderRadius: 3,
+    border: '1px solid black',
+    borderBottomWidth: 3,
+    fontSize: 13,
+    fontFamily: 'inherit',
+};
+const right = {
+    fontSize: 15,
+};
+const container = {
+    paddingLeft: 20,
+    paddingRight: 40,
+    paddingTop: 10,
+    paddingBottom: 10,
+};
+const KeyboardShortcuts = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, Object.assign({ onEscape: onQuit, onOutsideClick: onQuit }, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: left }, { children: [(0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }, void 0), (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "1 second back" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: left }, { children: [(0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}, void 0) }), void 0), ' '] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "Previous frame" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: left }, { children: (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: "Space" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "Play / Pause" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: left }, { children: (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "Next frame" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: left }, { children: [(0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}, void 0) }), void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }, void 0), (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}, void 0) }), void 0), ' '] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "1 second forward" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: left }, { children: (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: "N" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "New composition" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: left }, { children: (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: "T" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "Toggle checkerboard transparency" }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: left }, { children: (0, jsx_runtime_1.jsx)("kbd", Object.assign({ style: key }, { children: "?" }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: right }, { children: "Show keyboard shortcuts" }), void 0)] }), void 0)] }), void 0)] }), void 0));
+};
+exports.KeyboardShortcuts = KeyboardShortcuts;
+//# sourceMappingURL=KeyboardShortcutsModal.js.map

package/dist/editor/components/KeyboardShortcutsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcutsModal.js","sourceRoot":"","sources":["../../../src/editor/components/KeyboardShortcutsModal.tsx"],"names":[],"mappings":"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"}

package/dist/editor/components/Menu/MenuItem.d.ts

@@ -1,27 +1,22 @@
 import React from 'react';
-export declare type MenuId = 'remotion' | 'file' | 'help';
+import { ComboboxValue } from '../NewComposition/ComboBox';
+export declare type MenuId = 'remotion' | 'file' | 'view' | 'help';
 export declare type Menu = {
     id: MenuId;
-    label: string;
-    items: TMenuItem[];
-};
-export declare type TMenuItem = {
-    type: 'divider';
-    id: string;
-} | {
-    id: string;
-    type: 'item';
     label: React.ReactNode;
-    onClick: () => void;
+    items: ComboboxValue[];
+    leaveLeftPadding: boolean;
 };
 export declare const MenuItem: React.FC<{
-    label: string;
+    label: React.ReactNode;
     id: MenuId;
     selected: boolean;
     onItemSelected: (id: MenuId) => void;
     onItemHovered: (id: MenuId) => void;
     onItemQuit: () => void;
-    onItemFocused: (id: MenuId) => void;
+    onPreviousMenu: () => void;
+    onNextMenu: () => void;
     menu: Menu;
+    leaveLeftPadding: boolean;
 }>;
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/editor/components/Menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AA2Cf,oBAAY,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAIlD,oBAAY,IAAI,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,EAAE,CAAC;CACnB,CAAC;AAEF,oBAAY,SAAS,GAClB;IACA,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACV,GACD;IACA,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEL,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,IAAI,EAAE,IAAI,CAAC;CACX,CAkHA,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE,OAAO,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AAkBzD,oBAAY,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,oBAAY,IAAI,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,gBAAgB,EAAE,OAAO,CAAC;CAC1B,CAiGA,CAAC"}

package/dist/editor/components/Menu/MenuItem.js

@@ -10,9 +10,10 @@ const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
 const font_1 = require("../../helpers/font");
-const is_menu_click_1 = require("./is-menu-click");
-const MenuDivider_1 = require("./MenuDivider");
-const MenuSubItem_1 = require("./MenuSubItem");
+const z_index_1 = require("../../state/z-index");
+const MenuContent_1 = require("../NewComposition/MenuContent");
+const portals_1 = require("./portals");
+const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
     fontFamily: font_1.FONT_FAMILY,
@@ -25,30 +26,13 @@ const container = {
     userSelect: 'none',
     border: 'none',
 };
-const menuContainer = {
-    backgroundColor: colors_1.BACKGROUND,
-    position: 'fixed',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
-    color: 'white',
-    fontFamily: font_1.FONT_FAMILY,
-    paddingTop: 4,
-    paddingBottom: 4,
-    userSelect: 'none',
-    minWidth: 200,
-};
-const outerPortal = {
-    position: 'fixed',
-    height: '100%',
-    width: '100%',
-    backgroundColor: 'rgba(255, 255, 255, 0.02)',
-};
-const portal = document.getElementById('menuportal');
-const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onItemFocused, menu, }) => {
+const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: true,
     });
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -56,8 +40,6 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
                 hovered,
                 selected,
             }),
-            // Don't panic, we apply our own selected style
-            outline: 'none',
         };
     }, [hovered, selected]);
     const portalStyle = (0, react_1.useMemo)(() => {
@@ -65,7 +47,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return null;
         }
         return {
-            ...menuContainer,
+            ...styles_1.menuContainer,
             left: size.left,
             top: size.top + size.height,
         };
@@ -77,32 +59,19 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const onFocus = (0, react_1.useCallback)(() => {
-        onItemFocused(id);
-    }, [id, onItemFocused]);
     const onClick = (0, react_1.useCallback)(() => {
-        if (selected) {
-            onItemQuit();
-        }
-        else {
-            onItemSelected(id);
-        }
-    }, [id, onItemQuit, onItemSelected, selected]);
+        onItemSelected(id);
+        document.activeElement.blur();
+    }, [id, onItemSelected]);
     const outerStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
-            ...outerPortal,
+            ...styles_1.outerPortal,
             top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
         };
     }, [size]);
-    const menuContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: menu.items.map((item) => {
-            if (item.type === 'divider') {
-                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { onActionSelected: item.onClick, label: item.label, id: item.id }, item.id));
-        }) }, void 0));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, role: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onClick, onFocus: onFocus, style: containerStyle, type: "button", className: is_menu_click_1.MENU_BUTTON_CLASS_NAME }, { children: itemName }), void 0), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: is_menu_click_1.SUBMENU_CONTAINER_CLASS_NAME, style: portalStyle }, { children: menuContent }), void 0) }), void 0), portal)
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: containerStyle, type: "button" }, { children: itemName }), void 0), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerStyle }, { children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, Object.assign({ onEscape: onItemQuit, onOutsideClick: onItemQuit }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: portalStyle }, { children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true }, void 0) }), void 0) }), void 0) }), void 0), (0, portals_1.getPortal)(currentZIndex))
                 : null] }, void 0));
 };
 exports.MenuItem = MenuItem;

package/dist/editor/components/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,6CAAiD;AACjD,iCAAoE;AACpE,0DAAiC;AACjC,iDAAiE;AACjE,6CAA+C;AAC/C,iDAA4D;AAE5D,+DAA0D;AAC1D,uCAAoC;AACpC,qCAAoD;AAEpD,MAAM,SAAS,GAAwB;IACtC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,kBAAW;IACvB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,EAAE;IAChB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,MAAM;CACd,CAAC;AAWK,MAAM,QAAQ,GAWhB,CAAC,EACL,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,EAAE,EACF,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,UAAU,EACV,IAAI,GACJ,EAAE,EAAE;IACJ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,wBAAe,CAAC,cAAc,CAAC,GAAG,EAAE;QAChD,qBAAqB,EAAE,IAAI;KAC3B,CAAC,CAAC;IACH,MAAM,EAAC,QAAQ,EAAE,aAAa,EAAC,GAAG,IAAA,mBAAS,GAAE,CAAC;IAE9C,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAwB,EAAE;QACxD,OAAO;YACN,GAAG,SAAS;YACZ,eAAe,EAAE,IAAA,oCAA2B,EAAC;gBAC5C,OAAO;gBACP,QAAQ;aACR,CAAC;SACF,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAA+B,EAAE;QAC5D,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE;YACvB,OAAO,IAAI,CAAC;SACZ;QAED,OAAO;YACN,GAAG,sBAAa;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;SAC3B,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAErB,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACvC,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,UAAU,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACvC,UAAU,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,cAAc,CAAC,EAAE,CAAC,CAAC;QAClB,QAAQ,CAAC,aAAgC,CAAC,IAAI,EAAE,CAAC;IACnD,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QAC/B,OAAO;YACN,GAAG,oBAAW;YACd,GAAG,EAAE,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,CAAC,CAAC;SAC3C,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACN,6DACC,iDACC,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,EACrB,IAAI,EAAC,QAAQ,gBAEZ,QAAQ,YACD,EACR,WAAW;gBACX,CAAC,CAAC,mBAAQ,CAAC,YAAY,CACrB,8CAAK,KAAK,EAAE,UAAU,gBACrB,uBAAC,sBAAY,kBAAC,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,gBAC7D,8CAAK,KAAK,EAAE,WAAW,gBACtB,uBAAC,yBAAW,IACX,UAAU,EAAE,cAAc,EAC1B,cAAc,EAAE,UAAU,EAC1B,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,MAAM,EAAE,UAAU,EAClB,cAAc,EAAE,IAAI,CAAC,gBAAgB,EACrC,cAAc,EAAE,KAAK,EACrB,sBAAsB,iBACrB,YACG,YACQ,YACV,EACN,IAAA,mBAAS,EAAC,aAAa,CAAC,CACvB;gBACH,CAAC,CAAC,IAAI,YACL,CACH,CAAC;AACH,CAAC,CAAC;AA5GW,QAAA,QAAQ,YA4GnB"}

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -1,8 +1,20 @@
 import React from 'react';
+import { SubMenu } from '../NewComposition/ComboBox';
 export declare const MENU_SUBMENU_BUTTON_CLASS_NAME = "remotion-submenu-button";
+export declare type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
 export declare const MenuSubItem: React.FC<{
     label: React.ReactNode;
     id: string;
-    onActionSelected: (id: string) => void;
+    onActionChosen: (id: string) => void;
+    selected: boolean;
+    onItemSelected: (id: string) => void;
+    keyHint: string | null;
+    leaveLeftSpace: boolean;
+    leftItem: React.ReactNode;
+    subMenu: SubMenu | null;
+    onQuitMenu: () => void;
+    onNextMenu: () => void;
+    subMenuActivated: SubMenuActivated;
+    setSubMenuActivated: React.Dispatch<React.SetStateAction<SubMenuActivated>>;
 }>;
 //# sourceMappingURL=MenuSubItem.d.ts.map

package/dist/editor/components/Menu/MenuSubItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSubItem.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuSubItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,eAAO,MAAM,8BAA8B,4BAA4B,CAAC;AAExE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAiCA,CAAC"}
+{"version":3,"file":"MenuSubItem.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuSubItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AAiBnD,eAAO,MAAM,8BAA8B,4BAA4B,CAAC;AAexE,oBAAY,gBAAgB,GAAG,KAAK,GAAG,YAAY,GAAG,eAAe,CAAC;AAEtE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;CAC5E,CAsGA,CAAC"}

package/dist/editor/components/Menu/MenuSubItem.js

@@ -1,9 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuSubItem = exports.MENU_SUBMENU_BUTTON_CLASS_NAME = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const caret_1 = require("../../icons/caret");
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
+const portals_1 = require("./portals");
+const styles_1 = require("./styles");
+const SubMenu_1 = require("./SubMenu");
 const container = {
     paddingTop: 8,
     paddingBottom: 8,
@@ -13,24 +24,65 @@ const container = {
     cursor: 'default',
 };
 exports.MENU_SUBMENU_BUTTON_CLASS_NAME = 'remotion-submenu-button';
-const MenuSubItem = ({ label, onActionSelected, id }) => {
+const keyHintCss = {
+    flexDirection: 'row',
+    color: colors_1.LIGHT_TEXT,
+};
+const leftSpace = {
+    width: 24,
+    marginLeft: -6,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+    });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
         };
-    }, [hovered]);
+    }, [selected]);
+    const onClick = (0, react_1.useCallback)(() => {
+        onActionChosen(id);
+    }, [id, onActionChosen]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
+        onItemSelected(id);
         setHovered(true);
-    }, []);
+    }, [id, onItemSelected]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const onClick = (0, react_1.useCallback)(() => {
-        onActionSelected(id);
-    }, [id, onActionSelected]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: exports.MENU_SUBMENU_BUTTON_CLASS_NAME, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick }, { children: label }), void 0));
+    const onQuitSubmenu = (0, react_1.useCallback)(() => {
+        setSubMenuActivated(false);
+    }, [setSubMenuActivated]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!selected || !size || !subMenu || !subMenuActivated) {
+            return null;
+        }
+        return {
+            ...styles_1.menuContainer,
+            left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
+            top: size.top - styles_1.MENU_VERTICAL_PADDING,
+        };
+    }, [selected, size, subMenu, subMenuActivated]);
+    (0, react_1.useEffect)(() => {
+        if (!hovered || !subMenu) {
+            return;
+        }
+        const hi = setTimeout(() => {
+            setSubMenuActivated('with-mouse');
+        }, 100);
+        return () => clearTimeout(hi);
+    }, [hovered, selected, setSubMenuActivated, subMenu]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick }, { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: leftSpace }, { children: leftItem }), void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { children: label }, void 0), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }, void 0), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.Caret, {}, void 0) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", Object.assign({ style: keyHintCss }, { children: keyHint }), void 0) : null, portalStyle && subMenu
+                    ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }, void 0), (0, portals_1.getPortal)(currentZIndex))
+                    : null] }, void 0) }), void 0));
 };
 exports.MenuSubItem = MenuSubItem;
 //# sourceMappingURL=MenuSubItem.js.map

package/dist/editor/components/Menu/MenuSubItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSubItem.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuSubItem.tsx"],"names":[],"mappings":";;;;AAAA,iCAA4D;AAC5D,iDAAiD;AAEjD,MAAM,SAAS,GAAwB;IACtC,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,EAAE;IACZ,MAAM,EAAE,SAAS;CACjB,CAAC;AACW,QAAA,8BAA8B,GAAG,yBAAyB,CAAC;AAEjE,MAAM,WAAW,GAInB,CAAC,EAAC,KAAK,EAAE,gBAAgB,EAAE,EAAE,EAAC,EAAE,EAAE;IACtC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAwB,EAAE;QAC/C,OAAO;YACN,GAAG,SAAS;YACZ,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAW,CAAC,CAAC,CAAC,aAAa;SACtD,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACvC,UAAU,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACvC,UAAU,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE3B,OAAO,CACN,8CACC,SAAS,EAAE,sCAA8B,EACzC,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,gBAEf,KAAK,YACD,CACN,CAAC;AACH,CAAC,CAAC;AArCW,QAAA,WAAW,eAqCtB"}
+{"version":3,"file":"MenuSubItem.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/MenuSubItem.tsx"],"names":[],"mappings":"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"}

package/dist/editor/components/Menu/SubMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SubMenu } from '../NewComposition/ComboBox';
+import { SubMenuActivated } from './MenuSubItem';
+export declare const SubMenuComponent: React.FC<{
+    portalStyle: React.CSSProperties;
+    subMenu: SubMenu;
+    onQuitFullMenu: () => void;
+    onQuitSubMenu: () => void;
+    subMenuActivated: SubMenuActivated;
+}>;
+//# sourceMappingURL=SubMenu.d.ts.map

package/dist/editor/components/Menu/SubMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/SubMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,OAAO,EAAC,MAAM,4BAA4B,CAAC;AAEnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,gBAAgB,CAAC;CACnC,CA2BA,CAAC"}

package/dist/editor/components/Menu/SubMenu.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenuComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const noop_1 = require("../../helpers/noop");
+const z_index_1 = require("../../state/z-index");
+const MenuContent_1 = require("../NewComposition/MenuContent");
+const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMenu, onQuitSubMenu, }) => {
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, Object.assign({ onEscape: onQuitFullMenu, onOutsideClick: noop_1.noop }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: portalStyle }, { children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: noop_1.noop, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
+                    typeof subMenu.preselectIndex === 'number'
+                    ? subMenu.preselectIndex
+                    : false, topItemCanBeUnselected: false }, void 0) }), void 0) }), void 0));
+};
+exports.SubMenuComponent = SubMenuComponent;
+//# sourceMappingURL=SubMenu.js.map

package/dist/editor/components/Menu/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/SubMenu.tsx"],"names":[],"mappings":";;;;AACA,6CAAwC;AACxC,iDAAiD;AAEjD,+DAA0D;AAGnD,MAAM,gBAAgB,GAMxB,CAAC,EACL,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,aAAa,GACb,EAAE,EAAE;IACJ,OAAO,CACN,uBAAC,sBAAY,kBAAC,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,WAAI,gBAC3D,8CAAK,KAAK,EAAE,WAAW,gBACtB,uBAAC,yBAAW,IACX,UAAU,EAAE,WAAI,EAChB,cAAc,EAAE,aAAa,EAC7B,MAAM,EAAE,OAAO,CAAC,KAAK,EACrB,MAAM,EAAE,WAAI,EACZ,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,cAAc,EACb,gBAAgB,KAAK,eAAe;oBACpC,OAAO,OAAO,CAAC,cAAc,KAAK,QAAQ;oBACzC,CAAC,CAAC,OAAO,CAAC,cAAc;oBACxB,CAAC,CAAC,KAAK,EAET,sBAAsB,EAAE,KAAK,WAC5B,YACG,YACQ,CACf,CAAC;AACH,CAAC,CAAC;AAjCW,QAAA,gBAAgB,oBAiC3B"}

package/dist/editor/components/Menu/portals.d.ts

@@ -0,0 +1,2 @@
+export declare const getPortal: (i: number) => Element;
+//# sourceMappingURL=portals.d.ts.map

package/dist/editor/components/Menu/portals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portals.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/portals.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,MAAO,MAAM,YAElC,CAAC"}

package/dist/editor/components/Menu/portals.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPortal = void 0;
+const portals = [
+    document.getElementById('menuportal-0'),
+    document.getElementById('menuportal-1'),
+    document.getElementById('menuportal-2'),
+    document.getElementById('menuportal-3'),
+    document.getElementById('menuportal-4'),
+    document.getElementById('menuportal-5'),
+];
+const getPortal = (i) => {
+    return portals[i];
+};
+exports.getPortal = getPortal;
+//# sourceMappingURL=portals.js.map

package/dist/editor/components/Menu/portals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portals.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/portals.ts"],"names":[],"mappings":";;;AAAA,MAAM,OAAO,GAAG;IACf,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAY;IAClD,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAY;IAClD,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAY;IAClD,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAY;IAClD,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAY;IAClD,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAY;CAClD,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE;IACtC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;AACnB,CAAC,CAAC;AAFW,QAAA,SAAS,aAEpB"}

package/dist/editor/components/Menu/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const MENU_VERTICAL_PADDING = 4;
+export declare const SUBMENU_LEFT_INSET = -8;
+export declare const menuContainer: React.CSSProperties;
+export declare const outerPortal: React.CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

package/dist/editor/components/Menu/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/Menu/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,aAQjC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,aAI/B,CAAC"}

package/dist/editor/components/Menu/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.outerPortal = exports.menuContainer = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
+const colors_1 = require("../../helpers/colors");
+const font_1 = require("../../helpers/font");
+exports.MENU_VERTICAL_PADDING = 4;
+exports.SUBMENU_LEFT_INSET = -8;
+exports.menuContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+    position: 'fixed',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+    color: 'white',
+    fontFamily: font_1.FONT_FAMILY,
+    userSelect: 'none',
+    minWidth: 200,
+};
+exports.outerPortal = {
+    position: 'fixed',
+    height: '100%',
+    width: '100%',
+};
+//# sourceMappingURL=styles.js.map

package/dist/editor/components/Menu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/editor/components/Menu/styles.ts"],"names":[],"mappings":";;;AAAA,iDAAgD;AAChD,6CAA+C;AAElC,QAAA,qBAAqB,GAAG,CAAC,CAAC;AAC1B,QAAA,kBAAkB,GAAG,CAAC,CAAC,CAAC;AAExB,QAAA,aAAa,GAAwB;IACjD,eAAe,EAAE,mBAAU;IAC3B,QAAQ,EAAE,OAAO;IACjB,SAAS,EAAE,8BAA8B;IACzC,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,kBAAW;IACvB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,GAAG;CACb,CAAC;AAEW,QAAA,WAAW,GAAwB;IAC/C,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACb,CAAC"}