@interopio/groups-ui-react 2.7.1 → 3.0.0

package/dist/cjs/index.js

@@ -68,6 +68,11 @@
         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";
@@ -306,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
@@ -376,9 +395,31 @@
             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));
     };
 
     /**
@@ -412,7 +453,7 @@
       const reducedHexMatch = reducedHexRegex.exec(normalizedColor);
       if (reducedHexMatch) {
         const arr = Array.from(reducedHexMatch).slice(1);
-        return [...arr.slice(0, 3).map(x => parseInt(r$1(x, 2), 16)), parseInt(r$1(arr[3] || 'f', 2), 16) / 255];
+        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) {
@@ -469,10 +510,10 @@
       if (!result) throw new ColorError$1(color);
       return `#${result}`;
     }
-    const r$1 = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
-    const reducedHexRegex = new RegExp(`^#${r$1('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
-    const hexRegex = new RegExp(`^#${r$1('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
-    const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r$1(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
+    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 => {
@@ -549,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
@@ -631,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) {
@@ -1673,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) {
@@ -1837,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))));
     };
 
@@ -1861,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) {
@@ -1872,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)));
     };
 
@@ -1935,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
             } });
     };
@@ -1977,246 +2080,156 @@
     	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
     }
 
-    function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=React__default["default"].useState,m=React__default["default"].useEffect,n=React__default["default"].useLayoutEffect,p=React__default["default"].useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
-    function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;var useSyncExternalStore=void 0!==React__default["default"].useSyncExternalStore?React__default["default"].useSyncExternalStore:u;
-
-    var useSyncExternalStoreShim_production_min = {
-    	useSyncExternalStore: useSyncExternalStore
-    };
-
-    var useSyncExternalStoreShim_development = createCommonjsModule(function (module, exports) {
-
-    if (process.env.NODE_ENV !== "production") {
-      (function() {
-
-    /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-    if (
-      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-        'function'
-    ) {
-      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-    }
-              var React = React__default["default"];
-
-    var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-    function error(format) {
-      {
-        {
-          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-            args[_key2 - 1] = arguments[_key2];
-          }
-
-          printWarning('error', format, args);
-        }
-      }
-    }
-
-    function printWarning(level, format, args) {
-      // When changing this logic, you might want to also
-      // update consoleWithStackDev.www.js as well.
-      {
-        var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-        var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-        if (stack !== '') {
-          format += '%s';
-          args = args.concat([stack]);
-        } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-        var argsWithFormat = args.map(function (item) {
-          return String(item);
-        }); // Careful: RN currently depends on this prefix
-
-        argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-        // breaks IE9: https://github.com/facebook/react/issues/13610
-        // eslint-disable-next-line react-internal/no-production-logging
-
-        Function.prototype.apply.call(console[level], console, argsWithFormat);
-      }
-    }
-
-    /**
-     * inlined Object.is polyfill to avoid requiring consumers ship their own
-     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-     */
     function is(x, y) {
-      return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-      ;
+      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
     }
