@interopio/groups-ui-react 2.4.0 → 2.5.0

package/dist/cjs/types/api.d.ts

@@ -6,6 +6,16 @@ export interface ChannelProps {
     selectedChannel: string;
     showSelector: (bounds: Bounds) => void;
     selectedChannelColor: string;
+    channelsMode: "single" | "multi";
+    selectedChannels: {
+        name: string;
+        color: string;
+    }[];
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface FrameWindowOverlayProps {
     frameId: string;

package/dist/cjs/types/defaultComponents.d.ts

@@ -54,16 +54,66 @@ export interface BaseChannelSelectorProps {
     contentClass: string;
     selectedChannel: string;
     selectedChannelColor: string;
+    direction: string;
+    channelLabel: string;
+}
+export interface BaseMultiChannelSelectorProps {
+    showSelector: (bounds: Bounds) => void;
+    outsideClass: string;
+    contentClass: string;
+    selectedChannels: {
+        name: string;
+        color: string;
+    }[];
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface FlatChannelSelectorProps {
     showSelector: (bounds: Bounds) => void;
     selectedChannel: string;
     selectedChannelColor: string;
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
+}
+export interface FlatMultiChannelSelectorProps {
+    showSelector: (bounds: Bounds) => void;
+    selectedChannels: {
+        name: string;
+        color: string;
+    }[];
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface TabChannelSelectorProps {
     showSelector: (bounds: Bounds) => void;
     selectedChannel: string;
     selectedChannelColor: string;
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
+}
+export interface TabMultiChannelSelectorProps {
+    showSelector: (bounds: Bounds) => void;
+    selectedChannels: {
+        name: string;
+        color: string;
+    }[];
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface FlatCaptionEditorProps {
     frameId: string;

package/dist/cjs/types/internal.d.ts

@@ -102,6 +102,16 @@ export interface CreateFrameCaptionBarRequestOptions extends CreateButtonsOption
         show: boolean;
         text?: string;
     };
+    channelsMode: "single" | "multi";
+    selectedChannels: {
+        name: string;
+        color: string;
+    }[];
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface CreateTabRequestOptions extends CreateElementRequestOptions {
     caption: string;
@@ -115,6 +125,16 @@ export interface CreateTabRequestOptions extends CreateElementRequestOptions {
         show: boolean;
         text?: string;
     };
+    channelsMode: "single" | "multi";
+    selectedChannels: {
+        name: string;
+        color: string;
+    }[];
+    channelRestrictions: {
+        read: boolean;
+        write: boolean;
+    };
+    channelLabel: string;
 }
 export interface UpdateStandardButtonRequestOptions extends CreateElementRequestOptions {
     buttonId: StandardButtons;
@@ -177,6 +197,8 @@ export interface CreateButtonsOptions extends CreateFrameElementRequestOptions {
         visible: boolean;
     };
     customButtons: UpdateCustomButtonOptions[];
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
 }
 export interface RemoveRequestOptions {
     targetId: string;

package/dist/defaultComponents/BaseButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BaseButtonProps } from "../types/internal";
+declare const BaseButton: React.FC<BaseButtonProps>;
+export default BaseButton;

package/dist/defaultComponents/CloseButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CloseButtonProps } from "../types/internal";
+declare const CloseButton: React.FC<CloseButtonProps>;
+export default CloseButton;

package/dist/defaultComponents/ExtractButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MinimizeButtonProps } from "../types/internal";
+declare const ExtractButton: React.FC<MinimizeButtonProps>;
+export default ExtractButton;

package/dist/defaultComponents/MaximizeButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MaximizeButtonProps } from "../types/internal";
+declare const MaximizeButton: React.FC<MaximizeButtonProps>;
+export default MaximizeButton;

package/dist/defaultComponents/MinimizeButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MinimizeButtonProps } from "../types/internal";
+declare const MinimizeButton: React.FC<MinimizeButtonProps>;
+export default MinimizeButton;

package/dist/defaultComponents/RestoreButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RestoreButtonProps } from "../types/internal";
+declare const RestoreButton: React.FC<RestoreButtonProps>;
+export default RestoreButton;

package/dist/defaultComponents/Tab.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabElementProps } from "../types/internal";
+declare const Tab: React.FC<TabElementProps>;
+export default Tab;

