@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.10
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 +4 -8
- package/lib/app/app.js.map +1 -1
- package/lib/app/app.module.css +2 -2
- package/lib/components/bundle-assets/bundle-assets.js +12 -5
- package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib/components/bundle-assets/bundle-assets.module.css +0 -5
- package/lib/components/bundle-assets/index.js +2 -2
- package/lib/components/bundle-assets/index.js.map +1 -1
- package/lib/components/bundle-assets-totals/bundle-assets-totals.js +22 -11
- package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.js +22 -12
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.module.css +0 -5
- package/lib/components/bundle-modules/index.js +2 -2
- package/lib/components/bundle-modules/index.js.map +1 -1
- package/lib/components/bundle-packages/bundle-packages.js +10 -3
- package/lib/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib/components/bundle-packages/bundle-packages.module.css +0 -5
- package/lib/components/bundle-packages/index.js +2 -2
- package/lib/components/bundle-packages/index.js.map +1 -1
- package/lib/components/index.js +1 -3
- package/lib/components/index.js.map +1 -1
- package/lib/components/jobs-header/jobs-header.module.css +0 -4
- package/lib/components/metrics-display-selector/metrics-display-selector.js +4 -10
- package/lib/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.i18n.js +1 -6
- package/lib/components/metrics-table/metrics-table.i18n.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.js +4 -37
- package/lib/components/metrics-table/metrics-table.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.module.css +1 -44
- package/lib/components/{total-size-type-title → metrics-table-header}/index.js +1 -1
- package/lib/components/metrics-table-header/index.js.map +1 -0
- package/lib/components/metrics-table-header/metrics-table-header.i18n.js +9 -0
- package/lib/components/metrics-table-header/metrics-table-header.i18n.js.map +1 -0
- package/lib/components/metrics-table-header/metrics-table-header.js +79 -0
- package/lib/components/metrics-table-header/metrics-table-header.js.map +1 -0
- package/lib/components/metrics-table-header/metrics-table-header.module.css +51 -0
- package/lib/components/metrics-table-options/metrics-table-options.js +2 -2
- 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-table-title/metrics-table-title.module.css +4 -4
- package/lib/components/metrics-treemap/metrics-treemap.js +66 -51
- package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -1
- package/lib/components/metrics-treemap/metrics-treemap.module.css +89 -56
- package/lib/components/sort-button/sort-button.module.css +1 -0
- package/lib/css/variables.css +11 -11
- package/lib/hooks/entry-info.js +12 -0
- package/lib/hooks/entry-info.js.map +1 -0
- package/lib/layout/flex-stack/flex-stack.js +3 -4
- package/lib/layout/flex-stack/flex-stack.js.map +1 -1
- package/lib/layout/flex-stack/flex-stack.module.css +19 -23
- package/lib/query-state.js +1 -1
- package/lib/query-state.js.map +1 -1
- package/lib/ui/button/button.module.css +1 -0
- package/lib/ui/dropdown/dropdown.js +10 -40
- package/lib/ui/dropdown/dropdown.js.map +1 -1
- package/lib/ui/dropdown/index.js.map +1 -1
- package/lib/ui/filters/filters.js +33 -35
- package/lib/ui/filters/filters.js.map +1 -1
- package/lib/ui/filters/filters.module.css +55 -67
- package/lib/ui/hover-card/hover-card.js +1 -1
- package/lib/ui/hover-card/hover-card.js.map +1 -1
- package/lib/ui/toolbar/toolbar.module.css +1 -3
- package/lib-esm/app/app.js +4 -8
- package/lib-esm/app/app.js.map +1 -1
- package/lib-esm/app/app.module.css +2 -2
- package/lib-esm/components/bundle-assets/bundle-assets.js +12 -5
- package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.module.css +0 -5
- package/lib-esm/components/bundle-assets/index.js +3 -3
- package/lib-esm/components/bundle-assets/index.js.map +1 -1
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +23 -12
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.js +22 -12
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.module.css +0 -5
- package/lib-esm/components/bundle-modules/index.js +2 -2
- package/lib-esm/components/bundle-modules/index.js.map +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.js +10 -3
- package/lib-esm/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.module.css +0 -5
- package/lib-esm/components/bundle-packages/index.js +3 -3
- package/lib-esm/components/bundle-packages/index.js.map +1 -1
- package/lib-esm/components/index.js +0 -1
- package/lib-esm/components/index.js.map +1 -1
- package/lib-esm/components/jobs-header/jobs-header.module.css +0 -4
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.js +4 -10
- package/lib-esm/components/metrics-display-selector/metrics-display-selector.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.i18n.js +0 -5
- package/lib-esm/components/metrics-table/metrics-table.i18n.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.js +4 -37
- package/lib-esm/components/metrics-table/metrics-table.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.module.css +1 -44
- package/lib-esm/components/metrics-table-header/index.js +2 -0
- package/lib-esm/components/metrics-table-header/index.js.map +1 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.i18n.js +6 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.i18n.js.map +1 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.js +49 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.js.map +1 -0
- package/lib-esm/components/metrics-table-header/metrics-table-header.module.css +51 -0
- package/lib-esm/components/metrics-table-options/metrics-table-options.js +3 -3
- 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-table-title/metrics-table-title.module.css +4 -4
- package/lib-esm/components/metrics-treemap/metrics-treemap.js +69 -53
- package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -1
- package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +89 -56
- package/lib-esm/components/sort-button/sort-button.module.css +1 -0
- package/lib-esm/css/variables.css +11 -11
- package/lib-esm/hooks/entry-info.js +8 -0
- package/lib-esm/hooks/entry-info.js.map +1 -0
- package/lib-esm/layout/flex-stack/flex-stack.js +3 -4
- package/lib-esm/layout/flex-stack/flex-stack.js.map +1 -1
- package/lib-esm/layout/flex-stack/flex-stack.module.css +19 -23
- package/lib-esm/query-state.js +1 -1
- package/lib-esm/query-state.js.map +1 -1
- package/lib-esm/ui/button/button.module.css +1 -0
- package/lib-esm/ui/dropdown/dropdown.js +8 -39
- package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
- package/lib-esm/ui/dropdown/index.js.map +1 -1
- package/lib-esm/ui/filters/filters.js +34 -36
- package/lib-esm/ui/filters/filters.js.map +1 -1
- package/lib-esm/ui/filters/filters.module.css +55 -67
- package/lib-esm/ui/hover-card/hover-card.js +1 -1
- package/lib-esm/ui/hover-card/hover-card.js.map +1 -1
- package/lib-esm/ui/toolbar/toolbar.module.css +1 -3
- package/package.json +8 -10
- package/src/app/app.jsx +4 -12
- package/src/app/app.module.css +2 -2
- package/src/components/bundle-assets/bundle-assets.jsx +24 -7
- package/src/components/bundle-assets/bundle-assets.module.css +0 -5
- package/src/components/bundle-assets/index.jsx +8 -3
- package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +55 -24
- package/src/components/bundle-modules/bundle-modules.module.css +0 -5
- package/src/components/bundle-modules/bundle-modules.tsx +60 -42
- package/src/components/bundle-modules/index.tsx +2 -2
- package/src/components/bundle-packages/bundle-packages.jsx +19 -5
- package/src/components/bundle-packages/bundle-packages.module.css +0 -5
- package/src/components/bundle-packages/index.jsx +8 -3
- package/src/components/index.js +0 -1
- package/src/components/jobs-header/jobs-header.module.css +0 -4
- package/src/components/metrics-display-selector/metrics-display-selector.tsx +8 -12
- package/src/components/metrics-table/metrics-table.i18n.ts +0 -7
- package/src/components/metrics-table/metrics-table.module.css +1 -44
- package/src/components/metrics-table/metrics-table.tsx +17 -153
- package/src/components/metrics-table-header/index.ts +1 -0
- package/src/components/metrics-table-header/metrics-table-header.i18n.ts +6 -0
- package/src/components/metrics-table-header/metrics-table-header.module.css +51 -0
- package/src/components/metrics-table-header/metrics-table-header.tsx +172 -0
- package/src/components/metrics-table-options/metrics-table-options.jsx +4 -10
- package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
- package/src/components/metrics-table-title/metrics-table-title.module.css +4 -4
- package/src/components/metrics-treemap/metrics-treemap.module.css +89 -56
- package/src/components/metrics-treemap/metrics-treemap.tsx +151 -118
- package/src/components/sort-button/sort-button.module.css +1 -0
- package/src/css/variables.css +11 -11
- package/src/hooks/entry-info.ts +19 -0
- package/src/layout/flex-stack/flex-stack.module.css +19 -23
- package/src/layout/flex-stack/flex-stack.tsx +2 -8
- package/src/query-state.tsx +1 -1
- package/src/ui/button/button.module.css +1 -0
- package/src/ui/dropdown/dropdown.stories.tsx +25 -0
- package/src/ui/dropdown/dropdown.tsx +66 -0
- package/src/ui/filters/filters.module.css +55 -67
- package/src/ui/filters/filters.stories.tsx +109 -0
- package/src/ui/filters/filters.tsx +128 -167
- package/src/ui/hover-card/hover-card.tsx +1 -1
- package/src/ui/toolbar/toolbar.module.css +1 -3
- package/types/components/bundle-assets-totals/bundle-assets-totals.d.ts +5 -1
- package/types/components/index.d.ts +0 -1
- package/types/components/metrics-display-selector/metrics-display-selector.d.ts +2 -2
- package/types/components/metrics-table/metrics-table.d.ts +4 -10
- package/types/components/metrics-table/metrics-table.i18n.d.ts +0 -5
- package/types/components/metrics-table-header/index.d.ts +1 -0
- package/types/components/metrics-table-header/metrics-table-header.d.ts +15 -0
- package/types/components/metrics-table-header/metrics-table-header.i18n.d.ts +5 -0
- package/types/hooks/entry-info.d.ts +8 -0
- package/types/ui/dropdown/dropdown.d.ts +12 -47
- package/types/ui/dropdown/index.d.ts +1 -1
- package/types/ui/filters/filters.d.ts +2 -7
- package/lib/components/bundle-assets-totals/bundle-assets-totals.module.css +0 -7
- package/lib/components/total-size-type-title/index.js.map +0 -1
- package/lib/components/total-size-type-title/total-size-type-title.js +0 -32
- package/lib/components/total-size-type-title/total-size-type-title.js.map +0 -1
- package/lib/components/total-size-type-title/total-size-type-title.module.css +0 -14
- package/lib/hooks/show-entry.js +0 -13
- package/lib/hooks/show-entry.js.map +0 -1
- package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.module.css +0 -7
- package/lib-esm/components/total-size-type-title/index.js +0 -2
- package/lib-esm/components/total-size-type-title/index.js.map +0 -1
- package/lib-esm/components/total-size-type-title/total-size-type-title.js +0 -25
- package/lib-esm/components/total-size-type-title/total-size-type-title.js.map +0 -1
- package/lib-esm/components/total-size-type-title/total-size-type-title.module.css +0 -14
- package/lib-esm/hooks/show-entry.js +0 -9
- package/lib-esm/hooks/show-entry.js.map +0 -1
- package/src/components/bundle-assets-totals/bundle-assets-totals.module.css +0 -7
- package/src/components/total-size-type-title/index.js +0 -1
- package/src/components/total-size-type-title/total-size-type-title.jsx +0 -41
- package/src/components/total-size-type-title/total-size-type-title.module.css +0 -14
- package/src/hooks/show-entry.ts +0 -17
- package/src/ui/dropdown/dropdown.jsx +0 -88
- package/types/components/total-size-type-title/index.d.ts +0 -1
- package/types/components/total-size-type-title/total-size-type-title.d.ts +0 -14
- package/types/hooks/show-entry.d.ts +0 -10
- /package/src/ui/dropdown/{index.js → index.ts} +0 -0
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
height: 100%;
|
|
13
13
|
fill: var(--color-text);
|
|
14
14
|
font-family: var(--font-family);
|
|
15
|
+
background: var(--color-background);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
/** Tile overlay fill background transition */
|
|
@@ -20,29 +21,14 @@
|
|
|
20
21
|
transition-property: opacity;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
transition-property: opacity;
|
|
27
|
-
opacity: 0.4;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.root .tile:hover .tileOverlay {
|
|
31
|
-
transition: var(--ui-transition-in);
|
|
32
|
-
opacity: 0.8;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/** Tile content */
|
|
36
|
-
.tileContent {
|
|
24
|
+
/** Leaf wrapper button */
|
|
25
|
+
.leaf {
|
|
26
|
+
position: absolute;
|
|
37
27
|
appearance: none;
|
|
38
28
|
border: 0;
|
|
39
|
-
border-radius:
|
|
29
|
+
border-radius: 0;
|
|
40
30
|
padding: 0;
|
|
41
31
|
background: none;
|
|
42
|
-
|
|
43
|
-
width: 100%;
|
|
44
|
-
height: 100%;
|
|
45
|
-
padding: var(--space-xxsmall) var(--space-small);
|
|
46
32
|
display: flex;
|
|
47
33
|
align-items: center;
|
|
48
34
|
font-family: var(--font-family-fixed);
|
|
@@ -51,77 +37,116 @@
|
|
|
51
37
|
text-align: left;
|
|
52
38
|
}
|
|
53
39
|
|
|
54
|
-
.
|
|
40
|
+
.leaf::before {
|
|
41
|
+
content: "";
|
|
42
|
+
display: block;
|
|
43
|
+
position: absolute;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
left: 0;
|
|
46
|
+
top: 0;
|
|
55
47
|
width: 100%;
|
|
56
|
-
|
|
48
|
+
height: 100%;
|
|
49
|
+
background-color: currentColor;
|
|
50
|
+
color: var(--color-background);
|
|
51
|
+
transition: var(--ui-transition-out);
|
|
52
|
+
transition-property: opacity;
|
|
53
|
+
opacity: 0.6;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.leaf:hover::before {
|
|
57
|
+
transition: var(--ui-transition-in);
|
|
58
|
+
opacity: 0.4;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.leafContent {
|
|
62
|
+
position: relative;
|
|
63
|
+
z-index: 1;
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
57
66
|
display: flex;
|
|
58
67
|
flex-flow: column;
|
|
59
|
-
|
|
68
|
+
justify-content: center;
|
|
69
|
+
padding: var(--space-xxsmall) var(--space-xxsmall);
|
|
70
|
+
gap: var(--space-xxxsmall);
|
|
71
|
+
line-height: var(--line-height-heading);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/** Align label to other elements on the first column leafs */
|
|
75
|
+
.leafFirstCol .leafContent {
|
|
76
|
+
padding-left: var(--space-small);
|
|
60
77
|
}
|
|
61
78
|
|
|
62
|
-
.
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
max-
|
|
79
|
+
.leadContentLabel {
|
|
80
|
+
flex: 0 1 auto;
|
|
81
|
+
width: 100%;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
max-height: calc(2em * var(--line-height-heading));
|
|
67
84
|
overflow: hidden;
|
|
68
|
-
word-break: break-word;
|
|
69
85
|
}
|
|
70
86
|
|
|
71
|
-
.
|
|
87
|
+
.leadContentValue {
|
|
72
88
|
flex: 0 0 auto;
|
|
73
89
|
max-width: calc(100% + var(--space-xxsmall));
|
|
74
|
-
margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
|
|
75
90
|
white-space: nowrap;
|
|
76
91
|
overflow: hidden;
|
|
77
92
|
}
|
|
78
93
|
|
|
79
|
-
.
|
|
94
|
+
.leadContentMetric {
|
|
80
95
|
font-weight: bold;
|
|
81
96
|
}
|
|
82
97
|
|
|
83
|
-
.
|
|
98
|
+
.leadContentDelta {
|
|
84
99
|
margin-left: var(--space-xxxsmall);
|
|
85
100
|
}
|
|
86
101
|
|
|
87
102
|
/** Tile size variation */
|
|
88
|
-
.
|
|
103
|
+
.leafSmall .leafContent {
|
|
104
|
+
padding: var(--space-xxxsmall) var(--space-xxsmall);
|
|
105
|
+
gap: 0;
|
|
89
106
|
font-size: var(--size-xsmall);
|
|
90
107
|
}
|
|
91
108
|
|
|
92
|
-
.
|
|
109
|
+
.leafSmall .leadContentLabel {
|
|
93
110
|
margin-top: 0;
|
|
94
111
|
}
|
|
95
112
|
|
|
96
113
|
/** Tile diff variation */
|
|
97
|
-
.
|
|
114
|
+
.leaf-NO_CHANGE {
|
|
98
115
|
color: var(--color-text-light);
|
|
99
116
|
}
|
|
100
117
|
|
|
101
|
-
.
|
|
102
|
-
|
|
118
|
+
.leaf-NO_CHANGE::before {
|
|
119
|
+
color: var(--color-gray-50);
|
|
120
|
+
opacity: 0.4;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.leaf-NO_CHANGE:hover::before {
|
|
124
|
+
opacity: 0.2;
|
|
103
125
|
}
|
|
104
126
|
|
|
105
|
-
.
|
|
106
|
-
|
|
127
|
+
.leaf-HIGH_NEGATIVE::before {
|
|
128
|
+
color: var(--color-red-100);
|
|
107
129
|
}
|
|
108
130
|
|
|
109
|
-
.
|
|
110
|
-
|
|
131
|
+
.leaf-NEGATIVE::before {
|
|
132
|
+
color: var(--color-red-50);
|
|
111
133
|
}
|
|
112
134
|
|
|
113
|
-
.
|
|
114
|
-
|
|
135
|
+
.leaf-LOW_NEGATIVE::before {
|
|
136
|
+
color: var(--color-red-25);
|
|
115
137
|
}
|
|
116
138
|
|
|
117
|
-
.
|
|
118
|
-
|
|
139
|
+
.leaf-LOW_POSITIVE::before {
|
|
140
|
+
color: var(--color-green-25);
|
|
119
141
|
}
|
|
120
142
|
|
|
121
|
-
.
|
|
122
|
-
|
|
143
|
+
.leaf-POSITIVE::before {
|
|
144
|
+
color: var(--color-green-50);
|
|
123
145
|
}
|
|
124
146
|
|
|
147
|
+
.leaf-HIGH_POSITIVE::before {
|
|
148
|
+
color: var(--color-green-100);
|
|
149
|
+
}
|
|
125
150
|
|
|
126
151
|
/** empty message */
|
|
127
152
|
.emptyMessage {
|
|
@@ -140,7 +165,12 @@
|
|
|
140
165
|
text-align: center;
|
|
141
166
|
}
|
|
142
167
|
|
|
143
|
-
/** tooltip
|
|
168
|
+
/** tooltip */
|
|
169
|
+
.leafContentTooltipAnchor {
|
|
170
|
+
width: 100%;
|
|
171
|
+
height: 100%;
|
|
172
|
+
}
|
|
173
|
+
|
|
144
174
|
.tooltip {
|
|
145
175
|
z-index: var(--layer-xxhigh);
|
|
146
176
|
padding: var(--space-xsmall) var(--space-small);
|
|
@@ -152,17 +182,20 @@
|
|
|
152
182
|
will-change: filter;
|
|
153
183
|
background: var(--color-light);
|
|
154
184
|
font-size: var(--size-small);
|
|
185
|
+
pointer-events: none;
|
|
155
186
|
}
|
|
156
187
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
188
|
+
/* prevent tooltip portal wrapper from capturing events */
|
|
189
|
+
div[role="presentation"]:has(.tooltip) {
|
|
190
|
+
pointer-events: none;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
.leafTooltipArrow svg {
|
|
195
|
+
display: block;
|
|
196
|
+
fill: var(--color-background) !important;
|
|
164
197
|
}
|
|
165
198
|
|
|
166
|
-
.
|
|
199
|
+
.leafTooltipContentTitle {
|
|
167
200
|
font-size: var(--size-medium);
|
|
168
201
|
}
|
|
@@ -29,20 +29,20 @@
|
|
|
29
29
|
/*
|
|
30
30
|
* Color scheme:
|
|
31
31
|
* https://coolors.co/287acc-da444e-55b950-efcc1a-192339
|
|
32
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%
|
|
32
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%233e3c49&mcgpalette4=%23287acc&themename=bundle-stats
|
|
33
33
|
* https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
|
|
34
34
|
*/
|
|
35
35
|
--color-gray-25: #f9f9fa;
|
|
36
36
|
--color-gray-50: #e8e8e9;
|
|
37
|
-
--color-gray-100: #
|
|
38
|
-
--color-gray-200: #
|
|
39
|
-
--color-gray-300: #
|
|
40
|
-
--color-gray-400: #
|
|
41
|
-
--color-gray-500: #
|
|
42
|
-
--color-gray-600: #
|
|
43
|
-
--color-gray-700: #
|
|
44
|
-
--color-gray-800: #
|
|
45
|
-
--color-gray-900: #
|
|
37
|
+
--color-gray-100: #c5c5c8;
|
|
38
|
+
--color-gray-200: #9f9ea4;
|
|
39
|
+
--color-gray-300: #787780;
|
|
40
|
+
--color-gray-400: #5b5964;
|
|
41
|
+
--color-gray-500: #3e3c49;
|
|
42
|
+
--color-gray-600: #383642;
|
|
43
|
+
--color-gray-700: #302e39;
|
|
44
|
+
--color-gray-800: #282731;
|
|
45
|
+
--color-gray-900: #1b1a21;
|
|
46
46
|
|
|
47
47
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
48
48
|
--color-gray-light: var(--color-gray-300);
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
--outline-hover: 0 0 0 3px var(--color-highlight);
|
|
200
200
|
|
|
201
201
|
/** Layout */
|
|
202
|
-
--max-width:
|
|
202
|
+
--max-width: 82rem;
|
|
203
203
|
--entry-info-width: 64rem;
|
|
204
204
|
--entry-info-top: var(--header-height);
|
|
205
205
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
export function useEntryInfo(params) {
|
|
3
|
+
const { setState } = params;
|
|
4
|
+
const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
|
|
5
|
+
const showEntryInfo = useCallback((entryId) => setState({ entryId }), [setState]);
|
|
6
|
+
return [hideEntryInfo, showEntryInfo];
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=entry-info.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"entry-info.js","sourceRoot":"","sources":["../../src/hooks/entry-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAWpC,MAAM,UAAU,YAAY,CAAC,MAA0B;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE1F,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACxC,CAAC"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
import { NO_SPACE } from '../../tokens';
|
|
4
|
-
import { getRenderChildWithClassName } from '../../utils';
|
|
5
4
|
import css from './flex-stack.module.css';
|
|
6
5
|
export const FlexStack = (props) => {
|
|
7
|
-
const { as: Component = 'div', className = '', space = NO_SPACE, inline = false,
|
|
8
|
-
const rootClassName = cx(
|
|
9
|
-
return
|
|
6
|
+
const { as: Component = 'div', className = '', space = NO_SPACE, inline = false, alignItems = '', ...restProps } = props;
|
|
7
|
+
const rootClassName = cx(css.root, css[`space--${space}`], css[`align-items--${alignItems}`], inline && css.inline, className);
|
|
8
|
+
return React.createElement(Component, { ...restProps, className: rootClassName });
|
|
10
9
|
};
|
|
11
10
|
//# sourceMappingURL=flex-stack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,
|
|
1
|
+
{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAW1C,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EACtB,GAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,MAAM,IAAI,GAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,oBAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC"}
|
|
@@ -1,48 +1,44 @@
|
|
|
1
1
|
.root {
|
|
2
2
|
display: flex;
|
|
3
|
-
align-items: stretch;
|
|
4
3
|
justify-content: flex-start;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
.root > .item:last-child {
|
|
8
|
-
margin-right: 0;
|
|
4
|
+
gap: 0;
|
|
9
5
|
}
|
|
10
6
|
|
|
11
7
|
/** Space variation */
|
|
12
|
-
.space--xxxsmall
|
|
13
|
-
|
|
8
|
+
.space--xxxsmall {
|
|
9
|
+
gap: var(--space-xxxsmall);
|
|
14
10
|
}
|
|
15
11
|
|
|
16
|
-
.space--xxsmall
|
|
17
|
-
|
|
12
|
+
.space--xxsmall {
|
|
13
|
+
gap: var(--space-xxsmall);
|
|
18
14
|
}
|
|
19
15
|
|
|
20
|
-
.space--xsmall
|
|
21
|
-
|
|
16
|
+
.space--xsmall {
|
|
17
|
+
gap: var(--space-xsmall);
|
|
22
18
|
}
|
|
23
19
|
|
|
24
|
-
.space--small
|
|
25
|
-
|
|
20
|
+
.space--small {
|
|
21
|
+
gap: var(--space-small);
|
|
26
22
|
}
|
|
27
23
|
|
|
28
|
-
.space--medium
|
|
29
|
-
|
|
24
|
+
.space--medium {
|
|
25
|
+
gap: var(--space-medium);
|
|
30
26
|
}
|
|
31
27
|
|
|
32
|
-
.space--large
|
|
33
|
-
|
|
28
|
+
.space--large {
|
|
29
|
+
gap: var(--space-large);
|
|
34
30
|
}
|
|
35
31
|
|
|
36
|
-
.space--xlarge
|
|
37
|
-
|
|
32
|
+
.space--xlarge {
|
|
33
|
+
gap: var(--space-xlarge);
|
|
38
34
|
}
|
|
39
35
|
|
|
40
|
-
.space--xxlarge
|
|
41
|
-
|
|
36
|
+
.space--xxlarge {
|
|
37
|
+
gap: var(--space-xxlarge);
|
|
42
38
|
}
|
|
43
39
|
|
|
44
|
-
.space--xxxlarge
|
|
45
|
-
|
|
40
|
+
.space--xxxlarge {
|
|
41
|
+
gap: var(--space-xxxlarge);
|
|
46
42
|
}
|
|
47
43
|
|
|
48
44
|
/** Align items variation */
|
package/lib-esm/query-state.js
CHANGED
|
@@ -15,7 +15,7 @@ export const useComponentQueryState = (componentName) => {
|
|
|
15
15
|
return;
|
|
16
16
|
}
|
|
17
17
|
setQueryState({ [componentName]: newState });
|
|
18
|
-
}, [componentState]);
|
|
18
|
+
}, [componentState, setQueryState]);
|
|
19
19
|
return [componentState, setState];
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=query-state.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE;YACrC,OAAO;SACR;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,oBAAC,kBAAkB,IAAC,OAAO,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,cAAc,CAAC;QACjD,CAAC,aAAa,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE;YACrC,OAAO;SACR;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC"}
|
|
@@ -1,49 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import cx from 'classnames';
|
|
4
3
|
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
|
|
5
4
|
import { Button, BUTTON_SIZE } from '../button';
|
|
6
5
|
import css from './dropdown.module.css';
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
className:
|
|
10
|
-
isActive: PropTypes.bool,
|
|
11
|
-
};
|
|
12
|
-
Item.defaultProps = {
|
|
13
|
-
className: '',
|
|
14
|
-
isActive: false,
|
|
6
|
+
export const DropdownItem = (props) => {
|
|
7
|
+
const { className = '', isActive = false, ...restProps } = props;
|
|
8
|
+
return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
|
|
15
9
|
};
|
|
16
10
|
export const Dropdown = (props) => {
|
|
17
|
-
const { className,
|
|
18
|
-
const
|
|
11
|
+
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', disabled = false, children, } = props;
|
|
12
|
+
const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
|
|
19
13
|
const menuState = useMenuState();
|
|
20
|
-
return (React.createElement(
|
|
21
|
-
React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button,
|
|
22
|
-
React.createElement(Menu, { state: menuState, "aria-label":
|
|
23
|
-
? children({
|
|
24
|
-
MenuItem: Item,
|
|
25
|
-
menu: menuState,
|
|
26
|
-
menuItemClassName: css.item,
|
|
27
|
-
menuItemActiveClassName: css.itemActive,
|
|
28
|
-
})
|
|
29
|
-
: children)));
|
|
30
|
-
};
|
|
31
|
-
Dropdown.defaultProps = {
|
|
32
|
-
className: '',
|
|
33
|
-
buttonClassName: '',
|
|
34
|
-
label: null,
|
|
35
|
-
ariaLabel: '',
|
|
36
|
-
glyph: null,
|
|
37
|
-
disabled: false,
|
|
38
|
-
};
|
|
39
|
-
Dropdown.propTypes = {
|
|
40
|
-
className: PropTypes.string,
|
|
41
|
-
buttonClassName: PropTypes.string,
|
|
42
|
-
label: PropTypes.node,
|
|
43
|
-
ariaLabel: PropTypes.string,
|
|
44
|
-
glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
45
|
-
disabled: PropTypes.bool,
|
|
46
|
-
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
|
|
14
|
+
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),
|
|
16
|
+
React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
|
|
47
17
|
};
|
|
48
|
-
Dropdown.Item = Item;
|
|
49
18
|
//# sourceMappingURL=dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,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;AAUF,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,QAAQ,GAAG,KAAK,EAChB,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,EAAE,CAAC;IAEjC,OAAO,CACL;QACE,oBAAC,UAAU,IACT,EAAE,EAAE,MAAM,EACV,OAAO,QACP,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,EAChB,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/dropdown/index.
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -3,25 +3,22 @@ import cx from 'classnames';
|
|
|
3
3
|
import { FlexStack } from '../../layout/flex-stack';
|
|
4
4
|
import { Stack } from '../../layout/stack';
|
|
5
5
|
import { Button } from '../button';
|
|
6
|
-
import {
|
|
6
|
+
import { ControlGroup } from '../control-group';
|
|
7
|
+
import { Dropdown, DropdownItem } from '../dropdown';
|
|
7
8
|
import { InputSearch } from '../input-search';
|
|
8
9
|
import * as I18N from './filters.i18n';
|
|
9
10
|
import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
|
|
10
11
|
import css from './filters.module.css';
|
|
11
12
|
const Filter = (props) => {
|
|
12
|
-
const { className = '',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "label", className: cx(css.filterCheckbox, buttonClassName) },
|
|
17
|
-
React.createElement("input", { type: "checkbox", id: id, name: name, ...inputProps, className: css.filterInput }),
|
|
18
|
-
React.createElement("span", { title: label, className: css.filterLabel }, label)),
|
|
19
|
-
getOnOnlyClick && (React.createElement(Button, { kind: "info", solid: true, size: "small", type: "button", onClick: getOnOnlyClick(name), className: css.filterOnlyButton }, I18N.ONLY))));
|
|
13
|
+
const { className = '', label, name, ...inputProps } = props;
|
|
14
|
+
return (React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "label", className: cx(css.filter, className) },
|
|
15
|
+
React.createElement("input", { type: "checkbox", id: `filter-${name}`, name: name, ...inputProps, className: css.filterControl }),
|
|
16
|
+
React.createElement("span", { title: label, className: css.filterLabel }, label)));
|
|
20
17
|
};
|
|
21
18
|
const FilterGroup = (props) => {
|
|
22
|
-
const { className = '',
|
|
23
|
-
const [search, setSearch] = useState('');
|
|
19
|
+
const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
|
|
24
20
|
const { label: groupLabel, children: groupItems } = data;
|
|
21
|
+
const [search, setSearch] = useState('');
|
|
25
22
|
const areAllGroupItemsChecked = groupItems
|
|
26
23
|
.map(({ key: itemKey }) => values === null || values === void 0 ? void 0 : values[`${groupKey}.${itemKey}`])
|
|
27
24
|
.reduce((agg, val) => agg && val, true);
|
|
@@ -30,7 +27,7 @@ const FilterGroup = (props) => {
|
|
|
30
27
|
const dropdownLabel = (React.createElement(React.Fragment, null,
|
|
31
28
|
`${groupLabel}:`,
|
|
32
29
|
"\u00A0",
|
|
33
|
-
React.createElement("span", { className: cx(hasCustomFilterSuffix && css.
|
|
30
|
+
React.createElement("span", { className: cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom) }, filterSuffix)));
|
|
34
31
|
const getOnGroupCheck = (value, overrides = {}) => () => {
|
|
35
32
|
const newFilters = groupItems.reduce((agg, { key: itemKey }) => ({
|
|
36
33
|
...agg,
|
|
@@ -47,22 +44,22 @@ const FilterGroup = (props) => {
|
|
|
47
44
|
}
|
|
48
45
|
return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
|
|
49
46
|
}, [search, groupItems]);
|
|
50
|
-
return (React.createElement(Dropdown, { className: className,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
React.createElement(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
React.createElement("
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
47
|
+
return (React.createElement(Dropdown, { className: className, label: dropdownLabel, ariaLabel: `${groupLabel}: ${filterSuffix}` },
|
|
48
|
+
groupItems.length > 10 && (React.createElement("div", { className: css.filterGroupSearchWrapper },
|
|
49
|
+
React.createElement(InputSearch, { defaultValue: search, onChange: setSearch, placeholder: I18N.GROUP_SEARCH, debounceWait: 0 }))),
|
|
50
|
+
React.createElement("div", { className: css.filterGroupItems },
|
|
51
|
+
filteredGroupItems.length === 0 && (React.createElement(Stack, { className: css.filterGroupSearchNotFound },
|
|
52
|
+
React.createElement("p", null, I18N.GROUP_NOT_FOUND),
|
|
53
|
+
React.createElement("div", null,
|
|
54
|
+
React.createElement(Button, { size: "small", kind: "primary", type: "button", onClick: () => setSearch(''), className: css.filterGroupSearchNotFoundClear }, I18N.GROUP_SEARCH_CLEAR)))),
|
|
55
|
+
filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
|
|
56
|
+
const id = [groupKey, itemKey].join('.');
|
|
57
|
+
const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
|
|
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)));
|
|
61
|
+
})),
|
|
62
|
+
filteredGroupItems.length !== 0 && (React.createElement("div", { 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))))));
|
|
66
63
|
};
|
|
67
64
|
export const Filters = (props) => {
|
|
68
65
|
const { className = '', values, filters, toggleFilter, toggleFilters } = props;
|
|
@@ -70,13 +67,14 @@ export const Filters = (props) => {
|
|
|
70
67
|
const { name } = event.target;
|
|
71
68
|
toggleFilter(name, !values[name]);
|
|
72
69
|
}, [toggleFilter, values]);
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
}))
|
|
70
|
+
const filterList = Object.entries(filters);
|
|
71
|
+
const filterCount = filterList.length;
|
|
72
|
+
return (React.createElement(ControlGroup, { className: cx(css.root, className) }, filterList.map(([name, data], index) => {
|
|
73
|
+
const lastItem = index === filterCount - 1;
|
|
74
|
+
if ('defaultValue' in data) {
|
|
75
|
+
return (React.createElement(Filter, { name: name, label: data.label, onChange: onCheckboxChange, checked: values[name], disabled: data.disabled, key: name, className: cx(css.filterSingle, lastItem && css.itemLast) }));
|
|
76
|
+
}
|
|
77
|
+
return (React.createElement(FilterGroup, { groupKey: name, data: data, values: values, onCheckboxChange: onCheckboxChange, toggleFilters: toggleFilters, className: cx(lastItem && css.itemLast), key: name }));
|
|
78
|
+
})));
|
|
81
79
|
};
|
|
82
80
|
//# sourceMappingURL=filters.js.map
|
|
@@ -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,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.tsx"],"names":[],"mappings":"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"}
|