@interopio/groups-ui-react 2.2.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { OverflowButtonProps } from "../../types/defaultComponents";
3
+ declare const OverflowButton: React.FC<OverflowButtonProps>;
4
+ export default OverflowButton;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { TabOverflowPopupProps } from '../../types/api';
3
+ declare const TabOverflowPopup: React.FC<TabOverflowPopupProps>;
4
+ export default TabOverflowPopup;
@@ -23,12 +23,13 @@ import ExtractButton from "./defaultComponents/buttons/ExtractButton";
23
23
  import FeedbackButton from "./defaultComponents/buttons/FeedbackButton";
24
24
  import CloneButton from "./defaultComponents/buttons/CloneButton";
25
25
  import StickyButton from "./defaultComponents/buttons/StickyButton";
26
+ import OverflowButton from "./defaultComponents/buttons/OverflowButton";
26
27
  import useIOConnectWindow from "./useIOConnectWindow";
27
28
  import CustomButton from "./defaultComponents/buttons/CustomButton";
28
29
  import { waitForWindow } from "./utils";
29
30
  import useGroupComponentVisibility from "./useGroupComponentVisibility";
30
- import { CloseButtonProps, ExtractButtonProps, StickyButtonProps, FeedbackButtonProps, FlatButtonsProps, FlatCaptionEditorProps, FlatCaptionProps, FlatChannelSelectorProps, FlatMoveAreaProps, GroupButtonsProps, GroupCaptionEditorProps, GroupMoveAreaProps, LockButtonProps, MaximizeButtonProps, MinimizeButtonProps, RestoreButtonProps, TabCaptionEditorProps, TabCaptionProps, TabChannelSelectorProps, TabCloseButtonProps, UnlockButtonProps, UseCaptionEditorOptions, UseEditableCaptionOptions } from "./types/defaultComponents";
31
- import { AboveTabsProps, AboveWindowProps, AfterTabsProps, BeforeTabsProps, BelowTabsProps, BelowWindowProps, FlatCaptionBarProps, FrameLoadingAnimationProps, FrameWindowOverlayProps, GroupCaptionBarProps, GroupComponentVisibilityState, GroupOverlayProps, GroupProps, HtmlButtonsProps, MoveAreaProps, TabElementProps, TabHeaderButtonsProps, WindowContentOverlayProps } from "./types/api";
31
+ 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";
32
+ import { AboveTabsProps, AboveWindowProps, AfterTabsProps, BeforeTabsProps, BelowTabsProps, BelowWindowProps, FlatCaptionBarProps, FrameLoadingAnimationProps, FrameWindowOverlayProps, GroupCaptionBarProps, GroupComponentVisibilityState, GroupOverlayProps, GroupProps, HtmlButtonsProps, MoveAreaProps, TabElementProps, TabHeaderButtonsProps, TabOverflowPopupProps, WindowContentOverlayProps } from "./types/api";
32
33
  import GroupCaptionEditor from "./defaultComponents/groupCaptionBar/GroupCaptionEditor";
33
34
  import FlatCaptionEditor from "./defaultComponents/flatCaptionBar/FlatCaptionEditor";
34
35
  import TabCaptionEditor from "./defaultComponents/tabs/TabCaptionEditor";
@@ -39,7 +40,8 @@ import useEditableCaption from "./defaultComponents/captionEditor/useEditableCap
39
40
  import useCaptionEditor from "./defaultComponents/captionEditor/useCaptionEditor";
40
41
  import FrameLoadingAnimation from "./defaultComponents/loadingAnimation/FrameLoadingAnimation";
41
42
  import HtmlButtons from "./defaultComponents/htmlButtonsBar/buttons";
42
- 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, GroupComponentVisibilityState, useIOConnectWindow, useGroupComponentVisibility, waitForWindow, useEditableCaption, useCaptionEditor, useCommitGroupCaptionEditingRequested, useCommitFlatCaptionEditingRequested, useCommitTabCaptionEditingRequested, };
43
+ import TabOverflowPopup from "./defaultComponents/popups/TabOverflowPopup";
44
+ 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, };
43
45
  export declare const getGroupId: () => string;
44
46
  export declare const requestPageFocus: () => void;
45
47
  export declare const requestFrameFocus: (frameId: string) => void;
@@ -47,5 +49,5 @@ export declare const requestGroupFocus: () => void;
47
49
  export declare const onCommitGroupCaptionEditingRequested: (targetId: string, cb: () => void) => () => void;
48
50
  export declare const onCommitFlatCaptionEditingRequested: (targetId: string, cb: () => void) => () => void;
49
51
  export declare const onCommitTabCaptionEditingRequested: (targetId: string, cb: () => void) => () => void;
