@interopio/groups-ui-react 2.7.0 → 3.0.0

package/dist/cjs/index.js

@@ -9,7 +9,7 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -23,16 +23,18 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise */
+    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
     var extendStatics = function(d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
 
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -59,8 +61,18 @@
                     t[p[i]] = s[p[i]];
             }
         return t;
-    }
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
 
+    var StandardButtonTarget;
+    (function (StandardButtonTarget) {
+        StandardButtonTarget["Default"] = "default";
+        StandardButtonTarget["Frame"] = "frame";
+    })(StandardButtonTarget || (StandardButtonTarget = {}));
     var TargetType;
     (function (TargetType) {
         TargetType["Group"] = "group";
@@ -299,6 +311,20 @@
             }
             window.webGroupsManager.externalLibraryFactory.onCaptionTextBoundsChanged(targetType, targetId, bounds);
         };
+        WebGroupsManagerDecorator.prototype.startDragMove = function () {
+            if (typeof window.webGroupsManager.externalLibraryFactory.startDragMove !== "function") {
+                // Handling the case when a new library is used with an older version of io.Connect Desktop
+                return;
+            }
+            window.webGroupsManager.externalLibraryFactory.startDragMove();
+        };
+        WebGroupsManagerDecorator.prototype.showCaptionEditor = function (targetType, targetId, text) {
+            if (typeof window.webGroupsManager.externalLibraryFactory.showCaptionEditor !== "function") {
+                // Handling the case when a new library is used with an older version of io.Connect Desktop
+                return;
+            }
+            window.webGroupsManager.externalLibraryFactory.showCaptionEditor(targetType, targetId, text);
+        };
         WebGroupsManagerDecorator.prototype.onCaptionEditorVisibleChanged = function (targetType, targetId, visible) {
             if (typeof window.webGroupsManager.externalLibraryFactory.onCaptionEditorVisibleChanged !== "function") {
                 // Handling the case when a new library is used with an older version of io.Connect Desktop
@@ -326,6 +352,15 @@
         WebGroupsManagerDecorator.prototype.requestCommitCaptionEditing = function (targetType, targetId) {
             this.registry.execute(targetType + "-" + targetId);
         };
+        WebGroupsManagerDecorator.prototype.updateTabHeaderStyles = function (styles) {
+            window.webGroupsManager.externalLibraryFactory.updateTabHeaderStyles(styles);
+        };
+        WebGroupsManagerDecorator.prototype.updateTabMoveAreaStyles = function (styles) {
+            window.webGroupsManager.externalLibraryFactory.updateTabMoveAreaStyles(styles);
+        };
+        WebGroupsManagerDecorator.prototype.updateFrameStyles = function (styles) {
+            window.webGroupsManager.externalLibraryFactory.updateFrameStyles(styles);
+        };
         WebGroupsManagerDecorator.prototype.selectTab = function (windowId) {
             window.webGroupsManager.externalLibraryFactory.selectTab(windowId);
         };
@@ -356,13 +391,35 @@
 
     var BaseButton = function (_a) {
         var outerElement = _a.outerElement, innerElement = _a.innerElement;
-        return React__default["default"].createElement("li", __assign({}, outerElement, { className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
+        return React__default["default"].createElement("li", __assign({}, outerElement, { "data-testid": "outer-element", className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
             React__default["default"].createElement("div", __assign({}, innerElement)));
     };
 
-    var CloseButton = function (_a) {
-        var onClick = _a.onClick, tooltip = _a.tooltip;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-close" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-close", title: tooltip, onClick: onClick } });
+    function getStandardButtonInnerClassName(buttonId, target) {
+        var classNames = "t42-standard-button t42-standard-button-" + buttonId;
+        if (target && target !== StandardButtonTarget.Default) {
+            classNames = classNames.concat(" t42-standard-button-" + target + "-" + buttonId);
+        }
+        return classNames;
+    }
+    function getStandardButtonOuterClassName(buttonId, target, isPressed) {
+        var classNames = "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-" + buttonId;
+        if (isPressed === true) {
+            classNames = classNames.concat(" active");
+        }
+        if (target && target !== StandardButtonTarget.Default) {
+            classNames = classNames.concat(" t42-caption-bar-button-" + target + "-" + buttonId);
+        }
+        return classNames;
+    }
+
+    var StandardButton = function (_a) {
+        var buttonId = _a.buttonId, target = _a.target, isPressed = _a.isPressed, tooltip = _a.tooltip, onClick = _a.onClick;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: getStandardButtonInnerClassName(buttonId, target) }, outerElement: { className: getStandardButtonOuterClassName(buttonId, target, isPressed), title: tooltip, onClick: onClick } });
+    };
+
+    var CloseButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Close }, props));
     };
 
     /**
@@ -380,9 +437,7 @@
       constructor(color) {
         super(`Failed to parse color: "${color}"`);
       }
-
     }
-
     var ColorError$1 = ColorError;
 
     /**
@@ -390,115 +445,94 @@
      *
      * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color
      */