-
-    var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-    // dispatch for CommonJS interop named imports.
-
-    var useState = React.useState,
-        useEffect = React.useEffect,
-        useLayoutEffect = React.useLayoutEffect,
-        useDebugValue = React.useDebugValue;
-    var didWarnOld18Alpha = false;
-    var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
-    // because of a very particular set of implementation details and assumptions
-    // -- change any one of them and it will break. The most important assumption
-    // is that updates are always synchronous, because concurrent rendering is
-    // only available in versions of React that also have a built-in
-    // useSyncExternalStore API. And we only use this shim when the built-in API
-    // does not exist.
-    //
-    // Do not assume that the clever hacks used by this hook also work in general.
-    // The point of this shim is to replace the need for hacks by other libraries.
-
-    function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-    // React do not expose a way to check if we're hydrating. So users of the shim
-    // will need to track that themselves and return the correct value
-    // from `getSnapshot`.
-    getServerSnapshot) {
-      {
-        if (!didWarnOld18Alpha) {
-          if (React.startTransition !== undefined) {
-            didWarnOld18Alpha = true;
-
-            error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
-          }
-        }
-      } // Read the current snapshot from the store on every render. Again, this
-      // breaks the rules of React, and only works here because of specific
-      // implementation details, most importantly that updates are
-      // always synchronous.
-
-
-      var value = getSnapshot();
-
-      {
-        if (!didWarnUncachedGetSnapshot) {
-          var cachedValue = getSnapshot();
-
-          if (!objectIs(value, cachedValue)) {
-            error('The result of getSnapshot should be cached to avoid an infinite loop');
-
-            didWarnUncachedGetSnapshot = true;
-          }
-        }
-      } // Because updates are synchronous, we don't queue them. Instead we force a
-      // re-render whenever the subscribed state changes by updating an some
-      // arbitrary useState hook. Then, during render, we call getSnapshot to read
-      // the current value.
-      //
-      // Because we don't actually use the state returned by the useState hook, we
-      // can save a bit of memory by storing other stuff in that slot.
-      //
-      // To implement the early bailout, we need to track some things on a mutable
-      // object. Usually, we would put that in a useRef hook, but we can stash it in
-      // our useState hook instead.
-      //
-      // To force a re-render, we call forceUpdate({inst}). That works because the
-      // new object always fails an equality check.
-
-
-      var _useState = useState({
-        inst: {
-          value: value,
-          getSnapshot: getSnapshot
-        }
-      }),
-          inst = _useState[0].inst,
-          forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
-      // in the layout phase so we can access it during the tearing check that
-      // happens on subscribe.
-
-
-      useLayoutEffect(function () {
-        inst.value = value;
-        inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
-        // commit phase if there was an interleaved mutation. In concurrent mode
-        // this can happen all the time, but even in synchronous mode, an earlier
-        // effect may have mutated the store.
-
-        if (checkIfSnapshotChanged(inst)) {
-          // Force a re-render.
-          forceUpdate({
-            inst: inst
-          });
-        }
-      }, [subscribe, value, getSnapshot]);
-      useEffect(function () {
-        // Check for changes right before subscribing. Subsequent changes will be
-        // detected in the subscription handler.
-        if (checkIfSnapshotChanged(inst)) {
-          // Force a re-render.
-          forceUpdate({
-            inst: inst
+    var objectIs = "function" === typeof Object.is ? Object.is : is,
+      useState = React__default["default"].useState,
+      useEffect = React__default["default"].useEffect,
+      useLayoutEffect = React__default["default"].useLayoutEffect,
+      useDebugValue = React__default["default"].useDebugValue;
+    function useSyncExternalStore$2(subscribe, getSnapshot) {
+      var value = getSnapshot(),
+        _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+        inst = _useState[0].inst,
+        forceUpdate = _useState[1];
+      useLayoutEffect(
+        function () {
+          inst.value = value;
+          inst.getSnapshot = getSnapshot;
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+        },
+        [subscribe, value, getSnapshot]
+      );
+      useEffect(
+        function () {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+          return subscribe(function () {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
           });
-        }
-
-        var handleStoreChange = function () {
-          // TODO: Because there is no cross-renderer API for batching updates, it's
-          // up to the consumer of this library to wrap their subscription event
-          // with unstable_batchedUpdates. Should we try to detect when this isn't
-          // the case and print a warning in development?
-          // The store changed. Check if the snapshot changed since the last time we
-          // read from the store.
-          if (checkIfSnapshotChanged(inst)) {
-            // Force a re-render.
-            forceUpdate({
-              inst: inst
-            });
-          }
-        }; // Subscribe to the store and return a clean-up function.
-
-
-        return subscribe(handleStoreChange);
-      }, [subscribe]);
+        },
+        [subscribe]
+      );
       useDebugValue(value);
       return value;
     }
-
     function checkIfSnapshotChanged(inst) {
       var latestGetSnapshot = inst.getSnapshot;
-      var prevValue = inst.value;
-
+      inst = inst.value;
       try {
         var nextValue = latestGetSnapshot();
-        return !objectIs(prevValue, nextValue);
+        return !objectIs(inst, nextValue);
       } catch (error) {
-        return true;
+        return !0;
       }
     }
-
-    function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
-      // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-      // React do not expose a way to check if we're hydrating. So users of the shim
-      // will need to track that themselves and return the correct value
-      // from `getSnapshot`.
+    function useSyncExternalStore$1(subscribe, getSnapshot) {
       return getSnapshot();
     }
+    var shim$1 =
+      "undefined" === typeof window ||
+      "undefined" === typeof window.document ||
+      "undefined" === typeof window.document.createElement
+        ? useSyncExternalStore$1
+        : useSyncExternalStore$2;
+    var useSyncExternalStore =
+      void 0 !== React__default["default"].useSyncExternalStore ? React__default["default"].useSyncExternalStore : shim$1;
+
+    var useSyncExternalStoreShim_production = {
+    	useSyncExternalStore: useSyncExternalStore
+    };
 
-    var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
-
-    var isServerEnvironment = !canUseDOM;
-
-    var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-    var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
-
-    exports.useSyncExternalStore = useSyncExternalStore$2;
-              /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-    if (
-      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-        'function'
-    ) {
-      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-    }
-            
+    var useSyncExternalStoreShim_development = createCommonjsModule(function (module, exports) {
+    "production" !== process.env.NODE_ENV &&
+      (function () {
+        function is(x, y) {
+          return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+        }
+        function useSyncExternalStore$2(subscribe, getSnapshot) {
+          didWarnOld18Alpha ||
+            void 0 === React.startTransition ||
+            ((didWarnOld18Alpha = !0),
+            console.error(
+              "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+            ));
+          var value = getSnapshot();
+          if (!didWarnUncachedGetSnapshot) {
+            var cachedValue = getSnapshot();
+            objectIs(value, cachedValue) ||
+              (console.error(
+                "The result of getSnapshot should be cached to avoid an infinite loop"
+              ),
+              (didWarnUncachedGetSnapshot = !0));
+          }
+          cachedValue = useState({
+            inst: { value: value, getSnapshot: getSnapshot }
+          });
+          var inst = cachedValue[0].inst,
+            forceUpdate = cachedValue[1];
+          useLayoutEffect(
+            function () {
+              inst.value = value;
+              inst.getSnapshot = getSnapshot;
+              checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+            },
+            [subscribe, value, getSnapshot]
+          );
+          useEffect(
+            function () {
+              checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+              return subscribe(function () {
+                checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+              });
+            },
+            [subscribe]
+          );
+          useDebugValue(value);
+          return value;
+        }
+        function checkIfSnapshotChanged(inst) {
+          var latestGetSnapshot = inst.getSnapshot;
+          inst = inst.value;
+          try {
+            var nextValue = latestGetSnapshot();
+            return !objectIs(inst, nextValue);
+          } catch (error) {
+            return !0;
+          }
+        }
+        function useSyncExternalStore$1(subscribe, getSnapshot) {
+          return getSnapshot();
+        }
+        "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+          "function" ===
+            typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
+          __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+        var React = React__default["default"],
+          objectIs = "function" === typeof Object.is ? Object.is : is,
+          useState = React.useState,
+          useEffect = React.useEffect,
+          useLayoutEffect = React.useLayoutEffect,
+          useDebugValue = React.useDebugValue,
+          didWarnOld18Alpha = !1,
+          didWarnUncachedGetSnapshot = !1,
+          shim =
+            "undefined" === typeof window ||
+            "undefined" === typeof window.document ||
+            "undefined" === typeof window.document.createElement
+              ? useSyncExternalStore$1
+              : useSyncExternalStore$2;
+        exports.useSyncExternalStore =
+          void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+        "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+          "function" ===
+            typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+          __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
       })();
-    }
     });
 
     var shim = createCommonjsModule(function (module) {
 
     if (process.env.NODE_ENV === 'production') {
-      module.exports = useSyncExternalStoreShim_production_min;
+      module.exports = useSyncExternalStoreShim_production;
     } else {
       module.exports = useSyncExternalStoreShim_development;
     }
@@ -3020,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);
@@ -3043,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;
@@ -3064,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);
@@ -3132,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 () {
@@ -3585,6 +3604,7 @@
     exports.useCommitFlatCaptionEditingRequested = useCommitFlatCaptionEditingRequested;
     exports.useCommitGroupCaptionEditingRequested = useCommitGroupCaptionEditingRequested;
     exports.useCommitTabCaptionEditingRequested = useCommitTabCaptionEditingRequested;
+    exports.useDragMove = useDragMove;
     exports.useEditableCaption = useEditableCaption;
     exports.useGroupComponentVisibility = useGroupComponentVisibility;
     exports.useIOConnectWindow = useIOConnectWindow;