@interopio/groups-ui-react 2.7.1 → 3.0.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useLayoutEffect, useState, useContext } from 'react';
+import React, { useRef, useEffect as useEffect$1, useLayoutEffect as useLayoutEffect$1, useState as useState$1, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { IOConnectContext } from '@interopio/react-hooks';
 
@@ -61,6 +61,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     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 +304,20 @@ var WebGroupsManagerDecorator = /** @class */ (function () {
         }
         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
@@ -369,9 +388,31 @@ var BaseButton = function (_a) {
         React.createElement("div", __assign({}, innerElement)));
 };
 
-var CloseButton = function (_a) {
-    var onClick = _a.onClick, tooltip = _a.tooltip;
-    return React.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.createElement(BaseButton, { innerElement: { className: getStandardButtonInnerClassName(buttonId, target) }, outerElement: { className: getStandardButtonOuterClassName(buttonId, target, isPressed), title: tooltip, onClick: onClick } });
+};
+
+var CloseButton = function (props) {
+    return React.createElement(StandardButton, __assign({ buttonId: StandardButtons.Close }, props));
 };
 
 /**
@@ -405,7 +446,7 @@ function parseToRgba(color) {
   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) {
@@ -462,10 +503,10 @@ function nameToHex(color) {
   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 => {
@@ -542,11 +583,8 @@ function IsBlackReadable(color) {
         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
@@ -596,7 +634,7 @@ var BaseChannelSelector = function (_a) {
             height: bounds.height,
         });
     };
-    useEffect(function () {
+    useEffect$1(function () {
         var handler = function (e) {
             e.stopPropagation();
         };
@@ -624,50 +662,40 @@ var FlatChannelSelector = function (_a) {
     return React.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.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Extract }, props));
 };
 
-var FeedbackButton = function (_a) {
-    var onClick = _a.onClick, tooltip = _a.tooltip;
-    return React.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Feedback }, props));
 };
 
-var CloneButton = function (_a) {
-    var onClick = _a.onClick, tooltip = _a.tooltip;
-    return React.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.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.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Sticky }, props));
 };
 
-var LockButton = function (_a) {
-    var tooltip = _a.tooltip, onClick = _a.onClick;
-    return React.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Lock }, props));
 };
 
-var MaximizeButton = function (_a) {
-    var tooltip = _a.tooltip, onClick = _a.onClick;
-    return React.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Maximize }, props));
 };
 
-var MinimizeButton = function (_a) {
-    var onClick = _a.onClick, tooltip = _a.tooltip;
-    return React.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Minimize }, props));
 };
 
-var RestoreButton = function (_a) {
-    var tooltip = _a.tooltip, onClick = _a.onClick;
-    return React.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Restore }, props));
 };
 
-var UnlockButton = function (_a) {
-    var tooltip = _a.tooltip, onClick = _a.onClick;
-    return React.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.createElement(StandardButton, __assign({ buttonId: StandardButtons.Unlock }, props));
 };
 
 var CustomButton = function (_a) {
@@ -1647,7 +1675,7 @@ var index = (function () {
 })();
 
 function useEditableCaption(ref, options) {
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         if (!ref.current) {
             return;
         }
@@ -1666,15 +1694,80 @@ function useEditableCaption(ref, options) {
     }, [ref]);
 }
 
+function useDragMove(option) {
+    var _a = (option || {}).threshold, threshold = _a === void 0 ? 3 : _a;
+    var initialPos = useRef(null);
+    var onMoveRef = useRef();
+    var onUpRef = 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();
+    };
+    useEffect$1(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 = useRef(null);
     useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
-    return React.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.createElement("div", { ref: ref, className: "t42-caption t42-title t42-frame-caption-bar-element", onMouseDown: handleMouseDown, onDoubleClick: handleDoubleClick }, caption));
 };
 
 function useCaptionEditor(ref, options) {
-    useEffect(function () {
+    useEffect$1(function () {
         if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
             return;
         }
@@ -1696,7 +1789,7 @@ function useCaptionEditor(ref, options) {
 }
 
 function useCommitEditingRequested(targetType, targetId, text) {
-    useEffect(function () {
+    useEffect$1(function () {
         var unsub = webGroupsManager.onCommitCaptionEditingRequested(targetType, targetId, function () {
             webGroupsManager.commitCaptionEditing(targetType, targetId, text);
         });
@@ -1708,8 +1801,8 @@ function useCommitEditingRequested(targetType, targetId, text) {
 
 var CaptionEditor = function (_a) {
     var className = _a.className, commitChanges = _a.commitChanges, hideEditor = _a.hideEditor, notifyBoundsChanged = _a.notifyBoundsChanged, caption = _a.caption, notifyEditorVisibilityChanged = _a.notifyEditorVisibilityChanged, targetType = _a.targetType, targetId = _a.targetId;
-    var _b = useState(caption), captionInEditor = _b[0], setCaptionInEditor = _b[1];
-    var _c = useState(0), inputWidth = _c[0], setInputWidth = _c[1];
+    var _b = useState$1(caption), captionInEditor = _b[0], setCaptionInEditor = _b[1];
+    var _c = useState$1(0), inputWidth = _c[0], setInputWidth = _c[1];
     var ref = useRef(null);
     var measurementRef = useRef(null);
     var onBlur = function () {
@@ -1734,7 +1827,7 @@ var CaptionEditor = function (_a) {
     };
     useCaptionEditor(ref, { notifyBoundsChanged: notifyBoundsChanged, notifyEditorVisibilityChanged: notifyEditorVisibilityChanged });
     useCommitEditingRequested(targetType, targetId, captionInEditor);
-    useEffect(function () {
+    useEffect$1(function () {
         if (!ref.current) {
             return;
         }
@@ -1754,7 +1847,7 @@ var CaptionEditor = function (_a) {
             element === null || element === void 0 ? void 0 : element.removeEventListener("mousedown", onMouseDown);
         };
     }, [ref]);
-    useEffect(function () {
+    useEffect$1(function () {
         if (!measurementRef.current) {
             return;
         }
@@ -1794,7 +1887,7 @@ var BaseMultiChannelSelector = function (_a) {
             height: bounds.height,
         });
     };
-    useEffect(function () {
+    useEffect$1(function () {
         var _a;
         if (showBaseChannelSelector) {
             return;
@@ -1830,11 +1923,11 @@ var FlatMultiChannelSelector = function (_a) {
 };
 
 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.createElement("div", { className: "t42-react-caption-bar" },
         (channels === null || channels === void 0 ? void 0 : channels.visible) && channels.channelsMode !== "multi" && React.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.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.createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React.createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React.createElement(FlatCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
+        React.createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React.createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React.createElement(FlatCaption, { showCaptionEditor: showCaptionEditor, notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
         React.createElement(FlatButtons, __assign({}, rest))));
 };
 
@@ -1854,10 +1947,20 @@ var GroupButtons = function (_a) {
 };
 
 var GroupCaption = function (_a) {
-    var caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
+    var showCaptionEditor = _a.showCaptionEditor, caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
     var ref = useRef(null);
     useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
-    return React.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.createElement("div", { ref: ref, onMouseDown: handleMouseDown, onDoubleClick: handleDoubleClick, className: "t42-caption t42-title t42-group-caption-bar-element" }, caption));
 };
 
 var GroupCaptionEditor = function (props) {
@@ -1865,11 +1968,11 @@ var GroupCaptionEditor = function (props) {
 };
 
 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.createElement("div", { className: "t42-react-caption-bar" },
         React.createElement(GroupMoveArea, { moveAreaId: moveAreaId }, (captionEditor === null || captionEditor === void 0 ? void 0 : captionEditor.show) ?
             React.createElement(GroupCaptionEditor, __assign({}, captionEditor, { groupId: targetId, caption: captionEditor.text })) :
-            React.createElement(GroupCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
+            React.createElement(GroupCaption, { showCaptionEditor: showCaptionEditor, notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
         React.createElement(GroupButtons, __assign({}, rest)));
 };
 
@@ -1905,7 +2008,7 @@ var TabCloseButton = function (_a) {
     var normalContentClassName = "t42-tab-close-button-content";
     var selectedContentClassName = "t42-tab-close-button-content t42-selected-tab-close-button-content";
     var ref = useRef(null);
-    useEffect(function () {
+    useEffect$1(function () {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", function (e) {
             e.stopPropagation();
@@ -1928,10 +2031,10 @@ var Tab = function (_a) {
 
 var OverflowButton = function (_a) {
     var onClick = _a.onClick, tooltip = _a.tooltip;
-    return React.createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-overflow" }, outerElement: {
+    return React.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
         } });
 };
@@ -1970,246 +2073,156 @@ function commonjsRequire () {
 	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.useState,m=React.useEffect,n=React.useLayoutEffect,p=React.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.useSyncExternalStore?React.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$1 = React;
-
-var ReactSharedInternals = React$1.__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$1.useState,
-    useEffect = React$1.useEffect,
-    useLayoutEffect = React$1.useLayoutEffect,
-    useDebugValue = React$1.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$1.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
+var objectIs = "function" === typeof Object.is ? Object.is : is,
+  useState = React.useState,
+  useEffect = React.useEffect,
+  useLayoutEffect = React.useLayoutEffect,
+  useDebugValue = React.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 });
       });
-    }
-  }, [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 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.useSyncExternalStore ? React.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$1.useSyncExternalStore !== undefined ? React$1.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$1.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$1 = React,
+      objectIs = "function" === typeof Object.is ? Object.is : is,
+      useState = React$1.useState,
+      useEffect = React$1.useEffect,
+      useLayoutEffect = React$1.useLayoutEffect,
+      useDebugValue = React$1.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$1.useSyncExternalStore ? React$1.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;
 }
@@ -3013,6 +3026,9 @@ var GroupElementCreationWrapper = function (_a) {
             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);
@@ -3036,7 +3052,7 @@ var GroupElementCreationWrapper = function (_a) {
             } });
         var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Group, options.targetId, bounds); };
         return (React.createElement(Portal, { parentElement: parentElement },
-            React.createElement(GroupCaptionBarCustomElement, __assign({}, options, { minimize: minimize, maximize: maximize, restore: restore, close: close, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged }))));
+            React.createElement(GroupCaptionBarCustomElement, __assign({}, options, { minimize: minimize, maximize: maximize, restore: restore, close: close, captionEditor: captionEditor, showCaptionEditor: showCaptionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged }))));
     };
     var renderGroupOverlay = function () {
         var _a;
@@ -3057,6 +3073,9 @@ var GroupElementCreationWrapper = function (_a) {
                 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);
@@ -3125,7 +3144,7 @@ var GroupElementCreationWrapper = function (_a) {
                 } });
             var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Frame, options.targetId, bounds); };
             return React.createElement(Portal, { key: options.targetId, parentElement: parentElement },
-                React.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.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 () {
@@ -3437,9 +3456,9 @@ var GroupElementCreationWrapper = function (_a) {
 };
 
 function useIOConnectWindow(windowId) {
-    var _a = useState(undefined), IOConnectWindow = _a[0], setIOConnectWindow = _a[1];
+    var _a = useState$1(undefined), IOConnectWindow = _a[0], setIOConnectWindow = _a[1];
     var io = window.io || useContext(IOConnectContext);
-    useEffect(function () {
+    useEffect$1(function () {
         var unsub = io.windows.onWindowAdded(function (w) {
             if (w.id === windowId) {
                 setIOConnectWindow(w);
@@ -3531,5 +3550,5 @@ var onCommitGroupCaptionEditingRequested = function (targetId, cb) { return webG
 var onCommitFlatCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Frame, targetId, cb); };
 var onCommitTabCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Tab, targetId, cb); };
 
-export { CloneButton, CloseButton, CustomButton, ExtractButton, FeedbackButton, FlatButtons, FlatCaption, FlatCaptionBar, FlatCaptionEditor, FlatChannelSelector, FlatMoveArea, FlatMultiChannelSelector, FrameLoadingAnimation, GroupButtons, GroupCaption, GroupCaptionBar, GroupCaptionEditor, GroupMoveArea, HtmlButtons, LockButton, MaximizeButton, MinimizeButton, OverflowButton, RestoreButton, StickyButton, Tab, TabCaption, TabCaptionEditor, TabChannelSelector, TabCloseButton, TabHeaderButtons, TabMultiChannelSelector, TabOverflowPopup, UnlockButton, GroupElementCreationWrapper as default, getGroupId, onCommitFlatCaptionEditingRequested, onCommitGroupCaptionEditingRequested, onCommitTabCaptionEditingRequested, openTabOverflowPopup, requestFrameFocus, requestGroupFocus, requestPageFocus, useCaptionEditor, useCommitFlatCaptionEditingRequested, useCommitGroupCaptionEditingRequested, useCommitTabCaptionEditingRequested, useEditableCaption, useGroupComponentVisibility, useIOConnectWindow, waitForWindow };
+export { CloneButton, CloseButton, CustomButton, ExtractButton, FeedbackButton, FlatButtons, FlatCaption, FlatCaptionBar, FlatCaptionEditor, FlatChannelSelector, FlatMoveArea, FlatMultiChannelSelector, FrameLoadingAnimation, GroupButtons, GroupCaption, GroupCaptionBar, GroupCaptionEditor, GroupMoveArea, HtmlButtons, LockButton, MaximizeButton, MinimizeButton, OverflowButton, RestoreButton, StickyButton, Tab, TabCaption, TabCaptionEditor, TabChannelSelector, TabCloseButton, TabHeaderButtons, TabMultiChannelSelector, TabOverflowPopup, UnlockButton, GroupElementCreationWrapper as default, getGroupId, onCommitFlatCaptionEditingRequested, onCommitGroupCaptionEditingRequested, onCommitTabCaptionEditingRequested, openTabOverflowPopup, requestFrameFocus, requestGroupFocus, requestPageFocus, useCaptionEditor, useCommitFlatCaptionEditingRequested, useCommitGroupCaptionEditingRequested, useCommitTabCaptionEditingRequested, useDragMove, useEditableCaption, useGroupComponentVisibility, useIOConnectWindow, waitForWindow };
 //# sourceMappingURL=index.js.map