@remotion/cli 2.3.0 → 2.3.4

package/dist/editor/components/MenuToolbar.js

@@ -0,0 +1,374 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuToolbar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const font_1 = require("../helpers/font");
+const Checkmark_1 = require("../icons/Checkmark");
+const checkerboard_1 = require("../state/checkerboard");
+const modals_1 = require("../state/modals");
+const preview_size_1 = require("../state/preview-size");
+const rich_timeline_1 = require("../state/rich-timeline");
+const timeline_ref_1 = require("../state/timeline-ref");
+const layout_1 = require("./layout");
+const MenuItem_1 = require("./Menu/MenuItem");
+const SizeSelector_1 = require("./SizeSelector");
+const UpdateCheck_1 = require("./UpdateCheck");
+const row = {
+    alignItems: 'center',
+    flexDirection: 'row',
+    display: 'flex',
+    color: 'white',
+    borderBottom: '1px solid black',
+    fontFamily: font_1.FONT_FAMILY,
+    fontSize: 13,
+    paddingLeft: 6,
+};
+const openExternal = (link) => {
+    window.open(link, '_blank');
+};
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const ICON_SIZE = 16;
+const MenuToolbar = () => {
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
+    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const itemClicked = (0, react_1.useCallback)((itemId) => {
+        setSelected(itemId);
+    }, [setSelected]);
+    const itemHovered = (0, react_1.useCallback)((itemId) => {
+        if (selected) {
+            setSelected(itemId);
+        }
+    }, [selected, setSelected]);
+    const close = (0, react_1.useCallback)(() => {
+        setSelected(null);
+    }, []);
+    const structure = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'remotion',
+                label: ((0, jsx_runtime_1.jsx)(layout_1.Row, Object.assign({ align: "center", justify: "center" }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate }, { children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }), void 0) }), void 0)),
+                leaveLeftPadding: false,
+                items: [
+                    {
+                        id: 'about',
+                        value: 'about',
+                        label: 'About Remotion',
+                        onClick: () => {
+                            close();
+                            openExternal('https://remotion.dev');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'changelog',
+                        value: 'changelog',
+                        label: 'Changelog',
+                        onClick: () => {
+                            close();
+                            openExternal('https://github.com/remotion-dev/remotion/releases');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'license',
+                        value: 'license',
+                        label: 'License',
+                        onClick: () => {
+                            close();
+                            openExternal('https://github.com/remotion-dev/remotion/blob/main/LICENSE.md');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                ],
+            },
+            {
+                id: 'file',
+                label: 'File',
+                leaveLeftPadding: false,
+                items: [
+                    {
+                        id: 'new-sequence',
+                        value: 'new-sequence',
+                        label: 'New composition...',
+                        onClick: () => {
+                            close();
+                            setSelectedModal({
+                                compType: 'composition',
+                                type: 'new-comp',
+                            });
+                        },
+                        type: 'item',
+                        keyHint: 'N',
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'new-still',
+                        value: 'new-still',
+                        label: 'New still...',
+                        onClick: () => {
+                            close();
+                            setSelectedModal({
+                                compType: 'still',
+                                type: 'new-comp',
+                            });
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                ],
+            },
+            {
+                id: 'view',
+                label: 'View',
+                leaveLeftPadding: true,
+                items: [
+                    {
+                        id: 'preview-size',
+                        keyHint: null,
+                        label: 'Preview size',
+                        onClick: () => undefined,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: SizeSelector_1.commonPreviewSizes.findIndex((s) => String(size) === String(s)),
+                            items: SizeSelector_1.commonPreviewSizes.map((newSize) => ({
+                                id: String(newSize),
+                                keyHint: null,
+                                label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
+                                leftItem: String(newSize) === String(size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                                onClick: () => {
+                                    close();
+                                    setSize(() => newSize);
+                                },
+                                subMenu: null,
+                                type: 'item',
+                                value: newSize,
+                            })),
+                        },
+                    },
+                    {
+                        id: 'checkerboard',
+                        keyHint: 'T',
+                        label: 'Transparency as checkerboard',
+                        onClick: () => {
+                            close();
+                            setCheckerboard((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'checkerboard',
+                        leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'rich-timeline',
+                        keyHint: null,
+                        label: 'Rich timeline',
+                        onClick: () => {
+                            close();
+                            setRichTimeline((r) => !r);
+                        },
+                        type: 'item',
+                        value: 'rich-timeline',
+                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'expand-all',
+                        keyHint: null,
+                        label: 'Expand all',
+                        onClick: () => {
+                            var _a;
+                            close();
+                            (_a = timeline_ref_1.timelineRef.current) === null || _a === void 0 ? void 0 : _a.expandAll();
+                        },
+                        type: 'item',
+                        value: 'expand-all',
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'collapse-all',
+                        keyHint: null,
+                        label: 'Collapse all',
+                        onClick: () => {
+                            var _a;
+                            close();
+                            (_a = timeline_ref_1.timelineRef.current) === null || _a === void 0 ? void 0 : _a.collapseAll();
+                        },
+                        type: 'item',
+                        value: 'collapse-all',
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                ],
+            },
+            {
+                id: 'help',
+                label: 'Help',
+                leaveLeftPadding: false,
+                items: [
+                    {
+                        id: 'shortcuts',
+                        value: 'shortcuts',
+                        label: 'Shortcuts',
+                        onClick: () => {
+                            close();
+                            setSelectedModal({
+                                type: 'shortcuts',
+                            });
+                        },
+                        keyHint: '?',
+                        leftItem: null,
+                        subMenu: null,
+                        type: 'item',
+                    },
+                    {
+                        id: 'docs',
+                        value: 'docs',
+                        label: 'Docs',
+                        onClick: () => {
+                            close();
+                            openExternal('https://remotion.dev/docs');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'file-issue',
+                        value: 'file-issue',
+                        label: 'File an issue',
+                        onClick: () => {
+                            close();
+                            openExternal('https://github.com/remotion-dev/remotion/issues/new/choose');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'discord',
+                        value: 'discord',
+                        label: 'Join Discord community',
+                        onClick: () => {
+                            close();
+                            openExternal('https://discord.com/invite/6VzzNDwUwV');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'help-divider',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'insta',
+                        value: 'insta',
+                        label: 'Instagram',
+                        onClick: () => {
+                            close();
+                            openExternal('https://instagram.com/remotion.dev');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'twitter',
+                        value: 'twitter',
+                        label: 'Twitter',
+                        onClick: () => {
+                            close();
+                            openExternal('https://twitter.com/JNYBGR');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                    {
+                        id: 'tiktok',
+                        value: 'tiktok',
+                        label: 'TikTok',
+                        onClick: () => {
+                            close();
+                            openExternal('https://www.tiktok.com/@remotion.dev');
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                    },
+                ],
+            },
+        ];
+    }, [
+        checkerboard,
+        close,
+        richTimeline,
+        setCheckerboard,
+        setRichTimeline,
+        setSelectedModal,
+        setSize,
+        size,
+    ]);
+    const menus = (0, react_1.useMemo)(() => {
+        return structure.map((s) => s.id);
+    }, [structure]);
+    const onPreviousMenu = (0, react_1.useCallback)(() => {
+        setSelected((s) => {
+            if (s === null) {
+                return null;
+            }
+            return menus[(menus.indexOf(s) + 1) % menus.length];
+        });
+    }, [menus]);
+    const onNextMenu = (0, react_1.useCallback)(() => {
+        setSelected((s) => {
+            if (s === null) {
+                return null;
+            }
+            if (menus.indexOf(s) === 0) {
+                return menus[menus.length - 1];
+            }
+            return menus[(menus.indexOf(s) - 1) % menus.length];
+        });
+    }, [menus]);
+    const onItemQuit = (0, react_1.useCallback)(() => {
+        setSelected(null);
+    }, [setSelected]);
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, Object.assign({ align: "center", style: row }, { children: [structure.map((s) => {
+                return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
+            }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {}, void 0)] }), void 0));
+};
+exports.MenuToolbar = MenuToolbar;
+//# sourceMappingURL=MenuToolbar.js.map

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ModalContainer: React.FC<{
+    onEscape: () => void;
+    onOutsideClick: () => void;
+}>;
+//# sourceMappingURL=ModalContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContainer.d.ts","sourceRoot":"","sources":["../../../src/editor/components/ModalContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC3B,CAQA,CAAC"}

package/dist/editor/components/ModalContainer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const font_1 = require("../helpers/font");
+const z_index_1 = require("../state/z-index");
+const backgroundOverlay = {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backdropFilter: `blur(1px)`,
+    position: 'fixed',
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const panel = {
+    backgroundColor: colors_1.BACKGROUND,
+    boxShadow: '0 0 4px black',
+    color: 'white',
+    fontFamily: font_1.FONT_FAMILY,
+};
+const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: backgroundOverlay, role: "dialog", "aria-modal": "true" }, { children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, Object.assign({ onOutsideClick: onOutsideClick, onEscape: onEscape }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: panel }, { children: children }), void 0) }), void 0) }), void 0));
+};
+exports.ModalContainer = ModalContainer;
+//# sourceMappingURL=ModalContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContainer.js","sourceRoot":"","sources":["../../../src/editor/components/ModalContainer.tsx"],"names":[],"mappings":";;;;AACA,8CAA6C;AAC7C,0CAA4C;AAC5C,8CAA8C;AAE9C,MAAM,iBAAiB,GAAwB;IAC9C,eAAe,EAAE,0BAA0B;IAC3C,cAAc,EAAE,WAAW;IAC3B,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,KAAK,GAAwB;IAClC,eAAe,EAAE,mBAAU;IAC3B,SAAS,EAAE,eAAe;IAC1B,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,kBAAW;CACvB,CAAC;AAEK,MAAM,cAAc,GAGtB,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAC,EAAE,EAAE;IAC7C,OAAO,CACN,8CAAK,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,gBAAY,MAAM,gBAC7D,uBAAC,sBAAY,kBAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,gBAC/D,8CAAK,KAAK,EAAE,KAAK,gBAAG,QAAQ,YAAO,YACrB,YACV,CACN,CAAC;AACH,CAAC,CAAC;AAXW,QAAA,cAAc,kBAWzB"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const NewCompHeader: React.FC<{
+    title: string;
+}>;
+//# sourceMappingURL=ModalHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/editor/components/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAmBrD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACd,CAYA,CAAC"}

