@gooddata/sdk-ui-dashboard 11.40.0-alpha.2 → 11.40.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 (17) hide show
  1. package/NOTICE +348 -66
  2. package/esm/__version.d.ts +1 -1
  3. package/esm/__version.js +1 -1
  4. package/esm/presentation/dashboard/DashboardSidebar/DraggableInsightList/DraggableInsightList.js +1 -1
  5. package/esm/presentation/dashboard/DashboardSidebar/DraggableInsightList/DraggableInsightListItemWrapper.d.ts +1 -1
  6. package/esm/presentation/dashboard/DashboardSidebar/DraggableInsightList/DraggableInsightListItemWrapper.js +2 -1
  7. package/esm/presentation/dashboard/DashboardSidebar/SidebarConfigurationPanel.js +9 -2
  8. package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeChrome.d.ts +21 -0
  9. package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeChrome.js +112 -0
  10. package/esm/presentation/dragAndDrop/types.d.ts +1 -0
  11. package/esm/sdk-ui-dashboard.d.ts +1 -0
  12. package/package.json +24 -24
  13. package/styles/css/main.css +73 -0
  14. package/styles/css/main.css.map +1 -1
  15. package/styles/css/sidebar.css +73 -0
  16. package/styles/css/sidebar.css.map +1 -1
  17. package/styles/scss/sidebar.scss +94 -0
package/styles/css/sidebar.css CHANGED
@@ -13,6 +13,79 @@
13
13
  height: 100vh;
14
14
  border-right: 1px solid var(--gd-palette-complementary-3, #dde4eb);
15
15
  }
16
+ .gd-sidebar-container--resizable {
17
+ min-width: 230px;
18
+ width: 100%;
19
+ }
20
+
21
+ .gd-resizable-sidebar {
22
+ display: flex;
23
+ flex-direction: column;
24
+ flex: 0 0 auto;
25
+ }
26
+ .gd-resizable-sidebar--dragging, .gd-resizable-sidebar:has(.gd-resizable-sidebar__handle:focus) {
27
+ z-index: 9999;
28
+ }
29
+ .gd-resizable-sidebar__handle {
30
+ opacity: 0;
31
+ position: absolute;
32
+ top: 0;
33
+ bottom: 0;
34
+ transform: translateX(calc(var(--drag-x, 0) - 50%));
35
+ z-index: 2;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ width: 6px;
40
+ background: transparent;
41
+ border: 0;
42
+ cursor: col-resize;
43
+ touch-action: none;
44
+ }
45
+ .gd-resizable-sidebar__handle:focus {
46
+ outline: none;
47
+ }
48
+ .gd-resizable-sidebar__handle:disabled {
49
+ cursor: initial;
50
+ }
51
+ .gd-resizable-sidebar__handle--dragging {
52
+ opacity: 1;
53
+ }
54
+ .gd-resizable-sidebar--resizable:hover .gd-resizable-sidebar__handle, .gd-resizable-sidebar--resizable:focus-within .gd-resizable-sidebar__handle {
55
+ opacity: 1;
56
+ }
57
+ .gd-resizable-sidebar__handle-grip {
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ gap: 10px;
62
+ height: 25px;
63
+ padding: 5px 3px;
64
+ background: var(--gd-palette-complementary-0);
65
+ border: 1px solid var(--gd-palette-complementary-5);
66
+ border-radius: 2px;
67
+ }
68
+ .gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip {
69
+ border: 2px solid #14b2e2;
70
+ border-radius: 3px;
71
+ }
72
+ .gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip::after, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip::after {
73
+ content: "";
74
+ position: absolute;
75
+ top: 0;
76
+ bottom: 0;
77
+ left: 50%;
78
+ transform: translateX(-50%);
79
+ z-index: -1;
80
+ width: 2px;
81
+ background: #14b2e2;
82
+ box-shadow: 0 0 0 4px var(--gd-palette-primary-base-t85, rgba(20, 178, 226, 0.15));
83
+ }
84
+
85
+ body:has(.gd-resizable-sidebar--dragging),
86
+ body:has(.gd-resizable-sidebar--dragging) * {
87
+ cursor: col-resize;
88
+ }
16
89
 
