@interopio/groups-ui-react 2.4.0 → 2.5.0

package/dist/styles/themes.css

@@ -0,0 +1,155 @@
+:root {
+    --bs-blue: #1c89ea;
+    --bs-indigo: #6610f2;
+    --bs-purple: #6f42c1;
+    --bs-pink: #fd397a;
+    --bs-red: #ff511f;
+    --bs-orange: #fd7e14;
+    --bs-yellow: #f9a825;
+    --bs-green: #43a047;
+    --bs-teal: #616161;
+    --bs-cyan: #469eb9;
+    --bs-white: #fff;
+    --bs-gray: #6c757d;
+    --bs-gray-dark: #343a40;
+    --bs-gray-100: #f8f9fa;
+    --bs-gray-200: #e9ecef;
+    --bs-gray-300: #dee2e6;
+    --bs-gray-400: #ced4da;
+    --bs-gray-500: #adb5bd;
+    --bs-gray-600: #6c757d;
+    --bs-gray-700: #495057;
+    --bs-gray-800: #343a40;
+    --bs-gray-900: #212529;
+    --bs-primary: #1c89ea;
+    --bs-secondary: #616161;
+    --bs-success: #43a047;
+    --bs-info: #469eb9;
+    --bs-warning: #f9a825;
+    --bs-danger: #ff511f;
+    --bs-light: #616161;
+    --bs-dark: #616161;
+    --bs-primary-rgb: 28, 137, 234;
+    --bs-secondary-rgb: 97, 97, 97;
+    --bs-success-rgb: 67, 160, 71;
+    --bs-info-rgb: 70, 158, 185;
+    --bs-warning-rgb: 249, 168, 37;
+    --bs-danger-rgb: 255, 81, 31;
+    --bs-light-rgb: 97, 97, 97;
+    --bs-dark-rgb: 97, 97, 97;
+    --bs-white-rgb: 255, 255, 255;
+    --bs-black-rgb: 0, 0, 0;
+    --bs-body-color-rgb: 33, 37, 41;
+    --bs-body-bg-rgb: 255, 255, 255;
+    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
+        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
+    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    --bs-gradient: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.15),
+        rgba(255, 255, 255, 0)
+    );
+    --bs-body-font-family: Montserrat, Helvetica Neue, Arial, sans-serif;
+    --bs-body-font-size: 0.75rem;
+    --bs-body-font-weight: 400;
+    --bs-body-line-height: 1.5;
+    --bs-body-color: #212529;
+    --bs-body-bg: #fff;
+}
+:root {
+    --t42-font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+    --t42-font-size: 0.75rem;
+    --bs-gutter-x: 0.938rem;
+    --primary: #1c89ea;
+    --secondary: #616161;
+    --success: #43a047;
+    --info: #616161;
+    --warning: #f9a825;
+    --danger: #ff511f;
+    --light: #616161;
+    --dark: #616161;
+    --white: #ffffff;
+}
+.dark {
+    --t42-bg-light-base: 0, 0%;
+    --t42-bg-light-l: 18%;
+    --t42-bg-light: 45, 45, 45;
+    --t42-bg-mid: 37, 37, 37;
+    --t42-bg-dark: 30, 30, 30;
+    --t42-content-color-base: 0, 0%;
+    --t42-content-color: #bababa;
+    --t42-content-color-l: 73%;
+    --t42-content-color-muted: hsl(var(--t42-content-color-base), 63%);
+    --t42-content-color-disabled: hsl(var(--t42-content-color-base), 43%);
+    --t42-color-opacity-025: hsla(var(--t42-content-color-base), 100%, 0.025);
+    --t42-color-opacity-05: hsla(var(--t42-content-color-base), 100%, 0.05);
+    --t42-color-opacity-10: hsla(var(--t42-content-color-base), 100%, 0.1);
+    --t42-color-opacity-20: hsla(var(--t42-content-color-base), 100%, 0.2);
+    --t42-color-opacity-30: hsla(var(--t42-content-color-base), 100%, 0.3);
+    --t42-link-color: hsl(var(--t42-content-color-base), 100%);
+    --t42-shadow: 0 0 12px 0 hsla(var(--t42-content-color-base), 0%, 0.15);
+    --t42-border: 0.0625rem solid var(--t42-color-opacity-10);
+    --t42-logo-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzAuMSAxMTcuOCI+Cgk8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTY3LjcsNTMuMiwxMTYuOCwyLjNBNy45LDcuOSwwLDAsMCwxMTEuMiwwYTguMSw4LjEsMCwwLDAtNS43LDIuM2wtOS45LDEwYTEuOSwxLjksMCwwLDAsMCwyLjhsNyw3LjFhMi4xLDIuMSwwLDAsMCwyLjksMGw0LjMtNC4zYTEuOSwxLjksMCwwLDEsMi44LDBsMzkuNiwzOS42YTEuOSwxLjksMCwwLDEsMCwyLjhMMTEyLjYsOTkuOWExLjksMS45LDAsMCwxLTIuOCwwTDcwLjIsNjAuM2ExLjksMS45LDAsMCwxLDAtMi44bDQtNGEyLjEsMi4xLDAsMCwwLDAtMi45bC03LjEtN2ExLjksMS45LDAsMCwwLTIuOCwwbC05LjcsOS42YTgsOCwwLDAsMCwwLDExLjNsNTAuOSw1MC45YTguMiw4LjIsMCwwLDAsNS43LDIuNCw4LDgsMCwwLDAsNS42LTIuNGw1MC45LTUwLjlBNy45LDcuOSwwLDAsMCwxNjcuNyw1My4yWiIgLz4KCTxwYXRoIGZpbGw9IiMxYzg5ZWEiIGQ9Ik0yLjMsNjQuNWw1MC45LDUwLjlhOC4yLDguMiwwLDAsMCw1LjcsMi40LDgsOCwwLDAsMCw1LjYtMi40bDEwLTkuOWEyLjEsMi4xLDAsMCwwLDAtMi45bC03LjEtN2ExLjksMS45LDAsMCwwLTIuOCwwbC00LjMsNC4zYTEuOSwxLjksMCwwLDEtMi44LDBMMTcuOSw2MC4zYTEuOSwxLjksMCwwLDEsMC0yLjhMNTcuNSwxNy45YTEuOSwxLjksMCwwLDEsMi44LDBMOTkuOSw1Ny41YTEuOSwxLjksMCwwLDEsMCwyLjhsLTQsNGExLjksMS45LDAsMCwwLDAsMi44bDcsNy4xYTIuMSwyLjEsMCwwLDAsMi45LDBsOS42LTkuN2E3LjksNy45LDAsMCwwLDAtMTEuM0w2NC41LDIuM0E3LjksNy45LDAsMCwwLDU4LjksMGE4LjEsOC4xLDAsMCwwLTUuNywyLjNMMi4zLDUzLjJBOCw4LDAsMCwwLDIuMyw2NC41WiIgLz4KPC9zdmc+Cg==");
+    --t42-icon-color: var(--t42-link-color);
+    --t42-list-group-hover-bg-special: hsla(
+        var(--t42-content-color-base),
+        100%,
+        0.065
+    );
+    --backdrop-filter: blur(5px) saturate(200%);
+    --accordion-filter: invert(1) brightness(1);
+    --filter-close: invert(1);
+    --t42-body: rgb(var(--t42-bg-dark));
+    --pink: rgb(0 170 200);
+    --t42-link-hover-color: hsl(var(--t42-bg-light-base), 100%);
+    --t42-link-hover-bg: var(--t42-color-opacity-05);
+    --t42-link-active-bg: var(--t42-color-opacity-10);
+    --t42-input-bg: rgb(var(--t42-bg-dark));
+    --t42-input-disabled-bg: Hsla(var(--t42-content-color-base), 100%, 0.075);
+    --t42-tooltip-bg: rgba(var(--t42-bg-dark), 0.85);
+    --t42-modal-bg: rgba(var(--t42-bg-light), 0.75);
+    --t42-table-active-bg: rgba(255, 255, 255, 0.1);
+    --t42-select-indicator: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNFRUVFRUUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTIuNSA1LjVjLjQtLjQgMS0uNSAxLjYgMGwzLjkgMy43bDMuOS0zLjdjLjUtLjUgMS4xLS40IDEuNiAwYy40LjQuNCAxLjIgMCAxLjZjLS40LjQtNC43IDQuNS00LjcgNC41Yy0uMi4yLS41LjMtLjguM3MtLjYtLjEtLjgtLjNjMCAwLTQuMy00LjEtNC43LTQuNXMtLjQtMS4yIDAtMS42eiI+PC9wYXRoPjwvc3ZnPg==");
+}
+.light {
+    --t42-bg-light-base: 0, 0%;
+    --t42-bg-light-l: 100%;
+    --t42-bg-light: 255, 255, 255;
+    --t42-bg-mid: 250, 250, 250;
+    --t42-bg-dark: 245, 245, 245;
+    --t42-content-color-base: 0, 0%;
+    --t42-content-color: #757575;
+    --t42-content-color-l: 46%;
+    --t42-content-color-muted: hsl(var(--t42-content-color-base), 66%);
+    --t42-color-opacity-025: hsla(var(--t42-content-color-base), 0%, 0.025);
+    --t42-color-opacity-05: hsla(var(--t42-content-color-base), 0%, 0.05);
+    --t42-color-opacity-10: hsla(var(--t42-content-color-base), 0%, 0.075);
+    --t42-color-opacity-30: hsla(var(--t42-content-color-base), 0%, 0.1);
+    --t42-color-opacity-20: hsla(var(--t42-content-color-base), 0%, 0.2);
+    --t42-link-color: hsl(var(--t42-content-color-base), 5%);
+    --t42-shadow: 0 0 12px 0 hsla(var(--t42-content-color-base), 0%, 0.05);
+    --t42-border: 0.0625rem solid var(--t42-color-opacity-10);
+    --t42-logo-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzAuMSAxMTcuOCI+Cgk8cGF0aCBmaWxsPSIjNjA2MzY5IiBkPSJNMTY3LjcsNTMuMiwxMTYuOCwyLjNBNy45LDcuOSwwLDAsMCwxMTEuMiwwYTguMSw4LjEsMCwwLDAtNS43LDIuM2wtOS45LDEwYTEuOSwxLjksMCwwLDAsMCwyLjhsNyw3LjFhMi4xLDIuMSwwLDAsMCwyLjksMGw0LjMtNC4zYTEuOSwxLjksMCwwLDEsMi44LDBsMzkuNiwzOS42YTEuOSwxLjksMCwwLDEsMCwyLjhMMTEyLjYsOTkuOWExLjksMS45LDAsMCwxLTIuOCwwTDcwLjIsNjAuM2ExLjksMS45LDAsMCwxLDAtMi44bDQtNGEyLjEsMi4xLDAsMCwwLDAtMi45bC03LjEtN2ExLjksMS45LDAsMCwwLTIuOCwwbC05LjcsOS42YTgsOCwwLDAsMCwwLDExLjNsNTAuOSw1MC45YTguMiw4LjIsMCwwLDAsNS43LDIuNCw4LDgsMCwwLDAsNS42LTIuNGw1MC45LTUwLjlBNy45LDcuOSwwLDAsMCwxNjcuNyw1My4yWiIgLz4KCTxwYXRoIGZpbGw9IiMxYzg5ZWEiIGQ9Ik0yLjMsNjQuNWw1MC45LDUwLjlhOC4yLDguMiwwLDAsMCw1LjcsMi40LDgsOCwwLDAsMCw1LjYtMi40bDEwLTkuOWEyLjEsMi4xLDAsMCwwLDAtMi45bC03LjEtN2ExLjksMS45LDAsMCwwLTIuOCwwbC00LjMsNC4zYTEuOSwxLjksMCwwLDEtMi44LDBMMTcuOSw2MC4zYTEuOSwxLjksMCwwLDEsMC0yLjhMNTcuNSwxNy45YTEuOSwxLjksMCwwLDEsMi44LDBMOTkuOSw1Ny41YTEuOSwxLjksMCwwLDEsMCwyLjhsLTQsNGExLjksMS45LDAsMCwwLDAsMi44bDcsNy4xYTIuMSwyLjEsMCwwLDAsMi45LDBsOS42LTkuN2E3LjksNy45LDAsMCwwLDAtMTEuM0w2NC41LDIuM0E3LjksNy45LDAsMCwwLDU4LjksMGE4LjEsOC4xLDAsMCwwLTUuNywyLjNMMi4zLDUzLjJBOCw4LDAsMCwwLDIuMyw2NC41WiIgLz4KPC9zdmc+Cg==");
+    --t42-icon-color: Hsl(var(--t42-content-color-base), 38%);
+    --t42-list-group-hover-bg-special: hsla(
+        var(--t42-content-color-base),
+        95%,
+        0.065
+    );
+    --backdrop-filter: blur(5px) saturate(200%);
+    --accordion-filter: brightness(0%);
+    --filter-close: invert(0);
+    --t42-body: rgb(var(--t42-bg-mid));
+    --t42-link-hover-color: hsl(var(--t42-bg-light-base), 0%);
+    --t42-link-hover-bg: hsl(var(--t42-content-color-base), 95%);
+    --t42-link-active-bg: hsl(var(--t42-content-color-base), 90%);
+    --t42-input-bg: rgb(var(--t42-bg-light));
+    --t42-input-disabled-bg: var(--t42-color-opacity-10);
+    --t42-tooltip-bg: rgba(var(--t42-bg-light), 0.95);
+    --t42-modal-bg: rgba(var(--t42-bg-light), 0.95);
+    --t42-table-active-bg: rgba(0, 0, 0, 0.025);
+    --t42-select-indicator: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM2MTYxNjEiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTIuNSA1LjVjLjQtLjQgMS0uNSAxLjYgMGwzLjkgMy43bDMuOS0zLjdjLjUtLjUgMS4xLS40IDEuNiAwYy40LjQuNCAxLjIgMCAxLjZjLS40LjQtNC43IDQuNS00LjcgNC41Yy0uMi4yLS41LjMtLjguM3MtLjYtLjEtLjgtLjNjMCAwLTQuMy00LjEtNC43LTQuNXMtLjQtMS4yIDAtMS42eiI+PC9wYXRoPjwvc3ZnPg==");
+}