-
     function parseToRgba(color) {
       if (typeof color !== 'string') throw new ColorError$1(color);
       if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];
       let normalizedColor = color.trim();
       normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;
       const reducedHexMatch = reducedHexRegex.exec(normalizedColor);
-
       if (reducedHexMatch) {
         const arr = Array.from(reducedHexMatch).slice(1);
         return [...arr.slice(0, 3).map(x => parseInt(r(x, 2), 16)), parseInt(r(arr[3] || 'f', 2), 16) / 255];
       }
-
       const hexMatch = hexRegex.exec(normalizedColor);
-
       if (hexMatch) {
         const arr = Array.from(hexMatch).slice(1);
         return [...arr.slice(0, 3).map(x => parseInt(x, 16)), parseInt(arr[3] || 'ff', 16) / 255];
       }
-
       const rgbaMatch = rgbaRegex.exec(normalizedColor);
-
       if (rgbaMatch) {
         const arr = Array.from(rgbaMatch).slice(1);
         return [...arr.slice(0, 3).map(x => parseInt(x, 10)), parseFloat(arr[3] || '1')];
       }
-
       const hslaMatch = hslaRegex.exec(normalizedColor);
-
       if (hslaMatch) {
         const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
         if (guard(0, 100, s) !== s) throw new ColorError$1(color);
         if (guard(0, 100, l) !== l) throw new ColorError$1(color);
-        return [...hslToRgb(h, s, l), a || 1];
+        return [...hslToRgb(h, s, l), Number.isNaN(a) ? 1 : a];
       }
-
       throw new ColorError$1(color);
     }
-
     function hash(str) {
       let hash = 5381;
       let i = str.length;
-
       while (i) {
         hash = hash * 33 ^ str.charCodeAt(--i);
       }
+
       /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
        * integers. Since we want the results to be always positive, convert the
        * signed int to an unsigned by doing an unsigned bitshift. */
-
-
       return (hash >>> 0) % 2341;
     }
-
     const colorToInt = x => parseInt(x.replace(/_/g, ''), 36);
-
     const compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce((acc, next) => {
       const key = colorToInt(next.substring(0, 3));
-      const hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat
-      // https://github.com/ricokahler/color2k/issues/351
+      const hex = colorToInt(next.substring(3)).toString(16);
 
+      // NOTE: padStart could be used here but it breaks Node 6 compat
+      // https://github.com/ricokahler/color2k/issues/351
       let prefix = '';
-
       for (let i = 0; i < 6 - hex.length; i++) {
         prefix += '0';
       }
-
       acc[key] = `${prefix}${hex}`;
       return acc;
     }, {});
+
     /**
      * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
      */
-
     function nameToHex(color) {
       const normalizedColorName = color.toLowerCase().trim();
       const result = compressedColorMap[hash(normalizedColorName)];
       if (!result) throw new ColorError$1(color);
       return `#${result}`;
     }
-
     const r = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
-
     const reducedHexRegex = new RegExp(`^#${r('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
     const hexRegex = new RegExp(`^#${r('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
     const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
     const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
     const namedColorRegex = /^[a-z]+$/i;
-
     const roundColor = color => {
       return Math.round(color * 255);
     };
-
     const hslToRgb = (hue, saturation, lightness) => {
       let l = lightness / 100;
-
       if (saturation === 0) {
         // achromatic
         return [l, l, l].map(roundColor);
-      } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
+      }
 
+      // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
       const huePrime = (hue % 360 + 360) % 360 / 60;
       const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);
       const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
       let red = 0;
       let green = 0;
       let blue = 0;
