@grafana/scenes 5.16.0--canary.915.11034968022.0 → 5.16.1--canary.918.11052714280.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +12 -0
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/DropdownItem.js +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/DropdownItem.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/useFloatingInteractions.js +2 -1
- package/dist/esm/variables/adhoc/AdHocFiltersCombobox/useFloatingInteractions.js.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v5.16.0 (Wed Sep 25 2024)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- SceneTimePicker: Implement recently used absolute time ranges view [#915](https://github.com/grafana/scenes/pull/915) ([@kaydelaney](https://github.com/kaydelaney))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- kay delaney ([@kaydelaney](https://github.com/kaydelaney))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v5.15.1 (Wed Sep 25 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/DropdownItem.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, Checkbox, useStyles2 } from '@grafana/ui';\nimport React, { forwardRef, useId } from 'react';\n\ninterface DropdownItemProps {\n children: React.ReactNode;\n active?: boolean;\n addGroupBottomBorder?: boolean;\n isMultiValueEdit?: boolean;\n checked?: boolean;\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps & React.HTMLProps<HTMLDivElement>>(\n function DropdownItem({ children, active, addGroupBottomBorder, isMultiValueEdit, checked, ...rest }, ref) {\n const styles = useStyles2(getStyles);\n const id = useId();\n return (\n <div\n ref={ref}\n role=\"option\"\n id={id}\n aria-selected={active}\n className={cx(styles.option, active && styles.optionFocused, addGroupBottomBorder && styles.groupBottomBorder)}\n {...rest}\n >\n <div className={styles.optionBody} data-testid={`data-testid ad hoc filter option value ${children}`}>\n <span>\n {isMultiValueEdit ? <Checkbox tabIndex={-1} checked={checked} className={styles.checkbox} /> : null}\n {children}\n </span>\n </div>\n </div>\n );\n }\n);\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n option: css({\n label: 'grafana-select-option',\n top: 0,\n left: 0,\n width: '100%',\n position: 'absolute',\n padding: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n '&:hover': {\n background: theme.colors.action.hover,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n },\n }),\n optionFocused: css({\n label: 'grafana-select-option-focused',\n background: theme.colors.action.focus,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n }),\n optionBody: css({\n label: 'grafana-select-option-body',\n display: 'flex',\n fontWeight: theme.typography.fontWeightMedium,\n flexDirection: 'column',\n flexGrow: 1,\n }),\n groupBottomBorder: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n checkbox: css({\n paddingRight: theme.spacing(0.5),\n }),\n multiValueApplyWrapper: css({\n position: '
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/DropdownItem.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, Checkbox, useStyles2 } from '@grafana/ui';\nimport React, { forwardRef, useId } from 'react';\n\ninterface DropdownItemProps {\n children: React.ReactNode;\n active?: boolean;\n addGroupBottomBorder?: boolean;\n isMultiValueEdit?: boolean;\n checked?: boolean;\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps & React.HTMLProps<HTMLDivElement>>(\n function DropdownItem({ children, active, addGroupBottomBorder, isMultiValueEdit, checked, ...rest }, ref) {\n const styles = useStyles2(getStyles);\n const id = useId();\n return (\n <div\n ref={ref}\n role=\"option\"\n id={id}\n aria-selected={active}\n className={cx(styles.option, active && styles.optionFocused, addGroupBottomBorder && styles.groupBottomBorder)}\n {...rest}\n >\n <div className={styles.optionBody} data-testid={`data-testid ad hoc filter option value ${children}`}>\n <span>\n {isMultiValueEdit ? <Checkbox tabIndex={-1} checked={checked} className={styles.checkbox} /> : null}\n {children}\n </span>\n </div>\n </div>\n );\n }\n);\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n option: css({\n label: 'grafana-select-option',\n top: 0,\n left: 0,\n width: '100%',\n position: 'absolute',\n padding: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n '&:hover': {\n background: theme.colors.action.hover,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n },\n }),\n optionFocused: css({\n label: 'grafana-select-option-focused',\n background: theme.colors.action.focus,\n '@media (forced-colors: active), (prefers-contrast: more)': {\n border: `1px solid ${theme.colors.primary.border}`,\n },\n }),\n optionBody: css({\n label: 'grafana-select-option-body',\n display: 'flex',\n fontWeight: theme.typography.fontWeightMedium,\n flexDirection: 'column',\n flexGrow: 1,\n }),\n groupBottomBorder: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n checkbox: css({\n paddingRight: theme.spacing(0.5),\n }),\n multiValueApplyWrapper: css({\n position: 'fixed',\n top: 0,\n left: 0,\n display: 'flex',\n backgroundColor: theme.colors.background.primary,\n color: theme.colors.text.primary,\n boxShadow: theme.shadows.z2,\n overflowY: 'auto',\n zIndex: theme.zIndex.dropdown,\n gap: theme.spacing(1.5),\n padding: `${theme.spacing(1.5)} ${theme.spacing(1)}`,\n }),\n});\n\nexport const LoadingOptionsPlaceholder = () => {\n return <DropdownItem onClick={(e) => e.stopPropagation()}>Loading options...</DropdownItem>;\n};\n\nexport const NoOptionsPlaceholder = () => {\n return <DropdownItem onClick={(e) => e.stopPropagation()}>No options found</DropdownItem>;\n};\n\nexport const OptionsErrorPlaceholder = ({ handleFetchOptions }: { handleFetchOptions: () => void }) => {\n return (\n <DropdownItem onClick={handleFetchOptions}>An error has occurred fetching labels. Click to retry</DropdownItem>\n );\n};\n\ninterface MultiValueApplyButtonProps {\n onApply: () => void;\n floatingElement: HTMLElement | null;\n maxOptionWidth: number;\n}\n\nexport const MultiValueApplyButton = ({ onApply, floatingElement, maxOptionWidth }: MultiValueApplyButtonProps) => {\n const styles = useStyles2(getStyles);\n\n const floatingElementRect = floatingElement?.getBoundingClientRect();\n return (\n <div\n className={styles.multiValueApplyWrapper}\n style={{\n width: `${maxOptionWidth}px`,\n transform: `translate(${floatingElementRect?.left}px,${floatingElementRect?.bottom}px)`,\n }}\n >\n <Button onClick={onApply} size=\"sm\" tabIndex={-1}>\n Apply\n </Button>\n </div>\n );\n};\n"],"names":["DropdownItem"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingInteractions.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/useFloatingInteractions.ts"],"sourcesContent":["import {\n useFloating,\n autoUpdate,\n offset,\n useRole,\n useDismiss,\n useListNavigation,\n UseFloatingOptions,\n flip,\n size,\n UseListNavigationProps,\n useInteractions,\n} from '@floating-ui/react';\n\ntype useFloatingInteractionsProps = {\n open: UseFloatingOptions['open'];\n onOpenChange: UseFloatingOptions['onOpenChange'];\n activeIndex: UseListNavigationProps['activeIndex'];\n setActiveIndex: UseListNavigationProps['onNavigate'];\n outsidePressIdsToIgnore: string[];\n listRef: React.MutableRefObject<Array<HTMLElement | null>>;\n disabledIndicesRef: React.MutableRefObject<number[]>;\n};\n\nconst MAX_MENU_HEIGHT = 300;\n\nexport const useFloatingInteractions = ({\n open,\n onOpenChange,\n activeIndex,\n setActiveIndex,\n outsidePressIdsToIgnore,\n listRef,\n disabledIndicesRef,\n}: useFloatingInteractionsProps) => {\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, availableWidth, elements }) {\n // limit maxHeight and maxWidth of dropdown\n elements.floating.style.maxHeight = `${Math.min(MAX_MENU_HEIGHT, availableHeight)}px`;\n elements.floating.style.maxWidth = `${availableWidth}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 if (event.currentTarget instanceof Element) {\n const target = event.currentTarget;\n let idToCompare = target.id;\n if (target.nodeName === 'path') {\n idToCompare = target.parentElement?.id || '';\n }\n\n if (outsidePressIdsToIgnore.includes(idToCompare)) {\n return false;\n }\n }\n return true;\n },\n });\n const listNav = useListNavigation(context, {\n listRef,\n activeIndex,\n onNavigate: setActiveIndex,\n virtual: true,\n loop: true,\n disabledIndices: disabledIndicesRef.current,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);\n\n return {\n refs,\n floatingStyles,\n context,\n getReferenceProps,\n getFloatingProps,\n getItemProps,\n };\n};\n"],"names":[],"mappings":";;AAwBA,MAAM,eAAkB,GAAA,GAAA,CAAA;AAEjB,MAAM,0BAA0B,CAAC;AAAA,EACtC,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,uBAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,EAAE,IAAA,EAAM,cAAgB,EAAA,OAAA,KAAY,WAA8B,CAAA;AAAA,IACtE,oBAAsB,EAAA,UAAA;AAAA,IACtB,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAW,EAAA,cAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,CAAA,EAAE,OAAS,EAAA,EAAA,EAAI,CAAA;AAAA,MACpB,IAAK,CAAA;AAAA,QACH,KAAM,CAAA,EAAE,eAAiB,EAAA,cAAA,EAAgB,UAAY,EAAA;AAEnD,UAAA,QAAA,CAAS,SAAS,KAAM,CAAA,SAAA,GAAY,GAAG,IAAK,CAAA,GAAA,CAAI,iBAAiB,eAAe,CAAA,CAAA,EAAA,CAAA,CAAA;AAChF,UAAS,QAAA,CAAA,QAAA,CAAS,KAAM,CAAA,QAAA,GAAW,CAAG,EAAA,cAAA,CAAA,EAAA,CAAA,CAAA;AAAA,SACxC;AAAA,QACA,OAAS,EAAA,EAAA;AAAA,OACV,CAAA;AAAA,KACH;AAAA,
|
|
1
|
+
{"version":3,"file":"useFloatingInteractions.js","sources":["../../../../../src/variables/adhoc/AdHocFiltersCombobox/useFloatingInteractions.ts"],"sourcesContent":["import {\n useFloating,\n autoUpdate,\n offset,\n useRole,\n useDismiss,\n useListNavigation,\n UseFloatingOptions,\n flip,\n size,\n UseListNavigationProps,\n useInteractions,\n} from '@floating-ui/react';\n\ntype useFloatingInteractionsProps = {\n open: UseFloatingOptions['open'];\n onOpenChange: UseFloatingOptions['onOpenChange'];\n activeIndex: UseListNavigationProps['activeIndex'];\n setActiveIndex: UseListNavigationProps['onNavigate'];\n outsidePressIdsToIgnore: string[];\n listRef: React.MutableRefObject<Array<HTMLElement | null>>;\n disabledIndicesRef: React.MutableRefObject<number[]>;\n};\n\nconst MAX_MENU_HEIGHT = 300;\n\nexport const useFloatingInteractions = ({\n open,\n onOpenChange,\n activeIndex,\n setActiveIndex,\n outsidePressIdsToIgnore,\n listRef,\n disabledIndicesRef,\n}: useFloatingInteractionsProps) => {\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, availableWidth, elements }) {\n // limit maxHeight and maxWidth of dropdown\n elements.floating.style.maxHeight = `${Math.min(MAX_MENU_HEIGHT, availableHeight)}px`;\n elements.floating.style.maxWidth = `${availableWidth}px`;\n },\n padding: 10,\n }),\n ],\n strategy: 'fixed',\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 if (event.currentTarget instanceof Element) {\n const target = event.currentTarget;\n let idToCompare = target.id;\n if (target.nodeName === 'path') {\n idToCompare = target.parentElement?.id || '';\n }\n\n if (outsidePressIdsToIgnore.includes(idToCompare)) {\n return false;\n }\n }\n return true;\n },\n });\n const listNav = useListNavigation(context, {\n listRef,\n activeIndex,\n onNavigate: setActiveIndex,\n virtual: true,\n loop: true,\n disabledIndices: disabledIndicesRef.current,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);\n\n return {\n refs,\n floatingStyles,\n context,\n getReferenceProps,\n getFloatingProps,\n getItemProps,\n };\n};\n"],"names":[],"mappings":";;AAwBA,MAAM,eAAkB,GAAA,GAAA,CAAA;AAEjB,MAAM,0BAA0B,CAAC;AAAA,EACtC,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,uBAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,EAAE,IAAA,EAAM,cAAgB,EAAA,OAAA,KAAY,WAA8B,CAAA;AAAA,IACtE,oBAAsB,EAAA,UAAA;AAAA,IACtB,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAW,EAAA,cAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,EAAE,CAAA;AAAA,MACT,IAAK,CAAA,EAAE,OAAS,EAAA,EAAA,EAAI,CAAA;AAAA,MACpB,IAAK,CAAA;AAAA,QACH,KAAM,CAAA,EAAE,eAAiB,EAAA,cAAA,EAAgB,UAAY,EAAA;AAEnD,UAAA,QAAA,CAAS,SAAS,KAAM,CAAA,SAAA,GAAY,GAAG,IAAK,CAAA,GAAA,CAAI,iBAAiB,eAAe,CAAA,CAAA,EAAA,CAAA,CAAA;AAChF,UAAS,QAAA,CAAA,QAAA,CAAS,KAAM,CAAA,QAAA,GAAW,CAAG,EAAA,cAAA,CAAA,EAAA,CAAA,CAAA;AAAA,SACxC;AAAA,QACA,OAAS,EAAA,EAAA;AAAA,OACV,CAAA;AAAA,KACH;AAAA,IACA,QAAU,EAAA,OAAA;AAAA,GACX,CAAA,CAAA;AAED,EAAA,MAAM,OAAO,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA,CAAA;AACjD,EAAM,MAAA,OAAA,GAAU,WAAW,OAAS,EAAA;AAAA,IAElC,YAAA,EAAc,CAAC,KAAU,KAAA;AA1D7B,MAAA,IAAA,EAAA,CAAA;AA2DM,MAAI,IAAA,KAAA,CAAM,yBAAyB,OAAS,EAAA;AAC1C,QAAA,MAAM,SAAS,KAAM,CAAA,aAAA,CAAA;AACrB,QAAA,IAAI,cAAc,MAAO,CAAA,EAAA,CAAA;AACzB,QAAI,IAAA,MAAA,CAAO,aAAa,MAAQ,EAAA;AAC9B,UAAc,WAAA,GAAA,CAAA,CAAA,EAAA,GAAA,MAAA,CAAO,aAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,EAAM,KAAA,EAAA,CAAA;AAAA,SAC5C;AAEA,QAAI,IAAA,uBAAA,CAAwB,QAAS,CAAA,WAAW,CAAG,EAAA;AACjD,UAAO,OAAA,KAAA,CAAA;AAAA,SACT;AAAA,OACF;AACA,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACD,CAAA,CAAA;AACD,EAAM,MAAA,OAAA,GAAU,kBAAkB,OAAS,EAAA;AAAA,IACzC,OAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,IAAA;AAAA,IACT,IAAM,EAAA,IAAA;AAAA,IACN,iBAAiB,kBAAmB,CAAA,OAAA;AAAA,GACrC,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,iBAAmB,EAAA,gBAAA,EAAkB,YAAa,EAAA,GAAI,gBAAgB,CAAC,IAAA,EAAM,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAEtG,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -3699,7 +3699,7 @@ const getStyles$c = (theme) => ({
|
|
|
3699
3699
|
paddingRight: theme.spacing(0.5)
|
|
3700
3700
|
}),
|
|
3701
3701
|
multiValueApplyWrapper: css.css({
|
|
3702
|
-
position: "
|
|
3702
|
+
position: "fixed",
|
|
3703
3703
|
top: 0,
|
|
3704
3704
|
left: 0,
|
|
3705
3705
|
display: "flex",
|
|
@@ -3896,7 +3896,8 @@ const useFloatingInteractions = ({
|
|
|
3896
3896
|
},
|
|
3897
3897
|
padding: 10
|
|
3898
3898
|
})
|
|
3899
|
-
]
|
|
3899
|
+
],
|
|
3900
|
+
strategy: "fixed"
|
|
3900
3901
|
});
|
|
3901
3902
|
const role = react.useRole(context, { role: "listbox" });
|
|
3902
3903
|
const dismiss = react.useDismiss(context, {
|