package/dist/editor/components/ModalHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const layout_1 = require("./layout");
+const CancelButton_1 = require("./NewComposition/CancelButton");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const icon = {
+    height: 20,
+    width: 20,
+};
+const NewCompHeader = ({ title }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onPress = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: container }, { children: [(0, jsx_runtime_1.jsx)("div", { children: title }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }), void 0));
+};
+exports.NewCompHeader = NewCompHeader;
+//# sourceMappingURL=ModalHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../src/editor/components/ModalHeader.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqD;AACrD,4CAA8C;AAC9C,qCAA8B;AAC9B,gEAA2D;AAE3D,MAAM,SAAS,GAAwB;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,iBAAiB;CAC/B,CAAC;AAEF,MAAM,IAAI,GAAwB;IACjC,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACT,CAAC;AAEK,MAAM,aAAa,GAErB,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IAChB,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,kBAAU,EAAC,sBAAa,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAChC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvB,OAAO,CACN,+CAAK,KAAK,EAAE,SAAS,iBACpB,0CAAM,KAAK,WAAO,EAClB,uBAAC,aAAI,aAAG,EACR,uBAAC,2BAAY,IAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,WAAI,aAC1C,CACN,CAAC;AACH,CAAC,CAAC;AAdW,QAAA,aAAa,iBAcxB"}

