@grafana/scenes 5.10.1--canary.830.10456603604.0 → 5.10.1

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grafana/scenes",
3
- "version": "5.10.1--canary.830.10456603604.0",
3
+ "version": "5.10.1",
4
4
  "description": "Grafana framework for building dynamic dashboards",
5
5
  "author": "Grafana Labs",
6
6
  "license": "AGPL-3.0-only",
@@ -37,10 +37,8 @@
37
37
  "url": "https://github.com/grafana/scenes/issues"
38
38
  },
39
39
  "dependencies": {
40
- "@floating-ui/react": "0.26.16",
41
40
  "@grafana/e2e-selectors": "^11.0.0",
42
41
  "@leeoniya/ufuzzy": "^1.0.14",
43
- "@tanstack/react-virtual": "^3.9.0",
44
42
  "react-grid-layout": "1.3.4",
45
43
  "react-use": "17.5.0",
46
44
  "react-virtualized-auto-sizer": "1.0.24",
@@ -115,5 +113,5 @@
115
113
  "prettier --write"
116
114
  ]
117
115
  },
118
- "gitHead": "23b9095d048c2822b694c886da2ee3dbda0d23d9"
116
+ "gitHead": "2b7ffc7fb355e92bc73731403e093b12b639349f"
119
117
  }
