@gooddata/sdk-ui-kit 11.41.0-alpha.2 → 11.41.0-alpha.4

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 (28) hide show
  1. package/esm/@ui/UiControlButton/UiControlButton.d.ts +7 -1
  2. package/esm/@ui/UiControlButton/UiControlButton.js +7 -2
  3. package/esm/@ui/UiListbox/UiListbox.js +6 -2
  4. package/esm/@ui/UiTags/UiTag.d.ts +1 -0
  5. package/esm/@ui/UiTags/UiTag.js +2 -2
  6. package/esm/@ui/UiTags/UiTags.d.ts +1 -1
  7. package/esm/@ui/UiTags/UiTags.js +13 -8
  8. package/esm/@ui/UiTags/types.d.ts +13 -0
  9. package/esm/AutoSize/AutoSize.js +25 -4
  10. package/esm/WidgetNotice/WidgetNotice.d.ts +26 -0
  11. package/esm/WidgetNotice/WidgetNotice.js +37 -0
  12. package/esm/index.d.ts +1 -0
  13. package/esm/index.js +1 -0
  14. package/esm/sdk-ui-kit.d.ts +47 -2
  15. package/esm/tsdoc-metadata.json +1 -1
  16. package/esm/utils/drag.d.ts +2 -1
  17. package/esm/utils/drag.js +1 -1
  18. package/esm/utils/scroll.d.ts +2 -1
  19. package/esm/utils/scroll.js +1 -1
  20. package/package.json +12 -12
  21. package/src/@ui/UiControlButton/UiControlButton.scss +67 -0
  22. package/src/@ui/UiTags/UiTags.scss +5 -0
  23. package/src/WidgetNotice/WidgetNotice.scss +114 -0
  24. package/styles/css/UiControlButton.css +48 -0
  25. package/styles/css/UiControlButton.css.map +1 -1
  26. package/styles/css/main.css +151 -0
  27. package/styles/css/main.css.map +1 -1
  28. package/styles/scss/main.scss +1 -0