package/dist/editor/components/NewComposition/CancelButton.d.ts

@@ -0,0 +1,5 @@
+import React, { SVGProps } from 'react';
+export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
+    onPress: () => void;
+}>;
+//# sourceMappingURL=CancelButton.d.ts.map

package/dist/editor/components/NewComposition/CancelButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelButton.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CancelButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAWtC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAClC,QAAQ,CAAC,aAAa,CAAC,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAaD,CAAC"}

package/dist/editor/components/NewComposition/CancelButton.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const z_index_1 = require("../../state/z-index");
+const style = {
+    appearance: 'none',
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: 'white',
+    cursor: 'pointer',
+};
+const CancelButton = ({ onPress, ...props }) => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ tabIndex: tabIndex, style: style, type: "button", onClick: onPress }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "0 0 320 512" }, props, { children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }, void 0) }), void 0) }), void 0));
+};
+exports.CancelButton = CancelButton;
+//# sourceMappingURL=CancelButton.js.map

package/dist/editor/components/NewComposition/CancelButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelButton.js","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/CancelButton.tsx"],"names":[],"mappings":";;;;AACA,iDAA8C;AAE9C,MAAM,KAAK,GAAwB;IAClC,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,MAAM;IACd,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;CACjB,CAAC;AAEK,MAAM,YAAY,GAIrB,CAAC,EAAC,OAAO,EAAE,GAAG,KAAK,EAAC,EAAE,EAAE;IAC3B,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAA,mBAAS,GAAE,CAAC;IAC/B,OAAO,CACN,iDAAQ,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,gBACvE,8CAAK,OAAO,EAAC,aAAa,IAAK,KAAK,cACnC,iCACC,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,sYAAsY,WACvY,YACG,YACE,CACT,CAAC;AACH,CAAC,CAAC;AAhBW,QAAA,YAAY,gBAgBvB"}