-
       if (huePrime >= 0 && huePrime < 1) {
         red = chroma;
         green = secondComponent;
@@ -518,7 +552,6 @@
         red = chroma;
         blue = secondComponent;
       }
-
       const lightnessModification = l - chroma / 2;
       const finalRed = red + lightnessModification;
       const finalGreen = green + lightnessModification;
@@ -526,20 +559,18 @@
       return [finalRed, finalGreen, finalBlue].map(roundColor);
     };
 
+    // taken from:
     // https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js
 
     /**
      * Returns a number (float) representing the luminance of a color.
      */
-
     function getLuminance(color) {
       if (color === 'transparent') return 0;
-
       function f(x) {
         const channel = x / 255;
-        return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+        return channel <= 0.04045 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
       }
-
       const [r, g, b] = parseToRgba(color);
       return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
     }
@@ -549,7 +580,6 @@
      * readable color (i.e. the color to be place on top the input color) should be
      * black.
      */
-
     function readableColorIsBlack(color) {
       return getLuminance(color) > 0.179;
     }
@@ -560,11 +590,8 @@
             var r = rgba[0];
             var g = rgba[1];
             var b = rgba[2];
-            var displayGamma = 2.2;
-            var backgroundWeight = 0.2126 * Math.pow(r / 255.0, displayGamma) +
-                0.7152 * Math.pow(g / 255.0, displayGamma) +
-                0.0722 * Math.pow(b / 255.0, displayGamma);
-            return backgroundWeight > Math.pow(0.5, displayGamma);
+            var backgroundWeight = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+            return backgroundWeight > 0.5;
         }
         catch (_a) {
             // Fallback to other implementation
@@ -642,50 +669,40 @@
         return React__default["default"].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) {
-        var onClick = _a.onClick, tooltip = _a.tooltip;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-extract" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-extract", title: tooltip, onClick: onClick } });
+    var ExtractButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Extract }, props));
     };
 
-    var FeedbackButton = function (_a) {
-        var onClick = _a.onClick, tooltip = _a.tooltip;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-feedback" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-feedback", title: tooltip, onClick: onClick } });
+    var FeedbackButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Feedback }, props));
     };
 
-    var CloneButton = function (_a) {
-        var onClick = _a.onClick, tooltip = _a.tooltip;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-clone" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-clone", title: tooltip, onClick: onClick } });
+    var CloneButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Clone }, props));
     };
 
-    var StickyButton = function (_a) {
-        var onClick = _a.onClick, tooltip = _a.tooltip, isPressed = _a.isPressed;
-        var outerElementClassName = "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-sticky";
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-sticky" }, outerElement: { className: isPressed ? outerElementClassName + " active" : outerElementClassName, title: tooltip, onClick: onClick } });
+    var StickyButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Sticky }, props));
     };
 
-    var LockButton = function (_a) {
-        var tooltip = _a.tooltip, onClick = _a.onClick;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-lock" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-lock", title: tooltip, onClick: onClick } });
+    var LockButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Lock }, props));
     };
 
-    var MaximizeButton = function (_a) {
-        var tooltip = _a.tooltip, onClick = _a.onClick;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-maximize" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-maximize", title: tooltip, onClick: onClick } });
+    var MaximizeButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Maximize }, props));
     };
 
-    var MinimizeButton = function (_a) {
-        var onClick = _a.onClick, tooltip = _a.tooltip;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-minimize" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-minimize", title: tooltip, onClick: onClick } });
+    var MinimizeButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Minimize }, props));
     };
 
-    var RestoreButton = function (_a) {
-        var tooltip = _a.tooltip, onClick = _a.onClick;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-restore" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-restore", title: tooltip, onClick: onClick } });
+    var RestoreButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Restore }, props));
     };
 
-    var UnlockButton = function (_a) {
-        var tooltip = _a.tooltip, onClick = _a.onClick;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-unlock" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-unlock", title: tooltip, onClick: onClick } });
+    var UnlockButton = function (props) {
+        return React__default["default"].createElement(StandardButton, __assign({ buttonId: StandardButtons.Unlock }, props));
     };
 
     var CustomButton = function (_a) {
@@ -1684,11 +1701,76 @@
         }, [ref]);
     }
 
