@remotion/cli 4.0.0-2x.1 → 4.0.0-alpha.111

package/dist/editor/components/MenuToolbar.js

@@ -3,18 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-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 sidebar_1 = require("../state/sidebar");
-const timeline_ref_1 = require("../state/timeline-ref");
+const colors_1 = require("../helpers/colors");
+const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
-const SizeSelector_1 = require("./SizeSelector");
-const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const UpdateCheck_1 = require("./UpdateCheck");
 const row = {
     alignItems: 'center',
@@ -25,24 +18,13 @@ const row = {
     fontSize: 13,
     paddingLeft: 6,
     paddingRight: 10,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const flex = {
     flex: 1,
 };
-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 { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const itemClicked = (0, react_1.useCallback)((itemId) => {
         setSelected(itemId);
     }, [setSelected]);
@@ -51,409 +33,10 @@ const MenuToolbar = () => {
             setSelected(itemId);
         }
     }, [selected, setSelected]);
-    const close = (0, react_1.useCallback)(() => {
+    const closeMenu = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, []);
-    const structure = (0, react_1.useMemo)(() => {
-        return [
-            {
-                id: 'remotion',
-                label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { 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" }) }) })),
-                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, {}) : null,
-                                onClick: () => {
-                                    close();
-                                    setSize(() => newSize);
-                                },
-                                subMenu: null,
-                                type: 'item',
-                                value: newSize,
-                            })),
-                        },
-                    },
-                    {
-                        id: 'timeline-divider',
-                        type: 'divider',
-                    },
-                    {
-                        id: 'left-sidebar',
-                        label: 'Sidebar',
-                        keyHint: null,
-                        type: 'item',
-                        value: 'preview-size',
-                        leftItem: null,
-                        subMenu: {
-                            leaveLeftSpace: true,
-                            preselectIndex: 0,
-                            items: [
-                                {
-                                    id: 'sidebar-responsive',
-                                    keyHint: null,
-                                    label: 'Responsive',
-                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
-                                    onClick: () => {
-                                        setSidebarCollapsedState('responsive');
-                                    },
-                                    subMenu: null,
-                                    type: 'item',
-                                    value: 'responsive',
-                                },
-                                {
-                                    id: 'sidebar-expanded',
-                                    keyHint: null,
-                                    label: 'Expanded',
-                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                                    onClick: () => {
-                                        setSidebarCollapsedState('expanded');
-                                    },
-                                    subMenu: null,
-                                    type: 'item',
-                                    value: 'expanded',
-                                },
-                                {
-                                    id: 'sidebar-collapsed',
-                                    keyHint: null,
-                                    label: 'Collapsed',
-                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
-                                    onClick: () => {
-                                        setSidebarCollapsedState('collapsed');
-                                    },
-                                    subMenu: null,
-                                    type: 'item',
-                                    value: 'collapsed',
-                                },
-                            ],
-                        },
-                        onClick: () => undefined,
-                    },
-                    {
-                        id: 'timeline-divider',
-                        type: 'divider',
-                    },
-                    {
-                        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, {}) : 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, {}) : 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: 'in-out-divider',
-                        type: 'divider',
-                    },
-                    {
-                        id: 'in-mark',
-                        keyHint: 'I',
-                        label: 'In Mark',
-                        leftItem: null,
-                        onClick: () => {
-                            var _a;
-                            close();
-                            (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.inMarkClick();
-                        },
-                        subMenu: null,
-                        type: 'item',
-                        value: 'in-mark',
-                    },
-                    {
-                        id: 'out-mark',
-                        keyHint: 'O',
-                        label: 'Out Mark',
-                        leftItem: null,
-                        onClick: () => {
-                            var _a;
-                            close();
-                            (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.outMarkClick();
-                        },
-                        subMenu: null,
-                        type: 'item',
-                        value: 'out-mark',
-                    },
-                    {
-                        id: 'x-mark',
-                        keyHint: 'X',
-                        label: 'Clear In/Out Marks',
-                        leftItem: null,
-                        onClick: () => {
-                            var _a;
-                            close();
-                            (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.clearMarks();
-                        },
-                        subMenu: null,
-                        type: 'item',
-                        value: 'clear-marks',
-                    },
-                ],
-            },
-            {
-                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/remotion_dev');
-                        },
-                        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,
-        setSidebarCollapsedState,
-        setSize,
-        sidebarCollapsedState,
-        size,
-    ]);
+    const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
     const menus = (0, react_1.useMemo)(() => {
         return structure.map((s) => s.id);
     }, [structure]);

