@interopio/groups-ui-react 3.0.0 → 3.0.1

package/dist/esm/types/api.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Bounds, ButtonProps, Location, OverflowedTabInfo, StylesOptions, ToggleButtonProps } from "./internal";
+import { Bounds, ButtonProps, Location, OverflowedTabInfo, PopupTargetLocation, Size, StylesOptions, ToggleButtonProps } from "./internal";
 import { CustomButtonProps } from "./defaultComponents";
 export interface ChannelProps {
     visible: boolean;
@@ -54,6 +54,7 @@ export interface TabOverflowPopupProps {
     frameId: string;
     select: (windowId: string) => void;
     close: (windowId: string) => void;
+    resize?: (size: Size) => void;
     hiddenTabsToTheLeft: OverflowedTabInfo[];
     hiddenTabsToTheRight: OverflowedTabInfo[];
 }
@@ -193,4 +194,38 @@ export interface OpenTabOverflowPopupOptions {
     frameId: string;
     location: Location;
 }
+export interface CreatePopupOptions {
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    roundedCorners?: boolean;
+    hasSizeAreas?: boolean;
+    hasMoveAreas?: boolean;
+    transparent?: boolean;
+    copyStyles?: boolean;
+}
+export interface PopupShowOptions {
+    targetBounds?: Bounds;
+    size?: Size;
+    targetLocation?: PopupTargetLocation;
+    focus?: boolean;
+    horizontalOffset?: number;
+    verticalOffset?: number;
+}
+export interface PopupWindow {
+    ioConnectWindow: any;
+    browserWindow: Window;
+}
+export interface ExternalWindowPopupResult {
+    getContainer: () => HTMLElement | null;
+    createPopup: (options?: CreatePopupOptions) => Promise<PopupWindow | null>;
+    showPopup: (options?: PopupShowOptions) => Promise<void>;
+    resizePopup: (size: Size) => Promise<void>;
+    hidePopup: () => Promise<void>;
+    closePopup: () => Promise<void>;
+    isOpen: boolean;
+    isVisible: boolean;
+    popup: PopupWindow | null;
+}
 export {};

package/dist/esm/types/internal.d.ts

@@ -288,6 +288,7 @@ export interface ElementCreationWrapperState {
         [targetId: string]: CreateButtonsOptions;
     };
 }
+export declare type IndexableElementCreationWrapperState = Omit<Omit<ElementCreationWrapperState, "groupCaptionBar">, "groupOverlay">;
 export interface ExternalLibraryFactory {
     readonly groupId: string;
     focusPage(): void;
@@ -310,6 +311,7 @@ export interface ExternalLibraryFactory {
     updateFrameStyles(styles: StylesOptions): void;
     selectTab(windowId: string): void;
     openTabOverflowPopup(frameId: string, location: Location): void;
+    resizeTabOverflowPopup(frameId: string, size: Size): void;
     addTabContainerClass(windowId: string, className: string): void;
     removeTabContainerClass(windowId: string, className: string): void;
 }
@@ -337,4 +339,14 @@ export interface StylesOptions {
 }
 export interface Bounds extends Size, Location {
 }
+export declare type PopupTargetLocation = "top" | "bottom" | "left" | "right" | "none";
+export interface ExternalWindowPopup {
+    browserWindow?: Window;
+    ioConnectWindow?: any;
+}
+export interface ShowExternalWindowPopupConfig {
+    targetBounds: Bounds;
+    size: Size;
+    targetLocation: PopupTargetLocation;
+}
 export {};

package/dist/esm/webGroupsManager.d.ts

@@ -1,4 +1,4 @@
-import { Bounds, Location, StylesOptions, TargetType } from "./types/internal";
+import { Bounds, Location, Size, StylesOptions, TargetType } from "./types/internal";
 declare class WebGroupsManagerDecorator {
     private readonly registry;
     readonly skipFocusStyle = "t42-skip-focus";
@@ -44,6 +44,7 @@ declare class WebGroupsManagerDecorator {
     addTabContainerClass(windowId: string, className: string): void;
     removeTabContainerClass(windowId: string, className: string): void;
     openTabOverflowPopup(frameId: string, location: Location): void;
+    resizeTabOverflowPopup(frameId: string, size: Size): void;
 }
 declare const _default: WebGroupsManagerDecorator;
 export default _default;

package/dist/esm/webGroupsStore.d.ts

@@ -60,6 +60,9 @@ declare class WebGroupsStore {
     private onHideTabCaptionEditorRequested;
     private onShowLoadingAnimation;
     private onHideLoadingAnimation;
+    private onCreateElementRequested;
+    private onUpdateElementRequested;
+    private onRemoveElementRequested;
     private setState;
 }
 declare const _default: WebGroupsStore;

package/dist/styles/groups.css

@@ -919,9 +919,9 @@ input {
 .t42-tabs-overflow.t42-tabs-fade-right {
     -webkit-mask-image: linear-gradient(
         -90deg,
-        rgba(0, 0, 0, 0) 0,
-        rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
-        rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
+            rgba(0, 0, 0, 0) 0,
+            rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
+            rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
         rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size)
     );
 }
@@ -929,9 +929,9 @@ input {
 .t42-tabs-overflow.t42-tabs-fade-left {
     -webkit-mask-image: linear-gradient(
         90deg,
-        rgba(0, 0, 0, 0) 0,
-        rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
-        rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
+            rgba(0, 0, 0, 0) 0,
+            rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
+            rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
         rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size)
     );
 }
@@ -939,13 +939,13 @@ input {
 .t42-tabs-overflow.t42-tabs-fade-both {
     -webkit-mask-image: linear-gradient(
         90deg,
-        rgba(0, 0, 0, 0) 0%,
-        rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
-        rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
-        rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size),
-        rgba(0, 0, 0, 1) calc(100% - var(--t42-tab-bar-fade-size)),
-        rgba(0, 0, 0, 0.8) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 80)),
-        rgba(0, 0, 0, 0.3) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 30)),
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.3) calc(var(--t42-tab-bar-fade-size) / 100 * 30),
+            rgba(0, 0, 0, 0.8) calc(var(--t42-tab-bar-fade-size) / 100 * 80),
+            rgba(0, 0, 0, 1) var(--t42-tab-bar-fade-size),
+            rgba(0, 0, 0, 1) calc(100% - var(--t42-tab-bar-fade-size)),
+            rgba(0, 0, 0, 0.8) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 80)),
+            rgba(0, 0, 0, 0.3) calc(100% - (var(--t42-tab-bar-fade-size) / 100 * 30)),
         rgba(0, 0, 0, 0) 100%
     );
 }