+    function useDragMove(option) {
+        var _a = (option || {}).threshold, threshold = _a === void 0 ? 3 : _a;
+        var initialPos = React.useRef(null);
+        var onMoveRef = React.useRef();
+        var onUpRef = React.useRef();
+        var cleanup = function () {
+            document.removeEventListener("mousemove", onMoveRef.current, true);
+            document.removeEventListener("mouseup", onUpRef.current, true);
+            initialPos.current = null;
+            document.body.style.pointerEvents = "auto";
+        };
+        if (!onMoveRef.current) {
+            onMoveRef.current = function (ev) {
+                if (!initialPos.current)
+                    return;
+                var dx = ev.pageX - initialPos.current.x;
+                var dy = ev.pageY - initialPos.current.y;
+                if (Math.abs(dx) >= threshold || Math.abs(dy) >= threshold) {
+                    document.body.style.pointerEvents = "none";
+                    cleanup();
+                    webGroupsManager.startDragMove();
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+            };
+        }
+        if (!onUpRef.current) {
+            onUpRef.current = function (ev) {
+                cleanup();
+                ev.stopPropagation();
+                ev.preventDefault();
+            };
+        }
+        var startDrag = function (ev) {
+            if (ev.button !== 0)
+                return;
+            initialPos.current = { x: ev.pageX, y: ev.pageY };
+            document.addEventListener("mousemove", onMoveRef.current, true);
+            document.addEventListener("mouseup", onUpRef.current, true);
+            ev.stopPropagation();
+            ev.preventDefault();
+        };
+        React.useEffect(function () {
+            return function () {
+                if (onMoveRef.current)
+                    document.removeEventListener("mousemove", onMoveRef.current, true);
+                if (onUpRef.current)
+                    document.removeEventListener("mouseup", onUpRef.current, true);
+                document.body.style.pointerEvents = "auto";
+                initialPos.current = null;
+            };
+        }, []);
+        return { startDrag: startDrag };
+    }
+
     var FlatCaption = function (_a) {
-        var caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
+        var showCaptionEditor = _a.showCaptionEditor, caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
         var ref = React.useRef(null);
         useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
-        return React__default["default"].createElement("div", { ref: ref, className: "t42-caption t42-title t42-frame-caption-bar-element" }, caption);
+        var startDrag = useDragMove().startDrag;
+        var handleMouseDown = function (e) {
+            if (e.button !== 0)
+                return;
+            startDrag(e);
+        };
+        var handleDoubleClick = function (e) {
+            showCaptionEditor(caption);
+            e.stopPropagation();
+        };
+        return (React__default["default"].createElement("div", { ref: ref, className: "t42-caption t42-title t42-frame-caption-bar-element", onMouseDown: handleMouseDown, onDoubleClick: handleDoubleClick }, caption));
     };
 
     function useCaptionEditor(ref, options) {
@@ -1848,11 +1930,11 @@
     };
 
     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"]);
+        var moveAreaId = _a.moveAreaId, caption = _a.caption, showCaptionEditor = _a.showCaptionEditor, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "caption", "showCaptionEditor", "channels", "captionEditor", "notifyCaptionBoundsChanged"]);
         return (React__default["default"].createElement("div", { className: "t42-react-caption-bar" },
             (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(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React__default["default"].createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React__default["default"].createElement(FlatCaption, { showCaptionEditor: showCaptionEditor, notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
             React__default["default"].createElement(FlatButtons, __assign({}, rest))));
     };
 
@@ -1872,10 +1954,20 @@
     };
 
     var GroupCaption = function (_a) {
-        var caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
+        var showCaptionEditor = _a.showCaptionEditor, caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
         var ref = React.useRef(null);
         useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
-        return React__default["default"].createElement("div", { ref: ref, className: "t42-caption t42-title t42-group-caption-bar-element" }, caption);
+        var startDrag = useDragMove().startDrag;
+        var handleMouseDown = function (e) {
+            if (e.button !== 0)
+                return;
+            startDrag(e);
+        };
+        var handleDoubleClick = function (e) {
+            showCaptionEditor(caption);
+            e.stopPropagation();
+        };
+        return (React__default["default"].createElement("div", { ref: ref, onMouseDown: handleMouseDown, onDoubleClick: handleDoubleClick, className: "t42-caption t42-title t42-group-caption-bar-element" }, caption));
     };
 
     var GroupCaptionEditor = function (props) {
@@ -1883,11 +1975,11 @@
     };
 
     var GroupCaptionBar = function (_a) {
-        var moveAreaId = _a.moveAreaId; _a.targetType; var targetId = _a.targetId, caption = _a.caption, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "targetType", "targetId", "caption", "captionEditor", "notifyCaptionBoundsChanged"]);
+        var moveAreaId = _a.moveAreaId, showCaptionEditor = _a.showCaptionEditor; _a.targetType; var targetId = _a.targetId, caption = _a.caption, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "showCaptionEditor", "targetType", "targetId", "caption", "captionEditor", "notifyCaptionBoundsChanged"]);
         return React__default["default"].createElement("div", { className: "t42-react-caption-bar" },
             React__default["default"].createElement(GroupMoveArea, { moveAreaId: moveAreaId }, (captionEditor === null || captionEditor === void 0 ? void 0 : captionEditor.show) ?
                 React__default["default"].createElement(GroupCaptionEditor, __assign({}, captionEditor, { groupId: targetId, caption: captionEditor.text })) :
-                React__default["default"].createElement(GroupCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
+                React__default["default"].createElement(GroupCaption, { showCaptionEditor: showCaptionEditor, notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
             React__default["default"].createElement(GroupButtons, __assign({}, rest)));
     };
 
@@ -1946,10 +2038,10 @@
 
     var OverflowButton = function (_a) {
         var onClick = _a.onClick, tooltip = _a.tooltip;
-        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-overflow" }, outerElement: {
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: getStandardButtonInnerClassName(StandardButtons.Overflow) }, outerElement: {
                 onMouseDown: function (e) { return e.stopPropagation(); },
                 onPointerDown: function (e) { return e.stopPropagation(); },
-                className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-overflow", title: tooltip,
+                className: getStandardButtonOuterClassName(StandardButtons.Overflow), title: tooltip,
                 onClick: onClick
             } });
     };
