@interopio/groups-ui-react 2.2.4 → 2.2.6

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Bounds, ButtonProps, OverflowedTabInfo, ToggleButtonProps } from "./internal";
+import { Bounds, ButtonProps, Location, OverflowedTabInfo, ToggleButtonProps } from "./internal";
 import { CustomButtonProps } from "./defaultComponents";
 export interface ChannelProps {
     visible: boolean;
@@ -106,8 +106,10 @@ export interface TabElementProps {
 export interface AfterTabsProps {
     frameId: string;
     selectedWindow: string;
+    hiddenTabsToTheLeft?: OverflowedTabInfo[];
+    hiddenTabsToTheRight?: OverflowedTabInfo[];
 }
-export interface TabHeaderButtonsProps {
+interface FrameButtonsProps {
     overflow?: ButtonProps;
     feedback?: ButtonProps;
     clone?: ButtonProps;
@@ -123,7 +125,11 @@ export interface TabHeaderButtonsProps {
     frameId: string;
     selectedWindow: string;
 }
-export interface HtmlButtonsProps extends TabHeaderButtonsProps {
+export interface TabHeaderButtonsProps extends FrameButtonsProps {
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
+}
+export interface HtmlButtonsProps extends FrameButtonsProps {
 }
 export interface GroupProps {
     components?: {
@@ -161,3 +167,8 @@ export interface MoveAreaProps {
 export interface GroupComponentVisibilityState {
     groupCaptionBarVisible?: boolean;
 }
+export interface OpenTabOverflowPopupOptions {
+    frameId: string;
+    location: Location;
+}
+export {};

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

@@ -202,7 +202,10 @@ export interface CreateTabOverflowPopupRequestOptions extends CreateElementReque
 export interface CreateFrameLoadingAnimationRequestOptions extends CreateFrameElementRequestOptions {
     show: boolean;
 }
-export declare type UpdateFrameRequestOptions = CreateFrameElementRequestOptions;
+export interface UpdateFrameRequestOptions extends CreateFrameElementRequestOptions {
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
+}
 export declare enum TargetType {
     Group = "group",
     Frame = "frame",
@@ -285,6 +288,7 @@ export interface ExternalLibraryFactory {
     onCaptionEditorBoundsChanged(targetType: TargetType, targetId: string, bounds: Bounds): void;
     commitCaptionEditing(targetType: TargetType, targetId: string, text: string): void;
     selectTab(windowId: string): void;
+    openTabOverflowPopup(frameId: string, location: Location): void;
     addTabContainerClass(windowId: string, className: string): void;
     removeTabContainerClass(windowId: string, className: string): void;
 }
@@ -302,7 +306,9 @@ export interface Size {
     width: number;
     height: number;
 }
-export interface Bounds extends Size {
+export interface Location {
     left: number;
     top: number;
 }
+export interface Bounds extends Size, Location {
+}

package/dist/esm/webGroupsManager.d.ts

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

package/dist/styles/groups.css

@@ -814,6 +814,40 @@ input {
     overflow: auto;
 }
 
+.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, 1) var(--t42-tab-bar-fade-size)
+    );
+}
+
+.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, 1) var(--t42-tab-bar-fade-size)
+    );
+}
+
+.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) 100%
+    );
+}
+
 .t42-page-popup {
     position: absolute;
     z-index: 999;
@@ -838,8 +872,8 @@ input {
     align-items: center;
     height: var(--t42-wg-tab-over-item-height);
     padding: var(--t42-wg-tab-over-item-padding);
-    transition-property: background-color;
     transition-duration: 80ms;
+    transition-property: background-color;
 }
 
 .t42-tab-overflow-popup li span {

package/dist/styles/vars.css

@@ -47,6 +47,7 @@
     --t42-tab-bar-selected-tab-hover-text: var(--tabs-color-hover);
     --t42-tab-bar-selected-tab-background: var(--window-tabs-background-active);
     --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-min-width: 48px;
@@ -103,6 +104,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;

package/package.json

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