50
- export { MoveAreaProps, GroupProps, GroupCaption, GroupCaptionBarProps, GroupMoveAreaProps, GroupOverlayProps, GroupButtonsProps, GroupCaptionEditorProps, TabElementProps, TabChannelSelectorProps, TabCaptionProps, TabCloseButtonProps, TabHeaderButtonsProps, TabCaptionEditorProps, HtmlButtonsProps, FlatCaptionBarProps, FlatCaptionProps, FrameWindowOverlayProps, FlatMoveAreaProps, FlatChannelSelectorProps, FlatButtonsProps, FlatCaptionEditorProps, StickyButtonProps, FeedbackButtonProps, ExtractButtonProps, LockButtonProps, UnlockButtonProps, MinimizeButtonProps, MaximizeButtonProps, RestoreButtonProps, CloseButtonProps, FrameLoadingAnimationProps, UseCaptionEditorOptions, UseEditableCaptionOptions, AboveWindowProps, BelowWindowProps, AboveTabsProps, BelowTabsProps, BeforeTabsProps, AfterTabsProps, WindowContentOverlayProps };
52
+ export { MoveAreaProps, GroupProps, GroupCaption, GroupCaptionBarProps, GroupMoveAreaProps, GroupOverlayProps, GroupButtonsProps, GroupCaptionEditorProps, TabElementProps, TabChannelSelectorProps, TabCaptionProps, TabCloseButtonProps, TabHeaderButtonsProps, TabCaptionEditorProps, HtmlButtonsProps, FlatCaptionBarProps, FlatCaptionProps, FrameWindowOverlayProps, FlatMoveAreaProps, FlatChannelSelectorProps, FlatButtonsProps, FlatCaptionEditorProps, OverflowButtonProps, StickyButtonProps, FeedbackButtonProps, ExtractButtonProps, LockButtonProps, UnlockButtonProps, MinimizeButtonProps, MaximizeButtonProps, RestoreButtonProps, CloseButtonProps, FrameLoadingAnimationProps, UseCaptionEditorOptions, UseEditableCaptionOptions, AboveWindowProps, BelowWindowProps, AboveTabsProps, BelowTabsProps, BeforeTabsProps, AfterTabsProps, WindowContentOverlayProps, TabOverflowPopupProps, };
51
53
  export default GroupElementCreationWrapper;
package/dist/cjs/index.js CHANGED
@@ -71,6 +71,7 @@
71
71
  })(TargetType || (TargetType = {}));
72
72
  var StandardButtons;
73
73
  (function (StandardButtons) {
74
+ StandardButtons["Overflow"] = "overflow";
74
75
  StandardButtons["Feedback"] = "feedback";
75
76
  StandardButtons["Clone"] = "clone";
76
77
  StandardButtons["Sticky"] = "sticky";
@@ -261,6 +262,9 @@
261
262
  WebGroupsManagerDecorator.prototype.onUnlockButtonClick = function (targetType, targetId) {
262
263
  window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Unlock);
263
264
  };
265
+ WebGroupsManagerDecorator.prototype.onOverflowButtonClick = function (targetType, targetId) {
266
+ window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Overflow);
267
+ };
264
268
  WebGroupsManagerDecorator.prototype.onFeedbackButtonClick = function (targetType, targetId) {
265
269
  window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(targetType, targetId, StandardButtons.Feedback);
266
270
  };
@@ -322,6 +326,9 @@
322
326
  WebGroupsManagerDecorator.prototype.requestCommitCaptionEditing = function (targetType, targetId) {
323
327
  this.registry.execute(targetType + "-" + targetId);
324
328
  };
329
+ WebGroupsManagerDecorator.prototype.selectTab = function (windowId) {
330
+ window.webGroupsManager.externalLibraryFactory.selectTab(windowId);
331
+ };
325
332
  return WebGroupsManagerDecorator;
326
333
  }());
327
334
  var webGroupsManager = new WebGroupsManagerDecorator();
@@ -1830,13 +1837,19 @@
1830
1837
  React__default["default"].createElement(TabCloseButton, { selected: selected, close: close }));
1831
1838
  };
1832
1839
 