17
90
  .add-item-panel {
18
91
  padding: 0 7px;
package/styles/css/sidebar.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Button/_variables.scss","../scss/sidebar.scss","../scss/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACDA;AAAA;AAAA;ACGA;EACI;EACA;EACA;EACA;EACA,cCoES;;;ADjEb;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OEOY;EFNZ;;AAEA;EACI,OENY;EFOZ;EACA;;AAGJ;EACI;EAIA,YACI;EAEJ;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"sidebar.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Button/_variables.scss","../scss/sidebar.scss","../scss/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACDA;AAAA;AAAA;ACGA;EACI;EACA;EACA;EACA;EACA,cCoES;;ADlET;EACI;EACA;;;AAIR;EACI;EACA;EACA;;AAIA;EAEI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YEtFS;EFuFT;;;AAQZ;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OEvFY;EFwFZ;;AAEA;EACI,OEpGY;EFqGZ;EACA;;AAGJ;EACI;EAIA,YACI;EAEJ;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"sidebar.css"}
package/styles/scss/sidebar.scss CHANGED
@@ -11,6 +11,100 @@
11
11
  width: 230px;
12
12
  height: 100vh;
13
13
  border-right: variables.$nav-border;
14
+
15
+ &--resizable {
16
+ min-width: 230px;
17
+ width: 100%;
18
+ }
19
+ }
20
+
21
+ .gd-resizable-sidebar {
22
+ display: flex;
23
+ flex-direction: column;
24
+ flex: 0 0 auto;
25
+
26
+ // Lift the wrapper above sibling main-content during drag so the indicator
27
+ // rail isn't covered by widgets/charts with their own stacking context.
28
+ &--dragging,
29
+ &:has(.gd-resizable-sidebar__handle:focus) {
30
+ z-index: 9999;
31
+ }
32
+
33
+ &__handle {
34
+ opacity: 0;
35
+ position: absolute;
36
+ top: 0;
37
+ bottom: 0;
38
+ transform: translateX(calc(var(--drag-x, 0) - 50%));
39
+ z-index: 2;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ width: 6px;
44
+ background: transparent;
45
+ border: 0;
46
+ cursor: col-resize;
47
+ // Prevent the browser from claiming the first touchmove for panning
48
+ // before pointer capture engages on pointerdown.
49
+ touch-action: none;
50
+
51
+ &:focus {
52
+ outline: none;
53
+ }
54
+
55
+ &:disabled {
56
+ cursor: initial;
57
+ }
58
+
59
+ &--dragging {
60
+ opacity: 1;
61
+ }
62
+
63
+ .gd-resizable-sidebar--resizable:hover &,
64
+ .gd-resizable-sidebar--resizable:focus-within & {
65
+ opacity: 1;
66
+ }
67
+ }
68
+
69
+ &__handle-grip {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ gap: 10px;
74
+ height: 25px;
75
+ padding: 5px 3px;
76
+ background: var(--gd-palette-complementary-0);
77
+ border: 1px solid var(--gd-palette-complementary-5);
78
+ border-radius: 2px;
79
+
80
+ .gd-resizable-sidebar--dragging &,
81
+ .gd-resizable-sidebar__handle:focus & {
82
+ border: 2px solid kit-variables.$gd-color-highlight;
83
+ border-radius: 3px;
84
+ }
85
+
86
+ .gd-resizable-sidebar--dragging &::after,
87
+ .gd-resizable-sidebar__handle:focus &::after {
88
+ content: "";
89
+ position: absolute;
90
+ top: 0;
91
+ bottom: 0;
92
+ left: 50%;
93
+ transform: translateX(-50%);
94
+ z-index: -1;
95
+ width: 2px;
96
+ background: kit-variables.$gd-color-highlight;
97
+ box-shadow: 0 0 0 4px variables.$gd-palette-primary-base-t85;
98
+ }
99
+ }
100
+ }
101
+
102
+ // Preserve the col-resize cursor across the whole page while a sidebar drag is in
103
+ // progress. The handle itself is only 6 px wide, so without this the cursor would
104
+ // revert to default the moment it leaves the hit area during a drag.
105
+ body:has(.gd-resizable-sidebar--dragging),
106
+ body:has(.gd-resizable-sidebar--dragging) * {
107
+ cursor: col-resize;
14
108
  }
15
109
 
16
110
  .add-item-panel {