@@ -954,7 +954,17 @@ input {
     position: absolute;
     z-index: 999;
     margin-top: var(--t42-wg-tab-over-top-offset);
+}
+
+.t42-external-page-popup {
+    position: absolute;
+    z-index: 999;
+    background-color: transparent;
+    height: fit-content;
+}
 
+.t42-external-page-popup .t42-tab-overflow-popup {
+    --t42-wg-tab-over-max-height: none;
 }
 
 .t42-tab-overflow-popup {
@@ -970,6 +980,10 @@ input {
     background-color: var(--t42-wg-tab-over-background);
 }
 
+.renderer-mode-keycolor .t42-tab-overflow-popup {
+    border-radius: 0px;
+}
+
 .t42-tab-overflow-popup li {
     display: flex;
     gap: var(--t42-wg-tab-over-item-gap);
@@ -1049,8 +1063,8 @@ input {
 .t42-multi-channel-selector-2 {
     background-image: conic-gradient(
         var(--t42-multi-channel-selector-2-color-1) 0deg,
-        var(--t42-multi-channel-selector-2-color-1) 180deg,
-        var(--t42-multi-channel-selector-2-color-2) 180deg,
+            var(--t42-multi-channel-selector-2-color-1) 180deg,
+            var(--t42-multi-channel-selector-2-color-2) 180deg,
         var(--t42-multi-channel-selector-2-color-2) 0deg
     );
     mask-image: var(--t42-multi-channel-selector-2-mask);
@@ -1059,10 +1073,10 @@ input {
 .t42-multi-channel-selector-3 {
     background-image: conic-gradient(
         var(--t42-multi-channel-selector-3-color-1) 0deg,
-        var(--t42-multi-channel-selector-3-color-1) 120deg,
-        var(--t42-multi-channel-selector-3-color-2) 120deg,
-        var(--t42-multi-channel-selector-3-color-2) 240deg,
-        var(--t42-multi-channel-selector-3-color-3) 240deg,
+            var(--t42-multi-channel-selector-3-color-1) 120deg,
+            var(--t42-multi-channel-selector-3-color-2) 120deg,
+            var(--t42-multi-channel-selector-3-color-2) 240deg,
+            var(--t42-multi-channel-selector-3-color-3) 240deg,
         var(--t42-multi-channel-selector-3-color-3) 0deg
     );
     mask-image: var(--t42-multi-channel-selector-3-mask);
@@ -1071,12 +1085,12 @@ input {
 .t42-multi-channel-selector-4 {
     background-image: conic-gradient(
         var(--t42-multi-channel-selector-4-color-1) 0deg,
-        var(--t42-multi-channel-selector-4-color-1) 90deg,
-        var(--t42-multi-channel-selector-4-color-2) 90deg,
-        var(--t42-multi-channel-selector-4-color-2) 180deg,
-        var(--t42-multi-channel-selector-4-color-3) 180deg,
-        var(--t42-multi-channel-selector-4-color-3) 270deg,
-        var(--t42-multi-channel-selector-4-color-4) 270deg,
+            var(--t42-multi-channel-selector-4-color-1) 90deg,
+            var(--t42-multi-channel-selector-4-color-2) 90deg,
+            var(--t42-multi-channel-selector-4-color-2) 180deg,
+            var(--t42-multi-channel-selector-4-color-3) 180deg,
+            var(--t42-multi-channel-selector-4-color-3) 270deg,
+            var(--t42-multi-channel-selector-4-color-4) 270deg,
         var(--t42-multi-channel-selector-4-color-4) 0deg
     );
     mask-image: var(--t42-multi-channel-selector-4-mask);

package/dist/styles/vars.css

@@ -877,7 +877,7 @@ body .ace-jsoneditor .ace_fold-widget:hover,body .ace-jsoneditor .ace_fold-widge
     --t42-caption-bar-button-close-hover-background: var(--io-red-700);
     --t42-caption-bar-button-close-hover-text: var(--io-neutrals-0);
 
-    --t42-sizing-border-group-color: transparent;
+    --t42-sizing-border-group-color: var(--window-header-background);
     --t42-hover-sizing-border-group-color: var(--io-blue-600);
     --t42-active-sizing-border-group-color: var(--io-blue-700);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@interopio/groups-ui-react",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "React library for building a Web Group App for io.Connect Desktop.",
     "keywords": [
         "interop",
@@ -32,6 +32,7 @@
         "clean": ""
     },
     "dependencies": {
+        "@interopio/components-react": "^0.8.2",
         "@interopio/theme": "3.1.0",
         "callback-registry": "^2.7.2",
         "color2k": "^2.0.0",
@@ -92,4 +93,4 @@
     "publishConfig": {
         "access": "public"
     }
-}
+}