package/dist/editor/components/ModalHeader.js

@@ -10,10 +10,14 @@ const container = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 12,
+    padding: '12px 16px',
     width: '100%',
     borderBottom: '1px solid black',
 };
+const titleStyle = {
+    fontSize: 14,
+    color: 'white',
+};
 const icon = {
     height: 20,
     width: 20,
@@ -23,6 +27,6 @@ const NewCompHeader = ({ title }) => {
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
 };
 exports.NewCompHeader = NewCompHeader;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Modals: React.FC;

package/dist/editor/components/Modals.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modals = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const modals_1 = require("../state/modals");
+const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
+const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
+const RenderModal_1 = require("./RenderModal/RenderModal");
+const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
+const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const Modals = () => {
+    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors })), modalContextType &&
+                canRender &&
+                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
+};
+exports.Modals = Modals;

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

@@ -9,6 +9,9 @@ const style = {
     backgroundColor: 'transparent',
     color: 'white',
     cursor: 'pointer',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();

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

@@ -8,7 +8,7 @@ export declare type SubMenu = {
     leaveLeftSpace: boolean;
     items: ComboboxValue[];
 };
-declare type SelectionItem = {
+export declare type SelectionItem = {
     type: 'item';
     id: string;
     label: React.ReactNode;
@@ -17,6 +17,7 @@ declare type SelectionItem = {
     keyHint: string | null;
     leftItem: React.ReactNode;
     subMenu: SubMenu | null;
+    quickSwitcherLabel: string | null;
 };
 export declare type ComboboxValue = DividerItem | SelectionItem;
 export declare const Combobox: React.FC<{

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

@@ -13,6 +13,7 @@ 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 is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
 const styles_1 = require("../Menu/styles");
 const MenuContent_1 = require("./MenuContent");
@@ -33,6 +34,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
     const onHide = (0, react_1.useCallback)(() => {
         setOpened(false);
     }, []);
@@ -43,27 +45,70 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
+        const onPointerDown = () => {
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setOpened(false);
+                        }
+                    }, {
+                        once: true,
+                    });
+                }
+                return !o;
+            });
+        };
         const onClick = (e) => {
             e.stopPropagation();
-            return setOpened((o) => !o);
+            const isKeyboardInitiated = e.detail === 0;
+            if (!isKeyboardInitiated) {
+                return;
+            }
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setOpened(false);
+                        }
+                    }, {
+                        once: true,
+                    });
+                }
+                return !o;
+            });
         };
         current.addEventListener('mouseenter', onMouseEnter);
         current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('pointerdown', onPointerDown);
         current.addEventListener('click', onClick);
         return () => {
             current.removeEventListener('mouseenter', onMouseEnter);
             current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('pointerdown', onPointerDown);
             current.removeEventListener('click', onClick);
         };
-    }, []);
+    }, [refresh]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;
         }
+        const spaceToBottom = size.windowSize.height - (size.top + size.height);
+        const spaceToTop = size.top;
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
         return {
-            ...styles_1.menuContainer,
+            ...(layout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
             left: size.left,
-            top: size.top + size.height,
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);
@@ -83,7 +128,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : 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", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected === null || selected === void 0 ? void 0 : selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
                 ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { 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 }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };