@interopio/groups-ui-react 2.2.3 → 2.2.5

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Bounds, ButtonProps, OverflowedTabInfo, ToggleButtonProps } from "./internal";
+import { Bounds, ButtonProps, Location, OverflowedTabInfo, ToggleButtonProps } from "./internal";
 import { CustomButtonProps } from "./defaultComponents";
 export interface ChannelProps {
     visible: boolean;
@@ -100,12 +100,16 @@ export interface TabElementProps {
     channels: ChannelProps;
     notifyCaptionBoundsChanged: (bounds: Bounds) => void;
     captionEditor: CaptionEditorProps;
+    addContainerClass: (className: string) => void;
+    removeContainerClass: (className: string) => void;
 }
 export interface AfterTabsProps {
     frameId: string;
     selectedWindow: string;
+    hiddenTabsToTheLeft?: OverflowedTabInfo[];
+    hiddenTabsToTheRight?: OverflowedTabInfo[];
 }
-export interface TabHeaderButtonsProps {
+interface FrameButtonsProps {
     overflow?: ButtonProps;
     feedback?: ButtonProps;
     clone?: ButtonProps;
@@ -121,7 +125,11 @@ export interface TabHeaderButtonsProps {
     frameId: string;
     selectedWindow: string;
 }
-export interface HtmlButtonsProps extends TabHeaderButtonsProps {
+export interface TabHeaderButtonsProps extends FrameButtonsProps {
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
+}
+export interface HtmlButtonsProps extends FrameButtonsProps {
 }
 export interface GroupProps {
     components?: {
@@ -159,3 +167,8 @@ export interface MoveAreaProps {
 export interface GroupComponentVisibilityState {
     groupCaptionBarVisible?: boolean;
 }
+export interface OpenTabOverflowPopupOptions {
+    frameId: string;
+    location: Location;
+}
+export {};

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

@@ -202,7 +202,10 @@ export interface CreateTabOverflowPopupRequestOptions extends CreateElementReque
 export interface CreateFrameLoadingAnimationRequestOptions extends CreateFrameElementRequestOptions {
     show: boolean;
 }
-export declare type UpdateFrameRequestOptions = CreateFrameElementRequestOptions;
+export interface UpdateFrameRequestOptions extends CreateFrameElementRequestOptions {
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
+}
 export declare enum TargetType {
     Group = "group",
     Frame = "frame",
@@ -285,6 +288,9 @@ export interface ExternalLibraryFactory {
     onCaptionEditorBoundsChanged(targetType: TargetType, targetId: string, bounds: Bounds): void;
     commitCaptionEditing(targetType: TargetType, targetId: string, text: string): void;
     selectTab(windowId: string): void;
+    openTabOverflowPopup(frameId: string, location: Location): void;
+    addTabContainerClass(windowId: string, className: string): void;
+    removeTabContainerClass(windowId: string, className: string): void;
 }
 export interface WebGroupsManager {
     init: (factory?: any) => void;
@@ -300,7 +306,9 @@ export interface Size {
     width: number;
     height: number;
 }
-export interface Bounds extends Size {
+export interface Location {
     left: number;
     top: number;
 }
+export interface Bounds extends Size, Location {
+}

package/dist/cjs/webGroupsManager.d.ts

@@ -1,4 +1,4 @@
-import { Bounds, TargetType } from "./types/internal";
+import { Bounds, Location, TargetType } from "./types/internal";
 declare class WebGroupsManagerDecorator {
     private readonly registry;
     readonly skipFocusStyle = "t42-skip-focus";
@@ -36,6 +36,9 @@ declare class WebGroupsManagerDecorator {
     onCommitCaptionEditingRequested(targetType: TargetType, targetId: string, callback: () => void): () => void;
     requestCommitCaptionEditing(targetType: TargetType, targetId: string): void;
     selectTab(windowId: string): void;
+    addTabContainerClass(windowId: string, className: string): void;
+    removeTabContainerClass(windowId: string, className: string): void;
+    openTabOverflowPopup(frameId: string, location: Location): void;
 }
 declare const _default: WebGroupsManagerDecorator;
 export default _default;

package/dist/esm/index.d.ts

@@ -29,7 +29,7 @@ import CustomButton from "./defaultComponents/buttons/CustomButton";
 import { waitForWindow } from "./utils";
 import useGroupComponentVisibility from "./useGroupComponentVisibility";
 import { CloseButtonProps, ExtractButtonProps, StickyButtonProps, FeedbackButtonProps, FlatButtonsProps, FlatCaptionEditorProps, FlatCaptionProps, FlatChannelSelectorProps, FlatMoveAreaProps, GroupButtonsProps, GroupCaptionEditorProps, GroupMoveAreaProps, LockButtonProps, MaximizeButtonProps, MinimizeButtonProps, RestoreButtonProps, TabCaptionEditorProps, TabCaptionProps, TabChannelSelectorProps, TabCloseButtonProps, UnlockButtonProps, UseCaptionEditorOptions, UseEditableCaptionOptions, OverflowButtonProps } from "./types/defaultComponents";
-import { AboveTabsProps, AboveWindowProps, AfterTabsProps, BeforeTabsProps, BelowTabsProps, BelowWindowProps, FlatCaptionBarProps, FrameLoadingAnimationProps, FrameWindowOverlayProps, GroupCaptionBarProps, GroupComponentVisibilityState, GroupOverlayProps, GroupProps, HtmlButtonsProps, MoveAreaProps, TabElementProps, TabHeaderButtonsProps, TabOverflowPopupProps, WindowContentOverlayProps } from "./types/api";
+import { AboveTabsProps, AboveWindowProps, AfterTabsProps, BeforeTabsProps, BelowTabsProps, BelowWindowProps, FlatCaptionBarProps, FrameLoadingAnimationProps, FrameWindowOverlayProps, GroupCaptionBarProps, GroupComponentVisibilityState, GroupOverlayProps, GroupProps, HtmlButtonsProps, MoveAreaProps, OpenTabOverflowPopupOptions, TabElementProps, TabHeaderButtonsProps, TabOverflowPopupProps, WindowContentOverlayProps } from "./types/api";
 import GroupCaptionEditor from "./defaultComponents/groupCaptionBar/GroupCaptionEditor";
 import FlatCaptionEditor from "./defaultComponents/flatCaptionBar/FlatCaptionEditor";
 import TabCaptionEditor from "./defaultComponents/tabs/TabCaptionEditor";
@@ -46,6 +46,7 @@ export declare const getGroupId: () => string;
 export declare const requestPageFocus: () => void;
 export declare const requestFrameFocus: (frameId: string) => void;
 export declare const requestGroupFocus: () => void;
+export declare const openTabOverflowPopup: (options: OpenTabOverflowPopupOptions) => void;
 export declare const onCommitGroupCaptionEditingRequested: (targetId: string, cb: () => void) => () => void;
 export declare const onCommitFlatCaptionEditingRequested: (targetId: string, cb: () => void) => () => void;
 export declare const onCommitTabCaptionEditingRequested: (targetId: string, cb: () => void) => () => void;

package/dist/esm/index.js

@@ -322,6 +322,27 @@ var WebGroupsManagerDecorator = /** @class */ (function () {
     WebGroupsManagerDecorator.prototype.selectTab = function (windowId) {
         window.webGroupsManager.externalLibraryFactory.selectTab(windowId);
     };
+    WebGroupsManagerDecorator.prototype.addTabContainerClass = function (windowId, className) {
+        if (typeof window.webGroupsManager.externalLibraryFactory.addTabContainerClass !== "function") {
+            console.warn("The method addTabContainerClass is not supported by the current version of the library");
+            return;
+        }
+        window.webGroupsManager.externalLibraryFactory.addTabContainerClass(windowId, className);
+    };
+    WebGroupsManagerDecorator.prototype.removeTabContainerClass = function (windowId, className) {
+        if (typeof window.webGroupsManager.externalLibraryFactory.removeTabContainerClass !== "function") {
+            console.warn("The method removeTabContainerClass is not supported by the current version of the library");
+            return;
+        }
+        window.webGroupsManager.externalLibraryFactory.removeTabContainerClass(windowId, className);
+    };
+    WebGroupsManagerDecorator.prototype.openTabOverflowPopup = function (frameId, location) {
+        if (typeof window.webGroupsManager.externalLibraryFactory.openTabOverflowPopup !== "function") {
+            console.warn("The method openTabOverflowPopup is not supported by the current version of the library");
+            return;
+        }
+        window.webGroupsManager.externalLibraryFactory.openTabOverflowPopup(frameId, location);
+    };
     return WebGroupsManagerDecorator;
 }());
 var webGroupsManager = new WebGroupsManagerDecorator();
@@ -2472,6 +2493,13 @@ var WebGroupsStore = /** @class */ (function () {
                         newState[stateProp] = __assign(__assign({}, s[stateProp]), (_a = {}, _a[targetId] = __assign(__assign({}, s[stateProp][targetId]), { selectedWindow: selectedWindow }), _a));
                     }
                 };
+                var updateHiddenTabs = function (stateProp, targetId, hiddenTabsToTheLeft, hiddenTabsToTheRight) {
+                    var _a;
+                    var _b, _c;
+                    var oldHiddenToTheLeft = (_b = newState[stateProp][targetId]) === null || _b === void 0 ? void 0 : _b.hiddenTabsToTheLeft;
+                    var oldHiddenToTheRight = (_c = newState[stateProp][targetId]) === null || _c === void 0 ? void 0 : _c.hiddenTabsToTheRight;
+                    newState[stateProp] = __assign(__assign({}, s[stateProp]), (_a = {}, _a[targetId] = __assign(__assign({}, s[stateProp][targetId]), { hiddenTabsToTheLeft: hiddenTabsToTheLeft || oldHiddenToTheLeft, hiddenTabsToTheRight: hiddenTabsToTheRight || oldHiddenToTheRight }), _a));
+                };
                 updateSelectionWindow("frameCaptionBars", options.targetId, options.selectedWindow);
                 updateSelectionWindow("frameWindowOverlays", options.targetId, options.selectedWindow);
                 updateSelectionWindow("windowContentOverlays", options.targetId, options.selectedWindow);
@@ -2483,6 +2511,8 @@ var WebGroupsStore = /** @class */ (function () {
                 updateSelectionWindow("tabHeaderButtons", options.targetId, options.selectedWindow);
                 updateSelectionWindow("belowTabsZones", options.targetId, options.selectedWindow);
                 updateSelectionWindow("frameLoadingAnimations", options.targetId, options.selectedWindow);
+                updateHiddenTabs("afterTabsZones", options.targetId, options.hiddenTabsToTheLeft, options.hiddenTabsToTheRight);
+                updateHiddenTabs("tabHeaderButtons", options.targetId, options.hiddenTabsToTheLeft, options.hiddenTabsToTheRight);
                 return newState;
             });
         };
@@ -3111,8 +3141,14 @@ var GroupElementCreationWrapper = function (_a) {
                     webGroupsManager.onCaptionEditorVisibleChanged(TargetType.Tab, options.targetId, visible);
                 } });
             var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Tab, options.targetId, bounds); };
+            var addContainerClass = function (className) {
+                webGroupsManager.addTabContainerClass(options.targetId, className);
+            };
+            var removeContainerClass = function (className) {
+                webGroupsManager.removeTabContainerClass(options.targetId, className);
+            };
             return React.createElement(Portal, { key: options.targetId, parentElement: parentElement },
-                React.createElement(TabCustomElement, __assign({}, options, { close: onCloseClick, channels: channels, windowId: options.targetId, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged })));
+                React.createElement(TabCustomElement, __assign({}, options, { close: onCloseClick, channels: channels, windowId: options.targetId, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged, addContainerClass: addContainerClass, removeContainerClass: removeContainerClass })));
         });
     };
     var renderAfterTabsZones = function () {
@@ -3361,7 +3397,10 @@ var TabOverflowPopup = function (_a) {
             React.createElement("li", { className: "title" }, title),
             tabs.map(function (tab) { return (React.createElement("li", { key: tab.windowId, onClick: function () { return handleTabClick(tab.windowId); } },
                 React.createElement("span", null, tab.title),
-                React.createElement("div", { className: "t42-tab-close-button-content", onClick: function () { return handleTabClose(tab.windowId); } }))); })));
+                React.createElement("div", { className: "t42-tab-close-button-content", onClick: function (e) {
+                        e.stopPropagation();
+                        handleTabClose(tab.windowId);
+                    } }))); })));
     };
     var handleTabClick = function (windowId) {
         select(windowId);
@@ -3379,9 +3418,13 @@ var getGroupId = function () { return webGroupsManager === null || webGroupsMana
 var requestPageFocus = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestPageFocus(); };
 var requestFrameFocus = function (frameId) { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestFrameFocus(frameId); };
 var requestGroupFocus = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestGroupFocus(); };
+var openTabOverflowPopup = function (_a) {
+    var frameId = _a.frameId, location = _a.location;
+    return webGroupsManager.openTabOverflowPopup(frameId, location);
+};
 var onCommitGroupCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Group, targetId, cb); };
 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, requestFrameFocus, requestGroupFocus, requestPageFocus, useCaptionEditor, useCommitFlatCaptionEditingRequested, useCommitGroupCaptionEditingRequested, useCommitTabCaptionEditingRequested, useEditableCaption, useGroupComponentVisibility, useIOConnectWindow, waitForWindow };
+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 };
 //# sourceMappingURL=index.js.map