package/dist/editor/components/NewComposition/ComboBox.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+declare type DividerItem = {
+    type: 'divider';
+    id: string;
+};
+export declare type SubMenu = {
+    preselectIndex: number | false;
+    leaveLeftSpace: boolean;
+    items: ComboboxValue[];
+};
+declare type SelectionItem = {
+    type: 'item';
+    id: string;
+    label: React.ReactNode;
+    value: string | number;
+    onClick: (id: string) => void;
+    keyHint: string | null;
+    leftItem: React.ReactNode;
+    subMenu: SubMenu | null;
+};
+export declare type ComboboxValue = DividerItem | SelectionItem;
+export declare const Combobox: React.FC<{
+    values: ComboboxValue[];
+    selectedId: string | number;
+    style?: React.CSSProperties;
+}>;
+export {};
+//# sourceMappingURL=ComboBox.d.ts.map

package/dist/editor/components/NewComposition/ComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/editor/components/NewComposition/ComboBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAyB/E,aAAK,WAAW,GAAG;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,oBAAY,OAAO,GAAG;IACrB,cAAc,EAAE,MAAM,GAAG,KAAK,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,aAAa,EAAE,CAAC;CACvB,CAAC;AAEF,aAAK,aAAa,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,oBAAY,aAAa,GAAG,WAAW,GAAG,aAAa,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAiGA,CAAC"}

package/dist/editor/components/NewComposition/ComboBox.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_element_size_1 = require("@remotion/player/src/utils/use-element-size");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../../helpers/colors");
+const noop_1 = require("../../helpers/noop");
+const caret_1 = require("../../icons/caret");
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
+const portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const MenuContent_1 = require("./MenuContent");
+const container = {
+    padding: '8px 10px',
+    display: 'inline-block',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    fontSize: 14,
+    borderWidth: 1,
+    borderStyle: 'solid',
+};
+const Combobox = ({ values, selectedId, style: customStyle }) => {
+    const [hovered, setIsHovered] = (0, react_1.useState)(false);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = (0, use_element_size_1.useElementSize)(ref, {
+        triggerOnWindowResize: true,
+    });
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onClick = (e) => {
+            e.stopPropagation();
+            return setOpened((o) => !o);
+        };
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('click', onClick);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('click', onClick);
+        };
+    }, []);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        return {
+            ...styles_1.menuContainer,
+            left: size.left,
+            top: size.top + size.height,
+        };
+    }, [opened, size]);
+    const selected = values.find((v) => v.id === selectedId);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
+            userSelect: 'none',
+            color: 'white',
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderColor: opened
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+        };
+    }, [customStyle, hovered, opened]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, tabIndex: tabIndex, type: "button", style: style }, { children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}, void 0)] }), void 0), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", Object.assign({ style: styles_1.outerPortal }, { children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, Object.assign({ onOutsideClick: onHide, onEscape: onHide }, { 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: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }, void 0) }), void 0) }), void 0) }), void 0), (0, portals_1.getPortal)(currentZIndex))
+                : null] }, void 0));
+};
+exports.Combobox = Combobox;
+//# sourceMappingURL=ComboBox.js.map

package/dist/editor/components/NewComposition/ComboBox.js.map

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