package/dist/styles/vars.css

@@ -49,11 +49,11 @@
     --t42-tab-bar-selected-tab-hover-background: var(--window-tabs-background-active);
     --t42-tab-bar-fade-size: 24px;
 
-    --t42-tab-bar-tab-height: 28px; /* for 10.0 - var(--spacing-24); */ 
+    --t42-tab-bar-tab-height: 28px; /* for 10.0 - var(--spacing-24); */
     --t42-tab-bar-tab-min-width: 48px;
     --t42-tab-bar-tab-width: 150px;
     --t42-tab-bar-tab-padding: 0 var(--spacing-8);
-    --t42-tab-bar-tab-margin: var(--spacing-4) var(--spacing-2) 0 0; /* for 10.0 - 0 var(--spacing-2) 0 0; */ 
+    --t42-tab-bar-tab-margin: var(--spacing-4) var(--spacing-2) 0 0; /* for 10.0 - 0 var(--spacing-2) 0 0; */
     --t42-tab-bar-tab-text: var(--tabs-color-default);
     --t42-tab-bar-tab-text-hover: var(--tabs-color-hover);
     --t42-tab-bar-tab-separator-size: 1px;
@@ -66,10 +66,11 @@
     --t42-tab-bar-tab-background: transparent;
     --t42-tab-bar-tab-hover-background: transparent; /* non used */
     --t42-tab-bar-tab-flashing-color: var(--io-neutrals-0);
