@interopio/groups-ui-react 2.4.1 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/defaultComponents/channelSelector/multi/BaseMultiChannelSelector.d.ts +4 -0
  2. package/dist/cjs/defaultComponents/channelSelector/multi/FlatMultiChannelSelector.d.ts +4 -0
  3. package/dist/cjs/defaultComponents/channelSelector/multi/TabMultiChannelSelector.d.ts +4 -0
  4. package/dist/cjs/index.d.ts +3 -1
  5. package/dist/cjs/index.js +80 -9
  6. package/dist/cjs/index.js.map +1 -1
  7. package/dist/cjs/types/api.d.ts +5 -0
  8. package/dist/cjs/types/defaultComponents.d.ts +38 -0
  9. package/dist/cjs/types/internal.d.ts +10 -0
  10. package/dist/esm/defaultComponents/channelSelector/multi/BaseMultiChannelSelector.d.ts +4 -0
  11. package/dist/esm/defaultComponents/channelSelector/multi/FlatMultiChannelSelector.d.ts +4 -0
  12. package/dist/esm/defaultComponents/channelSelector/multi/TabMultiChannelSelector.d.ts +4 -0
  13. package/dist/esm/index.d.ts +3 -1
  14. package/dist/esm/index.js +79 -10
  15. package/dist/esm/index.js.map +1 -1
  16. package/dist/esm/types/api.d.ts +5 -0
  17. package/dist/esm/types/defaultComponents.d.ts +38 -0
  18. package/dist/esm/types/internal.d.ts +10 -0
  19. package/dist/styles/groups.css +56 -12
  20. package/dist/styles/vars.css +24 -9
  21. package/package.json +4 -3
