@grafana/scenes 5.5.1--canary.830.9990123542.0 → 5.5.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.5.1--canary.830.9990123542.0",
3
+ "version": "5.5.1",
4
4
  "description": "Grafana framework for building dynamic dashboards",
5
5
  "author": "Grafana Labs",
6
6
  "license": "AGPL-3.0-only",
@@ -37,7 +37,6 @@
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
42
  "react-grid-layout": "1.3.4",
@@ -114,5 +113,5 @@
114
113
  "prettier --write"
115
114
  ]
116
115
  },
117
- "gitHead": "28977d646c4c9532f44e69daa6fa0f7c8d90e82a"
116
+ "gitHead": "a363be82ff5c0376fe9612aebf1244da0cee69c6"
118
117
  }
@@ -1,374 +0,0 @@
1
- import React, { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
2
- import { useId, useFloating, autoUpdate, flip, size, useRole, useDismiss, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
3
- import { useTheme2, getSelectStyles, useStyles2 } from '@grafana/ui';
4
- import { cx, css } from '@emotion/css';
5
- import { flushSync } from 'react-dom';
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
- var __objRest = (source, exclude) => {
27
- var target = {};
28
- for (var prop in source)
29
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
30
- target[prop] = source[prop];
31
- if (source != null && __getOwnPropSymbols)
32
- for (var prop of __getOwnPropSymbols(source)) {
33
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
34
- target[prop] = source[prop];
35
- }
36
- return target;
37
- };
38
- const Item = forwardRef(
39
- (_a, ref) => {
40
- var _b = _a, { children, active } = _b, rest = __objRest(_b, ["children", "active"]);
41
- const theme = useTheme2();
42
- const selectStyles = getSelectStyles(theme);
43
- const id = useId();
44
- return /* @__PURE__ */ React.createElement("div", __spreadValues({
45
- ref,
46
- role: "option",
47
- id,
48
- "aria-selected": active,
49
- className: cx(selectStyles.option, active && selectStyles.optionFocused)
50
- }, rest), /* @__PURE__ */ React.createElement("div", {
51
- className: selectStyles.optionBody,
52
- "data-testid": `data-testid ad hoc filter option value ${children}`
53
- }, /* @__PURE__ */ React.createElement("span", null, children)));
54
- }
55
- );
56
- const AdHocCombobox = forwardRef(function AdHocCombobox2({ filter, model, wip, handleChangeViewMode }, parentRef) {
57
- var _a;
58
- const [open, setOpen] = useState(false);
59
- const [options, setOptions] = useState([]);
60
- const [inputValue, setInputValue] = useState("");
61
- const [activeIndex, setActiveIndex] = useState(null);
62
- const [inputType, setInputType] = useState(!wip ? "value" : "key");
63
- const styles = useStyles2(getStyles2);
64
- const listRef = useRef([]);
65
- const { _wip } = model.useState();
66
- const handleResetWip = useCallback(() => {
67
- if (wip) {
68
- model._addWip();
69
- setInputType("key");
70
- setInputValue("");
71
- }
72
- }, [model, wip]);
73
- const filterToUse = filter || _wip;
74
- const operatorIdentifier = `${(_a = filterToUse == null ? void 0 : filterToUse.key) != null ? _a : ""}-operator`;
75
- const { refs, floatingStyles, context } = useFloating({
76
- whileElementsMounted: autoUpdate,
77
- open,
78
- onOpenChange: (nextOpen, _, reason) => {
79
- setOpen(nextOpen);
80
- if (["outside-press", "escape-key"].includes(reason || "")) {
81
- handleResetWip();
82
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
83
- }
84
- },
85
- middleware: [
86
- flip({ padding: 10 }),
87
- size({
88
- apply({ rects, availableHeight, elements }) {
89
- Object.assign(elements.floating.style, {
90
- width: `${rects.reference.width}px`,
91
- maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`
92
- });
93
- },
94
- padding: 10
95
- })
96
- ]
97
- });
98
- const role = useRole(context, { role: "listbox" });
99
- const dismiss = useDismiss(context, {
100
- outsidePress: (event) => {
101
- return !event.currentTarget.classList.contains(
102
- operatorIdentifier
103
- );
104
- }
105
- });
106
- const listNav = useListNavigation(context, {
107
- listRef,
108
- activeIndex,
109
- onNavigate: setActiveIndex,
110
- virtual: true,
111
- loop: true
112
- });
113
- const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
114
- useImperativeHandle(parentRef, () => () => {
115
- var _a2;
116
- return (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
117
- }, [refs.domReference]);
118
- function onChange(event) {
119
- var _a2, _b;
120
- if (inputType === "key") {
121
- const lastChar = event.target.value.slice(-1);
122
- if (["=", "!", "<", ">"].includes(lastChar)) {
123
- const key = event.target.value.slice(0, -1);
124
- const optionIndex = options.findIndex((option) => option.value === key);
125
- if (optionIndex >= 0) {
126
- model._updateFilter(filterToUse, inputType, options[optionIndex]);
127
- setInputValue(lastChar);
128
- }
129
- flushSync(() => {
130
- setInputType("operator");
131
- });
132
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
133
- return;
134
- }
135
- }
136
- if (inputType === "operator") {
137
- const lastChar = event.target.value.slice(-1);
138
- if (/\w/.test(lastChar)) {
139
- const operator = event.target.value.slice(0, -1);
140
- if (!/\w/.test(operator)) {
141
- const optionIndex = options.findIndex((option) => option.value === operator);
142
- if (optionIndex >= 0) {
143
- model._updateFilter(filterToUse, inputType, options[optionIndex]);
144
- setInputValue(lastChar);
145
- }
146
- flushSync(() => {
147
- setInputType("value");
148
- });
149
- (_b = refs.domReference.current) == null ? void 0 : _b.focus();
150
- return;
151
- }
152
- }
153
- }
154
- const value = event.target.value;
155
- setInputValue(value);
156
- setActiveIndex(0);
157
- }
158
- const items = options.filter(
159
- (item) => {
160
- var _a2, _b;
161
- return (_b = (_a2 = item.label) != null ? _a2 : item.value) == null ? void 0 : _b.toLocaleLowerCase().startsWith(inputValue.toLowerCase());
162
- }
163
- );
164
- const flushInputType = useCallback((inputType2) => {
165
- flushSync(() => {
166
- setInputType(inputType2);
167
- });
168
- }, []);
169
- useEffect(() => {
170
- if (wip && !_wip) {
171
- model._addWip();
172
- }
173
- }, [_wip]);
174
- useEffect(() => {
175
- if (!wip && refs.domReference.current) {
176
- setInputType("value");
177
- setInputValue("");
178
- refs.domReference.current.focus();
179
- }
180
- }, []);
181
- const handleFetchOptions = useCallback(async () => {
182
- let options2 = [];
183
- if (inputType === "key") {
184
- options2 = await model._getKeys(null);
185
- } else if (inputType === "operator") {
186
- options2 = model._getOperators();
187
- } else if (inputType === "value") {
188
- options2 = await model._getValuesFor(filterToUse);
189
- }
190
- setOptions(options2);
191
- }, [filterToUse, inputType, model]);
192
- const handleBackspaceInput = useCallback(
193
- (event) => {
194
- if (event.key === "Backspace" && !inputValue && inputType === "key") {
195
- model._removeLastFilter();
196
- setOpen(false);
197
- }
198
- },
199
- [inputValue, inputType]
200
- );
201
- const handleTabInput = useCallback((event) => {
202
- if (event.key === "Tab" && !event.shiftKey) {
203
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
204
- handleResetWip();
205
- }
206
- }, []);
207
- const handleShiftTabInput = useCallback((event) => {
208
- if (event.key === "Tab" && event.shiftKey) {
209
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
210
- handleResetWip();
211
- }
212
- }, []);
213
- const handleEnterInput = useCallback(
214
- (event) => {
215
- var _a2;
216
- if (event.key === "Enter" && activeIndex != null && items[activeIndex]) {
217
- model._updateFilter(filterToUse, inputType, items[activeIndex]);
218
- setInputValue("");
219
- if (inputType === "key") {
220
- flushInputType("operator");
221
- } else if (inputType === "operator") {
222
- flushInputType("value");
223
- } else if (inputType === "value") {
224
- flushInputType("key");
225
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
226
- }
227
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
228
- }
229
- },
230
- [activeIndex, filterToUse, inputType, items, model]
231
- );
232
- useEffect(() => {
233
- if (open) {
234
- handleFetchOptions();
235
- }
236
- }, [open, inputType]);
237
- return /* @__PURE__ */ React.createElement("div", {
238
- className: styles.comboboxWrapper
239
- }, filterToUse ? /* @__PURE__ */ React.createElement("div", {
240
- className: styles.pillWrapper
241
- }, (filterToUse == null ? void 0 : filterToUse.key) ? /* @__PURE__ */ React.createElement("div", {
242
- className: cx(styles.basePill, styles.keyPill)
243
- }, filterToUse.key) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && inputType !== "operator" ? /* @__PURE__ */ React.createElement("div", {
244
- className: cx(styles.basePill, styles.operatorPill, operatorIdentifier),
245
- role: "button",
246
- "aria-label": "Edit filter operator",
247
- tabIndex: 0,
248
- onClick: (event) => {
249
- var _a2;
250
- event.stopPropagation();
251
- flushInputType("operator");
252
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
253
- },
254
- onKeyDown: (event) => {
255
- var _a2;
256
- handleShiftTabInput(event);
257
- if (event.key === "Enter") {
258
- flushInputType("operator");
259
- (_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
260
- }
261
- }
262
- }, filterToUse.operator) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && (filterToUse == null ? void 0 : filterToUse.value) && !["operator", "value"].includes(inputType) ? /* @__PURE__ */ React.createElement("div", {
263
- className: cx(styles.basePill, styles.valuePill)
264
- }, filterToUse.value) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
265
- ref: refs.setReference,
266
- onChange,
267
- value: inputValue,
268
- placeholder: !wip ? inputType === "operator" ? `${filterToUse[inputType]} ${filterToUse.value || ""}` : filterToUse[inputType] : "Filter by label values",
269
- "aria-autocomplete": "list",
270
- onKeyDown(event) {
271
- if (inputType === "operator") {
272
- handleShiftTabInput(event);
273
- }
274
- handleBackspaceInput(event);
275
- handleTabInput(event);
276
- handleEnterInput(event);
277
- }
278
- })), {
279
- className: styles.inputStyle,
280
- onClick: (event) => {
281
- event.stopPropagation();
282
- setOpen(true);
283
- },
284
- onFocus: () => {
285
- setActiveIndex(0);
286
- setOpen(true);
287
- }
288
- })), /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, {
289
- context,
290
- initialFocus: -1,
291
- visuallyHiddenDismiss: true
292
- }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getFloatingProps({
293
- ref: refs.setFloating,
294
- style: __spreadProps(__spreadValues({}, floatingStyles), {
295
- overflowY: "auto"
296
- })
297
- })), {
298
- className: styles.dropdownWrapper
299
- }), items.map((item, index) => {
300
- var _a2;
301
- return /* @__PURE__ */ React.createElement(Item, __spreadProps(__spreadValues({}, getItemProps({
302
- key: item.value,
303
- ref(node) {
304
- listRef.current[index] = node;
305
- },
306
- onClick() {
307
- var _a3;
308
- model._updateFilter(filterToUse, inputType, item);
309
- setInputValue("");
310
- if (inputType === "key") {
311
- flushInputType("operator");
312
- } else if (inputType === "operator") {
313
- flushInputType("value");
314
- } else if (inputType === "value") {
315
- flushInputType("key");
316
- handleChangeViewMode == null ? void 0 : handleChangeViewMode();
317
- }
318
- (_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
319
- }
320
- })), {
321
- active: activeIndex === index
322
- }), (_a2 = item.label) != null ? _a2 : item.value);
323
- })))));
324
- });
325
- const getStyles2 = (theme) => ({
326
- comboboxWrapper: css({
327
- display: "flex",
328
- flexWrap: "nowrap"
329
- }),
330
- pillWrapper: css({
331
- display: "flex",
332
- alignItems: "center",
333
- whiteSpace: "nowrap"
334
- }),
335
- basePill: css(__spreadProps(__spreadValues({
336
- display: "flex",
337
- alignItems: "center",
338
- background: theme.colors.action.disabledBackground,
339
- border: `1px solid ${theme.colors.border.weak}`,
340
- padding: theme.spacing(0.125, 1, 0.125, 1),
341
- color: theme.colors.text.primary,
342
- overflow: "hidden",
343
- whiteSpace: "nowrap",
344
- minHeight: "22px"
345
- }, theme.typography.bodySmall), {
346
- cursor: "pointer"
347
- })),
348
- keyPill: css({
349
- fontWeight: theme.typography.fontWeightBold,
350
- cursor: "default"
351
- }),
352
- operatorPill: css({
353
- "&:hover": {
354
- background: theme.colors.action.hover
355
- }
356
- }),
357
- valuePill: css({
358
- background: theme.colors.action.selected
359
- }),
360
- dropdownWrapper: css({
361
- backgroundColor: theme.colors.background.primary,
362
- color: theme.colors.text.primary,
363
- boxShadow: theme.shadows.z2
364
- }),
365
- inputStyle: css({
366
- paddingBlock: 0,
367
- "&:focus": {
368
- outline: "none"
369
- }
370
- })
371
- });
372
-
373
- export { AdHocCombobox };
374
- //# 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 useId,\n useDismiss,\n useFloating,\n useInteractions,\n useListNavigation,\n useRole,\n FloatingFocusManager,\n FloatingPortal,\n} from '@floating-ui/react';\nimport { getSelectStyles, useStyles2, useTheme2 } 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';\n\ninterface ItemProps {\n children: React.ReactNode;\n active: boolean;\n}\n\n// eslint-disable-next-line react/display-name\nconst Item = forwardRef<HTMLDivElement, ItemProps & React.HTMLProps<HTMLDivElement>>(\n ({ children, active, ...rest }, ref) => {\n const theme = useTheme2();\n const selectStyles = getSelectStyles(theme);\n const id = useId();\n return (\n <div\n ref={ref}\n role=\"option\"\n id={id}\n aria-selected={active}\n className={cx(selectStyles.option, active && selectStyles.optionFocused)}\n {...rest}\n >\n <div className={selectStyles.optionBody} data-testid={`data-testid ad hoc filter option value ${children}`}>\n <span>{children}</span>\n </div>\n </div>\n );\n }\n);\n\ninterface AdHocComboboxProps {\n filter?: AdHocFilterWithLabels;\n wip?: boolean;\n model: AdHocFiltersVariable;\n handleChangeViewMode?: () => void;\n}\n\ntype AdHocInputType = 'key' | 'operator' | 'value';\n\nexport const AdHocCombobox = forwardRef(function AdHocCombobox(\n { filter, model, wip, handleChangeViewMode }: AdHocComboboxProps,\n parentRef\n) {\n const [open, setOpen] = useState(false);\n // const [optionsLoading, setOptionsLoading] = useState<boolean>(false);\n const [options, setOptions] = useState<Array<SelectableValue<string>>>([]);\n const [inputValue, setInputValue] = useState('');\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [inputType, setInputType] = useState<AdHocInputType>(!wip ? 'value' : 'key');\n const styles = useStyles2(getStyles2);\n\n const listRef = useRef<Array<HTMLElement | null>>([]);\n const { _wip } = model.useState();\n\n const handleResetWip = useCallback(() => {\n if (wip) {\n model._addWip();\n setInputType('key');\n setInputValue('');\n }\n }, [model, wip]);\n\n const filterToUse = filter || _wip;\n\n const operatorIdentifier = `${filterToUse?.key ?? ''}-operator`;\n\n const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (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 middleware: [\n flip({ padding: 10 }),\n size({\n apply({ rects, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n // limit the maxHeight of dropdown\n maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`,\n });\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 (inputType === '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!, inputType, options[optionIndex]);\n setInputValue(lastChar);\n }\n flushSync(() => {\n setInputType('operator');\n });\n refs.domReference.current?.focus();\n return;\n }\n }\n if (inputType === '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!, inputType, 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 items = options.filter((item) =>\n (item.label ?? item.value)?.toLocaleLowerCase().startsWith(inputValue.toLowerCase())\n );\n\n const flushInputType = useCallback((inputType: AdHocInputType) => {\n flushSync(() => {\n setInputType(inputType);\n });\n }, []);\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 useEffect(() => {\n if (wip && !_wip) {\n model._addWip();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_wip]);\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 (!wip && 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(async () => {\n let options: Array<SelectableValue<string>> = [];\n // TODO: missing async placeholder while options load\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(filterToUse!);\n }\n setOptions(options);\n }, [filterToUse, inputType, model]);\n\n const handleBackspaceInput = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Backspace' && !inputValue && inputType === 'key') {\n model._removeLastFilter();\n setOpen(false);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [inputValue, inputType]\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 && items[activeIndex]) {\n model._updateFilter(filterToUse!, inputType, items[activeIndex]);\n setInputValue('');\n\n if (inputType === 'key') {\n flushInputType('operator');\n } else if (inputType === 'operator') {\n flushInputType('value');\n } else if (inputType === 'value') {\n flushInputType('key');\n\n handleChangeViewMode?.();\n }\n\n refs.domReference.current?.focus();\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [activeIndex, filterToUse, inputType, items, model]\n );\n\n useEffect(() => {\n if (open) {\n handleFetchOptions();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, inputType]);\n\n return (\n <div className={styles.comboboxWrapper}>\n {filterToUse ? (\n <div className={styles.pillWrapper}>\n {filterToUse?.key ? <div className={cx(styles.basePill, styles.keyPill)}>{filterToUse.key}</div> : null}\n {filterToUse?.key && filterToUse?.operator && inputType !== '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 flushInputType('operator');\n\n refs.domReference.current?.focus();\n }}\n onKeyDown={(event) => {\n handleShiftTabInput(event);\n if (event.key === 'Enter') {\n flushInputType('operator');\n refs.domReference.current?.focus();\n }\n }}\n >\n {filterToUse.operator}\n </div>\n ) : null}\n {filterToUse?.key &&\n filterToUse?.operator &&\n filterToUse?.value &&\n !['operator', 'value'].includes(inputType) ? (\n <div className={cx(styles.basePill, styles.valuePill)}>{filterToUse.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: !wip\n ? inputType === 'operator'\n ? `${filterToUse![inputType]} ${filterToUse!.value || ''}`\n : filterToUse![inputType]\n : 'Filter by label values',\n 'aria-autocomplete': 'list',\n onKeyDown(event) {\n if (inputType === '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 },\n })}\n className={styles.dropdownWrapper}\n >\n {items.map((item, index) => (\n // eslint-disable-next-line react/jsx-key\n <Item\n {...getItemProps({\n key: item.value!,\n ref(node) {\n listRef.current[index] = node;\n },\n onClick() {\n model._updateFilter(filterToUse!, inputType, item);\n setInputValue('');\n\n if (inputType === 'key') {\n flushInputType('operator');\n } else if (inputType === 'operator') {\n flushInputType('value');\n } else if (inputType === 'value') {\n flushInputType('key');\n handleChangeViewMode?.();\n }\n\n refs.domReference.current?.focus();\n },\n })}\n active={activeIndex === index}\n >\n {item.label ?? item.value}\n </Item>\n ))}\n </div>\n </FloatingFocusManager>\n )}\n </FloatingPortal>\n </div>\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","inputType","options"],"mappings":"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"}
@@ -1,113 +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
- }) {
30
- const styles = useStyles2(getStyles);
31
- const [viewMode, setViewMode] = useState(true);
32
- const pillWrapperRef = useRef(null);
33
- const handleChangeViewMode = useCallback((event) => {
34
- var _a;
35
- event == null ? void 0 : event.stopPropagation();
36
- let viewMode2 = false;
37
- flushSync(() => {
38
- setViewMode((mode) => {
39
- viewMode2 = mode;
40
- return !mode;
41
- });
42
- });
43
- if (!viewMode2) {
44
- (_a = pillWrapperRef.current) == null ? void 0 : _a.focus();
45
- }
46
- }, []);
47
- if (viewMode) {
48
- return /* @__PURE__ */ React.createElement("div", {
49
- className: styles.combinedFilterPill,
50
- onClick: handleChangeViewMode,
51
- onKeyDown: (e) => {
52
- if (e.key === "Enter") {
53
- handleChangeViewMode();
54
- }
55
- },
56
- role: "button",
57
- "aria-label": "Edit filter",
58
- tabIndex: 0,
59
- ref: pillWrapperRef
60
- }, /* @__PURE__ */ React.createElement("span", null, filter.key, " ", filter.operator, " ", filter.value), /* @__PURE__ */ React.createElement(IconButton, {
61
- onClick: (e) => {
62
- e.stopPropagation();
63
- model._removeFilter(filter);
64
- },
65
- onKeyDownCapture: (e) => {
66
- if (e.key === "Enter") {
67
- e.preventDefault();
68
- e.stopPropagation();
69
- model._removeFilter(filter);
70
- }
71
- },
72
- name: "times",
73
- size: "md",
74
- className: styles.removeButton,
75
- tooltip: "Remove filter"
76
- }));
77
- }
78
- return /* @__PURE__ */ React.createElement(AdHocCombobox, {
79
- filter,
80
- model,
81
- handleChangeViewMode
82
- });
83
- }
84
- const getStyles = (theme) => ({
85
- combinedFilterPill: css(__spreadProps(__spreadValues({
86
- display: "flex",
87
- alignItems: "center",
88
- background: theme.colors.action.selected,
89
- borderRadius: theme.shape.radius.default,
90
- border: `1px solid ${theme.colors.border.weak}`,
91
- padding: theme.spacing(0.125, 0, 0.125, 1),
92
- color: theme.colors.text.primary,
93
- overflow: "hidden",
94
- whiteSpace: "nowrap",
95
- minHeight: "22px"
96
- }, theme.typography.bodySmall), {
97
- fontWeight: theme.typography.fontWeightBold,
98
- cursor: "pointer",
99
- "&:hover": {
100
- background: theme.colors.action.hover
101
- }
102
- })),
103
- removeButton: css({
104
- marginInline: theme.spacing(0.5),
105
- cursor: "pointer",
106
- "&:hover": {
107
- color: theme.colors.text.primary
108
- }
109
- })
110
- });
111
-
112
- export { AdHocFiltersComboboxEditSwitch };
113
- //# 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}: {\n filter: AdHocFilterWithLabels;\n model: AdHocFiltersVariable;\n}) {\n const styles = useStyles2(getStyles);\n const [viewMode, setViewMode] = useState(true);\n const pillWrapperRef = useRef<HTMLDivElement>(null);\n\n const handleChangeViewMode = useCallback((event?: React.MouseEvent) => {\n event?.stopPropagation();\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\n if (viewMode) {\n return (\n <div\n className={styles.combinedFilterPill}\n onClick={handleChangeViewMode}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleChangeViewMode();\n }\n }}\n role=\"button\"\n aria-label=\"Edit filter\"\n tabIndex={0}\n ref={pillWrapperRef}\n >\n <span>\n {filter.key} {filter.operator} {filter.value}\n </span>\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\"\n />\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 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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"}
@@ -1,63 +0,0 @@
1
- import { css } from '@emotion/css';
2
- import { useStyles2, Icon } from '@grafana/ui';
3
- import React, { memo, useRef } from 'react';
4
- import { AdHocCombobox } from './AdHocFiltersCombobox.js';
5
- import { AdHocFiltersComboboxEditSwitch } from './AdHocFiltersComboboxEditSwitch.js';
6
-
7
- const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer2({
8
- model
9
- }) {
10
- const { filters } = model.useState();
11
- const styles = useStyles2(getStyles);
12
- const focusOnInputRef = useRef();
13
- return /* @__PURE__ */ React.createElement("div", {
14
- className: styles.comboboxWrapper,
15
- onClick: () => {
16
- var _a;
17
- (_a = focusOnInputRef.current) == null ? void 0 : _a.call(focusOnInputRef);
18
- }
19
- }, /* @__PURE__ */ React.createElement(Icon, {
20
- name: "filter",
21
- className: styles.filterIcon,
22
- size: "lg"
23
- }), filters.map((filter, index) => /* @__PURE__ */ React.createElement(AdHocFiltersComboboxEditSwitch, {
24
- key: index,
25
- filter,
26
- model
27
- })), /* @__PURE__ */ React.createElement(AdHocCombobox, {
28
- model,
29
- wip: true,
30
- ref: focusOnInputRef
31
- }));
32
- });
33
- const getStyles = (theme) => ({
34
- comboboxWrapper: css({
35
- display: "flex",
36
- flexWrap: "wrap",
37
- alignItems: "center",
38
- columnGap: theme.spacing(1),
39
- rowGap: theme.spacing(0.5),
40
- minHeight: theme.spacing(4),
41
- backgroundColor: theme.components.input.background,
42
- border: `1px solid ${theme.colors.border.strong}`,
43
- borderRadius: theme.shape.radius.default,
44
- paddingInline: theme.spacing(1),
45
- paddingBlock: theme.spacing(0.5),
46
- flexGrow: 1,
47
- "&:focus-within": {
48
- outline: "2px dotted transparent",
49
- outlineOffset: "2px",
50
- boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
51
- transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
52
- transitionDuration: "0.2s",
53
- transitionProperty: "outline, outline-offset, box-shadow"
54
- }
55
- }),
56
- filterIcon: css({
57
- color: theme.colors.text.secondary,
58
- alignSelf: "center"
59
- })
60
- });
61
-
62
- export { AdHocFiltersComboboxRenderer };
63
- //# sourceMappingURL=AdHocFiltersComboboxRenderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\nimport React, { memo, useRef } from 'react';\nimport { AdHocCombobox } from './AdHocFiltersCombobox';\nimport { AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocFiltersComboboxEditSwitch } from './AdHocFiltersComboboxEditSwitch';\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({\n model,\n}: {\n model: AdHocFiltersVariable;\n}) {\n const { filters } = model.useState();\n const styles = useStyles2(getStyles);\n const focusOnInputRef = useRef<() => void>();\n\n return (\n <div\n className={styles.comboboxWrapper}\n onClick={() => {\n focusOnInputRef.current?.();\n }}\n >\n <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n {filters.map((filter, index) => (\n <AdHocFiltersComboboxEditSwitch key={index} filter={filter} model={model} />\n ))}\n\n <AdHocCombobox model={model} wip ref={focusOnInputRef} />\n </div>\n );\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n comboboxWrapper: css({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: theme.spacing(1),\n rowGap: theme.spacing(0.5),\n minHeight: theme.spacing(4),\n backgroundColor: theme.components.input.background,\n border: `1px solid ${theme.colors.border.strong}`,\n borderRadius: theme.shape.radius.default,\n paddingInline: theme.spacing(1),\n paddingBlock: theme.spacing(0.5),\n flexGrow: 1,\n\n '&:focus-within': {\n outline: '2px dotted transparent',\n outlineOffset: '2px',\n boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n transitionDuration: '0.2s',\n transitionProperty: 'outline, outline-offset, box-shadow',\n },\n }),\n filterIcon: css({\n color: theme.colors.text.secondary,\n alignSelf: 'center',\n }),\n});\n"],"names":["AdHocFiltersComboboxRenderer"],"mappings":";;;;;;AAQa,MAAA,4BAAA,GAA+B,IAAK,CAAA,SAASA,6BAA6B,CAAA;AAAA,EACrF,KAAA;AACF,CAEG,EAAA;AACD,EAAA,MAAM,EAAE,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACnC,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AACnC,EAAA,MAAM,kBAAkB,MAAmB,EAAA,CAAA;AAE3C,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,MAAO,CAAA,eAAA;AAAA,IAClB,SAAS,MAAM;AApBrB,MAAA,IAAA,EAAA,CAAA;AAqBQ,MAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAhB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,eAAA,CAAA,CAAA;AAAA,KACF;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,QAAA;AAAA,IAAS,WAAW,MAAO,CAAA,UAAA;AAAA,IAAY,IAAK,EAAA,IAAA;AAAA,GAAK,GAE3D,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,0BACnB,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA;AAAA,IAA+B,GAAK,EAAA,KAAA;AAAA,IAAO,MAAA;AAAA,IAAgB,KAAA;AAAA,GAAc,CAC3E,mBAEA,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,KAAA;AAAA,IAAc,GAAG,EAAA,IAAA;AAAA,IAAC,GAAK,EAAA,eAAA;AAAA,GAAiB,CACzD,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,iBAAiB,GAAI,CAAA;AAAA,IACnB,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IACzB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,eAAA,EAAiB,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,UAAA;AAAA,IACxC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA,CAAA,CAAA;AAAA,IACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,QAAU,EAAA,CAAA;AAAA,IAEV,gBAAkB,EAAA;AAAA,MAChB,OAAS,EAAA,wBAAA;AAAA,MACT,aAAe,EAAA,KAAA;AAAA,MACf,SAAA,EAAW,aAAa,KAAM,CAAA,MAAA,CAAO,WAAW,MAAuB,CAAA,cAAA,EAAA,KAAA,CAAM,OAAO,OAAQ,CAAA,IAAA,CAAA,CAAA;AAAA,MAC5F,wBAA0B,EAAA,CAAA,8BAAA,CAAA;AAAA,MAC1B,kBAAoB,EAAA,MAAA;AAAA,MACpB,kBAAoB,EAAA,qCAAA;AAAA,KACtB;AAAA,GACD,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA;AACH,CAAA,CAAA;;;;"}