1840
+ var OverflowButton = function (_a) {
1841
+ var onClick = _a.onClick, tooltip = _a.tooltip;
1842
+ return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-overflow" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-overflow", title: tooltip, onClick: onClick } });
1843
+ };
1844
+
1833
1845
  var TabHeaderButtons = function (_a) {
1834
- var extract = _a.extract, minimize = _a.minimize, maximize = _a.maximize, restore = _a.restore, close = _a.close, lock = _a.lock, unlock = _a.unlock, feedback = _a.feedback, clone = _a.clone, sticky = _a.sticky, customButtons = _a.customButtons;
1846
+ var overflow = _a.overflow, extract = _a.extract, minimize = _a.minimize, maximize = _a.maximize, restore = _a.restore, close = _a.close, lock = _a.lock, unlock = _a.unlock, feedback = _a.feedback, clone = _a.clone, sticky = _a.sticky, customButtons = _a.customButtons;
1835
1847
  return React__default["default"].createElement("div", { className: "t42-buttons-container t42-tab-bar-element" },
1836
1848
  React__default["default"].createElement("ul", { className: "t42-buttons t42-tab-bar-element" }, customButtons.map(function (customButton) {
1837
1849
  return customButton.visible && React__default["default"].createElement(CustomButton, __assign({ key: customButton.buttonId }, customButton));
1838
1850
  })),
1839
1851
  React__default["default"].createElement("ul", { className: "t42-buttons t42-tab-bar-element" },
1852
+ (overflow === null || overflow === void 0 ? void 0 : overflow.visible) && React__default["default"].createElement(OverflowButton, __assign({}, overflow)),
1840
1853
  (feedback === null || feedback === void 0 ? void 0 : feedback.visible) && React__default["default"].createElement(FeedbackButton, __assign({}, feedback)),
1841
1854
  (clone === null || clone === void 0 ? void 0 : clone.visible) && React__default["default"].createElement(CloneButton, __assign({}, clone)),
1842
1855
  (sticky === null || sticky === void 0 ? void 0 : sticky.visible) && React__default["default"].createElement(StickyButton, __assign({}, sticky)),
@@ -2143,6 +2156,8 @@
2143
2156
  updateBelowTabs: this.props.onUpdateBelowTabsRequested,
2144
2157
  createHtmlButtonsContainerElement: this.props.onCreateHtmlButtonsRequested,
2145
2158
  destroyHtmlButtonsContainerElement: this.props.onRemoveHtmlButtonsRequested,
2159
+ createTabOverflowPopup: this.props.onCreateTabOverflowPopupRequested,
2160
+ destroyTabOverflowPopup: this.props.onRemoveTabOverflowPopupRequested,
2146
2161
  updateFrame: this.props.onUpdateFrameRequested,
2147
2162
  updateStandardButton: this.props.onUpdateStandardButtonRequested,
2148
2163
  updateCustomButtons: this.props.onUpdateCustomButtonsRequested,
@@ -2201,6 +2216,7 @@
2201
2216
  tabElements: {},
2202
2217
  afterTabsZones: {},
2203
2218
  tabHeaderButtons: {},
2219
+ tabOverflowPopups: {},
2204
2220
  belowTabsZones: {},
2205
2221
  frameLoadingAnimations: {},
2206
2222
  htmlButtons: {},
@@ -2352,6 +2368,15 @@
2352
2368
  return __assign(__assign({}, s), { htmlButtons: __assign(__assign({}, s.htmlButtons), (_a = {}, _a[options.targetId] = options, _a)) });
2353
2369
  });
2354
2370
  };
2371
+ this.onCreateTabOverflowPopupRequested = function (options) {
2372
+ if (options === _this.state.tabOverflowPopups[options.targetId] || !options) {
2373
+ return;
2374
+ }
2375
+ _this.setState(function (s) {
2376
+ var _a;
2377
+ return __assign(__assign({}, s), { tabOverflowPopups: __assign(__assign({}, s.tabOverflowPopups), (_a = {}, _a[options.targetId] = options, _a)) });
2378
+ });
2379
+ };
2355
2380
  this.onUpdateHtmlButtonsRequested = function (options) {
2356
2381
  if (options === _this.state.htmlButtons[options.targetId] || !options) {
2357
2382
  return;
@@ -2695,6 +2720,20 @@
2695
2720
  return __assign(__assign({}, s), { htmlButtons: newHtmlObj });
2696
2721
  });
2697
2722
  };