package/dist/esm/types/api.d.ts CHANGED
@@ -6,6 +6,11 @@ export interface ChannelProps {
6
6
  selectedChannel: string;
7
7
  showSelector: (bounds: Bounds) => void;
8
8
  selectedChannelColor: string;
9
+ channelsMode: "single" | "multi";
10
+ selectedChannels: {
11
+ name: string;
12
+ color: string;
13
+ }[];
9
14
  channelRestrictions: {
10
15
  read: boolean;
11
16
  write: boolean;
package/dist/esm/types/defaultComponents.d.ts CHANGED
@@ -57,6 +57,20 @@ export interface BaseChannelSelectorProps {
57
57
  direction: string;
58
58
  channelLabel: string;
59
59
  }
60
+ export interface BaseMultiChannelSelectorProps {
61
+ showSelector: (bounds: Bounds) => void;
62
+ outsideClass: string;
63
+ contentClass: string;
64
+ selectedChannels: {
65
+ name: string;
66
+ color: string;
67
+ }[];
68
+ channelRestrictions: {
69
+ read: boolean;
70
+ write: boolean;
71
+ };
72
+ channelLabel: string;
73
+ }
60
74
  export interface FlatChannelSelectorProps {
61
75
  showSelector: (bounds: Bounds) => void;
62
76
  selectedChannel: string;
@@ -67,6 +81,18 @@ export interface FlatChannelSelectorProps {
67
81
  };
68
82
  channelLabel: string;
69
83
  }
84
+ export interface FlatMultiChannelSelectorProps {
85
+ showSelector: (bounds: Bounds) => void;
86
+ selectedChannels: {
87
+ name: string;
88
+ color: string;
89
+ }[];
90
+ channelRestrictions: {
91
+ read: boolean;
92
+ write: boolean;
93
+ };
94
+ channelLabel: string;
95
+ }
70
96
  export interface TabChannelSelectorProps {
71
97
  showSelector: (bounds: Bounds) => void;
72
98
  selectedChannel: string;
@@ -77,6 +103,18 @@ export interface TabChannelSelectorProps {
77
103
  };
78
104
  channelLabel: string;
79
105
  }
106
+ export interface TabMultiChannelSelectorProps {
107
+ showSelector: (bounds: Bounds) => void;
108
+ selectedChannels: {
109
+ name: string;
110
+ color: string;
111
+ }[];
112
+ channelRestrictions: {
113
+ read: boolean;
114
+ write: boolean;
115
+ };
116
+ channelLabel: string;
117
+ }
80
118
  export interface FlatCaptionEditorProps {
81
119
  frameId: string;
82
120
  commitChanges: (title: string) => void;
package/dist/esm/types/internal.d.ts CHANGED
@@ -102,6 +102,11 @@ export interface CreateFrameCaptionBarRequestOptions extends CreateButtonsOption
102
102
  show: boolean;
103
103
  text?: string;
104
104
  };
105
+ channelsMode: "single" | "multi";
106
+ selectedChannels: {
107
+ name: string;
108
+ color: string;
109
+ }[];
105
110
  channelRestrictions: {
106
111
  read: boolean;
107
112
  write: boolean;
@@ -120,6 +125,11 @@ export interface CreateTabRequestOptions extends CreateElementRequestOptions {
120
125
  show: boolean;
121
126
  text?: string;
122
127
  };
128
+ channelsMode: "single" | "multi";
129
+ selectedChannels: {
130
+ name: string;
131
+ color: string;
132
+ }[];
123
133
  channelRestrictions: {
124
134
  read: boolean;
125
135
  write: boolean;
package/dist/styles/groups.css CHANGED
@@ -604,15 +604,6 @@ input {
604
604
  fill: var(--t42-tab-bar-selected-tab-text);
605
605
  }
606
606
 
607
- .t42-channel-selector-direction {
608
- width: var(--t42-channel-selector-direction-width);
609
- height: var(--t42-channel-selector-direction-height);
610
- }
611
-
612
- .t42-channel-selector-direction .icon {
613
- gap: var(--t42-channel-selector-direction-gap);
614
- }
615
-
616
607
  .t42-channel-selector-content-light::before {
617
608
  color: hsl(var(--io-white));
618
609
  transition-property: color;
@@ -623,6 +614,16 @@ input {
623
614
  transition-property: color;
624
615
  }
625
616
 
617
+ .t42-channel-selector-direction {
618
+ width: var(--t42-channel-selector-direction-width);
619
+ height: var(--t42-channel-selector-direction-height);
620
+ gap: var(--t42-channel-selector-direction-gap);
621
+ }
622
+
623
+ .t42-channel-selector-direction .icon {
624
+ gap: var(--t42-channel-selector-direction-gap);
625
+ }
626
+
626
627
  @keyframes approaching-edge-animation {
627
628
  from {
628
629
  background-color: var(--t42-approaching-edge-start-color);
@@ -798,7 +799,8 @@ input {
798
799
 
799
800
  @container normal-tabs (max-width: 50px) {
800
801
  .t42-tab-channel-selector {
801
- --t42-tab-bar-tab-channels-size:0;
802
+ --t42-tab-bar-tab-channels-height:0;
803
+ --t42-tab-bar-tab-channels-width: 0;
802
804
  --t42-tab-bar-tab-channels-margin: 0;
803
805
  }
804
806
  }
@@ -821,7 +823,7 @@ input {
821
823
  }
822
824
 
823
825
  .t42-tabs-overflow .t42-tab {
824
- flex-shrink: 0;
826
+ min-width: var(--t42-tab-bar-tab-overflowable-min-width);
825
827
  }
826
828
 
827
829
  .t42-tabs-overflow .t42-tabs {
@@ -952,4 +954,46 @@ input {
952
954
  padding: 0;
953
955
  min-width: 0;
954
956
  margin: 0;
955
- }
957
+ }
958
+
959
+ .t42-multi-channel-selector-content {
960
+ width: var(--t42-tab-bar-tab-channels-width);
961
+ height: var(--t42-tab-bar-tab-channels-height);
962
+ border-radius: var(--t42-tab-bar-tab-channels-border-radius);
963
+ }
964
+
965
+ .t42-multi-channel-selector-2 {
966
+ background-image: conic-gradient(
967
+ var(--t42-multi-channel-selector-2-color-1) 0deg,
968
+ var(--t42-multi-channel-selector-2-color-1) 180deg,
969
+ var(--t42-multi-channel-selector-2-color-2) 180deg,
970
+ var(--t42-multi-channel-selector-2-color-2) 0deg
971
+ );
972
+ mask-image: var(--t42-multi-channel-selector-2-mask);
973
+ }
974
+
975
+ .t42-multi-channel-selector-3 {
976
+ background-image: conic-gradient(
977
+ var(--t42-multi-channel-selector-3-color-1) 0deg,
978
+ var(--t42-multi-channel-selector-3-color-1) 120deg,
979
+ var(--t42-multi-channel-selector-3-color-2) 120deg,
980
+ var(--t42-multi-channel-selector-3-color-2) 240deg,
981
+ var(--t42-multi-channel-selector-3-color-3) 240deg,
982
+ var(--t42-multi-channel-selector-3-color-3) 0deg
983
+ );
984
+ mask-image: var(--t42-multi-channel-selector-3-mask);
985
+ }
986
+
987
+ .t42-multi-channel-selector-4 {
988
+ background-image: conic-gradient(
989
+ var(--t42-multi-channel-selector-4-color-1) 0deg,
990
+ var(--t42-multi-channel-selector-4-color-1) 90deg,
991
+ var(--t42-multi-channel-selector-4-color-2) 90deg,
992
+ var(--t42-multi-channel-selector-4-color-2) 180deg,
993
+ var(--t42-multi-channel-selector-4-color-3) 180deg,
994
+ var(--t42-multi-channel-selector-4-color-3) 270deg,
995
+ var(--t42-multi-channel-selector-4-color-4) 270deg,
996
+ var(--t42-multi-channel-selector-4-color-4) 0deg
997
+ );
998
+ mask-image: var(--t42-multi-channel-selector-4-mask);
999
+ }