@interopio/groups-ui-react 2.1.0 → 2.2.1

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Bounds, ButtonProps, ToggleButtonProps } from "./internal";
+import { Bounds, ButtonProps, OverflowedTabInfo, ToggleButtonProps } from "./internal";
 import { CustomButtonProps } from "./defaultComponents";
 export interface ChannelProps {
     visible: boolean;
@@ -40,6 +40,13 @@ export interface BelowTabsProps {
     frameId: string;
     selectedWindow: string;
 }
+export interface TabOverflowPopupProps {
+    frameId: string;
+    select: (windowId: string) => void;
+    close: (windowId: string) => void;
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
+}
 export interface CaptionEditorProps {
     show: boolean;
     text?: string;
@@ -99,6 +106,7 @@ export interface AfterTabsProps {
     selectedWindow: string;
 }
 export interface TabHeaderButtonsProps {
+    overflow?: ButtonProps;
     feedback?: ButtonProps;
     clone?: ButtonProps;
     sticky?: ToggleButtonProps;
@@ -138,6 +146,7 @@ export interface GroupProps {
             After?: React.ComponentType<AfterTabsProps>;
             Buttons?: React.ComponentType<TabHeaderButtonsProps>;
             Below?: React.ComponentType<BelowTabsProps>;
+            OverflowPopup?: React.ComponentType<TabOverflowPopupProps>;
         };
         html?: {
             Buttons?: React.ComponentType<HtmlButtonsProps>;

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

@@ -32,6 +32,8 @@ export interface UnlockButtonProps extends ButtonProps {
 }
 export interface MinimizeButtonProps extends ButtonProps {
 }
+export interface OverflowButtonProps extends ButtonProps {
+}
 export interface MaximizeButtonProps extends ButtonProps {
 }
 export interface RestoreButtonProps extends ButtonProps {

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

@@ -32,6 +32,7 @@ export interface GroupWrapperProps {
     onCreateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
     onUpdateAfterTabsComponentRequested?: (options: CreateFrameElementRequestOptions) => void;
     onCreateTabHeaderButtonsRequested?: (options: CreateButtonsOptions) => void;
+    onCreateTabOverflowPopupRequested?: (options: CreateTabOverflowPopupRequestOptions) => void;
     onCreateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
     onUpdateBelowTabsRequested?: (options: CreateFrameElementRequestOptions) => void;
     onUpdateFrameRequested?: (options: UpdateFrameRequestOptions) => void;
@@ -50,6 +51,7 @@ export interface GroupWrapperProps {
     onRemoveTabRequested?: (options: RemoveRequestOptions) => void;
     onRemoveAfterTabsComponentRequested?: (options: RemoveRequestOptions) => void;
     onRemoveTabHeaderButtonsRequested?: (options: RemoveRequestOptions) => void;
+    onRemoveTabOverflowPopupRequested?: (options: RemoveRequestOptions) => void;
     onRemoveBelowTabsRequested?: (options: RemoveRequestOptions) => void;
     onShowCaptionEditorRequested?: (targetType: TargetType, targetId: string, text: string) => void;
     onCommitCaptionEditingRequested?: (targetType: TargetType, targetId: string) => void;
@@ -128,6 +130,10 @@ export interface UpdateCustomButtonOptions {
     imageData: string;
 }
 export interface CreateButtonsOptions extends CreateFrameElementRequestOptions {
+    overflow: {
+        tooltip: string;
+        visible: boolean;
+    };
     feedback: {
         tooltip: string;
         visible: boolean;
@@ -185,6 +191,14 @@ export interface CreateElementRequestOptions extends BaseElementOptions {
 export interface CreateFrameElementRequestOptions extends CreateElementRequestOptions {
     selectedWindow: string;
 }
+export interface OverflowedTabInfo {
+    title: string;
+    windowId: string;
+}
+export interface CreateTabOverflowPopupRequestOptions extends CreateElementRequestOptions {
+    hiddenTabsToTheLeft: OverflowedTabInfo[];
+    hiddenTabsToTheRight: OverflowedTabInfo[];
+}
 export interface CreateFrameLoadingAnimationRequestOptions extends CreateFrameElementRequestOptions {
     show: boolean;
 }
@@ -197,6 +211,7 @@ export declare enum TargetType {
     HtmlButtons = "html"
 }
 export declare enum StandardButtons {
+    Overflow = "overflow",
     Feedback = "feedback",
     Clone = "clone",
     Sticky = "sticky",
@@ -244,6 +259,9 @@ export interface ElementCreationWrapperState {
     tabHeaderButtons: {
         [targetId: string]: CreateButtonsOptions;
     };
+    tabOverflowPopups: {
+        [targetId: string]: CreateTabOverflowPopupRequestOptions;
+    };
     belowTabsZones: {
         [targetId: string]: CreateFrameElementRequestOptions;
     };
@@ -266,6 +284,7 @@ export interface ExternalLibraryFactory {
     onCaptionEditorVisibleChanged(targetType: TargetType, targetId: string, visible: boolean): void;
     onCaptionEditorBoundsChanged(targetType: TargetType, targetId: string, bounds: Bounds): void;
     commitCaptionEditing(targetType: TargetType, targetId: string, text: string): void;
+    selectTab(windowId: string): void;
 }
 export interface WebGroupsManager {
     init: (factory?: any) => void;

package/dist/esm/webGroupsManager.d.ts

@@ -19,6 +19,7 @@ declare class WebGroupsManagerDecorator {
     onMinimizeButtonClick(targetType: TargetType, targetId: string): void;
     onLockButtonClick(targetType: TargetType, targetId: string): void;
     onUnlockButtonClick(targetType: TargetType, targetId: string): void;
+    onOverflowButtonClick(targetType: TargetType, targetId: string): void;
     onFeedbackButtonClick(targetType: TargetType, targetId: string): void;
     onCloneButtonClick(targetType: TargetType, targetId: string): void;
     onStickyButtonClick(targetType: TargetType, targetId: string): void;
@@ -34,6 +35,7 @@ declare class WebGroupsManagerDecorator {
     commitCaptionEditing(targetType: TargetType, targetId: string, text: string): void;
     onCommitCaptionEditingRequested(targetType: TargetType, targetId: string, callback: () => void): () => void;
     requestCommitCaptionEditing(targetType: TargetType, targetId: string): void;
+    selectTab(windowId: string): void;
 }
 declare const _default: WebGroupsManagerDecorator;
 export default _default;

package/dist/esm/webGroupsStore.d.ts

@@ -1,4 +1,4 @@
-import { CreateElementRequestOptions, CreateFrameCaptionBarRequestOptions, CreateFrameElementRequestOptions, CreateGroupCaptionBarRequestOptions, CreateButtonsOptions, CreateTabRequestOptions, ElementCreationWrapperState, RemoveRequestOptions, TargetType, UpdateFrameCaptionBarRequestOptions, UpdateGroupCaptionBarRequestOptions, UpdateStandardButtonRequestOptions, UpdateFrameRequestOptions, CreateFrameLoadingAnimationRequestOptions, UpdateCustomButtonsRequestOptions } from "./types/internal";
+import { CreateElementRequestOptions, CreateFrameCaptionBarRequestOptions, CreateFrameElementRequestOptions, CreateGroupCaptionBarRequestOptions, CreateButtonsOptions, CreateTabRequestOptions, ElementCreationWrapperState, RemoveRequestOptions, TargetType, UpdateFrameCaptionBarRequestOptions, UpdateGroupCaptionBarRequestOptions, UpdateStandardButtonRequestOptions, UpdateFrameRequestOptions, CreateFrameLoadingAnimationRequestOptions, UpdateCustomButtonsRequestOptions, CreateTabOverflowPopupRequestOptions } from "./types/internal";
 declare class WebGroupsStore {
     private listeners;
     private state;
@@ -19,6 +19,7 @@ declare class WebGroupsStore {
     onCreateTabHeaderButtonsRequested: (options: CreateButtonsOptions) => void;
     onCreateBelowTabsComponentRequested: (options: CreateFrameElementRequestOptions) => void;
     onCreateHtmlButtonsRequested: (options: CreateButtonsOptions) => void;
+    onCreateTabOverflowPopupRequested: (options: CreateTabOverflowPopupRequestOptions) => void;
     onUpdateHtmlButtonsRequested: (options: CreateButtonsOptions) => void;
     onUpdateGroupCaptionBarRequested: (options: UpdateGroupCaptionBarRequestOptions) => void;
     onUpdateFrameCaptionBarRequested: (options: UpdateFrameCaptionBarRequestOptions) => void;
@@ -45,6 +46,7 @@ declare class WebGroupsStore {
     onRemoveTabHeaderButtonsRequested: (options: RemoveRequestOptions) => void;
     onRemoveBelowTabsRequested: (options: RemoveRequestOptions) => void;
     onRemoveHtmlButtonsRequested: (options: RemoveRequestOptions) => void;
+    onRemoveTabOverflowPopupRequested: (options: RemoveRequestOptions) => void;
     onShowCaptionEditorRequested: (targetType: TargetType, targetId: string, text: string) => void;
     onCommitCaptionEditingRequested: (targetType: TargetType, targetId: string) => void;
     onHideCaptionEditorRequested: (targetType: TargetType, targetId: string) => void;

package/dist/styles/groups.css

@@ -1,4 +1,5 @@
 @import "vars.css";
+@import "../../node_modules/overlayscrollbars/styles/overlayscrollbars.css";
 
 * {
     box-sizing: border-box;
@@ -235,6 +236,10 @@ input {
     content: "\e91f";
 }
 
+.t42-standard-button-overflow::before {
+    content: "\e91d";
+}
+
 .t42-standard-button-sticky::before {
     content: var(--sticky-icon-off);
     display: block;
@@ -434,8 +439,9 @@ input {
     list-style-type: none;
     position: relative;
     padding: 0px;
-    margin: var(--t42-tab-bar-tabs-margin);
+    margin: 0px;
     border-top-right-radius: var(--border-radius-4);
+    -webkit-app-region: drag;
 }
 
 .t42-react-tab {
@@ -453,6 +459,7 @@ input {
     position: relative;
     padding: 0px var(--spacing-8);
     margin-right: var(--spacing-2);
+    margin-top: var(--spacing-4);
     width: 150px;
     min-width: var(--t42-tab-bar-tab-min-width);
     max-width: var(--t42-tab-bar-tab-width);
@@ -460,9 +467,8 @@ input {
     border-top-right-radius: var(--spacing-4);
     border-top-left-radius: var(--spacing-4);
     transition-property: padding;
-
     container-type: size;
-    
+    -webkit-app-region: no-drag;
 }
 
 .t42-tab::before {
@@ -619,14 +625,69 @@ input {
     width: var(--t42-approaching-edge-size);
 }
 
+.t42-sizing-border-group {
+    pointer-events: none; 
+    list-style-type: none;
+    display: flex;
+    margin: 0px;
+    padding: 0px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: absolute;
+    overflow: hidden;
+    z-index: 100;
+    background-color: var(--t42-sizing-border-group-color);
+}
+
+.t42-vertical-sizing-border-group {
+    flex-direction: column;
+    cursor: ew-resize;
+}
+
+.t42-horizontal-sizing-border-group {
+    flex-direction: row;
+    cursor: ns-resize;
+}
+
+.t42-sizing-border-group:hover {
+    background-color: var(--t42-hover-sizing-border-group-color);
+}
+
+.t42-active-sizing-border-group {
+    z-index: 200;
+    background-color: var(--t42-active-sizing-border-group-color);
+}
+
+.t42-active-sizing-border-group:hover {
+    background-color: var(--t42-active-sizing-border-group-color);
+}
+
+.t42-sizing-border {
+    pointer-events: auto;
+    margin: 0px;
+    padding: 0px;
+    flex-shrink: 0;
+}
+
+.t42-frame-sizing-border {
+    flex-grow: 0;
+}
+
+.t42-cross-sizing-border {
+    flex-grow: 1;
+    cursor: ne-resize;
+}
+
+.t42-active-sizing-border {
+    background-color: transparent;
+}
+
 .t42-skip-focus {
     /* We used non-standard rule to have non-empty style */
     -moz-user-focus: ignore;
 }
 
-
 @keyframes clipMe {
-
     0%,
     100% {
         clip: rect(0, 25vh, 2px, 0);
@@ -727,3 +788,66 @@ input {
         width: 0;
     }
 }
+
+.os-scrollbar-horizontal {
+    z-index: 1001;
+}
+
+.t42-tabs-overflow .t42-tab {
+    flex-shrink: 0;
+}
+
+.t42-tabs-overflow .t42-tabs {
+    overflow: auto;
+}
+
+.t42-page-popup {
+    position: absolute;
+    z-index: 999;
+    margin-top: var(--t42-wg-tab-over-top-offset);
+}
+
+.t42-tab-overflow-popup {
+    display: flex;
+    flex-direction: column;
+    min-width: var(--t42-wg-tab-over-min-width);
+    max-width: var(--t42-wg-tab-over-max-width);
+    max-height: var(--t42-wg-tab-over-max-height);
+    padding: var(--t42-wg-tab-over-padding);
+    border-radius: var(--t42-wg-tab-over-border-radius);
+    overflow: auto;
+    background-color: var(--t42-wg-tab-over-background);
+}
+
+.t42-tab-overflow-popup li {
+    display: flex;
+    gap: var(--t42-wg-tab-over-item-gap);
+    align-items: center;
+    height: var(--t42-wg-tab-over-item-height);
+    padding: var(--t42-wg-tab-over-item-padding);
+}
+
+.t42-tab-overflow-popup li span {
+    flex-grow: 1;
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: clip;
+}
+
+.t42-tab-overflow-popup li:not(.title):hover {
+    color: var(--t42-wg-tab-over-item-color-hover);
+    background-color: var(--t42-wg-tab-over-item-background-hover);
+}
+
+.t42-tab-overflow-popup hr {
+    height: var(--t42-wg-tab-over-separator-size);
+    margin: var(--t42-wg-tab-over-separator-space);
+    border: 0;
+    background-color: var(--t42-wg-tab-over-separator-color);
+}
+
+.t42-tab-overflow-popup .title {
+    color: var(--t42-wg-tab-over-item-title-color);
+    font-size: var(--t42-wg-tab-over-item-title-size);
+    letter-spacing: var(--t42-wg-tab-over-item-title-spacing);
+}