@grafana/scenes 5.10.3--canary.830.10612315841.0 → 5.10.3--canary.830.10612585332.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -50,7 +50,8 @@ const getStyles = (theme) => ({
|
|
|
50
50
|
boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
|
|
51
51
|
transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
|
|
52
52
|
transitionDuration: "0.2s",
|
|
53
|
-
transitionProperty: "outline, outline-offset, box-shadow"
|
|
53
|
+
transitionProperty: "outline, outline-offset, box-shadow",
|
|
54
|
+
zIndex: 2
|
|
54
55
|
}
|
|
55
56
|
}),
|
|
56
57
|
filterIcon: css({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\nimport React, { memo, useRef } from 'react';\nimport { AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocFilterPill } from './AdHocFilterPill';\nimport { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox';\n\ninterface Props {\n model: AdHocFiltersVariable;\n}\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ model }: Props) {\n const { filters, readOnly } = model.useState();\n const styles = useStyles2(getStyles);\n const focusOnInputRef = useRef<() => void>();\n\n return (\n <div\n className={cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly })}\n onClick={() => {\n focusOnInputRef.current?.();\n }}\n >\n <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n {filters.map((filter, index) => (\n <AdHocFilterPill key={index} filter={filter} model={model} readOnly={readOnly} />\n ))}\n\n {!readOnly ? <AdHocFiltersAlwaysWipCombobox model={model} ref={focusOnInputRef} /> : null}\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 comboboxFocusOutline: css({\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":";;;;;;AAYO,MAAM,+BAA+B,IAAK,CAAA,SAASA,6BAA6B,CAAA,EAAE,OAAgB,EAAA;AACvG,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAC7C,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,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,eAAiB,EAAA,EAAE,CAAC,MAAO,CAAA,oBAAA,GAAuB,CAAC,QAAA,EAAU,CAAA;AAAA,IAClF,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,eAAA,EAAA;AAAA,IAAgB,GAAK,EAAA,KAAA;AAAA,IAAO,MAAA;AAAA,IAAgB,KAAA;AAAA,IAAc,QAAA;AAAA,GAAoB,CAChF,CAAA,EAEA,CAAC,QAAA,mBAAY,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAA,IAA8B,KAAA;AAAA,IAAc,GAAK,EAAA,eAAA;AAAA,GAAiB,IAAK,IACvF,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,GACX,CAAA;AAAA,EACD,sBAAsB,GAAI,CAAA;AAAA,IACxB,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,
|
|
1
|
+
{"version":3,"file":"AdHocFiltersComboboxRenderer.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\nimport React, { memo, useRef } from 'react';\nimport { AdHocFiltersVariable } from '../AdHocFiltersVariable';\nimport { AdHocFilterPill } from './AdHocFilterPill';\nimport { AdHocFiltersAlwaysWipCombobox } from './AdHocFiltersAlwaysWipCombobox';\n\ninterface Props {\n model: AdHocFiltersVariable;\n}\n\nexport const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ model }: Props) {\n const { filters, readOnly } = model.useState();\n const styles = useStyles2(getStyles);\n const focusOnInputRef = useRef<() => void>();\n\n return (\n <div\n className={cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly })}\n onClick={() => {\n focusOnInputRef.current?.();\n }}\n >\n <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n {filters.map((filter, index) => (\n <AdHocFilterPill key={index} filter={filter} model={model} readOnly={readOnly} />\n ))}\n\n {!readOnly ? <AdHocFiltersAlwaysWipCombobox model={model} ref={focusOnInputRef} /> : null}\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 comboboxFocusOutline: css({\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 zIndex: 2,\n },\n }),\n filterIcon: css({\n color: theme.colors.text.secondary,\n alignSelf: 'center',\n }),\n});\n"],"names":["AdHocFiltersComboboxRenderer"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -4248,7 +4248,8 @@ const getStyles$9 = (theme) => ({
|
|
|
4248
4248
|
boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
|
|
4249
4249
|
transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
|
|
4250
4250
|
transitionDuration: "0.2s",
|
|
4251
|
-
transitionProperty: "outline, outline-offset, box-shadow"
|
|
4251
|
+
transitionProperty: "outline, outline-offset, box-shadow",
|
|
4252
|
+
zIndex: 2
|
|
4252
4253
|
}
|
|
4253
4254
|
}),
|
|
4254
4255
|
filterIcon: css.css({
|