2723
+ this.onRemoveTabOverflowPopupRequested = function (options) {
2724
+ if (!_this.state.tabOverflowPopups[options.targetId]) {
2725
+ return;
2726
+ }
2727
+ _this.setState(function (s) {
2728
+ var newTabOverflowPopupsObj = Object.keys(s.tabOverflowPopups).reduce(function (acc, targetId) {
2729
+ if (targetId != options.targetId) {
2730
+ acc[targetId] = s.tabOverflowPopups[targetId];
2731
+ }
2732
+ return acc;
2733
+ }, {});
2734
+ return __assign(__assign({}, s), { tabOverflowPopups: newTabOverflowPopupsObj });
2735
+ });
2736
+ };
2698
2737
  this.onShowCaptionEditorRequested = function (targetType, targetId, text) {
2699
2738
  if (targetType === TargetType.Group) {
2700
2739
  _this.onShowGroupCaptionEditorRequested(targetId, text);
@@ -2844,7 +2883,7 @@
2844
2883
  };
2845
2884
 
2846
2885
  var GroupElementCreationWrapper = function (_a) {
2847
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
2886
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
2848
2887
  var components = _a.components;
2849
2888
  var state = shim.useSyncExternalStore(webGroupsStore.subscribe, webGroupsStore.getSnapshot);
2850
2889
  var LoadingAnimation = (_c = (_b = components === null || components === void 0 ? void 0 : components.frame) === null || _b === void 0 ? void 0 : _b.LoadingAnimation) !== null && _c !== void 0 ? _c : FrameLoadingAnimation;
@@ -3103,6 +3142,9 @@
3103
3142
  return;
3104
3143
  }
3105
3144
  var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
3145
+ var overflow = __assign({ onClick: function () {
3146
+ webGroupsManager.onOverflowButtonClick(TargetType.TabBar, options.targetId);
3147
+ } }, options.overflow);
3106
3148
  var feedback = __assign({ onClick: function () {
3107
3149
  webGroupsManager.onFeedbackButtonClick(TargetType.TabBar, options.targetId);
3108
3150
  } }, options.feedback);
@@ -3148,7 +3190,25 @@
3148
3190
  });
3149
3191
  }
3150
3192
  return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
3151
- React__default["default"].createElement(TabButtonsCustomElement, __assign({}, options, { feedback: feedback, clone: clone, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, customButtons: customButtonsProps, frameId: options.targetId })));
3193
+ React__default["default"].createElement(TabButtonsCustomElement, __assign({}, options, { overflow: overflow, feedback: feedback, clone: clone, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, customButtons: customButtonsProps, frameId: options.targetId })));
3194
+ });
3195
+ };
3196
+ var renderTabOverflowPopups = function () {
3197
+ var _a;
3198
+ var TabOverflowCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.OverflowPopup;
3199
+ return Object.values(state.tabOverflowPopups).map(function (top) {
3200
+ if (!TabOverflowCustomElement || !top.parentElement) {
3201
+ return;
3202
+ }
3203
+ var parentElement = top.parentElement, options = __rest(top, ["parentElement"]);
3204
+ var select = function (windowId) {
3205
+ webGroupsManager.selectTab(windowId);
3206
+ };
3207
+ var close = function (windowId) {
3208
+ webGroupsManager.onCloseButtonClick(TargetType.Tab, windowId);
3209
+ };
3210
+ return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
3211
+ React__default["default"].createElement(TabOverflowCustomElement, __assign({}, options, { select: select, close: close, frameId: options.targetId })));
3152
3212
  });
3153
3213
  };
3154
3214
  var renderBelowTabs = function () {
@@ -3171,6 +3231,9 @@
3171
3231
  return;
3172
3232
  }
3173
3233
  var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
3234
+ var overflow = __assign({ onClick: function () {
3235
+ webGroupsManager.onOverflowButtonClick(TargetType.HtmlButtons, options.targetId);
3236
+ } }, options.overflow);
3174
3237
  var feedback = __assign({ onClick: function () {
3175
3238
  webGroupsManager.onFeedbackButtonClick(TargetType.HtmlButtons, options.targetId);
3176
3239
  } }, options.feedback);
@@ -3216,7 +3279,7 @@
3216
3279
  });
3217
3280
  }
3218
3281
  return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
3219
- React__default["default"].createElement(HtmlButtonsCustomElement, __assign({}, options, { feedback: feedback, clone: clone, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, customButtons: customButtonsProps, frameId: options.targetId })));
3282
+ React__default["default"].createElement(HtmlButtonsCustomElement, __assign({}, options, { overflow: overflow, feedback: feedback, clone: clone, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, customButtons: customButtonsProps, frameId: options.targetId })));
3220
3283
  });
3221
3284
  };
3222
3285
  return React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -3233,9 +3296,10 @@
3233
3296
  renderTabElements(),
3234
3297
  renderAfterTabsZones(),
3235
3298
  renderTabHeaderButtons(),
3299
+ renderTabOverflowPopups(),
3236
3300
  renderBelowTabs(),
3237
3301
  renderHtmlButtons(),