-    --t42-tab-bar-tab-flashing-background:var(--severity-high); /* color-mix(in srgb, var(--severity-high) 65%, transparent); */ 
+    --t42-tab-bar-tab-flashing-background:var(--severity-high); /* color-mix(in srgb, var(--severity-high) 65%, transparent); */
 
     --t42-tab-bar-tab-channels-border-radius: var(--base-radius-default);
-    --t42-tab-bar-tab-channels-size: var(--spacing-16);
+    --t42-tab-bar-tab-channels-width: var(--spacing-16);
+    --t42-tab-bar-tab-channels-height: var(--spacing-16);
     --t42-tab-bar-tab-channels-margin: 0 var(--spacing-4) 0 0;
     --t42-tab-bar-tab-channels-content-size: 0;
     --t42-tab-bar-tab-channels-content-margin: 0;
@@ -88,6 +89,10 @@
 
     --t42-channels-fill-color: var(--tabs-color-active);
 
+    --t42-channel-selector-direction-width: var(--spacing-24);
+    --t42-channel-selector-direction-height: var(--spacing-16); 
+    --t42-channel-selector-direction-gap: var(--spacing-1);
+
     --t42-caption-separator-color: var(--tabs-border);
     --t42-caption-text-hover-color: var(--tabs-color-hover);
     --t42-caption-bar-button-width: 48px;