package/dist/defaultComponents/TabCaption.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabCaptionProps } from "../types/internal";
+declare const TabCaption: React.FC<TabCaptionProps>;
+export default TabCaption;

package/dist/defaultComponents/TabCloseButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabCloseButtonProps } from "../types/internal";
+declare const TabCloseButton: React.FC<TabCloseButtonProps>;
+export default TabCloseButton;

package/dist/defaultComponents/TabHeaderButtons.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabHeaderButtonsProps } from "../types/internal";
+declare const TabHeaderButtons: React.FC<TabHeaderButtonsProps>;
+export default TabHeaderButtons;

package/dist/defaultComponents/channelSelector/BaseChannelSelector.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BaseChannelSelectorProps } from "../../types/internal";
+declare const BaseChannelSelector: React.FC<BaseChannelSelectorProps>;
+export default BaseChannelSelector;

package/dist/defaultComponents/channelSelector/FrameChannelSelector.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FrameChannelSelectorProps } from "../../types/internal";
+declare const FrameChannelSelector: React.FC<FrameChannelSelectorProps>;
+export default FrameChannelSelector;

package/dist/defaultComponents/channelSelector/TabChannelSelector.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabChannelSelectorProps } from "../../types/internal";
+declare const TabChannelSelector: React.FC<TabChannelSelectorProps>;
+export default TabChannelSelector;

package/dist/defaultComponents/channelSelector/utils.d.ts

@@ -0,0 +1 @@
+export declare function IsBlackReadable(color: string): boolean;

package/dist/defaultComponents/frameCaptionBar/FrameButtons.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FrameButtonsProps } from "../../types/internal";
+declare const FrameButtons: React.FC<FrameButtonsProps>;
+export default FrameButtons;

package/dist/defaultComponents/frameCaptionBar/FrameCaption.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FrameCaptionProps } from "../../types/internal";
+declare const FrameCaption: React.FC<FrameCaptionProps>;
+export default FrameCaption;

package/dist/defaultComponents/frameCaptionBar/FrameCaptionBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FrameCaptionBarProps } from "../../types/internal";
+declare const FrameCaptionBar: React.FC<FrameCaptionBarProps>;
+export default FrameCaptionBar;

package/dist/defaultComponents/frameCaptionBar/FrameMoveArea.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FrameMoveAreaProps } from "../../types/internal";
+declare const FrameMoveArea: React.FC<FrameMoveAreaProps>;
+export default FrameMoveArea;

package/dist/defaultComponents/groupCaptionBar/GroupButtons.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GroupButtonsProps } from "../../types/internal";
+declare const GroupButtons: React.FC<GroupButtonsProps>;
+export default GroupButtons;

package/dist/defaultComponents/groupCaptionBar/GroupCaption.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GroupCaptionProps } from "../../types/internal";
+declare const GroupCaption: React.FC<GroupCaptionProps>;
+export default GroupCaption;

package/dist/defaultComponents/groupCaptionBar/GroupCaptionBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GroupCaptionBarProps } from "../../types/internal";
+declare const GroupCaptionBar: React.FC<GroupCaptionBarProps>;
+export default GroupCaptionBar;

package/dist/defaultComponents/groupCaptionBar/GroupMoveArea.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GroupMoveAreaProps } from "../../types/internal";
+declare const GroupMoveArea: React.FC<GroupMoveAreaProps>;
+export default GroupMoveArea;

package/dist/esm/defaultComponents/channelSelector/multi/BaseMultiChannelSelector.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BaseMultiChannelSelectorProps } from "../../../types/defaultComponents";
+declare const BaseMultiChannelSelector: React.FC<BaseMultiChannelSelectorProps>;
+export default BaseMultiChannelSelector;

package/dist/esm/defaultComponents/channelSelector/multi/ColorRectangle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ColorRectangleProps {
+    colors: string[];
+    onClick: () => void;
+}
+declare const ColorRectangle: React.FC<ColorRectangleProps>;
+export default ColorRectangle;

package/dist/esm/defaultComponents/channelSelector/multi/FlatMultiChannelSelector.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FlatMultiChannelSelectorProps } from "../../../types/defaultComponents";
+declare const FlatMultiChannelSelector: React.FC<FlatMultiChannelSelectorProps>;
+export default FlatMultiChannelSelector;