3238
- React__default["default"].createElement(GroupWrapper, { onCreateGroupCaptionBarRequested: ((_d = components === null || components === void 0 ? void 0 : components.group) === null || _d === void 0 ? void 0 : _d.CaptionBar) ? webGroupsStore.onCreateGroupCaptionBarRequested : undefined, onCreateGroupOverlayRequested: ((_e = components === null || components === void 0 ? void 0 : components.group) === null || _e === void 0 ? void 0 : _e.Overlay) ? webGroupsStore.onCreateGroupOverlayRequested : undefined, onCreateFrameCaptionBarRequested: ((_f = components === null || components === void 0 ? void 0 : components.flat) === null || _f === void 0 ? void 0 : _f.CaptionBar) ? webGroupsStore.onCreateFrameCaptionBarRequested : undefined, onCreateFrameWindowOverlayRequested: ((_g = components === null || components === void 0 ? void 0 : components.frame) === null || _g === void 0 ? void 0 : _g.Overlay) ? webGroupsStore.onCreateFrameWindowOverlayRequested : undefined, onCreateAboveWindowRequested: ((_h = components === null || components === void 0 ? void 0 : components.frame) === null || _h === void 0 ? void 0 : _h.AboveWindow) ? webGroupsStore.onCreateAboveWindowRequested : undefined, onCreateWindowContentOverlayRequested: ((_j = components === null || components === void 0 ? void 0 : components.frame) === null || _j === void 0 ? void 0 : _j.WindowContentOverlay) ? webGroupsStore.onCreateWindowContentOverlayRequested : undefined, onCreateFrameLoadingAnimationRequested: LoadingAnimation ? webGroupsStore.onCreateFrameLoadingAnimationRequested : undefined, onCreateBelowWindowRequested: ((_k = components === null || components === void 0 ? void 0 : components.frame) === null || _k === void 0 ? void 0 : _k.BelowWindow) ? webGroupsStore.onCreateBelowWindowRequested : undefined, onCreateAboveTabsRequested: ((_l = components === null || components === void 0 ? void 0 : components.tabs) === null || _l === void 0 ? void 0 : _l.Above) ? webGroupsStore.onCreateAboveTabsComponentRequested : undefined, onCreateBeforeTabsComponentRequested: ((_m = components === null || components === void 0 ? void 0 : components.tabs) === null || _m === void 0 ? void 0 : _m.Before) ? webGroupsStore.onCreateBeforeTabsComponentRequested : undefined, onCreateTabRequested: ((_o = components === null || components === void 0 ? void 0 : components.tabs) === null || _o === void 0 ? void 0 : _o.Element) ? webGroupsStore.onCreateTabElementRequested : undefined, onCreateAfterTabsComponentRequested: ((_p = components === null || components === void 0 ? void 0 : components.tabs) === null || _p === void 0 ? void 0 : _p.After) ? webGroupsStore.onCreateAfterTabsComponentRequested : undefined, onCreateTabHeaderButtonsRequested: ((_q = components === null || components === void 0 ? void 0 : components.tabs) === null || _q === void 0 ? void 0 : _q.Buttons) ? webGroupsStore.onCreateTabHeaderButtonsRequested : undefined, onCreateBelowTabsRequested: ((_r = components === null || components === void 0 ? void 0 : components.tabs) === null || _r === void 0 ? void 0 : _r.Below) ? webGroupsStore.onCreateBelowTabsComponentRequested : undefined, onCreateHtmlButtonsRequested: ((_s = components === null || components === void 0 ? void 0 : components.html) === null || _s === void 0 ? void 0 : _s.Buttons) ? webGroupsStore.onCreateHtmlButtonsRequested : undefined, onUpdateGroupCaptionBarRequested: ((_t = components === null || components === void 0 ? void 0 : components.group) === null || _t === void 0 ? void 0 : _t.CaptionBar) ? webGroupsStore.onUpdateGroupCaptionBarRequested : undefined, onUpdateFrameWindowOverlayRequested: ((_u = components === null || components === void 0 ? void 0 : components.group) === null || _u === void 0 ? void 0 : _u.Overlay) ? webGroupsStore.onUpdateFrameWindowOverlayRequested : undefined, onUpdateFrameCaptionBarRequested: ((_v = components === null || components === void 0 ? void 0 : components.flat) === null || _v === void 0 ? void 0 : _v.CaptionBar) ? webGroupsStore.onUpdateFrameCaptionBarRequested : undefined, onUpdateFrameRequested: webGroupsStore.onUpdateFrame, onUpdateStandardButtonRequested: webGroupsStore.onUpdateStandardButton, onUpdateCustomButtonsRequested: webGroupsStore.onUpdateCustomButtons, onUpdateAboveTabsRequested: ((_w = components === null || components === void 0 ? void 0 : components.tabs) === null || _w === void 0 ? void 0 : _w.Above) ? webGroupsStore.onUpdateAboveTabsRequested : undefined, onUpdateBeforeTabsComponentRequested: ((_x = components === null || components === void 0 ? void 0 : components.tabs) === null || _x === void 0 ? void 0 : _x.Before) ? webGroupsStore.onUpdateBeforeTabsRequested : undefined, onUpdateTabRequested: ((_y = components === null || components === void 0 ? void 0 : components.tabs) === null || _y === void 0 ? void 0 : _y.Element) ? webGroupsStore.onUpdateTabElementRequested : undefined, onUpdateAfterTabsComponentRequested: ((_z = components === null || components === void 0 ? void 0 : components.tabs) === null || _z === void 0 ? void 0 : _z.After) ? webGroupsStore.onUpdateAfterTabsRequested : undefined, onUpdateBelowTabsRequested: ((_0 = components === null || components === void 0 ? void 0 : components.tabs) === null || _0 === void 0 ? void 0 : _0.Below) ? webGroupsStore.onUpdateBelowTabsRequested : undefined, onRemoveFrameCaptionBarRequested: webGroupsStore.onRemoveFrameCaptionBarRequested, onRemoveFrameWindowOverlayRequested: webGroupsStore.onRemoveFrameWindowOverlayRequested, onRemoveAboveWindowRequested: webGroupsStore.onRemoveAboveWindowRequested, onRemoveWindowContentOverlayRequested: webGroupsStore.onRemoveWindowContentOverlayRequested, onRemoveFrameLoadingAnimationRequested: webGroupsStore.onRemoveFrameLoadingAnimationRequested, onRemoveBelowWindowRequested: webGroupsStore.onRemoveBelowWindowRequested, onRemoveAboveTabsRequested: webGroupsStore.onRemoveAboveTabsRequested, onRemoveBeforeTabsComponentRequested: webGroupsStore.onRemoveBeforeTabsComponentRequested, onRemoveTabRequested: webGroupsStore.onRemoveTabElementRequested, onRemoveAfterTabsComponentRequested: webGroupsStore.onRemoveAfterTabsComponentRequested, onRemoveTabHeaderButtonsRequested: webGroupsStore.onRemoveTabHeaderButtonsRequested, onRemoveBelowTabsRequested: webGroupsStore.onRemoveBelowTabsRequested, onRemoveHtmlButtonsRequested: webGroupsStore.onRemoveHtmlButtonsRequested, onShowCaptionEditorRequested: webGroupsStore.onShowCaptionEditorRequested, onCommitCaptionEditingRequested: webGroupsStore.onCommitCaptionEditingRequested, onHideCaptionEditorRequested: webGroupsStore.onHideCaptionEditorRequested, onShowLoadingAnimationRequested: webGroupsStore.onShowLoadingAnimationRequested, onHideLoadingAnimationRequested: webGroupsStore.onHideLoadingAnimationRequested }));
3302
+ React__default["default"].createElement(GroupWrapper, { onCreateGroupCaptionBarRequested: ((_d = components === null || components === void 0 ? void 0 : components.group) === null || _d === void 0 ? void 0 : _d.CaptionBar) ? webGroupsStore.onCreateGroupCaptionBarRequested : undefined, onCreateGroupOverlayRequested: ((_e = components === null || components === void 0 ? void 0 : components.group) === null || _e === void 0 ? void 0 : _e.Overlay) ? webGroupsStore.onCreateGroupOverlayRequested : undefined, onCreateFrameCaptionBarRequested: ((_f = components === null || components === void 0 ? void 0 : components.flat) === null || _f === void 0 ? void 0 : _f.CaptionBar) ? webGroupsStore.onCreateFrameCaptionBarRequested : undefined, onCreateFrameWindowOverlayRequested: ((_g = components === null || components === void 0 ? void 0 : components.frame) === null || _g === void 0 ? void 0 : _g.Overlay) ? webGroupsStore.onCreateFrameWindowOverlayRequested : undefined, onCreateAboveWindowRequested: ((_h = components === null || components === void 0 ? void 0 : components.frame) === null || _h === void 0 ? void 0 : _h.AboveWindow) ? webGroupsStore.onCreateAboveWindowRequested : undefined, onCreateWindowContentOverlayRequested: ((_j = components === null || components === void 0 ? void 0 : components.frame) === null || _j === void 0 ? void 0 : _j.WindowContentOverlay) ? webGroupsStore.onCreateWindowContentOverlayRequested : undefined, onCreateFrameLoadingAnimationRequested: LoadingAnimation ? webGroupsStore.onCreateFrameLoadingAnimationRequested : undefined, onCreateBelowWindowRequested: ((_k = components === null || components === void 0 ? void 0 : components.frame) === null || _k === void 0 ? void 0 : _k.BelowWindow) ? webGroupsStore.onCreateBelowWindowRequested : undefined, onCreateAboveTabsRequested: ((_l = components === null || components === void 0 ? void 0 : components.tabs) === null || _l === void 0 ? void 0 : _l.Above) ? webGroupsStore.onCreateAboveTabsComponentRequested : undefined, onCreateBeforeTabsComponentRequested: ((_m = components === null || components === void 0 ? void 0 : components.tabs) === null || _m === void 0 ? void 0 : _m.Before) ? webGroupsStore.onCreateBeforeTabsComponentRequested : undefined, onCreateTabRequested: ((_o = components === null || components === void 0 ? void 0 : components.tabs) === null || _o === void 0 ? void 0 : _o.Element) ? webGroupsStore.onCreateTabElementRequested : undefined, onCreateAfterTabsComponentRequested: ((_p = components === null || components === void 0 ? void 0 : components.tabs) === null || _p === void 0 ? void 0 : _p.After) ? webGroupsStore.onCreateAfterTabsComponentRequested : undefined, onCreateTabHeaderButtonsRequested: ((_q = components === null || components === void 0 ? void 0 : components.tabs) === null || _q === void 0 ? void 0 : _q.Buttons) ? webGroupsStore.onCreateTabHeaderButtonsRequested : undefined, onCreateBelowTabsRequested: ((_r = components === null || components === void 0 ? void 0 : components.tabs) === null || _r === void 0 ? void 0 : _r.Below) ? webGroupsStore.onCreateBelowTabsComponentRequested : undefined, onCreateHtmlButtonsRequested: ((_s = components === null || components === void 0 ? void 0 : components.html) === null || _s === void 0 ? void 0 : _s.Buttons) ? webGroupsStore.onCreateHtmlButtonsRequested : undefined, onCreateTabOverflowPopupRequested: ((_t = components === null || components === void 0 ? void 0 : components.tabs) === null || _t === void 0 ? void 0 : _t.OverflowPopup) ? webGroupsStore.onCreateTabOverflowPopupRequested : undefined, onUpdateGroupCaptionBarRequested: ((_u = components === null || components === void 0 ? void 0 : components.group) === null || _u === void 0 ? void 0 : _u.CaptionBar) ? webGroupsStore.onUpdateGroupCaptionBarRequested : undefined, onUpdateFrameWindowOverlayRequested: ((_v = components === null || components === void 0 ? void 0 : components.group) === null || _v === void 0 ? void 0 : _v.Overlay) ? webGroupsStore.onUpdateFrameWindowOverlayRequested : undefined, onUpdateFrameCaptionBarRequested: ((_w = components === null || components === void 0 ? void 0 : components.flat) === null || _w === void 0 ? void 0 : _w.CaptionBar) ? webGroupsStore.onUpdateFrameCaptionBarRequested : undefined, onUpdateFrameRequested: webGroupsStore.onUpdateFrame, onUpdateStandardButtonRequested: webGroupsStore.onUpdateStandardButton, onUpdateCustomButtonsRequested: webGroupsStore.onUpdateCustomButtons, onUpdateAboveTabsRequested: ((_x = components === null || components === void 0 ? void 0 : components.tabs) === null || _x === void 0 ? void 0 : _x.Above) ? webGroupsStore.onUpdateAboveTabsRequested : undefined, onUpdateBeforeTabsComponentRequested: ((_y = components === null || components === void 0 ? void 0 : components.tabs) === null || _y === void 0 ? void 0 : _y.Before) ? webGroupsStore.onUpdateBeforeTabsRequested : undefined, onUpdateTabRequested: ((_z = components === null || components === void 0 ? void 0 : components.tabs) === null || _z === void 0 ? void 0 : _z.Element) ? webGroupsStore.onUpdateTabElementRequested : undefined, onUpdateAfterTabsComponentRequested: ((_0 = components === null || components === void 0 ? void 0 : components.tabs) === null || _0 === void 0 ? void 0 : _0.After) ? webGroupsStore.onUpdateAfterTabsRequested : undefined, onUpdateBelowTabsRequested: ((_1 = components === null || components === void 0 ? void 0 : components.tabs) === null || _1 === void 0 ? void 0 : _1.Below) ? webGroupsStore.onUpdateBelowTabsRequested : undefined, onRemoveFrameCaptionBarRequested: webGroupsStore.onRemoveFrameCaptionBarRequested, onRemoveFrameWindowOverlayRequested: webGroupsStore.onRemoveFrameWindowOverlayRequested, onRemoveAboveWindowRequested: webGroupsStore.onRemoveAboveWindowRequested, onRemoveWindowContentOverlayRequested: webGroupsStore.onRemoveWindowContentOverlayRequested, onRemoveFrameLoadingAnimationRequested: webGroupsStore.onRemoveFrameLoadingAnimationRequested, onRemoveBelowWindowRequested: webGroupsStore.onRemoveBelowWindowRequested, onRemoveAboveTabsRequested: webGroupsStore.onRemoveAboveTabsRequested, onRemoveBeforeTabsComponentRequested: webGroupsStore.onRemoveBeforeTabsComponentRequested, onRemoveTabRequested: webGroupsStore.onRemoveTabElementRequested, onRemoveAfterTabsComponentRequested: webGroupsStore.onRemoveAfterTabsComponentRequested, onRemoveTabHeaderButtonsRequested: webGroupsStore.onRemoveTabHeaderButtonsRequested, onRemoveBelowTabsRequested: webGroupsStore.onRemoveBelowTabsRequested, onRemoveHtmlButtonsRequested: webGroupsStore.onRemoveHtmlButtonsRequested, onRemoveTabOverflowPopupRequested: webGroupsStore.onRemoveTabOverflowPopupRequested, onShowCaptionEditorRequested: webGroupsStore.onShowCaptionEditorRequested, onCommitCaptionEditingRequested: webGroupsStore.onCommitCaptionEditingRequested, onHideCaptionEditorRequested: webGroupsStore.onHideCaptionEditorRequested, onShowLoadingAnimationRequested: webGroupsStore.onShowLoadingAnimationRequested, onHideLoadingAnimationRequested: webGroupsStore.onHideLoadingAnimationRequested }));
3239
3303
  };
