@interopio/groups-ui-react 2.6.0 → 2.6.2

package/dist/styles/groups.css

@@ -5,7 +5,13 @@
     box-sizing: border-box;
     transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
     transition-duration: 240ms;
-    transition-property: background-color, color;
+    transition-property: background-color;
+}
+
+*::before,
+*::after {
+    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
+    transition-duration: 240ms;
 }
 
 body {
@@ -52,6 +58,8 @@ input {
 
 .t42-internal-caption-bar {
     flex-direction: row;
+    align-items: center;
+    width: 100%;
 }
 
 .t42-react-caption-bar {
@@ -109,7 +117,9 @@ 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 {
@@ -196,6 +206,14 @@ 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";
 }
@@ -275,6 +293,10 @@ input {
     content: "\e902";
 }
 
+.t42-group-caption-bar-container {
+    display: flex;
+}
+
 .t42-group-caption-bar {
     height: auto;
 }
@@ -552,8 +574,7 @@ 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-duration: 80ms;
-    transition-property: background-color, fill, color;
+    transition-property: fill, color;
 }
 
 .t42-tab-close-button-content svg {
@@ -570,6 +591,10 @@ 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);
 }
@@ -604,24 +629,28 @@ input {
     fill: var(--t42-tab-bar-selected-tab-text);
 }
 
-.t42-channel-selector-content-light::before {
-    color: hsl(var(--io-white));
-    transition-property: color;
-}
-
-.t42-channel-selector-content-dark::before {
-    color: hsl(var(--io-black));
-    transition-property: color;
-}
-
 .t42-channel-selector-direction {
-    width: var(--t42-channel-selector-direction-width);
+    width: auto;
+    min-width: var(--t42-tab-bar-tab-channels-width);
     height: var(--t42-channel-selector-direction-height);
     gap: var(--t42-channel-selector-direction-gap);
 }
 
 .t42-channel-selector-direction .icon {
     gap: var(--t42-channel-selector-direction-gap);
+    width: var(--t42-channel-selector-direction-width);
+}
+
+.t42-channel-selector-content-light,
+.t42-channel-selector-content-light::before,
+.t42-channel-selector-content-light i::before {
+    color: hsl(var(--io-white));
+}
+
+.t42-channel-selector-content-dark,
+.t42-channel-selector-content-dark::before,
+.t42-channel-selector-content-dark i::before {
+    color: hsl(var(--io-black));
 }
 
 @keyframes approaching-edge-animation {
@@ -679,6 +708,7 @@ input {
 
 .t42-sizing-border-group:hover {
     background-color: var(--t42-hover-sizing-border-group-color);
+    z-index: 150;
 }
 
 .t42-active-sizing-border-group {
@@ -734,6 +764,11 @@ input {
     }
 }
 
+.loader-container {
+    display: flex;
+    flex-grow: 1;
+}
+
 .loader-wrapper {
     display: flex;
     flex-direction: column;
@@ -799,8 +834,7 @@ input {
 
 @container normal-tabs (max-width: 50px) {
     .t42-tab-channel-selector {
-        --t42-tab-bar-tab-channels-height:0;
-        --t42-tab-bar-tab-channels-width: 0;
+        --t42-tab-bar-tab-channels-size:0;
         --t42-tab-bar-tab-channels-margin: 0;
     }
 }
@@ -823,7 +857,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,7 +110,6 @@
     --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;
@@ -174,4 +173,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,6 +1,6 @@
 {
     "name": "@interopio/groups-ui-react",
-    "version": "2.6.0",
+    "version": "2.6.2",
     "description": "React library for building a Web Group App for io.Connect Desktop.",
     "author": {
         "name": "interop.io",
@@ -28,7 +28,7 @@
         "prepublishOnly": "npm run build",
         "preversion": "npm run build",
         "version": "npm run build",
-        "clean": "rimraf ./node_modules/react && rimraf ./node_modules/react-dom && rimraf ./node_modules/@interopio/react-hooks"
+        "clean": ""
     },
     "publishConfig": {
         "access": "public"
@@ -38,7 +38,7 @@
         "callback-registry": "^2.7.2",
         "color2k": "^2.0.0",
         "overlayscrollbars": "^2.8.3",
-        "use-sync-external-store": "^1.2.0"
+        "use-sync-external-store": "^1.4.0"
     },
     "peerDependencies": {
         "@interopio/react-hooks": "^3.0.2",