@@ -1,22 +0,0 @@
1
- import React, { forwardRef, useLayoutEffect } from 'react';
2
- import { AdHocCombobox } from './AdHocFiltersCombobox.js';
3
-
4
- const AdHocFiltersAlwaysWipCombobox = forwardRef(function AdHocFiltersAlwaysWipCombobox2({
5
- model
6
- }, parentRef) {
7
- const { _wip } = model.useState();
8
- useLayoutEffect(() => {
9
- if (!_wip) {
10
- model._addWip();
11
- }
12
- }, [_wip]);
13
- return /* @__PURE__ */ React.createElement(AdHocCombobox, {
14
- model,
15
- filter: _wip,
16
- isAlwaysWip: true,
17
- ref: parentRef
18
- });
19
- });
20
-
21
- export { AdHocFiltersAlwaysWipCombobox };
22
- //# sourceMappingURL=AdHocFiltersAlwaysWipCombobox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AdHocFiltersAlwaysWipCombobox.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersAlwaysWipCombobox.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect } from 'react';\nimport { AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\n\nexport const AdHocFiltersAlwaysWipCombobox = forwardRef(function AdHocFiltersAlwaysWipCombobox(\n {\n model,\n }: {\n model: AdHocFiltersVariable;\n },\n parentRef\n) {\n const { _wip } = model.useState();\n\n // when combobox is in wip mode then check and add _wip if its missing\n // needed on first render and when _wip is reset on filter value commit\n useLayoutEffect(() => {\n if (!_wip) {\n model._addWip();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_wip]);\n\n return <AdHocCombobox model={model} filter={_wip} isAlwaysWip ref={parentRef} />;\n});\n"],"names":["AdHocFiltersAlwaysWipCombobox"],"mappings":";;;AAIa,MAAA,6BAAA,GAAgC,UAAW,CAAA,SAASA,8BAC/D,CAAA;AAAA,EACE,KAAA;AACF,CAAA,EAGA,SACA,EAAA;AACA,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAIhC,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAAA,KAChB;AAAA,GAGF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,KAAA;AAAA,IAAc,MAAQ,EAAA,IAAA;AAAA,IAAM,WAAW,EAAA,IAAA;AAAA,IAAC,GAAK,EAAA,SAAA;AAAA,GAAW,CAAA,CAAA;AAChF,CAAC;;;;"}
@@ -1,380 +0,0 @@
1
- import React, { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
2
- import { useFloating, autoUpdate, offset, flip, size, useRole, useDismiss, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
3
- import { useStyles2 } from '@grafana/ui';
4
- import { cx, css } from '@emotion/css';
5
- import { flushSync } from 'react-dom';
6
- import { useVirtualizer } from '@tanstack/react-virtual';
7
- import { DropdownItem } from './DropdownItem.js';
8
-
9
- var __defProp = Object.defineProperty;
10
- var __defProps = Object.defineProperties;
11
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
12
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
13
- var __hasOwnProp = Object.prototype.hasOwnProperty;
14
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
15
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
16
- var __spreadValues = (a, b) => {
17
- for (var prop in b || (b = {}))
18
- if (__hasOwnProp.call(b, prop))
19
- __defNormalProp(a, prop, b[prop]);
20
- if (__getOwnPropSymbols)
21
- for (var prop of __getOwnPropSymbols(b)) {
22
- if (__propIsEnum.call(b, prop))
23
- __defNormalProp(a, prop, b[prop]);
24
- }
25
- return a;
26
- };
27
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
28
- const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, isAlwaysWip, handleChangeViewMode }, parentRef) {
29
- var _a;
30
- const [open, setOpen] = useState(false);
31
- const [options, setOptions] = useState([]);
32
- const [optionsLoading, setOptionsLoading] = useState(false);
33
- const [optionsError, setOptionsError] = useState(false);
34
- const [inputValue, setInputValue] = useState("");
35
- const [activeIndex, setActiveIndex] = useState(null);
36
- const [filterInputType, setInputType] = useState(!isAlwaysWip ? "value" : "key");
37
- const styles = useStyles2(getStyles2);
38
- const listRef = useRef([]);
39
- const handleResetWip = useCallback(() => {
40
- if (isAlwaysWip) {
41
- model._addWip();
42
- setInputType("key");
43
- setInputValue("");
44
- }
45
- }, [model, isAlwaysWip]);
46
- const onOpenChange = useCallback(
47
- (nextOpen, _, reason) => {
48
- setOpen(nextOpen);
49
- if (["outside-press", "escape-key"].includes(reason || "")) {
50
- handleResetWip();
51
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
52
- }
53
- },
54
- [handleChangeViewMode, handleResetWip]
55
- );
56
- const operatorIdentifier = `${(_a = filter == null ? void 0 : filter.key) != null ? _a : ""}-operator`;
57
- const { refs, floatingStyles, context } = useFloating({
58
- whileElementsMounted: autoUpdate,
59
- open,
60
- onOpenChange,
61
- placement: "bottom-start",
62
- middleware: [
63
- offset(10),
64
- flip({ padding: 10 }),
65
- size({
66
- apply({ availableHeight, elements }) {
67
- elements.floating.style.maxHeight = `${availableHeight > 300 ? 300 : availableHeight}px`;
68
- },
69
- padding: 10
70
- })
71
- ]
72
- });
73
- const role = useRole(context, { role: "listbox" });
74
- const dismiss = useDismiss(context, {
75
- outsidePress: (event) => {
76
- return !event.currentTarget.classList.contains(
77
- operatorIdentifier
78
- );
79
- }
80
- });
81
- const listNav = useListNavigation(context, {
82
- listRef,
83
- activeIndex,
84
- onNavigate: setActiveIndex,
85
- virtual: true,
86
- loop: true
87
- });
88
- const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
89
- useImperativeHandle(parentRef, () => () => {
90
- var _a2;
91
- return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
92
- }, [refs.domReference]);
93
- function onChange(event) {
94
- const value = event.target.value;
95
- setInputValue(value);
96
- setActiveIndex(0);
97
- }
98
- const filteredDropDownItems = options.filter(
99
- (item) => {
100
- var _a2, _b;
101
- return (_b = (_a2 = item.label) != null ? _a2 : item.value) == null ? void 0 : _b.toLocaleLowerCase().startsWith(inputValue.toLowerCase());
102
- }
103
- );
104
- const flushSyncInputType = useCallback((inputType) => {
105
- flushSync(() => {
106
- setInputType(inputType);
107
- });
108
- }, []);
109
- useEffect(() => {
110
- if (!isAlwaysWip && refs.domReference.current) {
111
- setInputType("value");
112
- setInputValue("");
113
- refs.domReference.current.focus();
114
- }
115
- }, []);
116
- const handleFetchOptions = useCallback(
117
- async (inputType) => {
118
- setOptionsError(false);
119
- setOptionsLoading(true);
120
- setOptions([]);
121
- let options2 = [];
122
- try {
123
- if (inputType === "key") {
124
- options2 = await model._getKeys(null);
125
- } else if (inputType === "operator") {
126
- options2 = model._getOperators();
127
- } else if (inputType === "value") {
128
- options2 = await model._getValuesFor(filter);
129
- }
130
- setOptions(options2);
131
- } catch (e) {
132
- setOptionsError(true);
133
- }
134
- setOptionsLoading(false);
135
- },
136
- [filter, model]
137
- );
138
- const handleBackspaceInput = useCallback(
139
- (event) => {
140
- if (event.key === "Backspace" && !inputValue && filterInputType === "key") {
141
- model._removeLastFilter();
142
- handleFetchOptions(filterInputType);
143
- }
144
- },
145
- [inputValue, filterInputType]
146
- );
147
- const handleTabInput = useCallback((event) => {
148
- if (event.key === "Tab" && !event.shiftKey) {
149
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
150
- handleResetWip();
151
- }
152
- }, []);
153
- const handleShiftTabInput = useCallback((event) => {
154
- if (event.key === "Tab" && event.shiftKey) {
155
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
156
- handleResetWip();
157
- }
158
- }, []);
159
- const handleEnterInput = useCallback(
160
- (event) => {
161
- var _a2;
162
- if (event.key === "Enter" && activeIndex != null) {
163
- if (filterInputType !== "value" && !filteredDropDownItems[activeIndex]) {
164
- return;
165
- }
166
- let dropdownItem = filteredDropDownItems[activeIndex];
167
- if (filterInputType === "value" && !filteredDropDownItems[activeIndex]) {
168
- if (!inputValue.trim()) {
169
- return;
170
- }
171
- dropdownItem = { value: inputValue };
172
- }
173
- model._updateFilter(filter, filterInputType, dropdownItem);
174
- setInputValue("");
175
- setActiveIndex(0);
176
- if (filterInputType === "key") {
177
- flushSyncInputType("operator");
178
- } else if (filterInputType === "operator") {
179
- flushSyncInputType("value");
180
- } else if (filterInputType === "value") {
181
- flushSyncInputType("key");
182
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
183
- }
184
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
185
- }
186
- },
187
- [activeIndex, filter, filterInputType, filteredDropDownItems, model]
188
- );
189
- useEffect(() => {
190
- if (open) {
191
- handleFetchOptions(filterInputType);
192
- }
193
- }, [open, filterInputType]);
194
- const rowVirtualizer = useVirtualizer({
195
- count: filteredDropDownItems.length,
196
- getScrollElement: () => refs.floating.current,
197
- estimateSize: () => 38,
198
- overscan: 5
199
- });
200
- return /* @__PURE__ */ React.createElement("div", {
201
- className: styles.comboboxWrapper
202
- }, filter ? /* @__PURE__ */ React.createElement("div", {
203
- className: styles.pillWrapper
204
- }, (filter == null ? void 0 : filter.key) ? /* @__PURE__ */ React.createElement("div", {
205
- className: cx(styles.basePill, styles.keyPill)
206
- }, filter.key) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && filterInputType !== "operator" ? /* @__PURE__ */ React.createElement("div", {
207
- className: cx(styles.basePill, styles.operatorPill, operatorIdentifier),
208
- role: "button",
209
- "aria-label": "Edit filter operator",
210
- tabIndex: 0,
211
- onClick: (event) => {
212
- var _a2;
213
- event.stopPropagation();
214
- flushSyncInputType("operator");
215
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
216
- },
217
- onKeyDown: (event) => {
218
- var _a2;
219
- handleShiftTabInput(event);
220
- if (event.key === "Enter") {
221
- flushSyncInputType("operator");
222
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
223
- }
224
- }
225
- }, filter.operator) : null, (filter == null ? void 0 : filter.key) && (filter == null ? void 0 : filter.operator) && (filter == null ? void 0 : filter.value) && !["operator", "value"].includes(filterInputType) ? /* @__PURE__ */ React.createElement("div", {
226
- className: cx(styles.basePill, styles.valuePill)
227
- }, filter.value) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
228
- ref: refs.setReference,
229
- onChange,
230
- value: inputValue,
231
- placeholder: !isAlwaysWip ? filterInputType === "operator" ? `${filter[filterInputType]} ${filter.value || ""}` : filter[filterInputType] : "Filter by label values",
232
- "aria-autocomplete": "list",
233
- onKeyDown(event) {
234
- if (!open) {
235
- setOpen(true);
236
- return;
237
- }
238
- if (filterInputType === "operator") {
239
- handleShiftTabInput(event);
240
- }
241
- handleBackspaceInput(event);
242
- handleTabInput(event);
243
- handleEnterInput(event);
244
- }
245
- })), {
246
- className: styles.inputStyle,
247
- onClick: (event) => {
248
- event.stopPropagation();
249
- setOpen(true);
250
- },
251
- onFocus: () => {
252
- setActiveIndex(0);
253
- setOpen(true);
254
- }
255
- })), /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, {
256
- context,
257
- initialFocus: -1,
258
- visuallyHiddenDismiss: true
259
- }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getFloatingProps({
260
- ref: refs.setFloating,
261
- style: __spreadProps(__spreadValues({}, floatingStyles), {
262
- overflowY: "auto",
263
- zIndex: 1
264
- })
265
- })), {
266
- className: styles.dropdownWrapper
267
- }), optionsLoading ? /* @__PURE__ */ React.createElement(LoadingOptionsPlaceholder, null) : optionsError ? /* @__PURE__ */ React.createElement(OptionsErrorPlaceholder, {
268
- handleFetchOptions: () => handleFetchOptions(filterInputType)
269
- }) : !filteredDropDownItems.length && filterInputType !== "value" ? /* @__PURE__ */ React.createElement(NoOptionsPlaceholder, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, rowVirtualizer.getVirtualItems().map((virtualItem) => {
270
- var _a2;
271
- const item = filteredDropDownItems[virtualItem.index];
272
- const index = virtualItem.index;
273
- return /* @__PURE__ */ React.createElement(DropdownItem, __spreadProps(__spreadValues({}, getItemProps({
274
- key: `${item.value}-${index}`,
275
- ref(node) {
276
- listRef.current[index] = node;
277
- },
278
- onClick(event) {
279
- var _a3;
280
- if (filterInputType !== "value") {
281
- event.stopPropagation();
282
- }
283
- model._updateFilter(filter, filterInputType, item);
284
- setInputValue("");
285
- if (filterInputType === "key") {
286
- flushSyncInputType("operator");
287
- } else if (filterInputType === "operator") {
288
- flushSyncInputType("value");
289
- } else if (filterInputType === "value") {
290
- flushSyncInputType("key");
291
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
292
- }
293
- (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
294
- }
295
- })), {
296
- active: activeIndex === index
297
- }), (_a2 = item.label) != null ? _a2 : item.value);
298
- }), filterInputType === "value" && inputValue ? /* @__PURE__ */ React.createElement(DropdownItem, __spreadProps(__spreadValues({}, getItemProps({
299
- key: "__custom_value_list_item",
300
- ref(node) {
301
- listRef.current[filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0] = node;
302
- },
303
- onClick() {
304
- var _a2;
305
- model._updateFilter(filter, filterInputType, { value: inputValue });
306
- setInputValue("");
307
- flushSyncInputType("key");
308
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
309
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
310
- }
311
- })), {
312
- active: activeIndex === (filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0)
313
- }), "Use custom value: ", inputValue) : null)))));
314
- });
315
- const LoadingOptionsPlaceholder = () => {
316
- return /* @__PURE__ */ React.createElement(DropdownItem, {
317
- active: false
318
- }, "Loading options...");
319
- };
320
- const NoOptionsPlaceholder = () => {
321
- return /* @__PURE__ */ React.createElement(DropdownItem, {
322
- active: false
323
- }, "No options found");
324
- };
325
- const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
326
- return /* @__PURE__ */ React.createElement(DropdownItem, {
327
- active: false,
328
- onClick: handleFetchOptions
329
- }, "Error. Click to try again!");
330
- };
331
- const getStyles2 = (theme) => ({
332
- comboboxWrapper: css({
333
- display: "flex",
334
- flexWrap: "nowrap"
335
- }),
336
- pillWrapper: css({
337
- display: "flex",
338
- alignItems: "center",
339
- whiteSpace: "nowrap"
340
- }),
341
- basePill: css(__spreadProps(__spreadValues({
342
- display: "flex",
343
- alignItems: "center",
344
- background: theme.colors.action.disabledBackground,
345
- border: `1px solid ${theme.colors.border.weak}`,
346
- padding: theme.spacing(0.125, 1, 0.125, 1),
347
- color: theme.colors.text.primary,
348
- overflow: "hidden",
349
- whiteSpace: "nowrap",
350
- minHeight: "22px"
351
- }, theme.typography.bodySmall), {
352
- cursor: "pointer"
353
- })),
354
- keyPill: css({
355
- fontWeight: theme.typography.fontWeightBold,
356
- cursor: "default"
357
- }),
358
- operatorPill: css({
359
- "&:hover": {
360
- background: theme.colors.action.hover
361
- }
362
- }),
363
- valuePill: css({
364
- background: theme.colors.action.selected
365
- }),
366
- dropdownWrapper: css({
367
- backgroundColor: theme.colors.background.primary,
368
- color: theme.colors.text.primary,
369
- boxShadow: theme.shadows.z2
370
- }),
371
- inputStyle: css({
372
- paddingBlock: 0,
373
- "&:focus": {
374
- outline: "none"
375
- }
376
- })
377
- });
378
-
379
- export { AdHocCombobox };
380
- //# sourceMappingURL=AdHocFiltersCombobox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AdHocFiltersCombobox.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport {\n autoUpdate,\n size,\n flip,\n useDismiss,\n useFloating,\n useInteractions,\n useListNavigation,\n useRole,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n UseFloatingOptions,\n} from '@floating-ui/react';\nimport { useStyles2 } from '@grafana/ui';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { flushSync } from 'react-dom';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { DropdownItem } from './DropdownItem';\n\ninterface AdHocComboboxProps {\n filter?: AdHocFilterWithLabels;\n isAlwaysWip?: boolean;\n model: AdHocFiltersVariable;\n handleChangeViewMode?: () => void;\n}\n\ntype AdHocInputType = 'key' | 'operator' | 'value';\n\nexport const AdHocCombobox = forwardRef(function AdHocCombobox(\n { filter, model, isAlwaysWip, handleChangeViewMode }: AdHocComboboxProps,\n parentRef\n) {\n const [open, setOpen] = useState(false);\n const [options, setOptions] = useState<Array<SelectableValue<string>>>([]);\n const [optionsLoading, setOptionsLoading] = useState<boolean>(false);\n const [optionsError, setOptionsError] = useState<boolean>(false);\n const [inputValue, setInputValue] = useState('');\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [filterInputType, setInputType] = useState<AdHocInputType>(!isAlwaysWip ? 'value' : 'key');\n const styles = useStyles2(getStyles2);\n\n const listRef = useRef<Array<HTMLElement | null>>([]);\n\n const handleResetWip = useCallback(() => {\n if (isAlwaysWip) {\n model._addWip();\n setInputType('key');\n setInputValue('');\n }\n }, [model, isAlwaysWip]);\n\n const onOpenChange = useCallback<NonNullable<UseFloatingOptions['onOpenChange']>>(\n (nextOpen, _, reason) => {\n setOpen(nextOpen);\n // change from filter edit mode to filter view mode when clicked\n // outside input or dropdown\n if (['outside-press', 'escape-key'].includes(reason || '')) {\n handleResetWip();\n handleChangeViewMode?.();\n }\n },\n [handleChangeViewMode, handleResetWip]\n );\n\n const operatorIdentifier = `${filter?.key ?? ''}-operator`;\n\n const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange,\n placement: 'bottom-start',\n middleware: [\n offset(10),\n flip({ padding: 10 }),\n size({\n apply({ availableHeight, elements }) {\n // limit the maxHeight of dropdown\n elements.floating.style.maxHeight = `${availableHeight > 300 ? 300 : availableHeight}px`;\n },\n padding: 10,\n }),\n ],\n });\n\n const role = useRole(context, { role: 'listbox' });\n const dismiss = useDismiss(context, {\n // if outside click lands on operator pill, then ignore outside click\n outsidePress: (event) => {\n return !(event as unknown as React.MouseEvent<HTMLElement, MouseEvent>).currentTarget.classList.contains(\n operatorIdentifier\n );\n },\n });\n const listNav = useListNavigation(context, {\n listRef,\n activeIndex,\n onNavigate: setActiveIndex,\n virtual: true,\n loop: true,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);\n\n // pass ability to focus on input element back to parent\n useImperativeHandle(parentRef, () => () => refs.domReference.current?.focus(), [refs.domReference]);\n\n function onChange(event: React.ChangeEvent<HTMLInputElement>) {\n // // part of POC for seamless filter parser\n // if (filterInputType === 'key') {\n // const lastChar = event.target.value.slice(-1);\n // if (['=', '!', '<', '>'].includes(lastChar)) {\n // const key = event.target.value.slice(0, -1);\n // const optionIndex = options.findIndex((option) => option.value === key);\n // if (optionIndex >= 0) {\n // model._updateFilter(filterToUse!, filterInputType, options[optionIndex]);\n // setInputValue(lastChar);\n // }\n // flushSync(() => {\n // setInputType('operator');\n // });\n // refs.domReference.current?.focus();\n // return;\n // }\n // }\n // if (filterInputType === 'operator') {\n // const lastChar = event.target.value.slice(-1);\n // if (/\\w/.test(lastChar)) {\n // const operator = event.target.value.slice(0, -1);\n // if (!/\\w/.test(operator)) {\n // const optionIndex = options.findIndex((option) => option.value === operator);\n // if (optionIndex >= 0) {\n // model._updateFilter(filterToUse!, filterInputType, options[optionIndex]);\n // setInputValue(lastChar);\n // }\n // flushSync(() => {\n // setInputType('value');\n // });\n // refs.domReference.current?.focus();\n // return;\n // }\n // }\n // }\n\n const value = event.target.value;\n setInputValue(value);\n setActiveIndex(0);\n }\n\n const filteredDropDownItems = options.filter((item) =>\n (item.label ?? item.value)?.toLocaleLowerCase().startsWith(inputValue.toLowerCase())\n );\n\n const flushSyncInputType = useCallback((inputType: AdHocInputType) => {\n flushSync(() => {\n setInputType(inputType);\n });\n }, []);\n\n // when not in wip mode this is the point of switching from view to edit mode\n // and in this case we default to 'value' input type and focus input\n useEffect(() => {\n if (!isAlwaysWip && refs.domReference.current) {\n setInputType('value');\n setInputValue('');\n\n refs.domReference.current.focus();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleFetchOptions = useCallback(\n async (inputType: AdHocInputType) => {\n setOptionsError(false);\n setOptionsLoading(true);\n setOptions([]);\n let options: Array<SelectableValue<string>> = [];\n try {\n if (inputType === 'key') {\n options = await model._getKeys(null);\n } else if (inputType === 'operator') {\n options = model._getOperators();\n } else if (inputType === 'value') {\n options = await model._getValuesFor(filter!);\n }\n setOptions(options);\n } catch (e) {\n setOptionsError(true);\n }\n setOptionsLoading(false);\n },\n [filter, model]\n );\n\n const handleBackspaceInput = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Backspace' && !inputValue && filterInputType === 'key') {\n model._removeLastFilter();\n handleFetchOptions(filterInputType);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [inputValue, filterInputType]\n );\n\n const handleTabInput = useCallback((event: React.KeyboardEvent) => {\n // change filter to view mode when navigating away with Tab key\n // this is needed because useDismiss only reacts to mousedown\n if (event.key === 'Tab' && !event.shiftKey) {\n handleChangeViewMode?.();\n handleResetWip();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleShiftTabInput = useCallback((event: React.KeyboardEvent) => {\n if (event.key === 'Tab' && event.shiftKey) {\n handleChangeViewMode?.();\n handleResetWip();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleEnterInput = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && activeIndex != null) {\n // dropDownItems[activeIndex] can be undefined if we entering custom value only\n // therefore adding a guard for other filterInputTypes\n if (filterInputType !== 'value' && !filteredDropDownItems[activeIndex]) {\n return;\n }\n\n let dropdownItem = filteredDropDownItems[activeIndex];\n\n // if we entering value and match no items in dropdown then\n // allow to enter current input value\n if (filterInputType === 'value' && !filteredDropDownItems[activeIndex]) {\n // prevent from adding empty value\n if (!inputValue.trim()) {\n return;\n }\n dropdownItem = { value: inputValue };\n }\n\n model._updateFilter(filter!, filterInputType, dropdownItem);\n setInputValue('');\n setActiveIndex(0);\n\n if (filterInputType === 'key') {\n flushSyncInputType('operator');\n } else if (filterInputType === 'operator') {\n flushSyncInputType('value');\n } else if (filterInputType === 'value') {\n flushSyncInputType('key');\n\n handleChangeViewMode?.();\n }\n\n refs.domReference.current?.focus();\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [activeIndex, filter, filterInputType, filteredDropDownItems, model]\n );\n\n useEffect(() => {\n if (open) {\n handleFetchOptions(filterInputType);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, filterInputType]);\n\n const rowVirtualizer = useVirtualizer({\n count: filteredDropDownItems.length,\n getScrollElement: () => refs.floating.current,\n estimateSize: () => 38,\n overscan: 5,\n });\n\n return (\n <div className={styles.comboboxWrapper}>\n {filter ? (\n <div className={styles.pillWrapper}>\n {filter?.key ? <div className={cx(styles.basePill, styles.keyPill)}>{filter.key}</div> : null}\n {filter?.key && filter?.operator && filterInputType !== 'operator' ? (\n <div\n className={cx(styles.basePill, styles.operatorPill, operatorIdentifier)}\n role=\"button\"\n aria-label=\"Edit filter operator\"\n tabIndex={0}\n onClick={(event) => {\n event.stopPropagation();\n flushSyncInputType('operator');\n\n refs.domReference.current?.focus();\n }}\n onKeyDown={(event) => {\n handleShiftTabInput(event);\n if (event.key === 'Enter') {\n flushSyncInputType('operator');\n refs.domReference.current?.focus();\n }\n }}\n >\n {filter.operator}\n </div>\n ) : null}\n {filter?.key && filter?.operator && filter?.value && !['operator', 'value'].includes(filterInputType) ? (\n <div className={cx(styles.basePill, styles.valuePill)}>{filter.value}</div>\n ) : null}\n </div>\n ) : null}\n\n <input\n {...getReferenceProps({\n ref: refs.setReference,\n onChange,\n value: inputValue,\n // dynamic placeholder to display operator and/or value in filter edit mode\n placeholder: !isAlwaysWip\n ? filterInputType === 'operator'\n ? `${filter![filterInputType]} ${filter!.value || ''}`\n : filter![filterInputType]\n : 'Filter by label values',\n 'aria-autocomplete': 'list',\n onKeyDown(event) {\n if (!open) {\n setOpen(true);\n return;\n }\n if (filterInputType === 'operator') {\n handleShiftTabInput(event);\n }\n handleBackspaceInput(event);\n handleTabInput(event);\n handleEnterInput(event);\n },\n })}\n className={styles.inputStyle}\n onClick={(event) => {\n event.stopPropagation();\n setOpen(true);\n }}\n onFocus={() => {\n setActiveIndex(0);\n setOpen(true);\n }}\n />\n <FloatingPortal>\n {open && (\n <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss>\n <div\n {...getFloatingProps({\n ref: refs.setFloating,\n style: {\n ...floatingStyles,\n overflowY: 'auto',\n zIndex: 1,\n },\n })}\n className={styles.dropdownWrapper}\n >\n {optionsLoading ? (\n <LoadingOptionsPlaceholder />\n ) : optionsError ? (\n <OptionsErrorPlaceholder handleFetchOptions={() => handleFetchOptions(filterInputType)} />\n ) : !filteredDropDownItems.length && filterInputType !== 'value' ? (\n <NoOptionsPlaceholder />\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n const item = filteredDropDownItems[virtualItem.index];\n const index = virtualItem.index;\n\n return (\n // key is included in getItemProps()\n // eslint-disable-next-line react/jsx-key\n <DropdownItem\n {...getItemProps({\n key: `${item.value!}-${index}`,\n ref(node) {\n listRef.current[index] = node;\n },\n onClick(event) {\n if (filterInputType !== 'value') {\n event.stopPropagation();\n }\n model._updateFilter(filter!, filterInputType, item);\n setInputValue('');\n\n if (filterInputType === 'key') {\n flushSyncInputType('operator');\n } else if (filterInputType === 'operator') {\n flushSyncInputType('value');\n } else if (filterInputType === 'value') {\n flushSyncInputType('key');\n handleChangeViewMode?.();\n }\n\n refs.domReference.current?.focus();\n },\n })}\n active={activeIndex === index}\n >\n {item.label ?? item.value}\n </DropdownItem>\n );\n })}\n {filterInputType === 'value' && inputValue ? (\n <DropdownItem\n {...getItemProps({\n key: '__custom_value_list_item',\n ref(node) {\n listRef.current[filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0] = node;\n },\n onClick() {\n model._updateFilter(filter!, filterInputType, { value: inputValue });\n setInputValue('');\n\n flushSyncInputType('key');\n\n handleChangeViewMode?.();\n refs.domReference.current?.focus();\n },\n })}\n active={activeIndex === (filteredDropDownItems.length ? filteredDropDownItems.length + 1 : 0)}\n >\n Use custom value: {inputValue}\n </DropdownItem>\n ) : null}\n </>\n )}\n </div>\n </FloatingFocusManager>\n )}\n </FloatingPortal>\n </div>\n );\n});\n\nconst LoadingOptionsPlaceholder = () => {\n return <DropdownItem active={false}>Loading options...</DropdownItem>;\n};\n\nconst NoOptionsPlaceholder = () => {\n return <DropdownItem active={false}>No options found</DropdownItem>;\n};\n\nconst OptionsErrorPlaceholder = ({ handleFetchOptions }: { handleFetchOptions: () => void }) => {\n return (\n <DropdownItem active={false} onClick={handleFetchOptions}>\n Error. Click to try again!\n </DropdownItem>\n );\n};\n\nconst getStyles2 = (theme: GrafanaTheme2) => ({\n comboboxWrapper: css({\n display: 'flex',\n flexWrap: 'nowrap',\n }),\n pillWrapper: css({\n display: 'flex',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n }),\n basePill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.disabledBackground,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 1, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: '22px',\n ...theme.typography.bodySmall,\n cursor: 'pointer',\n }),\n keyPill: css({\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'default',\n }),\n operatorPill: css({\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n valuePill: css({\n background: theme.colors.action.selected,\n }),\n dropdownWrapper: css({\n backgroundColor: theme.colors.background.primary,\n color: theme.colors.text.primary,\n boxShadow: theme.shadows.z2,\n }),\n inputStyle: css({\n paddingBlock: 0,\n '&:focus': {\n outline: 'none',\n },\n }),\n});\n"],"names":["AdHocCombobox","_a","options"],"mappings":"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"}
@@ -1,127 +0,0 @@
1
- import { css } from '@emotion/css';
2
- import { useStyles2, IconButton } from '@grafana/ui';
3
- import React, { useState, useRef, useCallback } from 'react';
4
- import { flushSync } from 'react-dom';
5
- import { AdHocCombobox } from './AdHocFiltersCombobox.js';
6
-
7
- var __defProp = Object.defineProperty;
8
- var __defProps = Object.defineProperties;
9
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
10
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
11
- var __hasOwnProp = Object.prototype.hasOwnProperty;
12
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
13
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
- var __spreadValues = (a, b) => {
15
- for (var prop in b || (b = {}))
16
- if (__hasOwnProp.call(b, prop))
17
- __defNormalProp(a, prop, b[prop]);
18
- if (__getOwnPropSymbols)
19
- for (var prop of __getOwnPropSymbols(b)) {
20
- if (__propIsEnum.call(b, prop))
21
- __defNormalProp(a, prop, b[prop]);
22
- }
23
- return a;
24
- };
25
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
26
- function AdHocFiltersComboboxEditSwitch({
27
- filter,
28
- model,
29
- readOnly
30
- }) {
31
- const styles = useStyles2(getStyles);
32
- const [viewMode, setViewMode] = useState(true);
33
- const pillWrapperRef = useRef(null);
34
- const handleChangeViewMode = useCallback(
35
- (event) => {
36
- var _a;
37
- event == null ? void 0 : event.stopPropagation();
38
- if (readOnly) {
39
- return;
40
- }
41
- let viewMode2 = false;
42
- flushSync(() => {
43
- setViewMode((mode) => {
44
- viewMode2 = mode;
45
- return !mode;
46
- });
47
- });
48
- if (!viewMode2) {
49
- (_a = pillWrapperRef.current) == null ? void 0 : _a.focus();
50
- }
51
- },
52
- [readOnly]
53
- );
54
- if (viewMode) {
55
- return /* @__PURE__ */ React.createElement("div", {
56
- className: `${styles.combinedFilterPill} ${readOnly ? styles.readOnlyCombinedFilter : ""}`,
57
- onClick: handleChangeViewMode,
58
- onKeyDown: (e) => {
59
- if (e.key === "Enter") {
60
- handleChangeViewMode();
61
- }
62
- },
63
- role: "button",
64
- "aria-label": `Edit filter with key ${filter.key}`,
65
- tabIndex: 0,
66
- ref: pillWrapperRef
67
- }, /* @__PURE__ */ React.createElement("span", null, filter.key, " ", filter.operator, " ", filter.value), !readOnly ? /* @__PURE__ */ React.createElement(IconButton, {
68
- onClick: (e) => {
69
- e.stopPropagation();
70
- model._removeFilter(filter);
71
- },
72
- onKeyDownCapture: (e) => {
73
- if (e.key === "Enter") {
74
- e.preventDefault();
75
- e.stopPropagation();
76
- model._removeFilter(filter);
77
- }
78
- },
79
- name: "times",
80
- size: "md",
81
- className: styles.removeButton,
82
- tooltip: `Remove filter with key ${filter.key}`
83
- }) : null);
84
- }
85
- return /* @__PURE__ */ React.createElement(AdHocCombobox, {
86
- filter,
87
- model,
88
- handleChangeViewMode
89
- });
90
- }
91
- const getStyles = (theme) => ({
92
- combinedFilterPill: css(__spreadProps(__spreadValues({
93
- display: "flex",
94
- alignItems: "center",
95
- background: theme.colors.action.selected,
96
- borderRadius: theme.shape.radius.default,
97
- border: `1px solid ${theme.colors.border.weak}`,
98
- padding: theme.spacing(0.125, 0, 0.125, 1),
99
- color: theme.colors.text.primary,
100
- overflow: "hidden",
101
- whiteSpace: "nowrap",
102
- minHeight: "22px"
103
- }, theme.typography.bodySmall), {
104
- fontWeight: theme.typography.fontWeightBold,
105
- cursor: "pointer",
106
- "&:hover": {
107
- background: theme.colors.action.hover
108
- }
109
- })),
110
- readOnlyCombinedFilter: css({
111
- paddingRight: theme.spacing(1),
112
- cursor: "text",
113
- "&:hover": {
114
- background: theme.colors.action.selected
115
- }
116
- }),
117
- removeButton: css({
118
- marginInline: theme.spacing(0.5),
119
- cursor: "pointer",
120
- "&:hover": {
121
- color: theme.colors.text.primary
122
- }
123
- })
124
- });
125
-
126
- export { AdHocFiltersComboboxEditSwitch };
127
- //# sourceMappingURL=AdHocFiltersComboboxEditSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AdHocFiltersComboboxEditSwitch.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxEditSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2, IconButton } from '@grafana/ui';\nimport React, { useState, useRef, useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';\n\nexport function AdHocFiltersComboboxEditSwitch({\n filter,\n model,\n readOnly,\n}: {\n filter: AdHocFilterWithLabels;\n model: AdHocFiltersVariable;\n readOnly?: boolean;\n}) {\n const styles = useStyles2(getStyles);\n const [viewMode, setViewMode] = useState(true);\n const pillWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChangeViewMode = useCallback(\n (event?: React.MouseEvent) => {\n event?.stopPropagation();\n if (readOnly) {\n return;\n }\n let viewMode = false;\n flushSync(() => {\n setViewMode((mode) => {\n viewMode = mode;\n return !mode;\n });\n });\n if (!viewMode) {\n pillWrapperRef.current?.focus();\n }\n },\n [readOnly]\n );\n\n if (viewMode) {\n return (\n <div\n className={`${styles.combinedFilterPill} ${readOnly ? styles.readOnlyCombinedFilter : ''}`}\n onClick={handleChangeViewMode}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleChangeViewMode();\n }\n }}\n role=\"button\"\n aria-label={`Edit filter with key ${filter.key}`}\n tabIndex={0}\n ref={pillWrapperRef}\n >\n <span>\n {filter.key} {filter.operator} {filter.value}\n </span>\n {!readOnly ? (\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n model._removeFilter(filter);\n }}\n onKeyDownCapture={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n model._removeFilter(filter);\n }\n }}\n name=\"times\"\n size=\"md\"\n className={styles.removeButton}\n tooltip={`Remove filter with key ${filter.key}`}\n />\n ) : null}\n </div>\n );\n }\n\n return <AdHocCombobox filter={filter} model={model} handleChangeViewMode={handleChangeViewMode} />;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n combinedFilterPill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.selected,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 0, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: '22px',\n ...theme.typography.bodySmall,\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'pointer',\n\n '&:hover': {\n background: theme.colors.action.hover,\n },\n }),\n readOnlyCombinedFilter: css({\n paddingRight: theme.spacing(1),\n cursor: 'text',\n '&:hover': {\n background: theme.colors.action.selected,\n },\n }),\n removeButton: css({\n marginInline: theme.spacing(0.5),\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n});\n"],"names":["viewMode"],"mappings":"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"}