3240
3304
 
3241
3305
  function useIOConnectWindow(windowId) {
@@ -3297,6 +3361,27 @@
3297
3361
  (close === null || close === void 0 ? void 0 : close.visible) && React__default["default"].createElement(CloseButton, __assign({}, close))));
3298
3362
  };
3299
3363
 
3364
+ var TabOverflowPopup = function (_a) {
3365
+ var hiddenTabsToTheLeft = _a.hiddenTabsToTheLeft, hiddenTabsToTheRight = _a.hiddenTabsToTheRight, close = _a.close, select = _a.select;
3366
+ var createSection = function (tabs, title) {
3367
+ return (React__default["default"].createElement("ul", null,
3368
+ React__default["default"].createElement("li", { className: "title" }, title),
3369
+ tabs.map(function (tab) { return (React__default["default"].createElement("li", { key: tab.windowId, onClick: function () { return handleTabClick(tab.windowId); } },
3370
+ React__default["default"].createElement("span", null, tab.title),
3371
+ React__default["default"].createElement("div", { className: "t42-tab-close-button-content", onClick: function () { return handleTabClose(tab.windowId); } }))); })));
3372
+ };
3373
+ var handleTabClick = function (windowId) {
3374
+ select(windowId);
3375
+ };
3376
+ var handleTabClose = function (windowId) {
3377
+ close(windowId);
3378
+ };
3379
+ return (React__default["default"].createElement("div", { className: "t42-wg-tab-overflow-popup" },
3380
+ hiddenTabsToTheLeft.length > 0 && createSection(hiddenTabsToTheLeft, "Open left"),
3381
+ hiddenTabsToTheLeft.length > 0 && hiddenTabsToTheRight.length > 0 && React__default["default"].createElement("hr", null),
3382
+ hiddenTabsToTheRight.length > 0 && createSection(hiddenTabsToTheRight, "Open right")));
3383
+ };
3384
+
3300
3385
  var getGroupId = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.getGroupId(); };
3301
3386
  var requestPageFocus = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestPageFocus(); };
3302
3387
  var requestFrameFocus = function (frameId) { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestFrameFocus(frameId); };
@@ -3326,6 +3411,7 @@
3326
3411
  exports.LockButton = LockButton;
3327
3412
  exports.MaximizeButton = MaximizeButton;
3328
3413
  exports.MinimizeButton = MinimizeButton;
3414
+ exports.OverflowButton = OverflowButton;
3329
3415
  exports.RestoreButton = RestoreButton;
3330
3416
  exports.StickyButton = StickyButton;
3331
3417
  exports.Tab = Tab;
@@ -3334,6 +3420,7 @@
3334
3420
  exports.TabChannelSelector = TabChannelSelector;
3335
3421
  exports.TabCloseButton = TabCloseButton;
3336
3422
  exports.TabHeaderButtons = TabHeaderButtons;
3423
+ exports.TabOverflowPopup = TabOverflowPopup;
3337
3424
  exports.UnlockButton = UnlockButton;
3338
3425
  exports["default"] = GroupElementCreationWrapper;
3339
3426
  exports.getGroupId = getGroupId;