@@ -104,7 +109,7 @@
     --t42-hover-sizing-border-group-color: hsl(var(--io-highlight-Interactive));
     --t42-active-sizing-border-group-color: hsl(var(--io-interactive-primary));
 
-   
+
     --t42-wg-tab-over-max-height: 100vh;
     --t42-wg-tab-over-max-width: 200px;
     --t42-wg-tab-over-min-width: 200px;
@@ -127,6 +132,18 @@
     --t42-wg-pin-tab-width: 120px;
     --t42-wg-pin-tab-margin: var(--spacing-4);
     --t42-wg-pin-tab-height: var(--spacing-24);
+    --t42-multi-channel-selector-2-color-1: var(--channels-blue);
+    --t42-multi-channel-selector-2-color-2: var(--channels-red);
+    --t42-multi-channel-selector-2-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Crect width='7.5' height='16'/%3E%3Crect x='8.5' width='7.5' height='16'/%3E%3C/svg%3E");
+    --t42-multi-channel-selector-3-color-1: var(--channels-blue);
+    --t42-multi-channel-selector-3-color-2: var(--channels-red);
+    --t42-multi-channel-selector-3-color-3: var(--channels-orange);
+    --t42-multi-channel-selector-3-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Crect fill='none' width='16' height='16' rx='4' ry='4'/%3E%3Cpath fill='%23000000' d='M16,11.6v-7.6c0-2.2-1.8-4-4-4h-3.5v7.3l7.5,4.3Z'/%3E%3Cpath fill='%23000000' d='M7.5,0h-3.5C1.8,0,0,1.8,0,4v7.9l7.5-4.3V0Z'/%3E%3Cpath fill='%23000000' d='M.1,12.9c.4,1.8,2,3.1,3.9,3.1h8c2,0,3.6-1.4,3.9-3.2l-7.7-4.5L.1,12.9Z'/%3E%3C/svg%3E");
+    --t42-multi-channel-selector-4-color-1: var(--channels-blue);
+    --t42-multi-channel-selector-4-color-2: var(--channels-red);
+    --t42-multi-channel-selector-4-color-3: var(--channels-orange);
+    --t42-multi-channel-selector-4-color-4: var(--channels-magenta);
+    --t42-multi-channel-selector-4-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Crect width='7.5' height='7.5'/%3E%3Crect x='8.5' width='7.5' height='7.5'/%3E%3Crect x='8.5' y='8.5' width='7.5' height='7.5'/%3E%3Crect y='8.5' width='7.5' height='7.5'/%3E%3C/svg%3E");
 }/* Scroll vars override */.os-theme-dark,
 .os-theme-light {
     --os-size: var(--spacing-4);

package/dist/types/internal.d.ts

@@ -0,0 +1,373 @@
+import React from "react";
+export interface BaseChannelSelectorProps {
+    showSelector: (bounds: Bounds) => void;
+    outsideClass: string;
+    contentClass: string;
+    selectedChannel: string;
+    selectedChannelColor: string;
+}
+export interface FrameChannelSelectorProps {
+    showSelector: (bounds: Bounds) => void;
+    selectedChannel: string;
+    selectedChannelColor: string;
+}
+export interface TabChannelSelectorProps {
+    showSelector: (bounds: Bounds) => void;
+    selectedChannel: string;
+    selectedChannelColor: string;
+}
+export interface PortalProps {
+    parentElement: HTMLElement;
+    children?: React.ReactNode;
+}
+export interface GroupCaptionBarProps {
+    moveAreaId: string;
+    targetType: string;
+    targetId: string;
+    caption: string;
+    minimize: ButtonProps;
+    maximize: ButtonProps;
+    restore: ButtonProps;
+    close: ButtonProps;
+}
+export interface GroupMoveAreaProps {
+    moveAreaId: string;
+    children?: React.ReactNode;
+}
+export interface GroupButtonsProps {
+    minimize: ButtonProps;
+    maximize: ButtonProps;
+    restore: ButtonProps;
+    close: ButtonProps;
+}
+export interface GroupCaptionProps {
+    caption: string;
+}
+export interface GroupOverlayProps {
+}
+export interface MoveAreaProps {
+    elementId: string;
+}
+export interface FrameCaptionBarProps {
+    frameId: string;
+    moveAreaId: string;
+    caption: string;
+    extract?: ButtonProps;
+    minimize?: ButtonProps;
+    maximize?: ButtonProps;
+    restore?: ButtonProps;
+    close?: ButtonProps;
+    channels: ChannelProps;
+    selectedWindow: string;
+}
+export interface FrameMoveAreaProps {
+    moveAreaId: string;
+    children?: React.ReactNode;
+}
+export interface FrameButtonsProps {
+    extract?: ButtonProps;
+    minimize?: ButtonProps;
+    maximize?: ButtonProps;
+    restore?: ButtonProps;
+    close?: ButtonProps;
+}
+export interface FrameCaptionProps {
+    caption: string;
+}
+export interface FrameWindowOverlayProps {
+    frameId: string;
+    selectedWindow: string;
+}
+export interface BelowWindowProps {
+    frameId: string;
+    selectedWindow: string;
+}
+export interface ChannelProps {
+    visible: boolean;
+    selectedChannel: string;
+    showSelector: (bounds: Bounds) => void;
+    selectedChannelColor: string;
+}
+export interface AboveTabsProps {
+    frameId: string;
+    selectedWindow: string;
+}
+export interface BeforeTabsZoneProps {
+    frameId: string;
+    selectedWindow: string;
+}
+export interface TabElementProps {
+    targetId: string;
+    windowId: string;
+    caption: string;
+    selected: boolean;
+    close: () => void;
+    channels: ChannelProps;
+}
+export interface TabCaptionProps {
+    caption: string;
+    selected: boolean;
+}
+export interface TabCloseButtonProps {
+    selected: boolean;
+    close: () => void;
+}
+export interface AfterTabsZoneProps {
+    frameId: string;
+    selectedWindow: string;
+}
+export interface TabHeaderButtonsProps {
+    extract?: ButtonProps;
+    minimize?: ButtonProps;
+    maximize?: ButtonProps;
+    restore?: ButtonProps;
+    close?: ButtonProps;
+    frameId: string;
+    selectedWindow: string;
+}
+export interface BelowTabsProps {
+    frameId: string;
+    selectedWindow: string;
+}
+export interface ButtonProps {
+    onClick: () => void;
+    tooltip: string;
+    visible: boolean;
+}
+export interface MinimizeButtonProps extends ButtonProps {
+}
+export interface MaximizeButtonProps extends ButtonProps {
+}
+export interface RestoreButtonProps extends ButtonProps {
+}
+export interface CloseButtonProps extends ButtonProps {
+}
+export interface BaseButtonProps {
+    outerElement: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+    innerElement: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+}
+export interface GroupProps {
+    components?: {
+        group?: {
+            CaptionBar?: React.ComponentType<GroupCaptionBarProps>;
+            Overlay?: React.ComponentType<GroupOverlayProps>;
+        };
+        frame?: {
+            Overlay?: React.ComponentType<FrameWindowOverlayProps>;
+            BelowWindow?: React.ComponentType<BelowWindowProps>;
+        };
+        flat?: {
+            CaptionBar?: React.ComponentType<FrameCaptionBarProps>;
+        };
+        tabs?: {
+            Above?: React.ComponentType<AboveTabsProps>;
+            Before?: React.ComponentType<BeforeTabsZoneProps>;
+            Element?: React.ComponentType<TabElementProps>;
+            After?: React.ComponentType<AfterTabsZoneProps>;
+            Buttons?: React.ComponentType<TabHeaderButtonsProps>;
+            Below?: React.ComponentType<BelowTabsProps>;
+        };
+    };
+}
+export interface GroupWrapperProps {
+    onCreateGroupCaptionBarRequested?: (options: CreateGroupCaptionBarRequestOptions) => void;
+    onUpdateGroupCaptionBarRequested?: (options: UpdateGroupCaptionBarRequestOptions) => void;
+    onCreateGroupOverlayRequested?: (options: CreateElementRequestOptions) => void;
+    onCreateFrameCaptionBarRequested?: (options: CreateFrameCaptionBarRequestOptions) => void;
+    onUpdateFrameCaptionBarRequested?: (options: UpdateFrameCaptionBarRequestOptions) => void;
+    onCreateFrameWindowOverlayRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onUpdateFrameWindowOverlayRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onCreateBelowWindowRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onCreateAboveTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onUpdateAboveTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onCreateBeforeTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onUpdateBeforeTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onCreateTabRequested?: (options: CreateTabRequestOptions) => void;
+    onUpdateTabRequested?: (options: UpdateTabRequestOptions) => void;
+    onCreateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onUpdateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onCreateTabHeaderButtonsRequested?: (options: CreateTabHeaderButtonsOptions) => void;
+    onCreateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onUpdateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
+    onUpdateFrameRequested?: (options: UpdateFrameRequestionOptions) => void;
+    onUpdateStandardButtonRequested?: (options: UpdateStandardButtonRequestOptions) => void;
+    onRemoveFrameCaptionBarRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveFrameWindowOverlayRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveBelowWindowRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveAboveTabsRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveBeforeTabsComponentRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveTabRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveAfterTabsComponentRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveTabHeaderButtonsRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveBelowTabsRequested?: (options: RemoveRequestOptions) => void;
+}
+export interface CreateGroupCaptionBarRequestOptions extends CreateElementRequestOptions {
+    moveAreaId: string;
+    caption: string;
+    extract: {
+        tooltip: string;
+        visible: boolean;
+    };
+    minimize: {
+        tooltip: string;
+        visible: boolean;
+    };
+    restore: {
+        tooltip: string;
+        visible: boolean;
+    };
+    maximize: {
+        tooltip: string;
+        visible: boolean;
+    };
+    close: {
+        tooltip: string;
+        visible: boolean;
+    };
+}
+export interface UpdateGroupCaptionBarRequestOptions extends CreateGroupCaptionBarRequestOptions {
+}
+export interface UpdateFrameCaptionBarRequestOptions extends BaseElementOptions {
+}
+export interface CreateFrameCaptionBarRequestOptions extends CreateFrameElementRequestOptions {
+    caption: string;
+    moveAreaId: string;
+    channelSelectorVisible: boolean;
+    selectedChannel: string;
+    selectedChannelColor: string;
+    minimize: {
+        tooltip: string;
+        visible: boolean;
+    };
+    restore: {
+        tooltip: string;
+        visible: boolean;
+    };
+    maximize: {
+        tooltip: string;
+        visible: boolean;
+    };
+    close: {
+        tooltip: string;
+        visible: boolean;
+    };
+}
+export interface CreateTabRequestOptions extends CreateElementRequestOptions {
+    caption: string;
+    selected: boolean;
+    channelSelectorVisible: boolean;
+    selectedChannel: string;
+    selectedChannelColor: string;
+}
+export interface UpdateTabRequestOptions extends BaseElementOptions {
+}
+export interface UpdateStandardButtonRequestOptions extends CreateElementRequestOptions {
+    buttonId: StandardButtons;
+    visible: boolean;
+    tooltip: string;
+}
+export interface CreateTabHeaderButtonsOptions extends CreateFrameElementRequestOptions {
+    minimize: {
+        tooltip: string;
+        visible: boolean;
+    };
+    restore: {
+        tooltip: string;
+        visible: boolean;
+    };
+    maximize: {
+        tooltip: string;
+        visible: boolean;
+    };
+    close: {
+        tooltip: string;
+        visible: boolean;
+    };
+}
+export interface RemoveRequestOptions {
+    targetId: string;
+}
+export interface BaseElementOptions {
+    targetId: string;
+}
+export interface CreateElementRequestOptions extends BaseElementOptions {
+    parentElement: HTMLElement;
+    targetType: TargetType;
+    elementId: string;
+}
+export interface CreateFrameElementRequestOptions extends CreateElementRequestOptions {
+    selectedWindow: string;
+}
+export declare type UpdateFrameRequestionOptions = CreateFrameElementRequestOptions;
+export declare enum TargetType {
+    Group = "group",
+    Frame = "frame",
+    TabBar = "tabBar",
+    Tab = "tab"
+}
+export declare enum StandardButtons {
+    Minimize = "minimize",
+    Maximize = "maximize",
+    Restore = "restore",
+    Close = "close"
+}
+export interface ElementCreationWrapperState {
+    groupCaptionBar?: CreateGroupCaptionBarRequestOptions;
+    groupOverlay?: CreateElementRequestOptions;
+    frameCaptionBars: {
+        [targetId: string]: CreateFrameCaptionBarRequestOptions;
+    };
+    frameWindowOverlays: {
+        [targetId: string]: CreateFrameElementRequestOptions;
+    };
+    belowWindowZones: {
+        [targetId: string]: CreateFrameElementRequestOptions;
+    };
+    aboveTabsZones: {
+        [targetId: string]: CreateFrameElementRequestOptions;
+    };
+    beforeTabsZones: {
+        [targetId: string]: CreateFrameElementRequestOptions;
+    };
+    tabElements: {
+        [targetId: string]: CreateTabRequestOptions;
+    };
+    afterTabsZones: {
+        [targetId: string]: CreateFrameElementRequestOptions;
+    };
+    tabHeaderButtons: {
+        [targetId: string]: CreateTabHeaderButtonsOptions;
+    };
+    belowTabsZones: {
+        [targetId: string]: CreateFrameElementRequestOptions;
+    };
+}
+export interface ExternalLibraryFactory {
+    readonly groupId: string;
+    focusPage(): void;
+    focusFrame(frameId: string): void;
+    focusGroup(): void;
+    onStandardButtonClick(targetType: TargetType, targetId: string, buttonId: StandardButtons): void;
+    onTabCloseButtonClick(targetId: string): void;
+    onTabChannelSelectorClick(targetId: string, channelSelectorBounds: Bounds): void;
+    onFrameChannelSelectorClick(targetId: string, channelSelectorBounds: Bounds): void;
+    onMoveAreaChanged(targetType: TargetType, targetId: string): void;
+}
+export interface WebGroupsManager {
+    init: (factory?: any) => void;
+    notifyMoveAreaChanged(): void;
+    registerPopup(element: HTMLElement): string;
+    removePopup(element: HTMLElement): void;
+    removePopupById(elementId: string): void;
+    subscribeForWindowFocused(cb: () => any): () => void;
+    unmount(): void;
+    externalLibraryFactory: ExternalLibraryFactory;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Bounds extends Size {
+    left: number;
+    top: number;
+}

package/dist/webGroupsManager.d.ts

@@ -0,0 +1,35 @@
+import { Bounds } from "./types/internal";
+declare class WorkspacesManagerDecorator {
+    readonly skipFocusStyle = "t42-skip-focus";
+    init(glue: any, componentFactory: any): void;
+    getGroupId(): string;
+    notifyMoveAreaChanged(): void;
+    registerPopup(element: HTMLElement): string;
+    removePopup(element: HTMLElement): void;
+    removePopupById(elementId: string): void;
+    subscribeForWindowFocused(cb: () => any): () => void;
+    unmount(): void;
+    requestPageFocus(): void;
+    requestFrameFocus(frameId: string): void;
+    requestGroupFocus(): void;
+    closeFrame(targetId: string): void;
+    restoreFrame(targetId: string): void;
+    maximizeFrame(targetId: string): void;
+    minimizeFrame(targetId: string): void;
+    extractFrame(targetId: string): void;
+    closeTabBar(targetId: string): void;
+    restoreTabBar(targetId: string): void;
+    maximizeTabBar(targetId: string): void;
+    minimizeTabBar(targetId: string): void;
+    extractTabBar(targetId: string): void;
+    closeGroup(targetId: string): void;
+    restoreGroup(targetId: string): void;
+    maximizeGroup(targetId: string): void;
+    minimizeGroup(targetId: string): void;
+    closeTab(targetId: string): void;
+    onGroupMoveAreaChanged(targetId: string): void;
+    onTabChannelSelectorClick(targetId: string, selectorBounds: Bounds): void;
+    onFrameChannelSelectorClick(targetId: string, selectorBounds: Bounds): void;
+}
+declare const _default: WorkspacesManagerDecorator;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@interopio/groups-ui-react",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "description": "React library for building a Web Group App for io.Connect Desktop.",
     "author": {
         "name": "interop.io",