@bundle-stats/ui 4.23.0-beta.1 → 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.module.css +1 -1
- package/lib/chart-colors.json +58 -44
- 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/metric-change-legend/metric-change-legend.js +2 -2
- package/lib/components/metric-change-legend/metric-change-legend.js.map +1 -1
- package/lib/components/metric-change-legend/metric-change-legend.module.css +11 -0
- package/lib/components/metric-run-info/metric-run-info.js +1 -9
- package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib/components/metrics-table-options/metrics-table-options.js +3 -4
- package/lib/components/metrics-table-options/metrics-table-options.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/ui/button/button.js +2 -2
- package/lib/ui/button/button.js.map +1 -1
- package/lib/ui/dropdown/dropdown.js +11 -3
- package/lib/ui/dropdown/dropdown.js.map +1 -1
- package/lib/ui/dropdown/dropdown.module.css +40 -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/tooltip/tooltip.js +6 -1
- package/lib/ui/tooltip/tooltip.js.map +1 -1
- package/lib-esm/app/app.module.css +1 -1
- package/lib-esm/chart-colors.json +58 -44
- 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/metric-change-legend/metric-change-legend.js +2 -2
- package/lib-esm/components/metric-change-legend/metric-change-legend.js.map +1 -1
- package/lib-esm/components/metric-change-legend/metric-change-legend.module.css +11 -0
- package/lib-esm/components/metric-run-info/metric-run-info.js +2 -10
- package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib-esm/components/metrics-table-options/metrics-table-options.js +4 -5
- package/lib-esm/components/metrics-table-options/metrics-table-options.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/ui/button/button.js +2 -2
- package/lib-esm/ui/button/button.js.map +1 -1
- package/lib-esm/ui/dropdown/dropdown.js +9 -2
- package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
- package/lib-esm/ui/dropdown/dropdown.module.css +40 -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/tooltip/tooltip.js +6 -1
- package/lib-esm/ui/tooltip/tooltip.js.map +1 -1
- package/package.json +12 -12
- package/src/app/app.module.css +1 -1
- package/src/chart-colors.json +58 -44
- package/src/components/entry-info/entry-info.module.css +1 -1
- package/src/components/entry-info/entry-info.tsx +2 -2
- package/src/components/metric-change-legend/metric-change-legend.module.css +11 -0
- package/src/components/metric-change-legend/metric-change-legend.tsx +2 -2
- package/src/components/metric-run-info/metric-run-info.tsx +2 -11
- package/src/components/metrics-table-options/metrics-table-options.tsx +6 -7
- 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/ui/button/button.tsx +2 -1
- package/src/ui/dropdown/dropdown.module.css +40 -6
- package/src/ui/dropdown/dropdown.tsx +13 -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.tsx +7 -1
- package/src/ui/tooltip/tooltip.tsx +6 -1
- package/types/components/metric-run-info/metric-run-info.d.ts +1 -0
- 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/ui/dropdown/dropdown.d.ts +3 -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/metrics-table-options/metrics-table-options.module.css +0 -15
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
* Tile group
|
|
21
21
|
*/
|
|
22
22
|
.tileGroup {
|
|
23
|
+
border-radius: var(--radius-xsmall);
|
|
23
24
|
position: absolute;
|
|
24
25
|
}
|
|
25
26
|
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
.tileGroupTitleContent {
|
|
32
33
|
width: 100%;
|
|
33
34
|
padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
|
|
35
|
+
border-radius: var(--radius-xsmall);
|
|
34
36
|
display: flex;
|
|
35
37
|
align-items: center;
|
|
36
38
|
color: var(--color-text);
|
|
@@ -66,12 +68,6 @@
|
|
|
66
68
|
.tileGroup {
|
|
67
69
|
transition: var(--transition-out);
|
|
68
70
|
transition-property: background-color, outline;
|
|
69
|
-
border-radius: var(--radius-xsmall);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.tileGroup--minimal,
|
|
73
|
-
.tileGroup--small {
|
|
74
|
-
border-radius: calc(var(--radius-xsmall) / 2);
|
|
75
71
|
}
|
|
76
72
|
|
|
77
73
|
.tileGroup--minimal .tileGroupTitle,
|
|
@@ -136,9 +132,8 @@
|
|
|
136
132
|
position: absolute;
|
|
137
133
|
appearance: none;
|
|
138
134
|
border: 0;
|
|
139
|
-
border-radius:
|
|
135
|
+
border-radius: var(--radius-xsmall);
|
|
140
136
|
padding: 0;
|
|
141
|
-
border-radius: calc(var(--radius-xsmall) / 2);
|
|
142
137
|
background: var(--color-background);
|
|
143
138
|
display: flex;
|
|
144
139
|
align-items: center;
|
|
@@ -159,6 +154,7 @@
|
|
|
159
154
|
top: 0;
|
|
160
155
|
width: 100%;
|
|
161
156
|
height: 100%;
|
|
157
|
+
border-radius: inherit;
|
|
162
158
|
background-color: currentColor;
|
|
163
159
|
}
|
|
164
160
|
|
|
@@ -170,9 +166,10 @@
|
|
|
170
166
|
display: flex;
|
|
171
167
|
flex-flow: column;
|
|
172
168
|
justify-content: center;
|
|
173
|
-
padding: var(--space-xxsmall)
|
|
169
|
+
padding: var(--space-xxsmall);
|
|
174
170
|
gap: var(--space-xxxsmall);
|
|
175
171
|
line-height: var(--line-height-heading);
|
|
172
|
+
cursor: default;
|
|
176
173
|
}
|
|
177
174
|
|
|
178
175
|
/** Align label to other elements on the first column cells */
|
|
@@ -213,7 +210,7 @@
|
|
|
213
210
|
/** Tile size variation */
|
|
214
211
|
.tileSizeSmall .tileContent {
|
|
215
212
|
padding: var(--space-xxxsmall);
|
|
216
|
-
font-size:
|
|
213
|
+
font-size: var(--size-xsmall);
|
|
217
214
|
}
|
|
218
215
|
|
|
219
216
|
.tileSizeSmall .tileContentLabel {
|
|
@@ -298,11 +295,6 @@
|
|
|
298
295
|
}
|
|
299
296
|
|
|
300
297
|
/** tooltip */
|
|
301
|
-
.tileContentTooltipAnchor {
|
|
302
|
-
width: 100%;
|
|
303
|
-
height: 100%;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
298
|
.tooltip {
|
|
307
299
|
z-index: var(--layer-high);
|
|
308
300
|
padding: var(--space-xsmall) var(--space-small);
|
|
@@ -326,7 +318,8 @@
|
|
|
326
318
|
font-size: var(--size-small);
|
|
327
319
|
}
|
|
328
320
|
|
|
329
|
-
/* prevent tooltip portal wrapper from capturing events
|
|
321
|
+
/* prevent the tooltip portal wrapper from capturing pointer events - the
|
|
322
|
+
treemap relies on pointer events reaching the canvas to track the hovered cell */
|
|
330
323
|
div[role='presentation']:has(.tooltip) {
|
|
331
324
|
pointer-events: none;
|
|
332
325
|
}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getTreemapNodes = getTreemapNodes;
|
|
4
4
|
exports.getTreemapNodesGroupedByPath = getTreemapNodesGroupedByPath;
|
|
5
|
+
exports.getTreemapNodesIndex = getTreemapNodesIndex;
|
|
5
6
|
exports.resolveGroupDeltaType = resolveGroupDeltaType;
|
|
6
7
|
exports.resolveTileGroupSizeDisplay = resolveTileGroupSizeDisplay;
|
|
7
8
|
exports.resolveTileSizeDisplay = resolveTileSizeDisplay;
|
|
8
|
-
exports.
|
|
9
|
+
exports.useTreemapTooltipState = useTreemapTooltipState;
|
|
9
10
|
const react_1 = require("react");
|
|
10
|
-
const react_use_1 = require("react-use");
|
|
11
11
|
const tooltip_1 = require("ariakit/tooltip");
|
|
12
12
|
const utils_1 = require("@bundle-stats/utils");
|
|
13
13
|
const metrics_treemap_constants_1 = require("./metrics-treemap.constants");
|
|
@@ -105,6 +105,17 @@ function getTreemapNodesGroupedByPath(items) {
|
|
|
105
105
|
total,
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
|
+
function getTreemapNodesIndex(node, index = new Map()) {
|
|
109
|
+
index.set(node.id, node);
|
|
110
|
+
node.children.forEach((childNode) => {
|
|
111
|
+
if ('children' in childNode) {
|
|
112
|
+
getTreemapNodesIndex(childNode, index);
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
index.set(childNode.id, childNode);
|
|
116
|
+
});
|
|
117
|
+
return index;
|
|
118
|
+
}
|
|
108
119
|
function resolveGroupDeltaType(metricRunInfo) {
|
|
109
120
|
if (!metricRunInfo) {
|
|
110
121
|
return utils_1.DeltaType.NO_CHANGE;
|
|
@@ -151,23 +162,68 @@ function resolveTileSizeDisplay(width, height) {
|
|
|
151
162
|
}
|
|
152
163
|
return 'default';
|
|
153
164
|
}
|
|
154
|
-
function
|
|
155
|
-
const {
|
|
156
|
-
const
|
|
165
|
+
function useTreemapTooltipState(options = {}) {
|
|
166
|
+
const { gutter = 16, timeout = 240, hideTimeout = timeout } = options;
|
|
167
|
+
const pointerRef = (0, react_1.useRef)(null);
|
|
168
|
+
const frameRef = (0, react_1.useRef)(0);
|
|
169
|
+
const hideTimeoutRef = (0, react_1.useRef)(0);
|
|
157
170
|
const getAnchorRect = (0, react_1.useCallback)(() => {
|
|
158
|
-
|
|
171
|
+
const pointer = pointerRef.current;
|
|
172
|
+
if (!pointer) {
|
|
159
173
|
return null;
|
|
160
174
|
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
y: pointer.docY - (document?.defaultView?.scrollY ?? 0),
|
|
164
|
-
w: 1,
|
|
165
|
-
h: 1,
|
|
166
|
-
};
|
|
167
|
-
return newRect;
|
|
168
|
-
}, [pointer.docX, pointer.docY]);
|
|
175
|
+
return { x: pointer.x, y: pointer.y, w: 1, h: 1 };
|
|
176
|
+
}, []);
|
|
169
177
|
const tooltipState = (0, tooltip_1.useTooltipState)({ gutter, getAnchorRect, timeout });
|
|
170
|
-
|
|
171
|
-
|
|
178
|
+
const { mounted, render, show, hide } = tooltipState;
|
|
179
|
+
const [hoveredNodeId, setHoveredNodeId] = (0, react_1.useState)(null);
|
|
180
|
+
const hoveredNodeIdRef = (0, react_1.useRef)(null);
|
|
181
|
+
(0, react_1.useEffect)(() => () => {
|
|
182
|
+
cancelAnimationFrame(frameRef.current);
|
|
183
|
+
window.clearTimeout(hideTimeoutRef.current);
|
|
184
|
+
}, []);
|
|
185
|
+
const setPointer = (0, react_1.useCallback)((x, y) => {
|
|
186
|
+
pointerRef.current = { x, y };
|
|
187
|
+
if (!mounted || frameRef.current) {
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
frameRef.current = requestAnimationFrame(() => {
|
|
191
|
+
frameRef.current = 0;
|
|
192
|
+
render();
|
|
193
|
+
});
|
|
194
|
+
}, [mounted, render]);
|
|
195
|
+
const commitHoveredNode = (0, react_1.useCallback)((nodeId) => {
|
|
196
|
+
hoveredNodeIdRef.current = nodeId;
|
|
197
|
+
setHoveredNodeId(nodeId);
|
|
198
|
+
if (nodeId === null) {
|
|
199
|
+
hide();
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
show();
|
|
203
|
+
}, [hide, show]);
|
|
204
|
+
const setHoveredNode = (0, react_1.useCallback)((nodeId) => {
|
|
205
|
+
window.clearTimeout(hideTimeoutRef.current);
|
|
206
|
+
hideTimeoutRef.current = 0;
|
|
207
|
+
if (nodeId === hoveredNodeIdRef.current) {
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
if (nodeId !== null || !hideTimeout) {
|
|
211
|
+
commitHoveredNode(nodeId);
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
hideTimeoutRef.current = window.setTimeout(() => {
|
|
215
|
+
hideTimeoutRef.current = 0;
|
|
216
|
+
commitHoveredNode(null);
|
|
217
|
+
}, hideTimeout);
|
|
218
|
+
}, [commitHoveredNode, hideTimeout]);
|
|
219
|
+
const clearHoveredNode = (0, react_1.useCallback)(() => {
|
|
220
|
+
window.clearTimeout(hideTimeoutRef.current);
|
|
221
|
+
hideTimeoutRef.current = 0;
|
|
222
|
+
if (hoveredNodeIdRef.current === null) {
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
commitHoveredNode(null);
|
|
226
|
+
}, [commitHoveredNode]);
|
|
227
|
+
return { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode };
|
|
172
228
|
}
|
|
173
229
|
//# sourceMappingURL=metrics-treemap.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":";;AAkCA,0CAcC;AA8ED,oEAgCC;AAED,sDAkBC;AAaD,kEAcC;AAED,wDAkBC;
|
|
1
|
+
{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}
|
package/lib/ui/button/button.js
CHANGED
|
@@ -23,13 +23,13 @@ exports.BUTTON_KIND = {
|
|
|
23
23
|
SUCCES: 'success',
|
|
24
24
|
};
|
|
25
25
|
exports.BUTTON_GLYPHS = icon_1.Icon.ICONS;
|
|
26
|
-
const ButtonComponent = (props) => {
|
|
26
|
+
const ButtonComponent = (props, ref) => {
|
|
27
27
|
const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children = null, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
|
|
28
28
|
const resolvedPadding = padding || ((outline || solid) && size);
|
|
29
29
|
const resolvedRadius = radius || ((outline || solid) && size);
|
|
30
30
|
const resolvedSize = Object.values(exports.BUTTON_SIZE).includes(size) ? size : exports.BUTTON_SIZE.MEDIUM;
|
|
31
31
|
const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, kind && button_module_css_1.default[kind], button_module_css_1.default[resolvedSize], outline && button_module_css_1.default.outline, outline && button_module_css_1.default[`outline--${kind}`], solid && button_module_css_1.default.solid, solid && button_module_css_1.default[`solid--${kind}`], resolvedPadding && button_module_css_1.default.padding, resolvedRadius && button_module_css_1.default[`radius--${resolvedRadius}`], active && button_module_css_1.default.active, active && outline && button_module_css_1.default[`active-outline-${kind}`], className);
|
|
32
|
-
return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
|
|
32
|
+
return (react_1.default.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
|
|
33
33
|
glyph && react_1.default.createElement(Icon, { glyph: glyph, className: button_module_css_1.default.glyph }),
|
|
34
34
|
children && react_1.default.createElement("span", { className: button_module_css_1.default.content }, children),
|
|
35
35
|
rightGlyph && react_1.default.createElement(Icon, { glyph: rightGlyph, className: button_module_css_1.default.glyph })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,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;AAEE,QAAA,aAAa,GAAG,WAAQ,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,eAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,WAAQ,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,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,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;AAEE,QAAA,aAAa,GAAG,WAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,GAAiC,EACjC,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,eAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,WAAQ,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,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa;QACzD,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}
|
|
@@ -3,24 +3,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Dropdown = exports.DropdownItem = void 0;
|
|
6
|
+
exports.Dropdown = exports.DropdownItem = exports.DropdownGroup = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const classnames_1 = __importDefault(require("classnames"));
|
|
9
9
|
const menu_1 = require("ariakit/menu");
|
|
10
|
+
const isNull_1 = __importDefault(require("lodash/isNull"));
|
|
11
|
+
const isUndefined_1 = __importDefault(require("lodash/isUndefined"));
|
|
10
12
|
const button_1 = require("../button");
|
|
11
13
|
const dropdown_module_css_1 = __importDefault(require("./dropdown.module.css"));
|
|
12
14
|
const icon_1 = require("../icon");
|
|
15
|
+
const DropdownGroup = (props) => {
|
|
16
|
+
const { className, ...restProps } = props;
|
|
17
|
+
return react_1.default.createElement("div", { className: (0, classnames_1.default)(dropdown_module_css_1.default.group, className), ...restProps });
|
|
18
|
+
};
|
|
19
|
+
exports.DropdownGroup = DropdownGroup;
|
|
13
20
|
const DropdownItem = (props) => {
|
|
14
21
|
const { className = '', isActive = false, ...restProps } = props;
|
|
15
22
|
return (react_1.default.createElement(menu_1.MenuItem, { className: (0, classnames_1.default)(dropdown_module_css_1.default.item, className, isActive && dropdown_module_css_1.default.itemActive), ...restProps }));
|
|
16
23
|
};
|
|
17
24
|
exports.DropdownItem = DropdownItem;
|
|
18
25
|
const Dropdown = (props) => {
|
|
19
|
-
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron
|
|
26
|
+
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron: initialShowChevron, disabled = false, placement, gutter = 4, shift, children, } = props;
|
|
20
27
|
const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
|
|
21
28
|
const menuState = (0, menu_1.useMenuState)({ animated: true, placement, gutter, shift });
|
|
29
|
+
const showChevron = (0, isUndefined_1.default)(initialShowChevron) ? !(0, isNull_1.default)(label) : initialShowChevron;
|
|
22
30
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
23
|
-
react_1.default.createElement(menu_1.MenuButton, { as: button_1.Button, outline: true, size: button_1.BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? icon_1.Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, tabIndex: null, className: (0, classnames_1.default)(dropdown_module_css_1.default.button, className) }, label),
|
|
31
|
+
react_1.default.createElement(menu_1.MenuButton, { as: button_1.Button, outline: true, size: button_1.BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? icon_1.Icon.ICONS.CHEVRON_DOWN : undefined, disabled: disabled, state: menuState, toggleOnClick: true, tabIndex: null, className: (0, classnames_1.default)(dropdown_module_css_1.default.button, className) }, label),
|
|
24
32
|
react_1.default.createElement(menu_1.Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: (0, classnames_1.default)(dropdown_module_css_1.default.dropdown, dropdownClassName) }, children)));
|
|
25
33
|
};
|
|
26
34
|
exports.Dropdown = Dropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA8C;AAC9C,4DAA4B;AAC5B,uCAAwF;AACxF,2DAAmC;AACnC,qEAA6C;AAE7C,sCAAgD;AAChD,gFAAwC;AACxC,kCAA+B;AAIxB,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1C,OAAO,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAAC;AACrE,CAAC,CAAC;AAHW,QAAA,aAAa,iBAGxB;AAMK,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,8BAAC,eAAQ,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,IAAI,6BAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAC5F,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,YAAY,gBAMvB;AAcK,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,IAAA,mBAAY,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7E,MAAM,WAAW,GAAG,IAAA,qBAAW,EAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAM,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAE1F,OAAO,CACL;QACE,8BAAC,iBAAU,IACT,EAAE,EAAE,eAAM,EACV,OAAO,QACP,IAAI,EAAE,oBAAW,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,WAAI,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,IAAA,oBAAE,EAAC,6BAAG,CAAC,MAAM,EAAE,SAAS,CAAC,IAEnC,KAAK,CACK;QACb,8BAAC,WAAI,IACH,MAAM,QACN,KAAK,EAAE,SAAS,gBACJ,iBAAiB,EAC7B,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAE7C,QAAQ,CACJ,CACN,CACJ,CAAC;AACJ,CAAC,CAAC;AA7CW,QAAA,QAAQ,YA6CnB"}
|
|
@@ -13,9 +13,12 @@
|
|
|
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);
|
|
19
22
|
opacity: 0;
|
|
20
23
|
transition: var(--transition-out);
|
|
21
24
|
}
|
|
@@ -40,12 +43,9 @@
|
|
|
40
43
|
outline: none;
|
|
41
44
|
border: 0;
|
|
42
45
|
border-radius: var(--radius-small);
|
|
43
|
-
padding:
|
|
46
|
+
padding: var(--space-xxxsmall);
|
|
44
47
|
background: none;
|
|
45
48
|
text-align: left;
|
|
46
|
-
color: var(--color-text-light);
|
|
47
|
-
font-size: var(--size-small);
|
|
48
|
-
line-height: var(--line-height);
|
|
49
49
|
text-decoration: none;
|
|
50
50
|
cursor: default;
|
|
51
51
|
}
|
|
@@ -69,3 +69,37 @@
|
|
|
69
69
|
background: var(--color-highlight-info);
|
|
70
70
|
color: var(--color-primary-dark);
|
|
71
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
|
+
}
|
|
@@ -54,6 +54,20 @@ const Filter = (props) => {
|
|
|
54
54
|
react_1.default.createElement("input", { type: "checkbox", id: `filter-${name}`, name: name, ...inputProps, className: filters_module_css_1.default.filterControl }),
|
|
55
55
|
react_1.default.createElement("span", { title: label, className: filters_module_css_1.default.filterLabel }, label)));
|
|
56
56
|
};
|
|
57
|
+
const getGroupItemKey = (groupKey, itemKey) => `${groupKey}.${itemKey}`;
|
|
58
|
+
const FilterDropdownItem = (props) => {
|
|
59
|
+
const { className, id, label, checked, disabled, onChange, toggleFilters, getOnGroupCheck } = props;
|
|
60
|
+
const onItemClick = (0, react_1.useCallback)((event) => {
|
|
61
|
+
if (disabled || event.target !== event.currentTarget) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
toggleFilters({ [id]: !checked });
|
|
65
|
+
}, [disabled, toggleFilters, id, checked]);
|
|
66
|
+
const onOnlyClick = (0, react_1.useCallback)(() => getOnGroupCheck(false, { [id]: true })(), [getOnGroupCheck, id]);
|
|
67
|
+
return (react_1.default.createElement(dropdown_1.DropdownItem, { onClick: onItemClick, hideOnClick: false, className: (0, classnames_1.default)(filters_module_css_1.default.filterGroupItem, className) },
|
|
68
|
+
react_1.default.createElement(Filter, { label: label, name: id, onChange: onChange, checked: checked, disabled: disabled, className: filters_module_css_1.default.filterGroupItemFilter }),
|
|
69
|
+
react_1.default.createElement(button_1.Button, { kind: "info", solid: true, size: "small", type: "button", onClick: onOnlyClick, disabled: disabled, className: filters_module_css_1.default.filterGroupOnlyButton }, I18N.ONLY)));
|
|
70
|
+
};
|
|
57
71
|
const FilterGroup = (props) => {
|
|
58
72
|
const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
|
|
59
73
|
const { label: groupLabel, children: groupItems } = data;
|
|
@@ -67,16 +81,16 @@ const FilterGroup = (props) => {
|
|
|
67
81
|
`${groupLabel}:`,
|
|
68
82
|
"\u00A0",
|
|
69
83
|
react_1.default.createElement("span", { className: (0, classnames_1.default)(hasCustomFilterSuffix && filters_module_css_1.default.filterGroupLabelSuffixCustom) }, filterSuffix)));
|
|
70
|
-
const getOnGroupCheck = (value, overrides = {}) => () => {
|
|
84
|
+
const getOnGroupCheck = (0, react_1.useCallback)((value, overrides = {}) => () => {
|
|
71
85
|
const newFilters = groupItems.reduce((agg, { key: itemKey }) => ({
|
|
72
86
|
...agg,
|
|
73
|
-
[
|
|
87
|
+
[getGroupItemKey(groupKey, itemKey)]: value,
|
|
74
88
|
}), {});
|
|
75
89
|
toggleFilters({
|
|
76
90
|
...newFilters,
|
|
77
91
|
...overrides,
|
|
78
92
|
});
|
|
79
|
-
};
|
|
93
|
+
}, [groupItems, groupKey, toggleFilters]);
|
|
80
94
|
const filteredGroupItems = (0, react_1.useMemo)(() => {
|
|
81
95
|
if (!search) {
|
|
82
96
|
return groupItems;
|
|
@@ -84,21 +98,18 @@ const FilterGroup = (props) => {
|
|
|
84
98
|
return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
|
|
85
99
|
}, [search, groupItems]);
|
|
86
100
|
return (react_1.default.createElement(dropdown_1.Dropdown, { className: className, label: dropdownLabel, ariaLabel: `${groupLabel}: ${filterSuffix}` },
|
|
87
|
-
groupItems.length > 10 && (react_1.default.createElement(
|
|
101
|
+
groupItems.length > 10 && (react_1.default.createElement(dropdown_1.DropdownGroup, null,
|
|
88
102
|
react_1.default.createElement(input_search_1.InputSearch, { defaultValue: search, onChange: setSearch, placeholder: I18N.GROUP_SEARCH, debounceWait: 0 }))),
|
|
89
|
-
react_1.default.createElement(
|
|
103
|
+
react_1.default.createElement(dropdown_1.DropdownGroup, { className: filters_module_css_1.default.filterGroupItems },
|
|
90
104
|
filteredGroupItems.length === 0 && (react_1.default.createElement(stack_1.Stack, { className: filters_module_css_1.default.filterGroupSearchNotFound },
|
|
91
105
|
react_1.default.createElement("p", null, I18N.GROUP_NOT_FOUND),
|
|
92
106
|
react_1.default.createElement("div", null,
|
|
93
107
|
react_1.default.createElement(button_1.Button, { size: "small", kind: "primary", type: "button", onClick: () => setSearch(''), className: filters_module_css_1.default.filterGroupSearchNotFoundClear }, I18N.GROUP_SEARCH_CLEAR)))),
|
|
94
108
|
filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
|
|
95
|
-
const id =
|
|
96
|
-
|
|
97
|
-
return (react_1.default.createElement(dropdown_1.DropdownItem, { key: id, className: filters_module_css_1.default.filterGroupItem },
|
|
98
|
-
react_1.default.createElement(Filter, { label: itemData.label, name: id, onChange: onCheckboxChange, checked: values[id], disabled: itemData.disabled, className: filters_module_css_1.default.filterGroupItemFilter }),
|
|
99
|
-
react_1.default.createElement(button_1.Button, { kind: "info", solid: true, size: "small", type: "button", onClick: getOnOnlyClick(), disabled: itemData.disabled, className: filters_module_css_1.default.filterGroupOnlyButton }, I18N.ONLY)));
|
|
109
|
+
const id = getGroupItemKey(groupKey, itemKey);
|
|
110
|
+
return (react_1.default.createElement(FilterDropdownItem, { key: id, id: id, label: itemData.label, checked: values[id], disabled: itemData.disabled, onChange: onCheckboxChange, toggleFilters: toggleFilters, getOnGroupCheck: getOnGroupCheck }));
|
|
100
111
|
})),
|
|
101
|
-
filteredGroupItems.length !== 0 && (react_1.default.createElement(
|
|
112
|
+
filteredGroupItems.length !== 0 && (react_1.default.createElement(dropdown_1.DropdownGroup, { className: filters_module_css_1.default.filterGroupActions }, areAllGroupItemsChecked ? (react_1.default.createElement(dropdown_1.DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(false), role: "button" }, I18N.CLEAR)) : (react_1.default.createElement(dropdown_1.DropdownItem, { id: "clear-all", onClick: getOnGroupCheck(true), role: "button" }, I18N.CHECK))))));
|
|
102
113
|
};
|
|
103
114
|
const Filters = (props) => {
|
|
104
115
|
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,+CAA8D;AAC9D,4DAA4B;AAG5B,wDAAoD;AACpD,8CAA2C;AAC3C,sCAAmC;AACnC,oDAAgD;AAChD,
|
|
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
|
-
}
|
|
@@ -43,7 +43,13 @@ const hovercard_1 = require("ariakit/hovercard");
|
|
|
43
43
|
const hover_card_module_css_1 = __importDefault(require("./hover-card.module.css"));
|
|
44
44
|
const HoverCard = (props) => {
|
|
45
45
|
const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
|
|
46
|
-
const state = (0, hovercard_1.useHovercardState)({
|
|
46
|
+
const state = (0, hovercard_1.useHovercardState)({
|
|
47
|
+
animated: true,
|
|
48
|
+
gutter: 8,
|
|
49
|
+
timeout: 300,
|
|
50
|
+
overflowPadding: 48,
|
|
51
|
+
placement: 'top',
|
|
52
|
+
});
|
|
47
53
|
const hovercardProps = (0, hovercard_1.useHovercard)({ state, portal: true });
|
|
48
54
|
const Component = (0, react_1.useMemo)(() => {
|
|
49
55
|
if (as) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAA4B;AAC5B,iDAM2B;AAE3B,oFAA0C;AAYnC,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,IAAA,6BAAiB,EAAC,
|
|
1
|
+
{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAA4B;AAC5B,iDAM2B;AAE3B,oFAA0C;AAYnC,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,IAAA,6BAAiB,EAAC;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,IAAA,wBAAY,EAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,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,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,8BAAC,2BAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,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,8BAAC,qBAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC;YAEhD,8BAAC,0BAAc,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;AAtDW,QAAA,SAAS,aAsDpB"}
|
|
@@ -10,7 +10,12 @@ const tooltip_1 = require("ariakit/tooltip");
|
|
|
10
10
|
const tooltip_module_css_1 = __importDefault(require("./tooltip.module.css"));
|
|
11
11
|
const Tooltip = (props) => {
|
|
12
12
|
const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, ...restProps } = props;
|
|
13
|
-
const tooltip = (0, tooltip_1.useTooltipState)({
|
|
13
|
+
const tooltip = (0, tooltip_1.useTooltipState)({
|
|
14
|
+
animated: true,
|
|
15
|
+
placement: 'top',
|
|
16
|
+
overflowPadding: 48,
|
|
17
|
+
timeout: 300,
|
|
18
|
+
});
|
|
14
19
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
15
20
|
react_1.default.createElement(tooltip_1.TooltipAnchor, { as: Component, className: (0, classnames_1.default)(tooltip_module_css_1.default.root, className), state: tooltip, "aria-controls": tooltip.open ? tooltip.contentElement?.id : '', ...(ref ? { ref } : {}), ...restProps }),
|
|
16
21
|
title && (react_1.default.createElement(tooltip_1.Tooltip, { state: tooltip, className: (0, classnames_1.default)(tooltip_module_css_1.default.tooltip, tooltipClassName) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,6CAKyB;AAEzB,8EAAuC;AAUhC,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,IAAA,yBAAe,EAAC,
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,6CAKyB;AAEzB,8EAAuC;AAUhC,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,IAAA,yBAAe,EAAC;QAC9B,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,KAAK;QAChB,eAAe,EAAE,EAAE;QACnB,OAAO,EAAE,GAAG;KACb,CAAC,CAAC;IAEH,OAAO,CACL;QACE,8BAAC,uBAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,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,8BAAC,iBAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,8BAAC,sBAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,4BAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,OAAO,WAqClB"}
|