package/dist/esm/defaultComponents/channelSelector/multi/TabMultiChannelSelector.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TabMultiChannelSelectorProps } from "../../../types/defaultComponents";
+declare const TabMultiChannelSelector: React.FC<TabMultiChannelSelectorProps>;
+export default TabMultiChannelSelector;

package/dist/esm/defaultComponents/channelSelector/utils.d.ts

@@ -1 +1,5 @@
 export declare function IsBlackReadable(color: string): boolean;
+export declare function getChannelDirection(channelRestrictions: {
+    read: boolean;
+    write: boolean;
+}): string;

package/dist/esm/index.d.ts

@@ -41,7 +41,9 @@ import useCaptionEditor from "./defaultComponents/captionEditor/useCaptionEditor
 import FrameLoadingAnimation from "./defaultComponents/loadingAnimation/FrameLoadingAnimation";
 import HtmlButtons from "./defaultComponents/htmlButtonsBar/buttons";
 import TabOverflowPopup from "./defaultComponents/popups/TabOverflowPopup";
-export { GroupCaptionBar, GroupMoveArea, GroupButtons, GroupCaptionEditor, Tab, TabChannelSelector, TabCaption, TabCloseButton, TabCaptionEditor, FeedbackButton, CloneButton, StickyButton, ExtractButton, LockButton, UnlockButton, MinimizeButton, RestoreButton, MaximizeButton, CustomButton, CloseButton, FlatCaptionBar, FlatChannelSelector, FlatCaption, FlatMoveArea, FlatButtons, FlatCaptionEditor, TabHeaderButtons, FrameLoadingAnimation, HtmlButtons, TabOverflowPopup, OverflowButton, GroupComponentVisibilityState, useIOConnectWindow, useGroupComponentVisibility, waitForWindow, useEditableCaption, useCaptionEditor, useCommitGroupCaptionEditingRequested, useCommitFlatCaptionEditingRequested, useCommitTabCaptionEditingRequested, };
+import TabMultiChannelSelector from "./defaultComponents/channelSelector/multi/TabMultiChannelSelector";
+import FlatMultiChannelSelector from "./defaultComponents/channelSelector/multi/FlatMultiChannelSelector";
+export { GroupCaptionBar, GroupMoveArea, GroupButtons, GroupCaptionEditor, Tab, TabChannelSelector, TabCaption, TabCloseButton, TabCaptionEditor, FeedbackButton, CloneButton, StickyButton, ExtractButton, LockButton, UnlockButton, MinimizeButton, RestoreButton, MaximizeButton, CustomButton, CloseButton, FlatCaptionBar, FlatChannelSelector, FlatCaption, FlatMoveArea, FlatButtons, FlatCaptionEditor, TabHeaderButtons, FrameLoadingAnimation, HtmlButtons, TabOverflowPopup, OverflowButton, GroupComponentVisibilityState, TabMultiChannelSelector, FlatMultiChannelSelector, useIOConnectWindow, useGroupComponentVisibility, waitForWindow, useEditableCaption, useCaptionEditor, useCommitGroupCaptionEditingRequested, useCommitFlatCaptionEditingRequested, useCommitTabCaptionEditingRequested, };
 export declare const getGroupId: () => string;
 export declare const requestPageFocus: () => void;
 export declare const requestFrameFocus: (frameId: string) => void;

package/dist/esm/index.js

@@ -570,10 +570,30 @@ function IsBlackReadable(color) {
         console.error("Error while checking readable color for '" + color + "'", error);
     }
     return false;
