@interopio/groups-ui-react 2.4.1 → 2.6.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/index.js

@@ -615,10 +615,14 @@
             });
         };
         React.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) {
@@ -628,7 +632,7 @@
             background: selectedChannelColor
         };
         return React__default["default"].createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass }, channelLabel ?
-            React__default["default"].createElement("div", { className: className + " icon" },
+            React__default["default"].createElement("div", { className: className + " " + (direction ? "icon" : "") },
                 channelLabel,
                 direction && React__default["default"].createElement("i", { className: "icon-" + direction })) : React__default["default"].createElement("div", { className: className }));
     };
@@ -1790,10 +1794,64 @@
         return React__default["default"].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 = React.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,
+            });
+        };
+        React.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__default["default"].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__default["default"].createElement("div", { id: "basem", title: title, ref: ref, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass },
+            React__default["default"].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__default["default"].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__default["default"].createElement("div", { className: "t42-react-caption-bar" },
-            (channels === null || channels === void 0 ? void 0 : channels.visible) && React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React__default["default"].createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React__default["default"].createElement(FlatCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
             React__default["default"].createElement(FlatButtons, __assign({}, rest))));
     };
@@ -1838,6 +1896,11 @@
         return React__default["default"].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__default["default"].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) {
         var caption = _a.caption, selected = _a.selected, notifyBoundsChanged = _a.notifyBoundsChanged;
         var normalClassName = "t42-caption t42-tab-caption";
@@ -1873,7 +1936,8 @@
     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__default["default"].createElement("div", { className: "t42-react-tab" },
-            channels.visible && React__default["default"].createElement(TabChannelSelector, __assign({}, channels)),
+            channels.visible && channels.channelsMode !== "multi" && React__default["default"].createElement(TabChannelSelector, __assign({}, channels)),
+            channels.visible && channels.channelsMode === "multi" && React__default["default"].createElement(TabMultiChannelSelector, __assign({}, channels)),
             captionEditor.show ?
                 React__default["default"].createElement(TabCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, selected: selected, windowId: windowId })) :
                 React__default["default"].createElement(TabCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption, selected: selected }),
@@ -2990,6 +3054,7 @@
             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;
                 }
@@ -3047,7 +3112,9 @@
                     selectedChannel: options.selectedChannel,
                     selectedChannelColor: options.selectedChannelColor,
                     channelRestrictions: options.channelRestrictions,
-                    channelLabel: options.channelLabel
+                    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);
@@ -3150,7 +3217,7 @@
             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;
                 }
@@ -3167,7 +3234,9 @@
                     selectedChannel: options.selectedChannel,
                     selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel,
                     channelRestrictions: options.channelRestrictions,
-                    channelLabel: options.channelLabel
+                    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);
@@ -3475,6 +3544,7 @@
     exports.FlatCaptionEditor = FlatCaptionEditor;
     exports.FlatChannelSelector = FlatChannelSelector;
     exports.FlatMoveArea = FlatMoveArea;
+    exports.FlatMultiChannelSelector = FlatMultiChannelSelector;
     exports.FrameLoadingAnimation = FrameLoadingAnimation;
     exports.GroupButtons = GroupButtons;
     exports.GroupCaption = GroupCaption;
@@ -3494,6 +3564,7 @@
     exports.TabChannelSelector = TabChannelSelector;
     exports.TabCloseButton = TabCloseButton;
     exports.TabHeaderButtons = TabHeaderButtons;
+    exports.TabMultiChannelSelector = TabMultiChannelSelector;
     exports.TabOverflowPopup = TabOverflowPopup;
     exports.UnlockButton = UnlockButton;
     exports["default"] = GroupElementCreationWrapper;