@interopio/groups-ui-react 2.3.0 → 2.4.0

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

@@ -96,6 +96,7 @@ export interface TabElementProps {
     caption: string;
     selected: boolean;
     flashing: boolean;
+    pinned: boolean;
     close: () => void;
     channels: ChannelProps;
     notifyCaptionBoundsChanged: (bounds: Bounds) => void;

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

@@ -107,6 +107,7 @@ export interface CreateTabRequestOptions extends CreateElementRequestOptions {
     caption: string;
     selected: boolean;
     flashing: boolean;
+    pinned: boolean;
     channelSelectorVisible: boolean;
     selectedChannel: string;
     selectedChannelColor: string;

package/dist/styles/groups.css

@@ -440,7 +440,8 @@ input {
     height: var(--t42-tab-bar-height);
 }
 
-.t42-tabs {
+.t42-tabs,
+.t42-tabs-pinned {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -448,7 +449,6 @@ input {
     flex-shrink: 1;
     align-items: center;
     padding: var(--t42-tab-bar-padding);
-    margin: 0px;
     overflow: hidden;
     list-style-type: none;
     -webkit-app-region: drag;
@@ -478,7 +478,11 @@ input {
     border-top-right-radius: var(--spacing-4);
     background-color: var(--t42-tab-bar-tab-background);
     container-type: size;
+    container-name: normal-tabs;
     -webkit-app-region: no-drag;
+    /* transition-property: all;
+    transition-duration: 260ms;
+    transition-timing-function: ease-in-out; */
 }
 
 .t42-tab::before {
@@ -522,12 +526,12 @@ input {
 .t42-tab-caption {
     flex-grow: 1;
     color: var(--t42-tab-bar-tab-text);
-    -webkit-mask-image: linear-gradient(90deg, Hsl(var(--io-bg-00)) 75%, transparent);
+    mask-image: linear-gradient(90deg, Hsl(var(--io-bg-00)) 75%, transparent);
 }
 
 .t42-tab-caption-editor {
     min-width: unset;
-    -webkit-mask-image: none;
+    mask-image: none;
     height: var(--spacing-12);
 }
 
@@ -575,7 +579,7 @@ input {
 }
 
 .t42-selected-tab::before,
-.t42-selected-tab+.t42-tab::before {
+.t42-selected-tab + .t42-tab::before {
     opacity: 0;
 }
 
@@ -702,7 +706,6 @@ input {
 }
 
 @keyframes clipMe {
-
     0%,
     100% {
         clip: rect(0, 25vh, 2px, 0);
@@ -784,20 +787,20 @@ input {
     background-color: transparent;
 }
 
-@container (max-width: 50px) {
+@container normal-tabs (max-width: 50px) {
     .t42-tab-channel-selector {
-        width: 0;
-        margin: 0;
+        --t42-tab-bar-tab-channels-size:0;
+        --t42-tab-bar-tab-channels-margin: 0;
     }
 }
 
-@container (max-width: 40px) {
+@container normal-tabs (max-width: 40px) {
     .t42-tab-close-button {
         margin: auto;
     }
 }
 
-@container (max-width: 30px) {
+@container normal-tabs (max-width: 30px) {
     .t42-selected-tab-caption {
         flex-grow: 0;
         width: 0;
@@ -817,31 +820,37 @@ 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, 1) var(--t42-tab-bar-fade-size));
+    -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));
+    -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%);
+    -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 {
@@ -850,7 +859,8 @@ input {
     margin-top: var(--t42-wg-tab-over-top-offset);
 }
 
-.t42-tab-overflow-popup {
+.t42-tab-overflow-popup,
+.t42-tab-context-menu {
     display: flex;
     flex-direction: column;
     min-width: var(--t42-wg-tab-over-min-width);
@@ -862,7 +872,8 @@ input {
     background-color: var(--t42-wg-tab-over-background);
 }
 
-.t42-tab-overflow-popup li {
+.t42-tab-overflow-popup li,
+.t42-tab-context-menu li {
     display: flex;
     gap: var(--t42-wg-tab-over-item-gap);
     align-items: center;
@@ -872,14 +883,16 @@ input {
     transition-property: background-color;
 }
 
-.t42-tab-overflow-popup li span {
+.t42-tab-overflow-popup li span,
+.t42-tab-context-menu li span {
     flex-grow: 1;
     overflow: hidden;
     text-wrap: nowrap;
     text-overflow: clip;
 }
 
-.t42-tab-overflow-popup li:not(.title):hover {
+.t42-tab-overflow-popup li:not(.title):hover,
+.t42-tab-context-menu li:not(.title):hover {
     color: var(--t42-wg-tab-over-item-color-hover);
     background-color: var(--t42-wg-tab-over-item-background-hover);
 }
@@ -895,4 +908,39 @@ input {
     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);
+}
+
+.t42-tabs-pinned {
+    min-width: 0;
+    flex-shrink: 0;
+}
+
+.t42-tabs-pinned .t42-tab {
+    --t42-tab-bar-tab-margin: var(--t42-wg-pin-tab-margin);
+    --t42-tab-bar-tab-height: var(--t42-wg-pin-tab-height);
+    border-radius: var(--t42-wg-pin-tab-border-radius);
+    width: var(--t42-wg-pin-tab-width);
+}
+
+.t42-tabs-pinned  .t42-tab-caption {
+    mask-image: none;
+}
+
+.t42-tabs-pinned .t42-tab {
+    container-name: pinned;
+}
+
+@container pinned (min-width:1px) {
+    .t42-tab-close-button {
+        background-color: transparent;
+    }
+}
+
+.t42-tabs-pinned .t42-tab-fade,
+.t42-tabs-overflow .t42-tab-fade {
+    overflow: hidden;
+    width: 0;
+    padding: 0;
+    min-width: 0;
+    margin: 0;
 }

package/dist/styles/vars.css

@@ -122,6 +122,11 @@
     --t42-wg-tab-over-separator-size: var(--spacing-1);
     --t42-wg-tab-over-separator-color: var(--base-border-separator);
     --t42-wg-tab-over-separator-space: var(--spacing-8) 0;
+
+    --t42-wg-pin-tab-border-radius: var(--spacing-4);
+    --t42-wg-pin-tab-width: 120px;
+    --t42-wg-pin-tab-margin: var(--spacing-4);
+    --t42-wg-pin-tab-height: var(--spacing-24);
 }/* Scroll vars override */.os-theme-dark,
 .os-theme-light {
     --os-size: var(--spacing-4);

package/package.json

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