+}
+function getChannelDirection(channelRestrictions) {
+    if (!channelRestrictions) {
+        return "";
+    }
+    if (typeof channelRestrictions.read === "boolean" && typeof channelRestrictions.write === "boolean") {
+        if (channelRestrictions.read && channelRestrictions.write) {
+            return "";
+        }
+        if (channelRestrictions.read) {
+            return "subscribe";
+        }
+        if (channelRestrictions.write) {
+            return "publish";
+        }
+        return "";
+    }
+    else {
+        return "";
+    }
 }
 
 var BaseChannelSelector = function (_a) {
-    var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
+    var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, direction = _a.direction, channelLabel = _a.channelLabel;
     var ref = useRef(null);
     var wrappedOnClick = function () {
         if (!ref.current) {
@@ -588,10 +608,14 @@ var BaseChannelSelector = function (_a) {
         });
     };
     useEffect(function () {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", function (e) {
+        var handler = function (e) {
             e.stopPropagation();
-        });
+        };
+        var current = ref.current;
+        current === null || current === void 0 ? void 0 : current.addEventListener("mousedown", handler);
+        return function () {
+            current === null || current === void 0 ? void 0 : current.removeEventListener("mousedown", handler);
+        };
     }, [ref]);
     var className = contentClass;
     if (selectedChannel && selectedChannelColor) {
@@ -600,13 +624,15 @@ var BaseChannelSelector = function (_a) {
     var style = {
         background: selectedChannelColor
     };
-    return React.createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass },
-        React.createElement("div", { className: className }));
+    return React.createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass }, channelLabel ?
+        React.createElement("div", { className: className + " " + (direction ? "icon" : "") },
+            channelLabel,
+            direction && React.createElement("i", { className: "icon-" + direction })) : React.createElement("div", { className: className }));
 };
 
 var FlatChannelSelector = function (_a) {
-    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
-    return React.createElement(BaseChannelSelector, { outsideClass: "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: "t42-frame-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+    return React.createElement(BaseChannelSelector, { outsideClass: channelLabel ? "t42-frame-caption-bar-element t42-frame-channel-selector t42-channel-selector-direction" : "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: !channelLabel ? "t42-frame-channel-selector-content" : "", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor, direction: getChannelDirection(channelRestrictions), channelLabel: channelLabel });
 };
 
 var ExtractButton = function (_a) {
@@ -1761,10 +1787,64 @@ var FlatMoveArea = function (_a) {
     return React.createElement("div", { id: moveAreaId, className: "t42-move-area t42-frame-caption-bar-element" }, children);
 };
 
+var BaseMultiChannelSelector = function (_a) {
+    var _b, _c, _d;
+    var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannels = _a.selectedChannels, channelLabel = _a.channelLabel, channelRestrictions = _a.channelRestrictions;
+    var ref = useRef(null);
+    var len = selectedChannels.length;
+    var showBaseChannelSelector = len < 2;
+    var wrappedOnClick = function () {
+        if (!ref.current) {
+            return;
+        }
+        var bounds = ref.current.getBoundingClientRect();
+        showSelector({
+            left: bounds.left,
+            top: bounds.top,
+            width: bounds.width,
+            height: bounds.height,
+        });
+    };
+    useEffect(function () {
+        var _a;
+        if (showBaseChannelSelector) {
+            return;
+        }
+        var handler = function (e) {
+            e.stopPropagation();
+        };
+        var current = ref.current;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", handler);
+        return function () {
+            current === null || current === void 0 ? void 0 : current.removeEventListener("mousedown", handler);
+        };
+    }, [ref, showBaseChannelSelector]);
+    if (showBaseChannelSelector) {
+        return React.createElement(BaseChannelSelector, { showSelector: showSelector, selectedChannel: (_b = selectedChannels[0]) === null || _b === void 0 ? void 0 : _b.name, selectedChannelColor: (_c = selectedChannels[0]) === null || _c === void 0 ? void 0 : _c.color, outsideClass: outsideClass, contentClass: contentClass, channelLabel: channelLabel, direction: getChannelDirection(channelRestrictions) });
+    }
+    var colors = (_d = selectedChannels.map(function (channel) { return channel.color; })) !== null && _d !== void 0 ? _d : [];
+    var title = colors.join(", ");
+    var lenMax4 = Math.min(len, 4);
+    var cssClass = "t42-multi-channel-selector-content t42-multi-channel-selector-" + lenMax4;
+    var style = {};
+    colors.forEach(function (color, index) {
+        var colorVarName = "--t42-multi-channel-selector-" + lenMax4 + "-color-" + (index + 1);
+        style[colorVarName] = color;
+    });
+    return (React.createElement("div", { id: "basem", title: title, ref: ref, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass },
+        React.createElement("div", { className: cssClass, style: style })));
+};
+
+var FlatMultiChannelSelector = function (_a) {
+    var showSelector = _a.showSelector, selectedChannels = _a.selectedChannels, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+    return React.createElement(BaseMultiChannelSelector, { outsideClass: channelLabel ? "t42-frame-caption-bar-element t42-frame-channel-selector t42-channel-selector-direction" : "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: !channelLabel ? "t42-frame-channel-selector-content" : "", showSelector: showSelector, selectedChannels: selectedChannels, channelRestrictions: channelRestrictions, channelLabel: channelLabel });
+};
+
 var FlatCaptionBar = function (_a) {
     var moveAreaId = _a.moveAreaId, caption = _a.caption, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "caption", "channels", "captionEditor", "notifyCaptionBoundsChanged"]);
     return (React.createElement("div", { className: "t42-react-caption-bar" },
-        (channels === null || channels === void 0 ? void 0 : channels.visible) && React.createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor }),
+        (channels === null || channels === void 0 ? void 0 : channels.visible) && channels.channelsMode !== "multi" && React.createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor, channelRestrictions: channels === null || channels === void 0 ? void 0 : channels.channelRestrictions, channelLabel: channels === null || channels === void 0 ? void 0 : channels.channelLabel }),
+        (channels === null || channels === void 0 ? void 0 : channels.visible) && channels.channelsMode === "multi" && React.createElement(FlatMultiChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannels: channels === null || channels === void 0 ? void 0 : channels.selectedChannels, channelRestrictions: channels === null || channels === void 0 ? void 0 : channels.channelRestrictions, channelLabel: channels === null || channels === void 0 ? void 0 : channels.channelLabel }),
         React.createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React.createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React.createElement(FlatCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
         React.createElement(FlatButtons, __assign({}, rest))));
 };
@@ -1805,8 +1885,13 @@ var GroupCaptionBar = function (_a) {
 };
 
 var TabChannelSelector = function (_a) {
-    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
-    return React.createElement(BaseChannelSelector, { outsideClass: "t42-tab-bar-element t42-tab-channel-selector", contentClass: "t42-tab-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+    var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+    return React.createElement(BaseChannelSelector, { outsideClass: channelLabel ? "t42-tab-bar-element t42-tab-channel-selector t42-channel-selector-direction" : "t42-tab-bar-element t42-tab-channel-selector", contentClass: !channelLabel ? "t42-tab-channel-selector-content" : "", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor, direction: getChannelDirection(channelRestrictions), channelLabel: channelLabel });
+};
+
+var TabMultiChannelSelector = function (_a) {
+    var showSelector = _a.showSelector, selectedChannels = _a.selectedChannels, channelRestrictions = _a.channelRestrictions, channelLabel = _a.channelLabel;
+    return React.createElement(BaseMultiChannelSelector, { outsideClass: channelLabel ? "t42-tab-bar-element t42-tab-channel-selector t42-channel-selector-direction" : "t42-tab-bar-element t42-tab-channel-selector", contentClass: !channelLabel ? "t42-tab-channel-selector-content" : "", showSelector: showSelector, selectedChannels: selectedChannels, channelRestrictions: channelRestrictions, channelLabel: channelLabel });
 };
 
 var TabCaption = function (_a) {
@@ -1844,7 +1929,8 @@ var TabCloseButton = function (_a) {
 var Tab = function (_a) {
     var caption = _a.caption, selected = _a.selected, close = _a.close, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, windowId = _a.windowId, pinned = _a.pinned;
     return React.createElement("div", { className: "t42-react-tab" },
-        channels.visible && React.createElement(TabChannelSelector, __assign({}, channels)),
+        channels.visible && channels.channelsMode !== "multi" && React.createElement(TabChannelSelector, __assign({}, channels)),
+        channels.visible && channels.channelsMode === "multi" && React.createElement(TabMultiChannelSelector, __assign({}, channels)),
         captionEditor.show ?
             React.createElement(TabCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, selected: selected, windowId: windowId })) :
             React.createElement(TabCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption, selected: selected }),
@@ -2961,6 +3047,7 @@ var GroupElementCreationWrapper = function (_a) {
         var _a;
         var FrameCaptionBarCustomElement = (_a = components === null || components === void 0 ? void 0 : components.flat) === null || _a === void 0 ? void 0 : _a.CaptionBar;
         return Object.values(state.frameCaptionBars).map(function (fcb) {
+            var _a;
             if (!FrameCaptionBarCustomElement || !fcb.parentElement) {
                 return;
             }
@@ -3016,7 +3103,11 @@ var GroupElementCreationWrapper = function (_a) {
                 showSelector: showSelector,
                 visible: options.channelSelectorVisible,
                 selectedChannel: options.selectedChannel,
-                selectedChannelColor: options.selectedChannelColor
+                selectedChannelColor: options.selectedChannelColor,
+                channelRestrictions: options.channelRestrictions,
+                channelLabel: options.channelLabel,
+                channelsMode: (_a = options.channelsMode) !== null && _a !== void 0 ? _a : "single",
+                selectedChannels: options.selectedChannels
             };
             var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
                     webGroupsManager.commitCaptionEditing(TargetType.Frame, options.targetId, text);
@@ -3119,7 +3210,7 @@ var GroupElementCreationWrapper = function (_a) {
         var _a;
         var TabCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.Element;
         return Object.values(state.tabElements).map(function (te) {
-            var _a;
+            var _a, _b;
             if (!TabCustomElement || !te.parentElement) {
                 return;
             }
@@ -3134,7 +3225,11 @@ var GroupElementCreationWrapper = function (_a) {
                 showSelector: showSelector,
                 visible: options.channelSelectorVisible,
                 selectedChannel: options.selectedChannel,
-                selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel // TODO remove the null check when the variable has been added
+                selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel,
+                channelRestrictions: options.channelRestrictions,
+                channelLabel: options.channelLabel,
+                channelsMode: (_b = options.channelsMode) !== null && _b !== void 0 ? _b : "single",
+                selectedChannels: options.selectedChannels
             };
             var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
                     webGroupsManager.commitCaptionEditing(TargetType.Tab, options.targetId, text);
@@ -3431,5 +3526,5 @@ var onCommitGroupCaptionEditingRequested = function (targetId, cb) { return webG
 var onCommitFlatCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Frame, targetId, cb); };
 var onCommitTabCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Tab, targetId, cb); };
 
-export { CloneButton, CloseButton, CustomButton, ExtractButton, FeedbackButton, FlatButtons, FlatCaption, FlatCaptionBar, FlatCaptionEditor, FlatChannelSelector, FlatMoveArea, FrameLoadingAnimation, GroupButtons, GroupCaption, GroupCaptionBar, GroupCaptionEditor, GroupMoveArea, HtmlButtons, LockButton, MaximizeButton, MinimizeButton, OverflowButton, RestoreButton, StickyButton, Tab, TabCaption, TabCaptionEditor, TabChannelSelector, TabCloseButton, TabHeaderButtons, TabOverflowPopup, UnlockButton, GroupElementCreationWrapper as default, getGroupId, onCommitFlatCaptionEditingRequested, onCommitGroupCaptionEditingRequested, onCommitTabCaptionEditingRequested, openTabOverflowPopup, requestFrameFocus, requestGroupFocus, requestPageFocus, useCaptionEditor, useCommitFlatCaptionEditingRequested, useCommitGroupCaptionEditingRequested, useCommitTabCaptionEditingRequested, useEditableCaption, useGroupComponentVisibility, useIOConnectWindow, waitForWindow };
+export { CloneButton, CloseButton, CustomButton, ExtractButton, FeedbackButton, FlatButtons, FlatCaption, FlatCaptionBar, FlatCaptionEditor, FlatChannelSelector, FlatMoveArea, FlatMultiChannelSelector, FrameLoadingAnimation, GroupButtons, GroupCaption, GroupCaptionBar, GroupCaptionEditor, GroupMoveArea, HtmlButtons, LockButton, MaximizeButton, MinimizeButton, OverflowButton, RestoreButton, StickyButton, Tab, TabCaption, TabCaptionEditor, TabChannelSelector, TabCloseButton, TabHeaderButtons, TabMultiChannelSelector, TabOverflowPopup, UnlockButton, GroupElementCreationWrapper as default, getGroupId, onCommitFlatCaptionEditingRequested, onCommitGroupCaptionEditingRequested, onCommitTabCaptionEditingRequested, openTabOverflowPopup, requestFrameFocus, requestGroupFocus, requestPageFocus, useCaptionEditor, useCommitFlatCaptionEditingRequested, useCommitGroupCaptionEditingRequested, useCommitTabCaptionEditingRequested, useEditableCaption, useGroupComponentVisibility, useIOConnectWindow, waitForWindow };
 //# sourceMappingURL=index.js.map