@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.3
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
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
|
-
import { useDebounce, useMouseHovered } from 'react-use';
|
|
1
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
2
|
import { useTooltipState } from 'ariakit/tooltip';
|
|
4
3
|
import { DeltaType, } from '@bundle-stats/utils';
|
|
5
4
|
import { NESTED_PADDING_TOP, } from './metrics-treemap.constants';
|
|
@@ -99,6 +98,17 @@ export function getTreemapNodesGroupedByPath(items) {
|
|
|
99
98
|
total,
|
|
100
99
|
};
|
|
101
100
|
}
|
|
101
|
+
export function getTreemapNodesIndex(node, index = new Map()) {
|
|
102
|
+
index.set(node.id, node);
|
|
103
|
+
node.children.forEach((childNode) => {
|
|
104
|
+
if ('children' in childNode) {
|
|
105
|
+
getTreemapNodesIndex(childNode, index);
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
index.set(childNode.id, childNode);
|
|
109
|
+
});
|
|
110
|
+
return index;
|
|
111
|
+
}
|
|
102
112
|
export function resolveGroupDeltaType(metricRunInfo) {
|
|
103
113
|
if (!metricRunInfo) {
|
|
104
114
|
return DeltaType.NO_CHANGE;
|
|
@@ -145,24 +155,68 @@ export function resolveTileSizeDisplay(width, height) {
|
|
|
145
155
|
}
|
|
146
156
|
return 'default';
|
|
147
157
|
}
|
|
148
|
-
export function
|
|
149
|
-
const {
|
|
150
|
-
const
|
|
158
|
+
export function useTreemapTooltipState(options = {}) {
|
|
159
|
+
const { gutter = 16, timeout = 240, hideTimeout = timeout } = options;
|
|
160
|
+
const pointerRef = useRef(null);
|
|
161
|
+
const frameRef = useRef(0);
|
|
162
|
+
const hideTimeoutRef = useRef(0);
|
|
151
163
|
const getAnchorRect = useCallback(() => {
|
|
152
|
-
|
|
153
|
-
if (pointer
|
|
164
|
+
const pointer = pointerRef.current;
|
|
165
|
+
if (!pointer) {
|
|
154
166
|
return null;
|
|
155
167
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
y: pointer.docY - ((_d = (_c = document === null || document === void 0 ? void 0 : document.defaultView) === null || _c === void 0 ? void 0 : _c.scrollY) !== null && _d !== void 0 ? _d : 0),
|
|
159
|
-
w: 1,
|
|
160
|
-
h: 1,
|
|
161
|
-
};
|
|
162
|
-
return newRect;
|
|
163
|
-
}, [pointer.docX, pointer.docY]);
|
|
168
|
+
return { x: pointer.x, y: pointer.y, w: 1, h: 1 };
|
|
169
|
+
}, []);
|
|
164
170
|
const tooltipState = useTooltipState({ gutter, getAnchorRect, timeout });
|
|
165
|
-
|
|
166
|
-
|
|
171
|
+
const { mounted, render, show, hide } = tooltipState;
|
|
172
|
+
const [hoveredNodeId, setHoveredNodeId] = useState(null);
|
|
173
|
+
const hoveredNodeIdRef = useRef(null);
|
|
174
|
+
useEffect(() => () => {
|
|
175
|
+
cancelAnimationFrame(frameRef.current);
|
|
176
|
+
window.clearTimeout(hideTimeoutRef.current);
|
|
177
|
+
}, []);
|
|
178
|
+
const setPointer = useCallback((x, y) => {
|
|
179
|
+
pointerRef.current = { x, y };
|
|
180
|
+
if (!mounted || frameRef.current) {
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
frameRef.current = requestAnimationFrame(() => {
|
|
184
|
+
frameRef.current = 0;
|
|
185
|
+
render();
|
|
186
|
+
});
|
|
187
|
+
}, [mounted, render]);
|
|
188
|
+
const commitHoveredNode = useCallback((nodeId) => {
|
|
189
|
+
hoveredNodeIdRef.current = nodeId;
|
|
190
|
+
setHoveredNodeId(nodeId);
|
|
191
|
+
if (nodeId === null) {
|
|
192
|
+
hide();
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
show();
|
|
196
|
+
}, [hide, show]);
|
|
197
|
+
const setHoveredNode = useCallback((nodeId) => {
|
|
198
|
+
window.clearTimeout(hideTimeoutRef.current);
|
|
199
|
+
hideTimeoutRef.current = 0;
|
|
200
|
+
if (nodeId === hoveredNodeIdRef.current) {
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
if (nodeId !== null || !hideTimeout) {
|
|
204
|
+
commitHoveredNode(nodeId);
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
hideTimeoutRef.current = window.setTimeout(() => {
|
|
208
|
+
hideTimeoutRef.current = 0;
|
|
209
|
+
commitHoveredNode(null);
|
|
210
|
+
}, hideTimeout);
|
|
211
|
+
}, [commitHoveredNode, hideTimeout]);
|
|
212
|
+
const clearHoveredNode = useCallback(() => {
|
|
213
|
+
window.clearTimeout(hideTimeoutRef.current);
|
|
214
|
+
hideTimeoutRef.current = 0;
|
|
215
|
+
if (hoveredNodeIdRef.current === null) {
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
commitHoveredNode(null);
|
|
219
|
+
}, [commitHoveredNode]);
|
|
220
|
+
return { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode };
|
|
167
221
|
}
|
|
168
222
|
//# 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":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}
|
|
@@ -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,19 +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';
|
|
6
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
|
+
};
|
|
7
13
|
export const DropdownItem = (props) => {
|
|
8
14
|
const { className = '', isActive = false, ...restProps } = props;
|
|
9
15
|
return (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
|
|
10
16
|
};
|
|
11
17
|
export const Dropdown = (props) => {
|
|
12
|
-
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron
|
|
18
|
+
const { className = '', dropdownClassName = '', label = null, ariaLabel = '', glyph = '', showChevron: initialShowChevron, disabled = false, placement, gutter = 4, shift, children, } = props;
|
|
13
19
|
const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
|
|
14
20
|
const menuState = useMenuState({ animated: true, placement, gutter, shift });
|
|
21
|
+
const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
|
|
15
22
|
return (React.createElement(React.Fragment, null,
|
|
16
|
-
React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, rightGlyph: showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined, 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),
|
|
17
24
|
React.createElement(Menu, { portal: true, state: menuState, "aria-label": dropdownAriaLabel, className: cx(css.dropdown, dropdownClassName) }, children)));
|
|
18
25
|
};
|
|
19
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,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
|
+
}
|
|
@@ -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,
|
|
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,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,
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.23.0-beta.
|
|
3
|
+
"version": "4.23.0-beta.3",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
},
|
|
39
39
|
"homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@babel/preset-env": "8.0.
|
|
41
|
+
"@babel/preset-env": "8.0.6",
|
|
42
42
|
"@babel/preset-react": "8.0.1",
|
|
43
43
|
"@babel/preset-typescript": "8.0.1",
|
|
44
|
-
"@storybook/addon-vitest": "10.
|
|
45
|
-
"@storybook/react": "10.
|
|
46
|
-
"@storybook/react-vite": "10.
|
|
44
|
+
"@storybook/addon-vitest": "10.6.0",
|
|
45
|
+
"@storybook/react": "10.6.0",
|
|
46
|
+
"@storybook/react-vite": "10.6.0",
|
|
47
47
|
"@types/d3": "7.4.3",
|
|
48
48
|
"@types/react": "18.3.13",
|
|
49
49
|
"@types/react-router-dom": "5.3.3",
|
|
50
50
|
"@vitejs/plugin-react": "6.1.1",
|
|
51
|
-
"@vitest/browser": "5.0.
|
|
52
|
-
"@vitest/browser-playwright": "5.0.
|
|
51
|
+
"@vitest/browser": "5.0.1",
|
|
52
|
+
"@vitest/browser-playwright": "5.0.1",
|
|
53
53
|
"babel-plugin-polyfill-corejs3": "1.0.0",
|
|
54
54
|
"babel-plugin-require-context-hook": "1.0.0",
|
|
55
55
|
"classnames": "2.5.1",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"identity-obj-proxy": "3.0.0",
|
|
61
61
|
"jest": "^30.5.0",
|
|
62
62
|
"jest-date-mock": "1.0.10",
|
|
63
|
-
"jest-environment-jsdom": "30.5.
|
|
63
|
+
"jest-environment-jsdom": "30.5.2",
|
|
64
64
|
"lodash": "4.18.1",
|
|
65
65
|
"playwright": "1.63.0",
|
|
66
66
|
"prop-types": "15.8.1",
|
|
@@ -68,11 +68,11 @@
|
|
|
68
68
|
"react-dom": "18.3.1",
|
|
69
69
|
"react-router-dom": "5.3.4",
|
|
70
70
|
"rimraf": "6.1.3",
|
|
71
|
-
"storybook": "10.
|
|
71
|
+
"storybook": "10.6.0",
|
|
72
72
|
"typescript": "5.9.3",
|
|
73
73
|
"vite": "8.3.0",
|
|
74
74
|
"vite-plugin-svgr": "5.2.0",
|
|
75
|
-
"vitest": "5.0.
|
|
75
|
+
"vitest": "5.0.1"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
78
|
"classnames": "^2.0.0",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"react-router-dom": "^5.0.0"
|
|
84
84
|
},
|
|
85
85
|
"dependencies": {
|
|
86
|
-
"@bundle-stats/utils": "^4.23.0-beta.
|
|
86
|
+
"@bundle-stats/utils": "^4.23.0-beta.3",
|
|
87
87
|
"ariakit": "2.0.0-next.44",
|
|
88
88
|
"d3": "7.9.0",
|
|
89
89
|
"modern-css-reset": "1.4.0",
|
|
@@ -91,5 +91,5 @@
|
|
|
91
91
|
"snarkdown": "2.0.0",
|
|
92
92
|
"use-query-params": "2.2.2"
|
|
93
93
|
},
|
|
94
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "3256dd3f8821ffab059bdb3d0477321c8b126836"
|
|
95
95
|
}
|