@@ -2149,6 +2241,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         GroupWrapper.prototype.componentDidMount = function () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             var componentFactory = {
                 createGroupCaptionBar: this.props.onCreateGroupCaptionBarRequested,
                 updateGroupCaptionBar: this.props.onUpdateGroupCaptionBarRequested,
@@ -2198,6 +2291,21 @@
                 hideLoadingAnimation: this.props.onHideLoadingAnimationRequested,
             };
             webGroupsManager.init(undefined, componentFactory);
+            webGroupsManager.updateTabHeaderStyles((_c = (_b = (_a = this.props.styles) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : {});
+            webGroupsManager.updateTabMoveAreaStyles((_f = (_e = (_d = this.props.styles) === null || _d === void 0 ? void 0 : _d.tabs) === null || _e === void 0 ? void 0 : _e.moveArea) !== null && _f !== void 0 ? _f : {});
+            webGroupsManager.updateFrameStyles((_j = (_h = (_g = this.props.styles) === null || _g === void 0 ? void 0 : _g.frame) === null || _h === void 0 ? void 0 : _h.element) !== null && _j !== void 0 ? _j : {});
+        };
+        GroupWrapper.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            if (((_b = (_a = this.props.styles) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.header) !== ((_d = (_c = prevProps.styles) === null || _c === void 0 ? void 0 : _c.tabs) === null || _d === void 0 ? void 0 : _d.header)) {
+                webGroupsManager.updateTabHeaderStyles((_g = (_f = (_e = this.props.styles) === null || _e === void 0 ? void 0 : _e.tabs) === null || _f === void 0 ? void 0 : _f.header) !== null && _g !== void 0 ? _g : {});
+            }
+            if (((_j = (_h = this.props.styles) === null || _h === void 0 ? void 0 : _h.tabs) === null || _j === void 0 ? void 0 : _j.moveArea) !== ((_l = (_k = prevProps.styles) === null || _k === void 0 ? void 0 : _k.tabs) === null || _l === void 0 ? void 0 : _l.moveArea)) {
+                webGroupsManager.updateTabMoveAreaStyles((_p = (_o = (_m = this.props.styles) === null || _m === void 0 ? void 0 : _m.tabs) === null || _o === void 0 ? void 0 : _o.moveArea) !== null && _p !== void 0 ? _p : {});
+            }
+            if (((_r = (_q = this.props.styles) === null || _q === void 0 ? void 0 : _q.frame) === null || _r === void 0 ? void 0 : _r.element) !== ((_t = (_s = prevProps.styles) === null || _s === void 0 ? void 0 : _s.frame) === null || _t === void 0 ? void 0 : _t.element)) {
+                webGroupsManager.updateFrameStyles((_w = (_v = (_u = this.props.styles) === null || _u === void 0 ? void 0 : _u.frame) === null || _v === void 0 ? void 0 : _v.element) !== null && _w !== void 0 ? _w : {});
+            }
         };
         GroupWrapper.prototype.componentWillUnmount = function () {
             // TODO
@@ -2915,7 +3023,7 @@
 
     var GroupElementCreationWrapper = function (_a) {
         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;
-        var components = _a.components;
+        var components = _a.components, styles = _a.styles;
         var state = shim.useSyncExternalStore(webGroupsStore.subscribe, webGroupsStore.getSnapshot);
         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;
         var renderGroupCaptionBar = function () {
@@ -2925,6 +3033,9 @@
                 return;
             }
             var _b = state.groupCaptionBar, parentElement = _b.parentElement, options = __rest(_b, ["parentElement"]);
+            var showCaptionEditor = function (text) {
+                webGroupsManager.showCaptionEditor(TargetType.Group, options.targetId, text);
+            };
             var minimize = __assign({ onClick: function () {
                     webGroupsManager.onMinimizeButtonClick(TargetType.Group, options.targetId);
                 } }, options.minimize);
@@ -2948,7 +3059,7 @@
                 } });
             var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Group, options.targetId, bounds); };
             return (React__default["default"].createElement(Portal, { parentElement: parentElement },
-                React__default["default"].createElement(GroupCaptionBarCustomElement, __assign({}, options, { minimize: minimize, maximize: maximize, restore: restore, close: close, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged }))));
+                React__default["default"].createElement(GroupCaptionBarCustomElement, __assign({}, options, { minimize: minimize, maximize: maximize, restore: restore, close: close, captionEditor: captionEditor, showCaptionEditor: showCaptionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged }))));
         };
         var renderGroupOverlay = function () {
             var _a;
@@ -2969,6 +3080,9 @@
                     return;
                 }
                 var parentElement = fcb.parentElement, options = __rest(fcb, ["parentElement"]);
