@bundle-stats/ui 4.22.3 → 4.23.0-beta.2
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.
- package/lib/app/app.js +3 -0
- package/lib/app/app.js.map +1 -1
- package/lib/app/app.module.css +12 -2
- package/lib/chart-colors.json +58 -44
- package/lib/components/delta/delta.js +3 -13
- package/lib/components/delta/delta.js.map +1 -1
- package/lib/components/delta/delta.module.css +13 -12
- package/lib/components/delta/index.js.map +1 -1
- package/lib/components/entry-info/entry-info.js +1 -1
- package/lib/components/entry-info/entry-info.js.map +1 -1
- package/lib/components/entry-info/entry-info.module.css +1 -1
- package/lib/components/index.js +3 -1
- package/lib/components/index.js.map +1 -1
- package/lib/components/insight-icon/insight-icon.module.css +6 -6
- package/lib/components/job-name/job-name.js +1 -2
- package/lib/components/job-name/job-name.js.map +1 -1
- package/lib/components/metric-change-legend/index.js +18 -0
- package/lib/components/metric-change-legend/index.js.map +1 -0
- package/lib/components/metric-change-legend/metric-change-legend.js +91 -0
- package/lib/components/metric-change-legend/metric-change-legend.js.map +1 -0
- package/lib/components/metric-change-legend/metric-change-legend.module.css +80 -0
- package/lib/components/metric-run-info/metric-run-info.js +22 -7
- package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib/components/metrics-display-selector/metrics-display-selector.js +7 -9
- package/lib/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
- package/lib/components/metrics-display-selector/metrics-display-selector.module.css +0 -25
- package/lib/components/metrics-table-header/metrics-table-header.js +6 -6
- package/lib/components/metrics-table-header/metrics-table-header.js.map +1 -1
- package/lib/components/metrics-table-header/metrics-table-header.module.css +8 -12
- package/lib/components/metrics-table-options/metrics-table-options.js +2 -3
- package/lib/components/metrics-table-options/metrics-table-options.js.map +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.js +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.js.map +1 -1
- package/lib/components/metrics-treemap/metrics-treemap.constants.js +3 -1
- package/lib/components/metrics-treemap/metrics-treemap.constants.js.map +1 -1
- package/lib/components/metrics-treemap/metrics-treemap.js +68 -57
- package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -1
- package/lib/components/metrics-treemap/metrics-treemap.module.css +9 -16
- package/lib/components/metrics-treemap/metrics-treemap.utils.js +72 -16
- package/lib/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
- package/lib/components/run-info/run-info.js +26 -14
- package/lib/components/run-info/run-info.js.map +1 -1
- package/lib/components/run-info/run-info.module.css +35 -26
- package/lib/components/summary/summary.js +9 -10
- package/lib/components/summary/summary.js.map +1 -1
- package/lib/components/summary/summary.module.css +60 -10
- package/lib/constants.js +13 -1
- package/lib/constants.js.map +1 -1
- package/lib/css/variables.css +71 -58
- package/lib/ui/button/button.js +2 -2
- package/lib/ui/button/button.js.map +1 -1
- package/lib/ui/dialog/dialog.js +4 -2
- package/lib/ui/dialog/dialog.js.map +1 -1
- package/lib/ui/dialog/dialog.module.css +22 -0
- package/lib/ui/dropdown/dropdown.js +13 -4
- package/lib/ui/dropdown/dropdown.js.map +1 -1
- package/lib/ui/dropdown/dropdown.module.css +51 -6
- package/lib/ui/filters/filters.js +22 -11
- package/lib/ui/filters/filters.js.map +1 -1
- package/lib/ui/filters/filters.module.css +0 -14
- package/lib/ui/hover-card/hover-card.js +7 -1
- package/lib/ui/hover-card/hover-card.js.map +1 -1
- package/lib/ui/hover-card/hover-card.module.css +14 -0
- package/lib/ui/table/table.module.css +0 -1
- package/lib/ui/tooltip/tooltip.js +6 -1
- package/lib/ui/tooltip/tooltip.js.map +1 -1
- package/lib/ui/tooltip/tooltip.module.css +11 -0
- package/lib-esm/app/app.js +4 -1
- package/lib-esm/app/app.js.map +1 -1
- package/lib-esm/app/app.module.css +12 -2
- package/lib-esm/chart-colors.json +58 -44
- package/lib-esm/components/delta/delta.js +3 -13
- package/lib-esm/components/delta/delta.js.map +1 -1
- package/lib-esm/components/delta/delta.module.css +13 -12
- package/lib-esm/components/delta/index.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.js +1 -1
- package/lib-esm/components/entry-info/entry-info.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.module.css +1 -1
- package/lib-esm/components/index.js +1 -0
- package/lib-esm/components/index.js.map +1 -1
- package/lib-esm/components/insight-icon/insight-icon.module.css +6 -6
- package/lib-esm/components/job-name/job-name.js +1 -2
- package/lib-esm/components/job-name/job-name.js.map +1 -1
- package/lib-esm/components/metric-change-legend/index.js +2 -0
- package/lib-esm/components/metric-change-legend/index.js.map +1 -0
- package/lib-esm/components/metric-change-legend/metric-change-legend.js +84 -0
- package/lib-esm/components/metric-change-legend/metric-change-legend.js.map +1 -0
- package/lib-esm/components/metric-change-legend/metric-change-legend.module.css +80 -0
- package/lib-esm/components/metric-run-info/metric-run-info.js +22 -7
- package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.js +7 -9
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.module.css +0 -25
- package/lib-esm/components/metrics-table-header/metrics-table-header.js +6 -6
- package/lib-esm/components/metrics-table-header/metrics-table-header.js.map +1 -1
- package/lib-esm/components/metrics-table-header/metrics-table-header.module.css +8 -12
- package/lib-esm/components/metrics-table-options/metrics-table-options.js +3 -4
- package/lib-esm/components/metrics-table-options/metrics-table-options.js.map +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.js +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.js.map +1 -1
- package/lib-esm/components/metrics-treemap/metrics-treemap.constants.js +2 -0
- package/lib-esm/components/metrics-treemap/metrics-treemap.constants.js.map +1 -1
- package/lib-esm/components/metrics-treemap/metrics-treemap.js +74 -63
- package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -1
- package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +9 -16
- package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js +71 -17
- package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
- package/lib-esm/components/run-info/run-info.js +26 -14
- package/lib-esm/components/run-info/run-info.js.map +1 -1
- package/lib-esm/components/run-info/run-info.module.css +35 -26
- package/lib-esm/components/summary/summary.js +10 -11
- package/lib-esm/components/summary/summary.js.map +1 -1
- package/lib-esm/components/summary/summary.module.css +60 -10
- package/lib-esm/constants.js +12 -0
- package/lib-esm/constants.js.map +1 -1
- package/lib-esm/css/variables.css +71 -58
- package/lib-esm/ui/button/button.js +2 -2
- package/lib-esm/ui/button/button.js.map +1 -1
- package/lib-esm/ui/dialog/dialog.js +4 -2
- package/lib-esm/ui/dialog/dialog.js.map +1 -1
- package/lib-esm/ui/dialog/dialog.module.css +22 -0
- package/lib-esm/ui/dropdown/dropdown.js +11 -3
- package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
- package/lib-esm/ui/dropdown/dropdown.module.css +51 -6
- package/lib-esm/ui/filters/filters.js +23 -12
- package/lib-esm/ui/filters/filters.js.map +1 -1
- package/lib-esm/ui/filters/filters.module.css +0 -14
- package/lib-esm/ui/hover-card/hover-card.js +7 -1
- package/lib-esm/ui/hover-card/hover-card.js.map +1 -1
- package/lib-esm/ui/hover-card/hover-card.module.css +14 -0
- package/lib-esm/ui/table/table.module.css +0 -1
- package/lib-esm/ui/tooltip/tooltip.js +6 -1
- package/lib-esm/ui/tooltip/tooltip.js.map +1 -1
- package/lib-esm/ui/tooltip/tooltip.module.css +11 -0
- package/package.json +16 -16
- package/src/app/app.jsx +6 -1
- package/src/app/app.module.css +12 -2
- package/src/chart-colors.json +58 -44
- package/src/components/delta/delta.module.css +13 -12
- package/src/components/delta/delta.tsx +32 -0
- package/src/components/entry-info/entry-info.module.css +1 -1
- package/src/components/entry-info/entry-info.tsx +2 -2
- package/src/components/index.ts +3 -0
- package/src/components/insight-icon/insight-icon.module.css +6 -6
- package/src/components/job-name/job-name.jsx +2 -3
- package/src/components/metric-change-legend/index.ts +1 -0
- package/src/components/metric-change-legend/metric-change-legend.module.css +80 -0
- package/src/components/metric-change-legend/metric-change-legend.stories.tsx +13 -0
- package/src/components/metric-change-legend/metric-change-legend.tsx +148 -0
- package/src/components/metric-run-info/metric-run-info.tsx +32 -17
- package/src/components/metrics-display-selector/metrics-display-selector.module.css +0 -25
- package/src/components/metrics-display-selector/metrics-display-selector.tsx +25 -37
- package/src/components/metrics-table-header/metrics-table-header.module.css +8 -12
- package/src/components/metrics-table-header/metrics-table-header.tsx +5 -6
- package/src/components/metrics-table-options/metrics-table-options.tsx +5 -6
- package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
- package/src/components/metrics-treemap/metrics-treemap.constants.ts +8 -0
- package/src/components/metrics-treemap/metrics-treemap.module.css +9 -16
- package/src/components/metrics-treemap/metrics-treemap.tsx +160 -135
- package/src/components/metrics-treemap/metrics-treemap.utils.ts +141 -27
- package/src/components/run-info/run-info.module.css +35 -26
- package/src/components/run-info/run-info.stories.tsx +16 -10
- package/src/components/run-info/run-info.tsx +132 -73
- package/src/components/summary/summary.module.css +60 -10
- package/src/components/summary/summary.tsx +47 -50
- package/src/constants.ts +13 -0
- package/src/css/variables.css +71 -58
- package/src/ui/button/button.tsx +2 -1
- package/src/ui/dialog/dialog.module.css +22 -0
- package/src/ui/dialog/dialog.tsx +9 -2
- package/src/ui/dropdown/dropdown.module.css +51 -6
- package/src/ui/dropdown/dropdown.tsx +17 -2
- package/src/ui/filters/filters.module.css +0 -14
- package/src/ui/filters/filters.tsx +111 -47
- package/src/ui/hover-card/hover-card.module.css +14 -0
- package/src/ui/hover-card/hover-card.tsx +7 -1
- package/src/ui/table/table.module.css +0 -1
- package/src/ui/tooltip/tooltip.module.css +11 -0
- package/src/ui/tooltip/tooltip.tsx +6 -1
- package/types/components/delta/delta.d.ts +7 -21
- package/types/components/delta/index.d.ts +1 -1
- package/types/components/index.d.ts +3 -0
- package/types/components/metric-change-legend/index.d.ts +1 -0
- package/types/components/metric-change-legend/metric-change-legend.d.ts +4 -0
- package/types/components/metric-run-info/metric-run-info.d.ts +3 -6
- package/types/components/metrics-treemap/metrics-treemap.constants.d.ts +2 -0
- package/types/components/metrics-treemap/metrics-treemap.utils.d.ts +11 -5
- package/types/components/run-info/run-info.d.ts +16 -7
- package/types/constants.d.ts +12 -0
- package/types/ui/dialog/dialog.d.ts +3 -2
- package/types/ui/dropdown/dropdown.d.ts +4 -1
- package/types/ui/filters/filters.d.ts +2 -1
- package/vitest.config.ts +4 -0
- package/lib/components/metrics-table-options/metrics-table-options.module.css +0 -15
- package/lib-esm/components/metrics-table-options/metrics-table-options.module.css +0 -15
- package/src/components/delta/delta.jsx +0 -22
- package/src/components/metrics-table-options/metrics-table-options.module.css +0 -15
- /package/src/components/delta/{index.js → index.ts} +0 -0
|
@@ -32,22 +32,21 @@
|
|
|
32
32
|
--line-height-number: 1.2em;
|
|
33
33
|
|
|
34
34
|
/*
|
|
35
|
-
* Color scheme:
|
|
36
|
-
* https://coolors.co/287acc-da444e-55b950-efcc1a-192339
|
|
37
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
|
|
38
|
-
* https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
|
|
35
|
+
* Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
|
|
39
36
|
*/
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
|
|
38
|
+
--color-gray-25: #f9f9f9;
|
|
39
|
+
/** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
|
|
40
|
+
--color-gray-50: #ececed;
|
|
41
|
+
--color-gray-100: #c9c9cc;
|
|
42
|
+
--color-gray-200: #a7a7aa;
|
|
43
|
+
--color-gray-300: #848489;
|
|
44
|
+
--color-gray-400: #626268;
|
|
45
|
+
--color-gray-500: #3f3f47;
|
|
46
|
+
--color-gray-600: #36363c;
|
|
47
|
+
--color-gray-700: #2c2c32;
|
|
48
|
+
--color-gray-800: #232327;
|
|
49
|
+
--color-gray-900: #19191c;
|
|
51
50
|
|
|
52
51
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
53
52
|
--color-gray-light: var(--color-gray-300);
|
|
@@ -56,16 +55,17 @@
|
|
|
56
55
|
--color-gray-ultra-dark: var(--color-gray-900);
|
|
57
56
|
|
|
58
57
|
--color-red-25: #fdf5f6;
|
|
59
|
-
|
|
60
|
-
--color-red-
|
|
61
|
-
--color-red-
|
|
62
|
-
--color-red-
|
|
63
|
-
--color-red-
|
|
58
|
+
/* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
|
|
59
|
+
--color-red-50: #fbeced;
|
|
60
|
+
--color-red-100: #f5cbcd;
|
|
61
|
+
--color-red-200: #eea9ae;
|
|
62
|
+
--color-red-300: #e7878e;
|
|
63
|
+
--color-red-400: #e1666e;
|
|
64
64
|
--color-red-500: #da444e;
|
|
65
|
-
--color-red-600: #
|
|
66
|
-
--color-red-700: #
|
|
67
|
-
--color-red-800: #
|
|
68
|
-
--color-red-900: #
|
|
65
|
+
--color-red-600: #c92a35;
|
|
66
|
+
--color-red-700: #b31520;
|
|
67
|
+
--color-red-800: #8c0710;
|
|
68
|
+
--color-red-900: #660005;
|
|
69
69
|
--color-red-ultra-light: var(--color-red-100);
|
|
70
70
|
--color-red-light: var(--color-red-300);
|
|
71
71
|
--color-red: var(--color-red-500);
|
|
@@ -73,16 +73,17 @@
|
|
|
73
73
|
--color-red-ultra-dark: var(--color-red-900);
|
|
74
74
|
|
|
75
75
|
--color-blue-25: #f3f8fd;
|
|
76
|
-
|
|
77
|
-
--color-blue-
|
|
78
|
-
--color-blue-
|
|
79
|
-
--color-blue-
|
|
80
|
-
--color-blue-
|
|
76
|
+
/* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
|
|
77
|
+
--color-blue-50: #eaf2fa;
|
|
78
|
+
--color-blue-100: #c3daf1;
|
|
79
|
+
--color-blue-200: #9cc2e8;
|
|
80
|
+
--color-blue-300: #75aade;
|
|
81
|
+
--color-blue-400: #4f92d5;
|
|
81
82
|
--color-blue-500: #287acc;
|
|
82
|
-
--color-blue-600: #
|
|
83
|
-
--color-blue-700: #
|
|
84
|
-
--color-blue-800: #
|
|
85
|
-
--color-blue-900: #
|
|
83
|
+
--color-blue-600: #1168bf;
|
|
84
|
+
--color-blue-700: #0055ac;
|
|
85
|
+
--color-blue-800: #00438c;
|
|
86
|
+
--color-blue-900: #003166;
|
|
86
87
|
|
|
87
88
|
--color-blue-ultra-light: var(--color-blue-100);
|
|
88
89
|
--color-blue-light: var(--color-blue-300);
|
|
@@ -91,16 +92,17 @@
|
|
|
91
92
|
--color-blue-ultra-dark: var(--color-blue-900);
|
|
92
93
|
|
|
93
94
|
--color-green-25: #f6fbf6;
|
|
94
|
-
|
|
95
|
-
--color-green-
|
|
96
|
-
--color-green-
|
|
97
|
-
--color-green-
|
|
98
|
-
--color-green-
|
|
99
|
-
--color-green-
|
|
100
|
-
--color-green-
|
|
101
|
-
--color-green-
|
|
102
|
-
--color-green-
|
|
103
|
-
--color-green-
|
|
95
|
+
/* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
|
|
96
|
+
--color-green-50: #eef8ee;
|
|
97
|
+
--color-green-100: #cfebce;
|
|
98
|
+
--color-green-200: #b1dfaf;
|
|
99
|
+
--color-green-300: #92d28f;
|
|
100
|
+
--color-green-400: #74c670;
|
|
101
|
+
--color-green-500: #55B950;
|
|
102
|
+
--color-green-600: #3ea839;
|
|
103
|
+
--color-green-700: #2b9426;
|
|
104
|
+
--color-green-800: #1b7b16;
|
|
105
|
+
--color-green-900: #0f5f0b;
|
|
104
106
|
|
|
105
107
|
--color-green-ultra-light: var(--color-green-100);
|
|
106
108
|
--color-green-light: var(--color-green-300);
|
|
@@ -109,18 +111,18 @@
|
|
|
109
111
|
--color-green-ultra-dark: var(--color-green-900);
|
|
110
112
|
|
|
111
113
|
--color-yellow-25: #fffdf2;
|
|
112
|
-
|
|
113
|
-
--color-yellow-
|
|
114
|
-
--color-yellow-
|
|
115
|
-
--color-yellow-
|
|
116
|
-
--color-yellow-
|
|
117
|
-
--color-yellow-
|
|
118
|
-
--color-yellow-
|
|
119
|
-
--color-yellow-
|
|
120
|
-
--color-yellow-
|
|
121
|
-
--color-yellow-
|
|
122
|
-
|
|
123
|
-
|
|
114
|
+
/* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
|
|
115
|
+
--color-yellow-50: #faf3cf;
|
|
116
|
+
--color-yellow-100: #f6e9a9;
|
|
117
|
+
--color-yellow-200: #f2df83;
|
|
118
|
+
--color-yellow-300: #edd55d;
|
|
119
|
+
--color-yellow-400: #e9cb36;
|
|
120
|
+
--color-yellow-500: #e5c110;
|
|
121
|
+
--color-yellow-600: #ceae0e;
|
|
122
|
+
--color-yellow-700: #b79a0d;
|
|
123
|
+
--color-yellow-800: #a0870b;
|
|
124
|
+
--color-yellow-900: #89740a;
|
|
125
|
+
|
|
124
126
|
--color-yellow-ultra-light: var(--color-yellow-100);
|
|
125
127
|
--color-yellow-light: var(--color-yellow-300);
|
|
126
128
|
--color-yellow: var(--color-yellow-500);
|
|
@@ -130,11 +132,13 @@
|
|
|
130
132
|
--color-dark: #111;
|
|
131
133
|
--color-light: #fff;
|
|
132
134
|
|
|
133
|
-
/* Functional color variables */
|
|
134
135
|
--color-branding-light: #2b76d4;
|
|
135
136
|
--color-branding: #1a477f;
|
|
136
137
|
--color-branding-dark: #09182a;
|
|
138
|
+
}
|
|
137
139
|
|
|
140
|
+
body {
|
|
141
|
+
/* Functional color variables */
|
|
138
142
|
--color-text-ultra-light: var(--color-gray-ultra-light);
|
|
139
143
|
--color-text-light: var(--color-gray-light);
|
|
140
144
|
--color-text: var(--color-gray);
|
|
@@ -183,8 +187,8 @@
|
|
|
183
187
|
--color-backdrop: rgba(0, 0, 0, 0.05);
|
|
184
188
|
--color-shadow: rgba(0, 0, 0, 0.25);
|
|
185
189
|
|
|
186
|
-
--transition-duration-in: 0.
|
|
187
|
-
--transition-duration-out: 0.
|
|
190
|
+
--transition-duration-in: 0.16s;
|
|
191
|
+
--transition-duration-out: 0.10s;
|
|
188
192
|
--transition-in: all var(--transition-duration-in) ease-in;
|
|
189
193
|
--transition-out: all var(--transition-duration-out) ease-out;
|
|
190
194
|
|
|
@@ -219,3 +223,12 @@
|
|
|
219
223
|
--entry-info-width: 64rem;
|
|
220
224
|
--entry-info-top: var(--header-height);
|
|
221
225
|
}
|
|
226
|
+
|
|
227
|
+
@media (prefers-reduced-motion: reduce) {
|
|
228
|
+
* {
|
|
229
|
+
animation-duration: 0s !important;
|
|
230
|
+
animation-delay: 0s !important;
|
|
231
|
+
transition-duration: 0s !important;
|
|
232
|
+
transition-delay: 0s !important;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
@@ -17,13 +17,13 @@ export const BUTTON_KIND = {
|
|
|
17
17
|
SUCCES: 'success',
|
|
18
18
|
};
|
|
19
19
|
export const BUTTON_GLYPHS = BaseIcon.ICONS;
|
|
20
|
-
const ButtonComponent = (props) => {
|
|
20
|
+
const ButtonComponent = (props, ref) => {
|
|
21
21
|
const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = ButtonBaseComponent, children = null, Icon = BaseIcon, glyph, rightGlyph, ...restProps } = props;
|
|
22
22
|
const resolvedPadding = padding || ((outline || solid) && size);
|
|
23
23
|
const resolvedRadius = radius || ((outline || solid) && size);
|
|
24
24
|
const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
|
|
25
25
|
const rootClassName = cx(css.root, kind && css[kind], css[resolvedSize], outline && css.outline, outline && css[`outline--${kind}`], solid && css.solid, solid && css[`solid--${kind}`], resolvedPadding && css.padding, resolvedRadius && css[`radius--${resolvedRadius}`], active && css.active, active && outline && css[`active-outline-${kind}`], className);
|
|
26
|
-
return (React.createElement(Component, { ...restProps, className: rootClassName },
|
|
26
|
+
return (React.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
|
|
27
27
|
glyph && React.createElement(Icon, { glyph: glyph, className: css.glyph }),
|
|
28
28
|
children && React.createElement("span", { className: css.content }, children),
|
|
29
29
|
rightGlyph && React.createElement(Icon, { glyph: rightGlyph, className: css.glyph })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,mBAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,GAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,GAAG,CAAC,OAAO,EACtB,OAAO,IAAI,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,GAAG,CAAC,KAAK,EAClB,KAAK,IAAI,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,GAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,GAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
|
-
import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
|
|
3
|
+
import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss, useDialogState as useAriakitDialogState, } from 'ariakit/dialog';
|
|
4
4
|
import { Stack } from '../../layout/stack';
|
|
5
5
|
import { BUTTON_GLYPHS, Button } from '../button';
|
|
6
6
|
import css from './dialog.module.css';
|
|
7
|
-
export
|
|
7
|
+
export const useDialogState = (options = {}) => {
|
|
8
|
+
return useAriakitDialogState({ animated: true, ...options });
|
|
9
|
+
};
|
|
8
10
|
export const Dialog = (props) => {
|
|
9
11
|
const { state, className = '', title = '', width = 'medium', center = false, modal = false, children, } = props;
|
|
10
12
|
const rootClassName = cx(css.dialog, width && css[`width--${width}`], center && css.center);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,aAAa,IAAI,oBAAoB,EACrC,cAAc,IAAI,qBAAqB,GAExC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAA4B,EAAE,EAAE,EAAE;IAC/D,OAAO,qBAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC/D,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC3C,MAAM,EACJ,KAAK,EACL,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,aAAa,EAAE;YACb,SAAS,EAAE,GAAG,CAAC,QAAQ;SACxB,EACD,MAAM,QACN,SAAS,EAAE,aAAa;QAEvB,CAAC,KAAK,IAAI,CACT,oBAAC,oBAAoB,IAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,WAAW,IAErF,IAAI,CACgB,CACxB;QACD,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;YAClB,KAAK,IAAI,CACR,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,IAC1B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,GAAG,CAAC,WAAW,IAAG,KAAK,CAAM,CAAC,CAAC,CAAC,KAAK,CAC1E,CACV;YACD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CACtD,CACM,CACjB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
z-index: var(--layer-xxhigh);
|
|
6
|
+
opacity: 0;
|
|
7
|
+
transition: var(--transition-out);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.backdrop[data-enter] {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
transition: var(--transition-in);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.backdrop[data-leave] {
|
|
16
|
+
pointer-events: none;
|
|
6
17
|
}
|
|
7
18
|
|
|
8
19
|
.backdrop::before {
|
|
@@ -27,6 +38,17 @@
|
|
|
27
38
|
background: var(--color-background);
|
|
28
39
|
box-shadow: 0 0 var(--space-medium) var(--color-shadow);
|
|
29
40
|
z-index: var(--layer-xxhigh);
|
|
41
|
+
opacity: 0;
|
|
42
|
+
transition: var(--transition-out);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dialog[data-enter] {
|
|
46
|
+
opacity: 1;
|
|
47
|
+
transition: var(--transition-in);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.digalog[data-leave] {
|
|
51
|
+
pointer-events: none;
|
|
30
52
|
}
|
|
31
53
|
|
|
32
54
|
.header {
|
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
|
|
4
|
+
import isNull from 'lodash/isNull';
|
|
5
|
+
import isUndefined from 'lodash/isUndefined';
|
|
4
6
|
import { Button, BUTTON_SIZE } from '../button';
|
|
5
7
|
import css from './dropdown.module.css';
|
|
8
|
+
import { Icon } from '../icon';
|
|
9
|
+
export const DropdownGroup = (props) => {
|
|
10
|
+
const { className, ...restProps } = props;
|
|
11
|
+
return React.createElement("div", { className: cx(css.group, className), ...restProps });
|
|
12
|
+
};
|
|
6
13
|
export const DropdownItem = (props) => {
|
|
7
14
|
const { className = '', isActive = false, ...restProps } = props;
|
|
8
15
|
return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
|
|
9
16
|
};
|
|
10
17
|
export const Dropdown = (props) => {
|
|
11
|
-
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, placement, gutter = 4, shift, children, } = props;
|
|
18
|
+
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron: initialShowChevron, disabled = false, placement, gutter = 4, shift, children, } = props;
|
|
12
19
|
const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
|
|
13
|
-
const menuState = useMenuState({ placement, gutter, shift });
|
|
20
|
+
const menuState = useMenuState({ animated: true, placement, gutter, shift });
|
|
21
|
+
const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
|
|
14
22
|
return (React.createElement(React.Fragment, null,
|
|
15
|
-
React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, className) }, label),
|
|
23
|
+
React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, toggleOnClick: true, tabIndex: null, className: cx(css.button, className) }, label),
|
|
16
24
|
React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
|
|
17
25
|
};
|
|
18
26
|
//# sourceMappingURL=dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAkB,YAAY,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1C,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAAC;AACrE,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgE,EAAE,EAAE;IAC/F,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAkD,EAAE,EAAE;IAC7E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,iBAAiB,GAAG,EAAE,EACtB,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,kBAAkB,EAC/B,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,GAAG,CAAC,EACV,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAE1F,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC7D,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,aAAa,QACb,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,oBAAC,IAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -13,9 +13,23 @@
|
|
|
13
13
|
border-radius: var(--radius-small);
|
|
14
14
|
box-shadow: var(--shadow-layer);
|
|
15
15
|
background: var(--color-background);
|
|
16
|
-
min-width:
|
|
16
|
+
min-width: 16em;
|
|
17
17
|
z-index: var(--layer-high);
|
|
18
|
-
padding:
|
|
18
|
+
padding: var(--space-xxxsmall);
|
|
19
|
+
color: var(--color-text-light);
|
|
20
|
+
font-size: var(--size-small);
|
|
21
|
+
line-height: var(--line-height);
|
|
22
|
+
opacity: 0;
|
|
23
|
+
transition: var(--transition-out);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.dropdown[data-enter] {
|
|
27
|
+
opacity: 1;
|
|
28
|
+
transition: var(--transition-in);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dropdown[data-leave] {
|
|
32
|
+
pointer-events: none;
|
|
19
33
|
}
|
|
20
34
|
|
|
21
35
|
.dropdown:focus {
|
|
@@ -29,12 +43,9 @@
|
|
|
29
43
|
outline: none;
|
|
30
44
|
border: 0;
|
|
31
45
|
border-radius: var(--radius-small);
|
|
32
|
-
padding:
|
|
46
|
+
padding: var(--space-xxxsmall);
|
|
33
47
|
background: none;
|
|
34
48
|
text-align: left;
|
|
35
|
-
color: var(--color-text-light);
|
|
36
|
-
font-size: var(--size-small);
|
|
37
|
-
line-height: var(--line-height);
|
|
38
49
|
text-decoration: none;
|
|
39
50
|
cursor: default;
|
|
40
51
|
}
|
|
@@ -58,3 +69,37 @@
|
|
|
58
69
|
background: var(--color-highlight-info);
|
|
59
70
|
color: var(--color-primary-dark);
|
|
60
71
|
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
.group {
|
|
75
|
+
position: relative;
|
|
76
|
+
padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.group::before {
|
|
80
|
+
content: " ";
|
|
81
|
+
display: block;
|
|
82
|
+
position: absolute;
|
|
83
|
+
left: var(--space-xxxsmall);
|
|
84
|
+
right: var(--space-xxxsmall);
|
|
85
|
+
top: 0px;
|
|
86
|
+
height: 1px;
|
|
87
|
+
border: none;
|
|
88
|
+
background: var(--color-outline);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.group:first-child {
|
|
92
|
+
padding-top: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.group:first-child::before {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.group:last-child {
|
|
100
|
+
padding-bottom: 0;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.group:empty {
|
|
104
|
+
display: none;
|
|
105
|
+
}
|
|
@@ -4,7 +4,7 @@ import { FlexStack } from '../../layout/flex-stack';
|
|
|
4
4
|
import { Stack } from '../../layout/stack';
|
|
5
5
|
import { Button } from '../button';
|
|
6
6
|
import { ControlGroup } from '../control-group';
|
|
7
|
-
import { Dropdown, DropdownItem } from '../dropdown';
|
|
7
|
+
import { Dropdown, DropdownGroup, DropdownItem } from '../dropdown';
|
|
8
8
|
import { InputSearch } from '../input-search';
|
|
9
9
|
import * as I18N from './filters.i18n';
|
|
10
10
|
import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
|
|
@@ -15,6 +15,20 @@ const Filter = (props) => {
|
|
|
15
15
|
React.createElement("input", { type: "checkbox", id: `filter-${name}`, name: name, ...inputProps, className: css.filterControl }),
|
|
16
16
|
React.createElement("span", { title: label, className: css.filterLabel }, label)));
|
|
17
17
|
};
|
|
18
|
+
const getGroupItemKey = (groupKey, itemKey) => `${groupKey}.${itemKey}`;
|
|
19
|
+
const FilterDropdownItem = (props) => {
|
|
20
|
+
const { className, id, label, checked, disabled, onChange, toggleFilters, getOnGroupCheck } = props;
|
|
21
|
+
const onItemClick = useCallback((event) => {
|
|
22
|
+
if (disabled || event.target !== event.currentTarget) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
toggleFilters({ [id]: !checked });
|
|
26
|
+
}, [disabled, toggleFilters, id, checked]);
|
|
27
|
+
const onOnlyClick = useCallback(() => getOnGroupCheck(false, { [id]: true })(), [getOnGroupCheck, id]);
|
|
28
|
+
return (React.createElement(DropdownItem, { onClick: onItemClick, hideOnClick: false, className: cx(css.filterGroupItem, className) },
|
|
29
|
+
React.createElement(Filter, { label: label, name: id, onChange: onChange, checked: checked, disabled: disabled, className: css.filterGroupItemFilter }),
|
|
30
|
+
React.createElement(Button, { kind: "info", solid: true, size: "small", type: "button", onClick: onOnlyClick, disabled: disabled, className: css.filterGroupOnlyButton }, I18N.ONLY)));
|
|
31
|
+
};
|
|
18
32
|
const FilterGroup = (props) => {
|
|
19
33
|
const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
|
|
20
34
|
const { label: groupLabel, children: groupItems } = data;
|
|
@@ -28,16 +42,16 @@ const FilterGroup = (props) => {
|
|
|
28
42
|
`${groupLabel}:`,
|
|
29
43
|
"\u00A0",
|
|
30
44
|
React.createElement("span", { className: cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom) }, filterSuffix)));
|
|
31
|
-
const getOnGroupCheck = (value, overrides = {}) => () => {
|
|
45
|
+
const getOnGroupCheck = useCallback((value, overrides = {}) => () => {
|
|
32
46
|
const newFilters = groupItems.reduce((agg, { key: itemKey }) => ({
|
|
33
47
|
...agg,
|
|
34
|
-
[
|
|
48
|
+
[getGroupItemKey(groupKey, itemKey)]: value,
|
|
35
49
|
}), {});
|
|
36
50
|
toggleFilters({
|
|
37
51
|
...newFilters,
|
|
38
52
|
...overrides,
|
|
39
53
|
});
|
|
40
|
-
};
|
|
54
|
+
}, [groupItems, groupKey, toggleFilters]);
|
|
41
55
|
const filteredGroupItems = useMemo(() => {
|
|
42
56
|
if (!search) {
|
|
43
57
|
return groupItems;
|
|
@@ -45,21 +59,18 @@ const FilterGroup = (props) => {
|
|
|
45
59
|
return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
|
|
46
60
|
}, [search, groupItems]);
|
|
47
61
|
return (React.createElement(Dropdown, { className: className, label: dropdownLabel, ariaLabel: `${groupLabel}: ${filterSuffix}` },
|
|
48
|
-
groupItems.length > 10 && (React.createElement(
|
|
62
|
+
groupItems.length > 10 && (React.createElement(DropdownGroup, null,
|
|
49
63
|
React.createElement(InputSearch, { defaultValue: search, onChange: setSearch, placeholder: I18N.GROUP_SEARCH, debounceWait: 0 }))),
|
|
50
|
-
React.createElement(
|
|
64
|
+
React.createElement(DropdownGroup, { className: css.filterGroupItems },
|
|
51
65
|
filteredGroupItems.length === 0 && (React.createElement(Stack, { className: css.filterGroupSearchNotFound },
|
|
52
66
|
React.createElement("p", null, I18N.GROUP_NOT_FOUND),
|
|
53
67
|
React.createElement("div", null,
|
|
54
68
|
React.createElement(Button, { size: "small", kind: "primary", type: "button", onClick: () => setSearch(''), className: css.filterGroupSearchNotFoundClear }, I18N.GROUP_SEARCH_CLEAR)))),
|
|
55
69
|
filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
|
|
56
|
-
const id =
|
|
57
|
-
|
|
58
|
-
return (React.createElement(DropdownItem, { key: id, className: css.filterGroupItem },
|
|
59
|
-
React.createElement(Filter, { label: itemData.label, name: id, onChange: onCheckboxChange, checked: values[id], disabled: itemData.disabled, className: css.filterGroupItemFilter }),
|
|
60
|
-
React.createElement(Button, { kind: "info", solid: true, size: "small", type: "button", onClick: getOnOnlyClick(), disabled: itemData.disabled, className: css.filterGroupOnlyButton }, I18N.ONLY)));
|
|
70
|
+
const id = getGroupItemKey(groupKey, itemKey);
|
|
71
|
+
return (React.createElement(FilterDropdownItem, { key: id, id: id, label: itemData.label, checked: values[id], disabled: itemData.disabled, onChange: onCheckboxChange, toggleFilters: toggleFilters, getOnGroupCheck: getOnGroupCheck }));
|
|
61
72
|
})),
|
|
62
|
-
filteredGroupItems.length !== 0 && (React.createElement(
|
|
73
|
+
filteredGroupItems.length !== 0 && (React.createElement(DropdownGroup, { className: css.filterGroupActions }, areAllGroupItemsChecked ? (React.createElement(DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(false), role: "button" }, I18N.CLEAR)) : (React.createElement(DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(true), role: "button" }, I18N.CHECK))))));
|
|
63
74
|
};
|
|
64
75
|
export const Filters = (props) => {
|
|
65
76
|
const { className = '', values, filters, toggleFilter, toggleFilters } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.tsx"],"names":[],"mappings":"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"}
|
|
@@ -101,23 +101,9 @@
|
|
|
101
101
|
text-transform: lowercase;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
.filterGroupSearchWrapper {
|
|
105
|
-
padding-bottom: var(--space-xxxsmall);
|
|
106
|
-
margin-bottom: var(--space-xxxsmall);
|
|
107
|
-
border-bottom: 1px solid var(--color-outline);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
104
|
.filterGroupSearchNotFound {
|
|
111
105
|
padding: var(--space-xxsmall) 0;
|
|
112
106
|
text-align: center;
|
|
113
107
|
font-size: var(--size-small);
|
|
114
108
|
color: var(--color-text-light);
|
|
115
109
|
}
|
|
116
|
-
|
|
117
|
-
.filterGroupActions {
|
|
118
|
-
margin-top: var(--space-xxxsmall);
|
|
119
|
-
padding-top: var(--space-xxxsmall);
|
|
120
|
-
padding-bottom: var(--space-xxxsmall);
|
|
121
|
-
margin-bottom: calc(0px - var(--space-xxxsmall));
|
|
122
|
-
border-top: 1px solid var(--color-outline);
|
|
123
|
-
}
|
|
@@ -4,7 +4,13 @@ import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardS
|
|
|
4
4
|
import css from './hover-card.module.css';
|
|
5
5
|
export const HoverCard = (props) => {
|
|
6
6
|
const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
|
|
7
|
-
const state = useHovercardState({
|
|
7
|
+
const state = useHovercardState({
|
|
8
|
+
animated: true,
|
|
9
|
+
gutter: 8,
|
|
10
|
+
timeout: 300,
|
|
11
|
+
overflowPadding: 48,
|
|
12
|
+
placement: 'top',
|
|
13
|
+
});
|
|
8
14
|
const hovercardProps = useHovercard({ state, portal: true });
|
|
9
15
|
const Component = useMemo(() => {
|
|
10
16
|
if (as) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC;QAC9B,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,GAAG;QACZ,eAAe,EAAE,EAAE;QACnB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,OAAO,GAAG,CAAC;QACb,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -5,11 +5,14 @@
|
|
|
5
5
|
.anchor {
|
|
6
6
|
display: inline-block;
|
|
7
7
|
color: inherit;
|
|
8
|
+
cursor: default;
|
|
8
9
|
text-decoration: none;
|
|
10
|
+
transition: var(--transition-out);
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
.anchor:hover {
|
|
12
14
|
color: var(--color-primary);
|
|
15
|
+
transition: var(--transition-in);
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.anchor:focus {
|
|
@@ -27,4 +30,15 @@
|
|
|
27
30
|
will-change: filter;
|
|
28
31
|
background: var(--color-light);
|
|
29
32
|
font-size: var(--size-small);
|
|
33
|
+
opacity: 0;
|
|
34
|
+
transition: var(--transition-out);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.hoverCard[data-enter] {
|
|
38
|
+
opacity: 1;
|
|
39
|
+
transition: var(--transition-in);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.hoverCard[data-leave] {
|
|
43
|
+
pointer-events: none;
|
|
30
44
|
}
|
|
@@ -5,7 +5,12 @@ import css from './tooltip.module.css';
|
|
|
5
5
|
export const Tooltip = (props) => {
|
|
6
6
|
var _a;
|
|
7
7
|
const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, ...restProps } = props;
|
|
8
|
-
const tooltip = useTooltipState({
|
|
8
|
+
const tooltip = useTooltipState({
|
|
9
|
+
animated: true,
|
|
10
|
+
placement: 'top',
|
|
11
|
+
overflowPadding: 48,
|
|
12
|
+
timeout: 300,
|
|
13
|
+
});
|
|
9
14
|
return (React.createElement(React.Fragment, null,
|
|
10
15
|
React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, "aria-controls": tooltip.open ? (_a = tooltip.contentElement) === null || _a === void 0 ? void 0 : _a.id : '', ...(ref ? { ref } : {}), ...restProps }),
|
|
11
16
|
title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC;QAC9B,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,KAAK;QAChB,eAAe,EAAE,EAAE;QACnB,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IAEH,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
|