@interopio/groups-ui-react 2.6.2 → 2.7.1

package/dist/esm/tests/buttons/BaseButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/CloneButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/CloseButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/CustomButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/ExtractButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/FeedbackButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/LockButtons.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/MaximizeButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/MinimizeButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/OverflowButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/RestoreButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/StickyButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/buttons/UnlockButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/captionEditor/CaptionEditor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/channelSelector/BaseChannelSelector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/flatCaptionBar/FlatCaptionBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/groupCaptionBar/GroupCaptionBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/htmlButtonBar/HtmlButtonBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/popups/TabOverflowPopup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tests/tabs/Tab.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Bounds, ButtonProps, Location, OverflowedTabInfo, ToggleButtonProps } from "./internal";
+import { Bounds, ButtonProps, Location, OverflowedTabInfo, StylesOptions, ToggleButtonProps } from "./internal";
 import { CustomButtonProps } from "./defaultComponents";
 export interface ChannelProps {
     visible: boolean;
@@ -171,6 +171,15 @@ export interface GroupProps {
             Buttons?: React.ComponentType<HtmlButtonsProps>;
         };
     };
+    styles?: {
+        tabs?: {
+            header?: StylesOptions;
+            moveArea?: StylesOptions;
+        };
+        frame?: {
+            element?: StylesOptions;
+        };
+    };
 }
 export interface MoveAreaProps {
     elementId: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Bounds, ButtonProps, TargetType, ToggleButtonProps } from "./internal";
 export interface CaptionEditorProps {
     targetId: string;

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

@@ -1,4 +1,8 @@
 import React from "react";
+declare type NonMethodKeys<T> = ({
+    [P in keyof T]: T[P] extends Function ? never : P;
+})[keyof T];
+declare type NonMethods<T> = Pick<T, NonMethodKeys<T>>;
 export interface PortalProps {
     parentElement: HTMLElement;
     children?: React.ReactNode;
@@ -58,6 +62,15 @@ export interface GroupWrapperProps {
     onHideCaptionEditorRequested?: (targetType: TargetType, targetId: string) => void;
     onShowLoadingAnimationRequested?: (targetType: TargetType, targetId: string) => void;
     onHideLoadingAnimationRequested?: (targetType: TargetType, targetId: string) => void;
+    styles?: {
+        tabs?: {
+            header?: StylesOptions;
+            moveArea?: StylesOptions;
+        };
+        frame?: {
+            element?: StylesOptions;
+        };
+    };
 }
 export interface CreateGroupCaptionBarRequestOptions extends CreateElementRequestOptions {
     moveAreaId: string;
@@ -310,6 +323,9 @@ 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;
+    updateTabHeaderStyles(styles: StylesOptions): void;
+    updateTabMoveAreaStyles(styles: StylesOptions): void;
+    updateFrameStyles(styles: StylesOptions): void;
     selectTab(windowId: string): void;
     openTabOverflowPopup(frameId: string, location: Location): void;
     addTabContainerClass(windowId: string, className: string): void;
@@ -333,5 +349,10 @@ export interface Location {
     left: number;
     top: number;
 }
+export interface StylesOptions {
+    css?: Partial<NonMethods<CSSStyleDeclaration>>;
+    classes?: string[];
+}
 export interface Bounds extends Size, Location {
 }
+export {};

package/dist/esm/webGroupsManager.d.ts

@@ -1,4 +1,4 @@
-import { Bounds, Location, TargetType } from "./types/internal";
+import { Bounds, Location, StylesOptions, TargetType } from "./types/internal";
 declare class WebGroupsManagerDecorator {
     private readonly registry;
     readonly skipFocusStyle = "t42-skip-focus";
@@ -35,6 +35,9 @@ 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;
+    updateTabHeaderStyles(styles: StylesOptions): void;
+    updateTabMoveAreaStyles(styles: StylesOptions): void;
+    updateFrameStyles(styles: StylesOptions): void;
     selectTab(windowId: string): void;
     addTabContainerClass(windowId: string, className: string): void;
     removeTabContainerClass(windowId: string, className: string): void;

package/dist/styles/groups.css

@@ -5,13 +5,7 @@
     box-sizing: border-box;
     transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
     transition-duration: 240ms;
-    transition-property: background-color;
-}
-
-*::before,
-*::after {
-    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
-    transition-duration: 240ms;
+    transition-property: background-color, color;
 }
 
 body {
@@ -58,8 +52,6 @@ input {
 
 .t42-internal-caption-bar {
     flex-direction: row;
-    align-items: center;
-    width: 100%;
 }
 
 .t42-react-caption-bar {
@@ -117,9 +109,7 @@ input {
     display: flex;
     flex-grow: 1;
     align-items: center;
-    height: 100%;
     min-width: var(--t42-move-area-min-width);
-    -webkit-app-region: drag;
 }
 
 .t42-buttons-container {
@@ -206,14 +196,6 @@ input {
     color: var(--t42-caption-bar-button-close-hover-text);
 }
 
-.t42-standard-button-collapse::before {
-    content: "\e918";
-}
-
-.t42-standard-button-expand::before {
-    content: "\e90e";
-}
-
 .t42-standard-button-minimize::before {
     content: "\e904";
 }
@@ -293,10 +275,6 @@ input {
     content: "\e902";
 }
 
-.t42-group-caption-bar-container {
-    display: flex;
-}
-
 .t42-group-caption-bar {
     height: auto;
 }
@@ -574,7 +552,8 @@ input {
     height: calc(var(--t42-tab-bar-tab-close-button-size) + var(--t42-tab-bar-tab-close-button-padding) * 2);
     border-radius: 50%;
     background-color: var(--t42-tab-bar-tab-close-button-background);
-    transition-property: fill, color;
+    transition-duration: 80ms;
+    transition-property: background-color, fill, color;
 }
 
 .t42-tab-close-button-content svg {
@@ -591,10 +570,6 @@ input {
     background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
 }
 
-.t42-tab-close-button-content:hover::before {
-    color: var(--t42-tab-bar-tab-text-hover);
-}
-
 .t42-tab-close-button-content:hover .t42-standard-button-image {
     fill: var(--t42-tab-bar-tab-text-hover);
 }
@@ -708,7 +683,6 @@ input {
 
 .t42-sizing-border-group:hover {
     background-color: var(--t42-hover-sizing-border-group-color);
-    z-index: 150;
 }
 
 .t42-active-sizing-border-group {
@@ -764,11 +738,6 @@ input {
     }
 }
 
-.loader-container {
-    display: flex;
-    flex-grow: 1;
-}
-
 .loader-wrapper {
     display: flex;
     flex-direction: column;
@@ -834,7 +803,8 @@ input {
 
 @container normal-tabs (max-width: 50px) {
     .t42-tab-channel-selector {
-        --t42-tab-bar-tab-channels-size:0;
+        --t42-tab-bar-tab-channels-height:0;
+        --t42-tab-bar-tab-channels-width: 0;
         --t42-tab-bar-tab-channels-margin: 0;
     }
 }
@@ -857,7 +827,7 @@ input {
 }
 
 .t42-tabs-overflow .t42-tab {
-    min-width: var(--t42-tab-bar-tab-overflowable-min-width);
+    min-width: var(--t42-tab-bar-tab-overflowable-min-width);   
 }
 
 .t42-tabs-overflow .t42-tabs {

package/dist/styles/vars.css

@@ -110,6 +110,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;
@@ -173,4 +174,4 @@
     --sticky-icon-off-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 17'%3E%3Cpath fill='%231B6ADE' d='M11.3,3.8L9.5,5.6c-0.2,0.2-0.2,0.5,0,0.7s0.5,0.2,0.7,0L12,4.5c0.2-0.2,0.2-0.5,0-0.7 C11.8,3.6,11.5,3.6,11.3,3.8z M5.6,9.5l-1.8,1.8c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l1.8-1.8c0.2-0.2,0.2-0.5,0-0.7 S5.8,9.3,5.6,9.5z'/%3E%3Cpath fill='%23626F81' d='M15.9,2L14,0.1c-0.2-0.2-0.5-0.1-0.6,0.2L13,2.6C13,2.8,13.2,3,13.4,3l2.3-0.4C16,2.6,16.1,2.3,15.9,2z M0.1,14 L2,15.9c0.2,0.2,0.5,0.1,0.6-0.2L3,13.4C3,13.2,2.8,13,2.6,13l-2.3,0.4C0,13.4-0.1,13.7,0.1,14z M6.5,0h-5C0.7,0,0,0.7,0,1.5v5 C0,7.3,0.7,8,1.5,8h5C7.3,8,8,7.3,8,6.5v-5C8,0.7,7.3,0,6.5,0z M6.5,7h-5C1.2,7,1,6.8,1,6.5V2h6v4.5C7,6.8,6.8,7,6.5,7z M14.5,8h-5 C8.7,8,8,8.7,8,9.5v5C8,15.3,8.7,16,9.5,16h5c0.8,0,1.5-0.7,1.5-1.5v-5C16,8.7,15.3,8,14.5,8z M14.5,15h-5C9.2,15,9,14.8,9,14.5V10 h6v4.5C15,14.8,14.8,15,14.5,15z'/%3E%3C/svg%3E%0A");
     --sticky-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16'%3E%3Cpath fill='%23626F81' d='M6.5,4h-5C0.7,4,0,4.7,0,5.5v5C0,11.3,0.7,12,1.5,12h5C7.3,12,8,11.3,8,10.5v-5C8,4.7,7.3,4,6.5,4z M6.5,11h-5 C1.2,11,1,10.8,1,10.5V6h6v4.5C7,10.8,6.8,11,6.5,11z M14.5,4h-5C8.7,4,8,4.7,8,5.5v5C8,11.3,8.7,12,9.5,12h5c0.8,0,1.5-0.7,1.5-1.5 v-5C16,4.7,15.3,4,14.5,4z M14.5,11h-5C9.2,11,9,10.8,9,10.5V6h6v4.5C15,10.8,14.8,11,14.5,11z'/%3E%3Cpath fill='%23A4B1C3' d='M6.6,0l2.7,0c0.3,0,0.5,0.3,0.3,0.5L8.5,2.1v1.4C8.5,3.8,8.3,4,8,4C7.7,4,7.5,3.8,7.5,3.5V2.1L6.3,0.5 C6.2,0.3,6.3,0,6.6,0z M7.5,13.9v-1.4C7.5,12.2,7.7,12,8,12c0.3,0,0.5,0.2,0.5,0.5v1.4l1.2,1.6c0.2,0.2,0,0.5-0.3,0.5H6.6 c-0.3,0-0.5-0.3-0.3-0.5L7.5,13.9z M8,11c-0.3,0-0.5-0.2-0.5-0.5v-4C7.5,6.2,7.7,6,8,6c0.3,0,0.5,0.2,0.5,0.5v4 C8.5,10.8,8.3,11,8,11z'/%3E%3C/svg%3E");
     --sticky-icon-on-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16'%3E%3Cpath fill='%23626F81' d='M6.5,4h-5C0.7,4,0,4.7,0,5.5v5C0,11.3,0.7,12,1.5,12h5C7.3,12,8,11.3,8,10.5v-5C8,4.7,7.3,4,6.5,4z M6.5,11h-5 C1.2,11,1,10.8,1,10.5V6h6v4.5C7,10.8,6.8,11,6.5,11z M14.5,4h-5C8.7,4,8,4.7,8,5.5v5C8,11.3,8.7,12,9.5,12h5c0.8,0,1.5-0.7,1.5-1.5 v-5C16,4.7,15.3,4,14.5,4z M14.5,11h-5C9.2,11,9,10.8,9,10.5V6h6v4.5C15,10.8,14.8,11,14.5,11z'/%3E%3Cpath fill='%234B92FB' d='M6.6,0l2.7,0c0.3,0,0.5,0.3,0.3,0.5L8.3,2.4c-0.1,0.2-0.4,0.2-0.6,0L6.3,0.5C6.2,0.3,6.3,0,6.6,0z M6.6,16h2.7 c0.3,0,0.5-0.3,0.3-0.5l-1.4-1.9c-0.1-0.2-0.4-0.2-0.6,0l-1.4,1.9C6.2,15.7,6.3,16,6.6,16z'/%3E%3Cpath fill='%234B92FB' d='M8.5,13.5v1C8.5,14.8,8.3,15,8,15c-0.3,0-0.5-0.2-0.5-0.5v-1v-1v-11C7.5,1.2,7.7,1,8,1c0.3,0,0.5,0.2,0.5,0.5 v11V13.5C8.5,13.5,8.5,13.5,8.5,13.5z'/%3E%3C/svg%3E");
-}
+}

package/package.json

@@ -1,55 +1,53 @@
 {
     "name": "@interopio/groups-ui-react",
-    "version": "2.6.2",
+    "version": "2.7.1",
     "description": "React library for building a Web Group App for io.Connect Desktop.",
+    "keywords": [
+        "interop",
+        "interop.io",
+        "desktop",
+        "groups",
+        "react"
+    ],
+    "homepage": "https://interop.io/",
+    "repository": "https://github.com/InteropIO/groups-ui-react",
+    "license": "MIT",
     "author": {
         "name": "interop.io",
         "url": "https://interop.io/"
     },
-    "license": "MIT",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
     "source": "src/index.tsx",
-    "homepage": "https://interop.io/",
-    "repository": "https://github.com/InteropIO/groups-ui-react",
-    "engines": {
-        "node": ">=10"
-    },
-    "keywords": [
-        "interop",
-        "interop.io",
-        "desktop",
-        "groups",
-        "react"
+    "files": [
+        "dist"
     ],
     "scripts": {
         "build": "rollup -c ./rollup.config.js",
+        "test": "jest",
         "bundle:css": "node ./scripts/bundlecss.js",
         "prepublishOnly": "npm run build",
         "preversion": "npm run build",
         "version": "npm run build",
-        "clean": ""
-    },
-    "publishConfig": {
-        "access": "public"
+        "clean": "rimraf ./node_modules/react && rimraf ./node_modules/react-dom && rimraf ./node_modules/@interopio/react-hooks"
     },
     "dependencies": {
-        "@interopio/theme": "^2.1.32",
+        "@interopio/theme": "2.1.32",
         "callback-registry": "^2.7.2",
         "color2k": "^2.0.0",
         "overlayscrollbars": "^2.8.3",
-        "use-sync-external-store": "^1.4.0"
-    },
-    "peerDependencies": {
-        "@interopio/react-hooks": "^3.0.2",
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+        "use-sync-external-store": "^1.2.0"
     },
     "devDependencies": {
         "@rollup/plugin-commonjs": "^15.1.0",
         "@rollup/plugin-node-resolve": "^9.0.0",
         "@rollup/plugin-typescript": "^6.0.0",
         "@svgr/rollup": "^6.2.1",
+        "@swc/jest": "^0.2.37",
+        "@testing-library/jest-dom": "^6.2.0",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/jest": "^29.2.4",
         "@types/node": "^12.12.38",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -68,6 +66,8 @@
         "eslint-plugin-promise": "^4.2.1",
         "eslint-plugin-react": "^7.17.0",
         "eslint-plugin-standard": "^4.0.1",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.29",
         "postcss-import": "^15.1.0",
@@ -81,7 +81,15 @@
         "rollup-plugin-typescript2": "^0.29.0",
         "typescript": "^3.7.5"
     },
-    "files": [
-        "dist"
-    ]
-}
+    "peerDependencies": {
+        "@interopio/react-hooks": "^3.0.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "engines": {
+        "node": ">=10"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}