package/src/WidgetNotice/WidgetNotice.scss ADDED
@@ -0,0 +1,114 @@
1
+ // (C) 2026 GoodData Corporation
2
+
3
+ .gd-ui-kit-widget-notice {
4
+ display: inline-flex;
5
+ flex-direction: column;
6
+ align-items: stretch;
7
+ max-width: 100%;
8
+ box-sizing: border-box;
9
+ color: var(--gd-palette-complementary-7, #6d7680);
10
+ font-size: 12px;
11
+ line-height: 16px;
12
+ background: var(--gd-palette-complementary-0, #fff);
13
+ border: 1px solid var(--gd-palette-complementary-3, #dde4eb);
14
+ border-radius: 3px;
15
+ box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
16
+
17
+ &__header {
18
+ display: flex;
19
+ gap: 7px;
20
+ align-items: flex-start;
21
+ padding: 5.5px 5px 5.5px 10px;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ &__content {
26
+ display: flex;
27
+ flex: 1 1 auto;
28
+ gap: 7px;
29
+ align-items: flex-start;
30
+ min-width: 236px;
31
+ }
32
+
33
+ &__icon {
34
+ display: inline-flex;
35
+ flex: 0 0 auto;
36
+ align-items: center;
37
+ justify-content: center;
38
+ width: 16px;
39
+ height: 22px;
40
+ }
41
+
42
+ &__text {
43
+ display: flex;
44
+ flex-wrap: wrap;
45
+ gap: 7px;
46
+ align-items: center;
47
+ min-width: 0;
48
+ min-height: 22px;
49
+ padding: 3px 0;
50
+ box-sizing: border-box;
51
+ }
52
+
53
+ &__message {
54
+ font-family: var(--gd-font-family);
55
+ font-weight: 700;
56
+ overflow-wrap: anywhere;
57
+ }
58
+
59
+ &__action,
60
+ &__detail-action {
61
+ display: inline-flex;
62
+
63
+ a {
64
+ color: var(--gd-palette-complementary-6, #94a1ad);
65
+ cursor: pointer;
66
+ text-decoration: underline;
67
+ }
68
+
69
+ a:hover {
70
+ color: var(--gd-palette-complementary-6, #94a1ad);
71
+ text-decoration: underline;
72
+ }
73
+ }
74
+
75
+ &__toggle {
76
+ margin: 0;
77
+ padding: 0;
78
+ color: var(--gd-palette-complementary-6, #94a1ad);
79
+ font: inherit;
80
+ font-weight: 400;
81
+ text-decoration: underline;
82
+ background: transparent;
83
+ border: 0;
84
+ cursor: pointer;
85
+ }
86
+
87
+ .gd-ui-kit-icon-button {
88
+ --gd-button-width: 16px;
89
+
90
+ flex: 0 0 auto;
91
+ height: 16px;
92
+ min-width: 16px;
93
+ margin-top: 3px;
94
+ }
95
+
96
+ &__detail {
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 5px;
100
+ width: 100%;
101
+ max-width: 100%;
102
+ box-sizing: border-box;
103
+ padding: 5px 10px 10px 10px;
104
+ background: var(--gd-palette-complementary-0, #fff);
105
+ border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
106
+ border-bottom-right-radius: 3px;
107
+ border-bottom-left-radius: 3px;
108
+ }
109
+
110
+ &__detail-text {
111
+ line-height: 17px;
112
+ overflow-wrap: anywhere;
113
+ }
114
+ }
package/styles/css/UiControlButton.css CHANGED
@@ -81,6 +81,54 @@
81
81
  border-color: transparent;
82
82
  text-decoration: none;
83
83
  }
84
+ .gd-ui-kit-control-button--layout-row {
85
+ width: 100%;
86
+ max-width: none;
87
+ box-sizing: border-box;
88
+ font-size: 14px;
89
+ border-radius: 0;
90
+ padding-top: 15px;
91
+ padding-bottom: 15px;
92
+ padding-right: 28px;
93
+ }
94
+ .gd-ui-kit-control-button--layout-row::after {
95
+ display: none;
96
+ }
97
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__icon {
98
+ display: flex;
99
+ height: 100%;
100
+ align-items: center;
101
+ }
102
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__content {
103
+ flex-direction: row;
104
+ align-items: center;
105
+ justify-content: flex-start;
106
+ }
107
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__title-row {
108
+ flex: 0 1 auto;
109
+ min-width: 0;
110
+ max-width: 100%;
111
+ margin-right: 5px;
112
+ }
113
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__title--withColon::after {
114
+ content: ":";
115
+ }
116
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__subtitle-row {
117
+ flex: 1 1 auto;
118
+ min-width: 0;
119
+ max-width: none;
120
+ }
121
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__subtitle-row::after {
122
+ position: absolute;
123
+ top: 50%;
124
+ right: -16px;
125
+ margin-left: 0;
126
+ font-size: 18px;
127
+ transform: translateY(-50%);
128
+ }
129
+ .gd-ui-kit-control-button--hideChevron .gd-ui-kit-control-button__subtitle-row::after {
130
+ display: none;
131
+ }
84
132
  .gd-ui-kit-control-button__icon {
85
133
  position: relative;
86
134
  z-index: 1;
package/styles/css/UiControlButton.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/@ui/UiControlButton/UiControlButton.scss"],"names":[],"mappings":"AAIA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EAEI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;AAGJ;EACI,YACI;;AAGJ;EACI;;AAMR;EACI;EACA;;AAMJ;EACI;;AAGJ;EACI;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EAGI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI","file":"UiControlButton.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/@ui/UiControlButton/UiControlButton.scss"],"names":[],"mappings":"AAIA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EAEI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;AAGJ;EACI,YACI;;AAGJ;EACI;;AAMR;EACI;EACA;;AAMJ;EACI;;AAGJ;EACI;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EAGI;EACA;EACA;EACA;EACA;;AAMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;;AAGJ;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGA;EACI;EACA;EAEA;EACA;EACA;EACA;;AAMR;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI","file":"UiControlButton.css"}
package/styles/css/main.css CHANGED
@@ -1356,6 +1356,54 @@
1356
1356
  border-color: transparent;
1357
1357
  text-decoration: none;
1358
1358
  }
1359
+ .gd-ui-kit-control-button--layout-row {
1360
+ width: 100%;
1361
+ max-width: none;
1362
+ box-sizing: border-box;
1363
+ font-size: 14px;
1364
+ border-radius: 0;
1365
+ padding-top: 15px;
1366
+ padding-bottom: 15px;
1367
+ padding-right: 28px;
1368
+ }
1369
+ .gd-ui-kit-control-button--layout-row::after {
1370
+ display: none;
1371
+ }
1372
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__icon {
1373
+ display: flex;
1374
+ height: 100%;
1375
+ align-items: center;
1376
+ }
1377
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__content {
1378
+ flex-direction: row;
1379
+ align-items: center;
1380
+ justify-content: flex-start;
1381
+ }
1382
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__title-row {
1383
+ flex: 0 1 auto;
1384
+ min-width: 0;
1385
+ max-width: 100%;
1386
+ margin-right: 5px;
1387
+ }
1388
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__title--withColon::after {
1389
+ content: ":";
1390
+ }
1391
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__subtitle-row {
1392
+ flex: 1 1 auto;
1393
+ min-width: 0;
1394
+ max-width: none;
1395
+ }
1396
+ .gd-ui-kit-control-button--layout-row .gd-ui-kit-control-button__subtitle-row::after {
1397
+ position: absolute;
1398
+ top: 50%;
1399
+ right: -16px;
1400
+ margin-left: 0;
1401
+ font-size: 18px;
1402
+ transform: translateY(-50%);
1403
+ }
1404
+ .gd-ui-kit-control-button--hideChevron .gd-ui-kit-control-button__subtitle-row::after {
1405
+ display: none;
1406
+ }
1359
1407
  .gd-ui-kit-control-button__icon {
1360
1408
  position: relative;
1361
1409
  z-index: 1;
@@ -2848,6 +2896,10 @@
2848
2896
  display: flex;
2849
2897
  max-width: 280px;
2850
2898
  width: 280px;
2899
+ max-height: calc(100vh - 160px);
2900
+ overflow-x: hidden;
2901
+ overflow-y: auto;
2902
+ overscroll-behavior: contain;
2851
2903
  flex-direction: row;
2852
2904
  flex-wrap: wrap;
2853
2905
  gap: 5px;
@@ -14715,4 +14767,103 @@ input[type=search]::-webkit-search-cancel-button {
14715
14767
  animation: gd-upload-status-spin 0.7s ease-in-out infinite;
14716
14768
  }
14717
14769
 
14770
+ .gd-ui-kit-widget-notice {
14771
+ display: inline-flex;
14772
+ flex-direction: column;
14773
+ align-items: stretch;
14774
+ max-width: 100%;
14775
+ box-sizing: border-box;
14776
+ color: var(--gd-palette-complementary-7, #6d7680);
14777
+ font-size: 12px;
14778
+ line-height: 16px;
14779
+ background: var(--gd-palette-complementary-0, #fff);
14780
+ border: 1px solid var(--gd-palette-complementary-3, #dde4eb);
14781
+ border-radius: 3px;
14782
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
14783
+ }
14784
+ .gd-ui-kit-widget-notice__header {
14785
+ display: flex;
14786
+ gap: 7px;
14787
+ align-items: flex-start;
14788
+ padding: 5.5px 5px 5.5px 10px;
14789
+ box-sizing: border-box;
14790
+ }
14791
+ .gd-ui-kit-widget-notice__content {
14792
+ display: flex;
14793
+ flex: 1 1 auto;
14794
+ gap: 7px;
14795
+ align-items: flex-start;
14796
+ min-width: 236px;
14797
+ }
14798
+ .gd-ui-kit-widget-notice__icon {
14799
+ display: inline-flex;
14800
+ flex: 0 0 auto;
14801
+ align-items: center;
14802
+ justify-content: center;
14803
+ width: 16px;
14804
+ height: 22px;
14805
+ }
14806
+ .gd-ui-kit-widget-notice__text {
14807
+ display: flex;
14808
+ flex-wrap: wrap;
14809
+ gap: 7px;
14810
+ align-items: center;
14811
+ min-width: 0;
14812
+ min-height: 22px;
14813
+ padding: 3px 0;
14814
+ box-sizing: border-box;
14815
+ }
14816
+ .gd-ui-kit-widget-notice__message {
14817
+ font-family: var(--gd-font-family);
14818
+ font-weight: 700;
14819
+ overflow-wrap: anywhere;
14820
+ }
14821
+ .gd-ui-kit-widget-notice__action, .gd-ui-kit-widget-notice__detail-action {
14822
+ display: inline-flex;
14823
+ }
14824
+ .gd-ui-kit-widget-notice__action a, .gd-ui-kit-widget-notice__detail-action a {
14825
+ color: var(--gd-palette-complementary-6, #94a1ad);
14826
+ cursor: pointer;
14827
+ text-decoration: underline;
14828
+ }
14829
+ .gd-ui-kit-widget-notice__action a:hover, .gd-ui-kit-widget-notice__detail-action a:hover {
14830
+ color: var(--gd-palette-complementary-6, #94a1ad);
14831
+ text-decoration: underline;
14832
+ }
14833
+ .gd-ui-kit-widget-notice__toggle {
14834
+ margin: 0;
14835
+ padding: 0;
14836
+ color: var(--gd-palette-complementary-6, #94a1ad);
14837
+ font: inherit;
14838
+ font-weight: 400;
14839
+ text-decoration: underline;
14840
+ background: transparent;
14841
+ border: 0;
14842
+ cursor: pointer;
14843
+ }
14844
+ .gd-ui-kit-widget-notice .gd-ui-kit-icon-button {
14845
+ --gd-button-width: 16px;
14846
+ flex: 0 0 auto;
14847
+ height: 16px;
14848
+ min-width: 16px;
14849
+ margin-top: 3px;
14850
+ }
14851
+ .gd-ui-kit-widget-notice__detail {
14852
+ display: flex;
14853
+ flex-direction: column;
14854
+ gap: 5px;
14855
+ width: 100%;
14856
+ max-width: 100%;
14857
+ box-sizing: border-box;
14858
+ padding: 5px 10px 10px 10px;
14859
+ background: var(--gd-palette-complementary-0, #fff);
14860
+ border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
14861
+ border-bottom-right-radius: 3px;
14862
+ border-bottom-left-radius: 3px;
14863
+ }
14864
+ .gd-ui-kit-widget-notice__detail-text {
14865
+ line-height: 17px;
14866
+ overflow-wrap: anywhere;
14867
+ }
14868
+
14718
14869
  /*# sourceMappingURL=main.css.map */