+                var showCaptionEditor = function (text) {
+                    webGroupsManager.showCaptionEditor(TargetType.Frame, options.targetId, text);
+                };
                 var feedback = __assign({ onClick: function () {
                         webGroupsManager.onFeedbackButtonClick(TargetType.Frame, options.targetId);
                     } }, options.feedback);
@@ -3037,7 +3151,7 @@
                     } });
                 var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Frame, options.targetId, bounds); };
                 return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
-                    React__default["default"].createElement(FrameCaptionBarCustomElement, __assign({}, options, { feedback: feedback, clone: clone, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, channels: channels, customButtons: customButtonsProps, frameId: options.targetId, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged })));
+                    React__default["default"].createElement(FrameCaptionBarCustomElement, __assign({}, options, { feedback: feedback, clone: clone, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, channels: channels, customButtons: customButtonsProps, frameId: options.targetId, captionEditor: captionEditor, showCaptionEditor: showCaptionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged })));
             });
         };
         var renderFrameWindowOverlay = function () {
@@ -3345,7 +3459,7 @@
             renderTabOverflowPopups(),
             renderBelowTabs(),
             renderHtmlButtons(),
-            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 }));
+            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, styles: styles }));
     };
 
     function useIOConnectWindow(windowId) {
@@ -3490,6 +3604,7 @@
     exports.useCommitFlatCaptionEditingRequested = useCommitFlatCaptionEditingRequested;
     exports.useCommitGroupCaptionEditingRequested = useCommitGroupCaptionEditingRequested;
     exports.useCommitTabCaptionEditingRequested = useCommitTabCaptionEditingRequested;
+    exports.useDragMove = useDragMove;
     exports.useEditableCaption = useEditableCaption;
     exports.useGroupComponentVisibility = useGroupComponentVisibility;
     exports.useIOConnectWindow = useIOConnectWindow;