@grafana/ui/dist/cjs/index.cjs.map

Grafana Components Library

{"version":3,"file":"index.cjs","sources":["../../src/themes/stylesFactory.ts","../../src/themes/ThemeContext.tsx","../../src/utils/keyframes.ts","../../src/components/Icon/utils.ts","../../src/components/Icon/Icon.tsx","../../src/utils/floating.ts","../../src/utils/tooltipUtils.ts","../../src/components/Portal/Portal.tsx","../../src/components/Tooltip/Tooltip.tsx","../../src/components/FormLabel/FormLabel.tsx","../../src/components/FormField/FormField.tsx","../../src/utils/validate.ts","../../src/components/Forms/Legacy/Input/Input.tsx","../../src/components/Forms/Legacy/Select/IndicatorsContainer.tsx","../../src/components/Forms/Legacy/Select/NoOptionsMessage.tsx","../../src/components/Layout/utils/responsiveness.tsx","../../src/components/Layout/utils/styles.ts","../../src/components/Layout/Box/Box.tsx","../../src/components/ScrollContainer/ScrollIndicators.tsx","../../src/components/ScrollContainer/ScrollContainer.tsx","../../src/utils/useDelayedSwitch.ts","../../src/types/icon.ts","../../src/components/Spinner/Spinner.tsx","../../src/components/transitions/FadeTransition.tsx","../../src/components/transitions/SlideOutTransition.tsx","../../src/components/Select/SingleValue.tsx","../../src/components/Select/resetSelectStyles.ts","../../src/components/Forms/Legacy/Select/SelectOption.tsx","../../src/components/Forms/Legacy/Select/SelectOptionGroup.tsx","../../src/components/Forms/Legacy/Select/Select.tsx","../../src/components/Forms/Legacy/Switch/Switch.tsx","../../src/themes/mixins.ts","../../src/components/Forms/commonStyles.ts","../../src/components/Button/Button.tsx","../../src/components/SecretFormField/SecretFormField.tsx","../../src/utils/reactUtils.ts","../../src/components/Forms/FieldValidationMessage.tsx","../../src/components/Forms/Label.tsx","../../src/components/Forms/Field.tsx","../../src/components/Forms/RadioButtonGroup/RadioButton.tsx","../../src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx","../../src/components/Input/AutoSizeInputContext.ts","../../src/components/Input/Input.tsx","../../src/components/Layout/Stack/Stack.tsx","../../src/components/Select/CustomInput.tsx","../../src/components/Select/DropdownIndicator.tsx","../../src/components/Select/IndicatorsContainer.tsx","../../src/components/Select/InputControl.tsx","../../src/components/IconButton/IconButton.tsx","../../src/components/Select/getSelectStyles.ts","../../src/components/Select/MultiValue.tsx","../../src/components/Select/SelectContainer.tsx","../../src/components/Select/types.ts","../../src/components/Select/SelectMenu.tsx","../../src/components/Select/SelectOptionGroup.tsx","../../src/components/Text/TruncatedText.tsx","../../src/components/Text/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Select/SelectOptionGroupHeader.tsx","../../src/components/Select/ValueContainer.tsx","../../src/components/Select/utils.ts","../../src/components/Select/SelectBase.tsx","../../src/components/Select/Select.tsx","../../src/components/uPlot/config.ts","../../src/options/builder/axis.tsx","../../src/components/FilterPill/FilterPill.tsx","../../src/options/builder/hideSeries.tsx","../../src/options/builder/legend.tsx","../../src/options/builder/tooltip.tsx","../../src/options/builder/text.tsx","../../src/options/builder/stacking.tsx","../../src/utils/dom.ts","../../src/components/ConfirmButton/ConfirmButton.tsx","../../src/components/ConfirmButton/DeleteButton.tsx","../../src/components/Tooltip/PopoverController.tsx","../../src/components/Tooltip/Popover.tsx","../../src/components/Toggletip/Toggletip.tsx","../../src/components/CustomScrollbar/ScrollIndicators.tsx","../../src/components/CustomScrollbar/CustomScrollbar.tsx","../../src/components/Tabs/Counter.tsx","../../src/components/Tabs/Tab.tsx","../../src/components/Tabs/TabContent.tsx","../../src/components/Tabs/TabsBar.tsx","../../src/components/TabbedContainer/TabbedContainer.tsx","../../src/components/InlineToast/InlineToast.tsx","../../src/components/ClipboardButton/ClipboardButton.tsx","../../src/components/Cascader/optionMappings.ts","../../src/components/Cascader/styles.ts","../../src/components/Cascader/Cascader.tsx","../../src/components/Alert/Alert.tsx","../../src/components/Carousel/Carousel.tsx","../../src/components/ButtonCascader/ButtonCascader.tsx","../../src/components/LoadingPlaceholder/LoadingPlaceholder.tsx","../../src/components/LoadingBar/LoadingBar.tsx","../../src/utils/closePopover.ts","../../src/components/ColorPicker/ColorSwatch.tsx","../../src/components/ColorPicker/NamedColorsGroup.tsx","../../src/components/ColorPicker/NamedColorsPalette.tsx","../../src/components/ColorPicker/ColorInput.tsx","../../src/components/ColorPicker/SpectrumPalette.tsx","../../src/components/ColorPicker/ColorPickerPopover.tsx","../../src/components/Forms/InlineLabel.tsx","../../src/components/Forms/InlineField.tsx","../../src/components/Switch/Switch.tsx","../../src/components/ColorPicker/SeriesColorPickerPopover.tsx","../../src/components/ColorPicker/ColorPicker.tsx","../../src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx","../../src/components/ColorPicker/ColorPickerInput.tsx","../../src/components/EmptySearchResult/EmptySearchResult.tsx","../../src/components/EmptyState/GrotCTA/GrotCTA.tsx","../../src/components/EmptyState/GrotNotFound/GrotNotFound.tsx","../../src/components/EmptyState/EmptyState.tsx","../../src/components/UnitPicker/UnitPicker.tsx","../../src/components/StatsPicker/StatsPicker.tsx","../../src/components/Button/ButtonGroup.tsx","../../src/components/Menu/MenuDivider.tsx","../../src/components/Menu/MenuGroup.tsx","../../src/components/Menu/hooks.ts","../../src/components/Menu/utils.ts","../../src/components/Menu/SubMenu.tsx","../../src/components/Menu/MenuItem.tsx","../../src/components/Menu/Menu.tsx","../../src/components/ToolbarButton/ToolbarButton.tsx","../../src/components/Dropdown/Dropdown.tsx","../../src/components/Dropdown/ButtonSelect.tsx","../../src/components/RefreshPicker/RefreshPicker.tsx","../../src/components/Modal/getModalStyles.ts","../../src/utils/useCombinedRefs.ts","../../src/components/FilterInput/FilterInput.tsx","../../src/components/Link/Link.tsx","../../src/components/Link/TextLink.tsx","../../src/utils/measureText.ts","../../src/components/Input/AutoSizeInput.tsx","../../src/components/Forms/Checkbox.tsx","../../src/components/Combobox/MessageRows.tsx","../../src/components/Combobox/getComboboxStyles.ts","../../src/components/Combobox/types.ts","../../src/components/Combobox/utils.ts","../../src/components/Combobox/ComboboxList.tsx","../../src/components/Combobox/SuffixIcon.tsx","../../src/components/Combobox/filter.ts","../../src/components/Combobox/useComboboxFloat.ts","../../src/components/Combobox/useLatestAsyncCall.ts","../../src/components/Combobox/useOptions.ts","../../src/components/Combobox/Combobox.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx","../../src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx","../../src/components/DateTimePickers/TimeZonePicker.tsx","../../src/components/DateTimePickers/options.ts","../../src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx","../../src/utils/featureToggle.ts","../../src/components/DateTimePickers/commonFormat.ts","../../src/components/DateTimePickers/utils.ts","../../src/components/DateTimePickers/WeekStartPicker.tsx","../../src/components/DateTimePickers/utils/adjustDateForReactCalendar.ts","../../src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx","../../src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx","../../src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeOption.tsx","../../src/components/DateTimePickers/TimeRangePicker/hooks.ts","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx","../../src/components/DateTimePickers/TimeRangePicker/mapper.ts","../../src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx","../../src/components/DateTimePickers/TimeRangeContext.tsx","../../src/components/DateTimePickers/TimeSyncButton.tsx","../../src/components/DateTimePickers/utils/useTimeSync.tsx","../../src/components/DateTimePickers/TimeRangePicker.tsx","../../src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx","../../src/components/DateTimePickers/TimeOfDayPicker.tsx","../../src/components/DateTimePickers/DatePicker/DatePicker.tsx","../../src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx","../../src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx","../../src/components/List/AbstractList.tsx","../../src/components/List/List.tsx","../../src/components/Pagination/Pagination.tsx","../../src/components/InteractiveTable/Expander/index.tsx","../../src/components/InteractiveTable/utils.ts","../../src/components/InteractiveTable/InteractiveTable.tsx","../../src/utils/tags.ts","../../src/components/TagsInput/TagItem.tsx","../../src/components/TagsInput/TagsInput.tsx","../../src/components/AutoSaveField/EllipsisAnimated.tsx","../../src/components/AutoSaveField/AutoSaveField.tsx","../../src/utils/skeleton.tsx","../../src/components/Tags/Tag.tsx","../../src/components/Tags/TagList.tsx","../../src/components/Modal/ModalHeader.tsx","../../src/components/Modal/Modal.tsx","../../src/components/ConfirmModal/ConfirmContent.tsx","../../src/components/ConfirmModal/ConfirmModal.tsx","../../src/slate-plugins/clear.ts","../../src/slate-plugins/clipboard.ts","../../src/slate-plugins/indentation.ts","../../src/slate-plugins/newline.ts","../../src/slate-plugins/runner.ts","../../src/slate-plugins/selection_shortcuts.ts","../../src/types/completion.ts","../../src/utils/typeahead.ts","../../src/components/Typeahead/TypeaheadInfo.tsx","../../src/components/Typeahead/PartialHighlighter.tsx","../../src/components/Typeahead/TypeaheadItem.tsx","../../src/components/Typeahead/Typeahead.tsx","../../src/utils/fuzzy.ts","../../src/utils/searchFunctions.ts","../../src/utils/slate.ts","../../src/slate-plugins/slate-prism/TOKEN_MARK.ts","../../src/slate-plugins/suggestions.tsx","../../src/components/QueryField/QueryField.tsx","../../src/utils/useAsyncDependency.ts","../../src/components/ErrorBoundary/ErrorWithStack.tsx","../../src/components/Monaco/ReactMonacoEditorLazy.tsx","../../src/components/Monaco/types.ts","../../src/components/Monaco/suggestions.ts","../../src/components/Monaco/CodeEditor.tsx","../../src/components/Monaco/utils.ts","../../src/components/Modal/ModalTabsHeader.tsx","../../src/components/Modal/ModalTabContent.tsx","../../src/components/Modal/ModalsContext.tsx","../../src/components/ToolbarButton/ToolbarButtonRow.tsx","../../src/components/PageLayout/PageToolbar.tsx","../../src/components/SetInterval/SetInterval.tsx","../../src/components/DragHandle/DragHandle.tsx","../../src/components/Drawer/Drawer.tsx","../../src/components/Table/TableCellInspector.tsx","../../src/components/Table/hooks.ts","../../src/components/Table/reducer.ts","../../src/utils/colors.ts","../../src/components/Forms/Legend.tsx","../../src/components/Forms/FieldSet.tsx","../../src/components/Actions/VariablesInputModal.tsx","../../src/components/Actions/ActionButton.tsx","../../src/components/Table/ActionsCell.tsx","../../src/components/FormattedValueDisplay/FormattedValueDisplay.tsx","../../src/components/BarGauge/BarGauge.tsx","../../src/components/DataLinks/DataLinkButton.tsx","../../src/components/VizTooltip/VizTooltipFooter.tsx","../../src/components/VizTooltip/VizTooltipWrapper.tsx","../../src/components/Table/DataLinksActionsTooltip.tsx","../../src/components/Table/Cells/BarGaugeCell.tsx","../../src/utils/table.ts","../../src/components/Table/Cells/DataLinksCell.tsx","../../src/components/Table/types.ts","../../src/components/Table/CellActions.tsx","../../src/components/Table/Cells/DefaultCell.tsx","../../src/components/Table/Cells/GeoCell.tsx","../../src/components/Table/Cells/ImageCell.tsx","../../src/components/Table/Cells/JSONViewCell.tsx","../../src/utils/debug.ts","../../src/utils/logger.ts","../../src/components/uPlot/types.ts","../../src/components/uPlot/internal.ts","../../src/components/uPlot/utils.ts","../../src/components/uPlot/Plot.tsx","../../src/components/uPlot/config/UPlotScaleBuilder.ts","../../src/components/uPlot/config/UPlotAxisBuilder.ts","../../src/components/uPlot/config/gradientFills.ts","../../src/components/uPlot/config/UPlotSeriesBuilder.ts","../../src/components/uPlot/config/UPlotThresholds.ts","../../src/components/uPlot/config/UPlotConfigBuilder.ts","../../src/components/Sparkline/utils.ts","../../src/components/Sparkline/Sparkline.tsx","../../src/components/Table/Cells/SparklineCell.tsx","../../src/components/Table/Cells/FooterCell.tsx","../../src/components/Table/TableRT/FooterRow.tsx","../../src/components/Table/TableRT/RowExpander.tsx","../../src/components/Table/utils.ts","../../src/components/Table/TableRT/FilterList.tsx","../../src/components/Table/TableRT/FilterPopup.tsx","../../src/components/Table/TableRT/Filter.tsx","../../src/components/Table/TableRT/HeaderRow.tsx","../../src/components/PanelChrome/LoadingIndicator.tsx","../../src/utils/DelayRender.tsx","../../src/utils/usePointerDistance.ts","../../src/components/ElementSelectionContext/ElementSelectionContext.tsx","../../src/components/PanelChrome/PanelMenu.tsx","../../src/components/PanelChrome/HoverWidget.tsx","../../src/components/PanelChrome/TitleItem.tsx","../../src/components/PanelChrome/PanelDescription.tsx","../../src/components/PanelChrome/PanelStatus.tsx","../../src/components/PanelChrome/PanelChrome.tsx","../../src/components/PanelChrome/PanelContext.ts","../../src/components/PanelChrome/types.ts","../../src/components/PanelChrome/index.ts","../../src/components/Table/Cells/TableCell.tsx","../../src/components/Table/TableRT/ExpandedRow.tsx","../../src/components/Table/TableRT/RowsList.tsx","../../src/components/Table/TableRT/styles.ts","../../src/components/Table/TableRT/Table.tsx","../../src/components/TextArea/TextArea.tsx","../../src/components/TableInputCSV/TableInputCSV.tsx","../../src/components/Tabs/VerticalTab.tsx","../../src/components/RenderUserContentAsHTML/RenderUserContentAsHTML.tsx","../../src/components/BigValue/PercentChange.tsx","../../src/components/BigValue/BigValueLayout.tsx","../../src/components/BigValue/BigValue.tsx","../../src/components/Gauge/utils.ts","../../src/components/Gauge/Gauge.tsx","../../src/components/VizTooltip/types.ts","../../src/components/VizTooltip/utils.ts","../../src/components/VizTooltip/VizTooltipContainer.tsx","../../src/components/VizTooltip/VizTooltip.tsx","../../src/components/VizLegend/SeriesIcon.tsx","../../src/components/VizTooltip/SeriesTable.tsx","../../src/utils/squares.ts","../../src/components/VizRepeater/VizRepeater.tsx","../../src/components/VizLayout/VizLayout.tsx","../../src/components/VizLegend/types.ts","../../src/components/List/InlineList.tsx","../../src/components/VizLegend/VizLegendSeriesIcon.tsx","../../src/components/VizLegend/VizLegendStatsList.tsx","../../src/components/VizLegend/VizLegendListItem.tsx","../../src/components/VizLegend/VizLegendList.tsx","../../src/components/VizLegend/VizLegendTableItem.tsx","../../src/components/VizLegend/VizLegendTable.tsx","../../src/components/VizLegend/utils.ts","../../src/components/VizLegend/VizLegend.tsx","../../src/components/Collapse/Collapse.tsx","../../src/components/Collapse/CollapsableSection.tsx","../../src/components/DataLinks/FieldLinkList.tsx","../../src/components/Button/FullWidthButtonContainer.tsx","../../src/components/SingleStatShared/SingleStatBaseOptions.ts","../../src/components/CallToActionCard/CallToActionCard.tsx","../../src/components/ContextMenu/ContextMenu.tsx","../../src/components/ContextMenu/WithContextMenu.tsx","../../src/slate-plugins/slate-prism/options.tsx","../../src/slate-plugins/slate-prism/index.ts","../../src/components/DataLinks/DataLinkSuggestions.tsx","../../src/components/DataLinks/SelectionReference.ts","../../src/components/DataLinks/DataLinkInput.tsx","../../src/components/DataLinks/DataLinkEditor.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx","../../src/components/Badge/Badge.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx","../../src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx","../../src/utils/dataLinks.ts","../../src/components/DataLinks/DataLinksContextMenu.tsx","../../src/components/InfoBox/InfoBox.tsx","../../src/components/FeatureBadge/FeatureBadge.tsx","../../src/components/InfoBox/FeatureInfoBox.tsx","../../src/components/JSONFormatter/json_explorer/helpers.ts","../../src/components/JSONFormatter/json_explorer/json_explorer.ts","../../src/components/JSONFormatter/JSONFormatter.tsx","../../src/components/ErrorBoundary/ErrorBoundary.tsx","../../src/components/DataSourceSettings/BasicAuthSettings.tsx","../../src/components/DataSourceSettings/CustomHeadersSettings.tsx","../../src/components/DataSourceSettings/HttpProxySettings.tsx","../../src/components/DataSourceSettings/SecureSocksProxySettings.tsx","../../src/components/Forms/InlineFieldRow.tsx","../../src/components/DataSourceSettings/CertificationKey.tsx","../../src/components/DataSourceSettings/TLSAuthSettings.tsx","../../src/components/DataSourceSettings/DataSourceHttpSettings.tsx","../../src/components/DataSourceSettings/AlertingSettings.tsx","../../src/components/Segment/SegmentSelect.tsx","../../src/components/Segment/styles.ts","../../src/components/Segment/useExpandableLabel.tsx","../../src/components/Segment/Segment.tsx","../../src/components/Segment/SegmentAsync.tsx","../../src/components/Segment/SegmentInput.tsx","../../src/components/Segment/SegmentSection.tsx","../../src/components/Slider/styles.ts","../../src/components/Slider/Slider.tsx","../../src/components/Slider/HandleTooltip.tsx","../../src/components/Slider/RangeSlider.tsx","../../src/components/Forms/Form.tsx","../../src/components/InputControl.tsx","../../src/components/ValuePicker/ValuePicker.tsx","../../src/components/MatchersUI/FieldNameByRegexMatcherEditor.tsx","../../src/components/MatchersUI/utils.ts","../../src/components/MatchersUI/FieldNameMatcherEditor.tsx","../../src/components/MatchersUI/FieldNamesMatcherEditor.tsx","../../src/components/MatchersUI/FieldTypeMatcherEditor.tsx","../../src/components/MatchersUI/FieldValueMatcher.tsx","../../src/components/MatchersUI/FieldsByFrameRefIdMatcher.tsx","../../src/components/MatchersUI/fieldMatchersUI.ts","../../src/components/Layout/Grid/Grid.tsx","../../src/components/Layout/Space.tsx","../../src/components/Forms/InlineSegmentGroup.tsx","../../src/components/Forms/FieldArray.tsx","../../src/components/Combobox/ValuePill.tsx","../../src/components/Combobox/getMultiComboboxStyles.ts","../../src/components/Combobox/useMeasureMulti.ts","../../src/components/Combobox/useMultiInputAutoSize.tsx","../../src/components/Combobox/MultiCombobox.tsx","../../src/components/Layout/Layout.tsx","../../src/components/Forms/RadioButtonList/RadioButtonDot.tsx","../../src/components/Forms/RadioButtonList/RadioButtonList.tsx","../../src/components/SecretInput/SecretInput.tsx","../../src/components/SecretTextArea/SecretTextArea.tsx","../../src/utils/file.ts","../../src/components/FileUpload/FileUpload.tsx","../../src/components/FileDropzone/FileListItem.tsx","../../src/components/FileDropzone/FileDropzone.tsx","../../src/components/DateTimePickers/TimeRangeInput.tsx","../../src/components/DateTimePickers/RelativeTimeRangePicker/utils.ts","../../src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx","../../src/components/Card/CardContainer.tsx","../../src/components/Card/Card.tsx","../../src/components/PluginSignatureBadge/PluginSignatureBadge.tsx","../../src/components/UsersIndicator/UserIcon.tsx","../../src/components/UsersIndicator/UsersIndicator.tsx","../../src/components/UsersIndicator/Avatar.tsx","../../src/components/Divider/Divider.tsx","../../src/components/Splitter/useSplitter.ts","../../src/components/uPlot/PlotLegend.tsx","../../src/components/uPlot/geometries/XYCanvas.tsx","../../src/components/uPlot/geometries/Marker.tsx","../../src/components/uPlot/geometries/EventsCanvas.tsx","../../src/components/uPlot/plugins/CloseButton.tsx","../../src/components/uPlot/plugins/TooltipPlugin2.tsx","../../src/components/uPlot/plugins/EventBusPlugin.tsx","../../src/components/uPlot/plugins/KeyboardPlugin.tsx","../../src/components/BrowserLabel/Label.tsx","../../src/components/PanelContainer/PanelContainer.tsx","../../src/graveyard/Graph/GraphContextMenu.tsx","../../src/graveyard/Graph/utils.ts","../../src/graveyard/Graph/GraphTooltip/MultiModeGraphTooltip.tsx","../../src/graveyard/Graph/GraphTooltip/SingleModeGraphTooltip.tsx","../../src/graveyard/Graph/GraphTooltip/GraphTooltip.tsx","../../src/graveyard/Graph/Graph.tsx","../../src/graveyard/Graph/GraphWithLegend.tsx","../../src/graveyard/Graph/GraphSeriesToggler.tsx","../../src/graveyard/GraphNG/nullInsertThreshold.ts","../../src/graveyard/GraphNG/nullToUndefThreshold.ts","../../src/graveyard/GraphNG/utils.ts","../../src/graveyard/GraphNG/GraphNG.tsx","../../src/graveyard/TimeSeries/utils.ts","../../src/graveyard/TimeSeries/TimeSeries.tsx","../../src/graveyard/GraphNG/hooks.ts","../../src/graveyard/uPlot/plugins/ZoomPlugin.tsx","../../src/graveyard/uPlot/plugins/TooltipPlugin.tsx","../../src/utils/scrollbar.ts","../../src/utils/useForceUpdate.ts","../../src/utils/nodeGraph.ts","../../src/utils/logOptions.ts","../../src/themes/getTheme.ts","../../src/themes/GlobalStyles/accessibility.ts","../../src/themes/GlobalStyles/alerting.ts","../../src/themes/GlobalStyles/card.ts","../../src/themes/GlobalStyles/code.ts","../../src/themes/GlobalStyles/dashboardGrid.ts","../../src/themes/GlobalStyles/dashdiff.ts","../../src/themes/GlobalStyles/elements.ts","../../src/themes/GlobalStyles/extra.ts","../../src/themes/GlobalStyles/filterTable.ts","../../src/themes/GlobalStyles/fonts.ts","../../src/themes/GlobalStyles/forms.ts","../../src/themes/GlobalStyles/hacks.ts","../../src/themes/GlobalStyles/jsonFormatter.ts","../../src/themes/GlobalStyles/legacySelect.ts","../../src/themes/GlobalStyles/markdownStyles.ts","../../src/themes/GlobalStyles/page.ts","../../src/themes/GlobalStyles/queryEditor.ts","../../src/themes/GlobalStyles/skeletonStyles.ts","../../src/themes/GlobalStyles/slate.ts","../../src/themes/GlobalStyles/uPlot.ts","../../src/themes/GlobalStyles/utilityClasses.ts","../../src/themes/GlobalStyles/GlobalStyles.tsx","../../src/slate-plugins/braces.ts","../../src/index.ts"],"sourcesContent":["import memoize from 'micro-memoize';\n\n/**\n * @public\n * @deprecated use useStyles hook\n *  Creates memoized version of styles creator\n * @param stylesCreator function accepting dependencies based on which styles are created\n */\nexport function stylesFactory<ResultFn extends (...newArgs: any[]) => ReturnType<ResultFn>>(stylesCreator: ResultFn) {\n  return memoize(stylesCreator);\n}\n","import hoistNonReactStatics from 'hoist-non-react-statics';\nimport memoize from 'micro-memoize';\nimport { useContext } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme, GrafanaTheme2, ThemeContext } from '@grafana/data';\n\nimport { Themeable, Themeable2 } from '../types/theme';\n\nimport { stylesFactory } from './stylesFactory';\n\ntype Omit<T, K> = Pick<T, Exclude<keyof T, K>>;\ntype Subtract<T, K> = Omit<T, keyof K>;\n\n/**\n * Mock used in tests\n */\nlet ThemeContextMock: React.Context<GrafanaTheme2> | null = null;\n\n// Used by useStyles()\nexport const memoizedStyleCreators = new WeakMap();\n\n/** @deprecated use withTheme2 */\n/** @public */\nexport const withTheme = <P extends Themeable, S extends {} = {}>(Component: React.ComponentType<P>) => {\n  const WithTheme: React.FunctionComponent<Subtract<P, Themeable>> = (props) => {\n    /**\n     * If theme context is mocked, let's use it instead of the original context\n     * This is used in tests when mocking theme using mockThemeContext function defined below\n     */\n    const ContextComponent = ThemeContextMock || ThemeContext;\n    return (\n      // @ts-ignore\n      <ContextComponent.Consumer>{(theme) => <Component {...props} theme={theme.v1} />}</ContextComponent.Consumer>\n    );\n  };\n\n  WithTheme.displayName = `WithTheme(${Component.displayName})`;\n  hoistNonReactStatics(WithTheme, Component);\n  type Hoisted = typeof WithTheme & S;\n  return WithTheme as Hoisted;\n};\n\n/** @alpha */\nexport const withTheme2 = <P extends Themeable2, S extends {} = {}>(Component: React.ComponentType<P>) => {\n  const WithTheme: React.FunctionComponent<Subtract<P, Themeable2>> = (props) => {\n    /**\n     * If theme context is mocked, let's use it instead of the original context\n     * This is used in tests when mocking theme using mockThemeContext function defined below\n     */\n    const ContextComponent = ThemeContextMock || ThemeContext;\n    return (\n      // @ts-ignore\n      <ContextComponent.Consumer>{(theme) => <Component {...props} theme={theme} />}</ContextComponent.Consumer>\n    );\n  };\n\n  WithTheme.displayName = `WithTheme(${Component.displayName})`;\n  hoistNonReactStatics(WithTheme, Component);\n  type Hoisted = typeof WithTheme & S;\n  return WithTheme as Hoisted;\n};\n\n/** @deprecated use useTheme2 */\n/** @public */\nexport function useTheme(): GrafanaTheme {\n  return useContext(ThemeContextMock || ThemeContext).v1;\n}\n\n/** @public */\nexport function useTheme2(): GrafanaTheme2 {\n  return useContext(ThemeContextMock || ThemeContext);\n}\n\n/**\n * Hook for using memoized styles with access to the theme.\n *\n * NOTE: For memoization to work, you need to ensure that the function\n * you pass in doesn't change, or only if it needs to. (i.e. declare\n * your style creator outside of a function component or use `useCallback()`.)\n * */\n/** @deprecated use useStyles2 */\n/** @public */\nexport function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {\n  const theme = useTheme();\n\n  let memoizedStyleCreator: typeof getStyles = memoizedStyleCreators.get(getStyles);\n\n  if (!memoizedStyleCreator) {\n    memoizedStyleCreator = stylesFactory(getStyles);\n    memoizedStyleCreators.set(getStyles, memoizedStyleCreator);\n  }\n\n  return memoizedStyleCreator(theme);\n}\n\n/**\n * Hook for using memoized styles with access to the theme. Pass additional\n * arguments to the getStyles function as additional arguments to this hook.\n *\n * Prefer using primitive values (boolean, number, string, etc) for\n * additional arguments for better performance\n *\n * ```\n * const getStyles = (theme, isDisabled, isOdd) => {css(...)}\n * [...]\n * const styles = useStyles2(getStyles, true, Boolean(index % 2))\n * ```\n *\n * NOTE: For memoization to work, ensure that all arguments don't change\n * across renders (or only change if they need to)\n *\n * @public\n * */\nexport function useStyles2<T extends unknown[], CSSReturnValue>(\n  getStyles: (theme: GrafanaTheme2, ...args: T) => CSSReturnValue,\n  ...additionalArguments: T\n): CSSReturnValue {\n  const theme = useTheme2();\n\n  // Grafana ui can be bundled and used in older versions of Grafana where the theme doesn't have elevated background\n  // This can be removed post G12\n  if (!theme.colors.background.elevated) {\n    theme.colors.background.elevated =\n      theme.colors.mode === 'light' ? theme.colors.background.primary : theme.colors.background.secondary;\n  }\n\n  let memoizedStyleCreator: typeof getStyles = memoizedStyleCreators.get(getStyles);\n\n  if (!memoizedStyleCreator) {\n    memoizedStyleCreator = memoize(getStyles, { maxSize: 10 }); // each getStyles function will memoize 10 different sets of props\n    memoizedStyleCreators.set(getStyles, memoizedStyleCreator);\n  }\n\n  return memoizedStyleCreator(theme, ...additionalArguments);\n}\n\n/**\n * Enables theme context mocking\n */\n/** @public */\nexport const mockThemeContext = (theme: Partial<GrafanaTheme2>) => {\n  ThemeContextMock = React.createContext(theme as GrafanaTheme2);\n\n  return () => {\n    ThemeContextMock = null;\n  };\n};\n","import { keyframes } from '@emotion/css';\n\nexport const spin = keyframes({\n  '0%': {\n    transform: 'rotate(0deg)',\n  },\n  '100%': {\n    transform: 'rotate(359deg)',\n  },\n});\n","import { IconName, IconSize, IconType } from '../../types/icon';\n\nconst alwaysMonoIcons: IconName[] = [\n  'grafana',\n  'favorite',\n  'heart-break',\n  'heart',\n  'panel-add',\n  'library-panel',\n  'circle-mono',\n];\n\nexport function getIconSubDir(name: IconName, type: IconType): string {\n  if (name?.startsWith('gf-')) {\n    return 'custom';\n  } else if (alwaysMonoIcons.includes(name)) {\n    return 'mono';\n  } else if (type === 'default') {\n    return 'unicons';\n  } else if (type === 'solid') {\n    return 'solid';\n  } else {\n    return 'mono';\n  }\n}\n\n/* Transform string with px to number and add 2 pxs as path in svg is 2px smaller */\nexport function getSvgSize(size: IconSize) {\n  switch (size) {\n    case 'xs':\n      return 12;\n    case 'sm':\n      return 14;\n    case 'md':\n      return 16;\n    case 'lg':\n      return 18;\n    case 'xl':\n      return 24;\n    case 'xxl':\n      return 36;\n    case 'xxxl':\n      return 48;\n  }\n}\n\nlet iconRoot: string | undefined;\n\nexport function getIconRoot(): string {\n  if (iconRoot) {\n    return iconRoot;\n  }\n\n  const grafanaPublicPath = typeof window !== 'undefined' && window.__grafana_public_path__;\n  if (grafanaPublicPath) {\n    iconRoot = grafanaPublicPath + 'build/img/icons/';\n  } else {\n    iconRoot = 'public/build/img/icons/';\n  }\n\n  return iconRoot;\n}\n\nexport function getIconPath(name: IconName, type: IconType = 'default'): string {\n  const iconRoot = getIconRoot();\n  const subDir = getIconSubDir(name, type);\n  return `${iconRoot}${subDir}/${name}.svg`;\n}\n","import { css, cx } from '@emotion/css';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2, isIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName, IconType, IconSize } from '../../types/icon';\nimport { spin } from '../../utils/keyframes';\n\nimport { getIconPath, getSvgSize } from './utils';\n\nexport interface IconProps extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {\n  name: IconName;\n  size?: IconSize;\n  type?: IconType;\n  /**\n   * Give your icon a semantic meaning. The icon will be hidden from screen readers, unless this prop or an aria-label is provided.\n   */\n  title?: string;\n}\n\nconst getIconStyles = (theme: GrafanaTheme2) => {\n  return {\n    icon: css({\n      display: 'inline-block',\n      fill: 'currentColor',\n      flexShrink: 0,\n      label: 'Icon',\n      // line-height: 0; is needed for correct icon alignment in Safari\n      lineHeight: 0,\n      verticalAlign: 'middle',\n    }),\n    orange: css({\n      fill: theme.v1.palette.orange,\n    }),\n    spin: css({\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        animation: `${spin} 2s infinite linear`,\n      },\n    }),\n  };\n};\n\n/**\n * Grafana's icon wrapper component.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-icon--docs\n */\nexport const Icon = React.memo(\n  React.forwardRef<SVGElement, IconProps>(\n    ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {\n      const styles = useStyles2(getIconStyles);\n\n      if (!isIconName(name)) {\n        console.warn('Icon component passed an invalid icon name', name);\n      }\n\n      // handle the deprecated 'fa fa-spinner'\n      const iconName: IconName = name === 'fa fa-spinner' ? 'spinner' : name;\n\n      const svgSize = getSvgSize(size);\n      const svgHgt = svgSize;\n      const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize;\n      const svgPath = getIconPath(iconName, type);\n\n      const composedClassName = cx(\n        styles.icon,\n        className,\n        type === 'mono' ? { [styles.orange]: name === 'favorite' } : '',\n        {\n          [styles.spin]: iconName === 'spinner',\n        }\n      );\n\n      return (\n        <SVG\n          aria-hidden={\n            rest.tabIndex === undefined &&\n            !title &&\n            !rest['aria-label'] &&\n            !rest['aria-labelledby'] &&\n            !rest['aria-describedby']\n          }\n          innerRef={ref}\n          src={svgPath}\n          width={svgWid}\n          height={svgHgt}\n          title={title}\n          className={composedClassName}\n          style={style}\n          // render an empty element with the correct dimensions while loading\n          // this prevents content layout shift whilst the icon asynchronously loads\n          // which happens even if the icon is in the cache(!)\n          loader={\n            <span\n              className={cx(\n                css({\n                  width: svgWid,\n                  height: svgHgt,\n                }),\n                composedClassName\n              )}\n            />\n          }\n          {...rest}\n        />\n      );\n    }\n  )\n);\n\nIcon.displayName = 'Icon';\n","import { flip, Placement, shift } from '@floating-ui/react';\n\nexport const BOUNDARY_ELEMENT_ID = 'floating-boundary';\n\nexport function getPositioningMiddleware(placement?: Placement) {\n  const middleware = [];\n\n  const flipMiddleware = flip({\n    // Ensure we flip to the perpendicular axis if it doesn't fit\n    // on narrow viewports.\n    crossAxis: 'alignment',\n    fallbackAxisSideDirection: 'end',\n    boundary: document.getElementById(BOUNDARY_ELEMENT_ID) ?? undefined,\n  });\n  const shiftMiddleware = shift();\n\n  // Prioritize flip over shift for edge-aligned placements only.\n  if (placement?.includes('-')) {\n    middleware.push(flipMiddleware, shiftMiddleware);\n  } else {\n    middleware.push(shiftMiddleware, flipMiddleware);\n  }\n\n  return middleware;\n}\n","import { css } from '@emotion/css';\nimport { Placement } from '@floating-ui/react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { TooltipPlacement } from '../components/Tooltip/types';\n\nexport function getPlacement(placement?: TooltipPlacement): Placement {\n  switch (placement) {\n    case 'auto':\n      return 'bottom';\n    case 'auto-start':\n      return 'bottom-start';\n    case 'auto-end':\n      return 'bottom-end';\n    default:\n      return placement ?? 'bottom';\n  }\n}\n\nexport function buildTooltipTheme(\n  theme: GrafanaTheme2,\n  tooltipBg: string,\n  toggletipBorder: string,\n  tooltipText: string,\n  tooltipPadding: { topBottom: number; rightLeft: number }\n) {\n  return {\n    arrow: css({\n      fill: tooltipBg,\n    }),\n    container: css({\n      backgroundColor: tooltipBg,\n      borderRadius: theme.shape.radius.default,\n      border: `1px solid ${toggletipBorder}`,\n      boxShadow: theme.shadows.z2,\n      color: tooltipText,\n      fontSize: theme.typography.bodySmall.fontSize,\n      padding: theme.spacing(tooltipPadding.topBottom, tooltipPadding.rightLeft),\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: 'opacity 0.3s',\n      },\n      zIndex: theme.zIndex.tooltip,\n      maxWidth: '400px',\n      overflowWrap: 'break-word',\n\n      \"&[data-popper-interactive='false']\": {\n        pointerEvents: 'none',\n      },\n    }),\n    headerClose: css({\n      color: theme.colors.text.secondary,\n      position: 'absolute',\n      right: theme.spacing(1),\n      top: theme.spacing(1.5),\n      backgroundColor: 'transparent',\n      border: 0,\n    }),\n    header: css({\n      paddingTop: theme.spacing(1),\n      paddingBottom: theme.spacing(2),\n    }),\n    body: css({\n      paddingTop: theme.spacing(1),\n      paddingBottom: theme.spacing(1),\n    }),\n    footer: css({\n      paddingTop: theme.spacing(2),\n      paddingBottom: theme.spacing(1),\n    }),\n  };\n}\n","import { css } from '@emotion/css';\nimport { PropsWithChildren, useLayoutEffect, useRef } from 'react';\nimport * as React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\n\ninterface Props {\n  className?: string;\n  root?: HTMLElement;\n  // the zIndex of the node; defaults to theme.zIndex.portal\n  zIndex?: number;\n  forwardedRef?: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport function Portal(props: PropsWithChildren<Props>) {\n  const { children, className, root, forwardedRef } = props;\n  const theme = useTheme2();\n  const node = useRef<HTMLDivElement | null>(null);\n  const portalRoot = root ?? getPortalContainer();\n\n  if (!node.current) {\n    node.current = document.createElement('div');\n    if (className) {\n      node.current.className = className;\n    }\n    node.current.style.position = 'relative';\n    node.current.style.zIndex = `${props.zIndex ?? theme.zIndex.portal}`;\n  }\n\n  useLayoutEffect(() => {\n    if (node.current) {\n      portalRoot.appendChild(node.current);\n    }\n\n    return () => {\n      if (node.current) {\n        portalRoot.removeChild(node.current);\n      }\n    };\n  }, [portalRoot]);\n\n  return ReactDOM.createPortal(<div ref={forwardedRef}>{children}</div>, node.current);\n}\n\n/** @internal */\nexport function getPortalContainer() {\n  return window.document.getElementById('grafana-portal-container') ?? document.body;\n}\n\n/** @internal */\nexport function PortalContainer() {\n  const styles = useStyles2(getStyles);\n  return (\n    <div\n      id=\"grafana-portal-container\"\n      data-testid={selectors.components.Portal.container}\n      className={styles.grafanaPortalContainer}\n    />\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    grafanaPortalContainer: css({\n      position: 'fixed',\n      top: 0,\n      width: '100%',\n      zIndex: theme.zIndex.portal,\n    }),\n  };\n};\n\nexport const RefForwardingPortal = React.forwardRef<HTMLDivElement, Props>((props, ref) => {\n  return <Portal {...props} forwardedRef={ref} />;\n});\n\nRefForwardingPortal.displayName = 'RefForwardingPortal';\n","import {\n  arrow,\n  autoUpdate,\n  FloatingArrow,\n  offset,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  safePolygon,\n} from '@floating-ui/react';\nimport { forwardRef, cloneElement, isValidElement, useCallback, useId, useRef, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getPositioningMiddleware } from '../../utils/floating';\nimport { buildTooltipTheme, getPlacement } from '../../utils/tooltipUtils';\nimport { Portal } from '../Portal/Portal';\n\nimport { PopoverContent, TooltipPlacement } from './types';\n\nexport interface TooltipProps {\n  theme?: 'info' | 'error' | 'info-alt';\n  show?: boolean;\n  placement?: TooltipPlacement;\n  content: PopoverContent;\n  children: JSX.Element;\n  /**\n   * Set to true if you want the tooltip to stay long enough so the user can move mouse over content to select text or click a link\n   */\n  interactive?: boolean;\n}\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-tooltip--docs\n */\nexport const Tooltip = forwardRef<HTMLElement, TooltipProps>(\n  ({ children, theme, interactive, show, placement, content }, forwardedRef) => {\n    const arrowRef = useRef(null);\n    const [controlledVisible, setControlledVisible] = useState(show);\n    const isOpen = show ?? controlledVisible;\n    const floatingUIPlacement = getPlacement(placement);\n\n    // the order of middleware is important!\n    // `arrow` should almost always be at the end\n    // see https://floating-ui.com/docs/arrow#order\n    const middleware = [\n      offset(8),\n      ...getPositioningMiddleware(floatingUIPlacement),\n      arrow({\n        element: arrowRef,\n      }),\n    ];\n\n    const { context, refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: floatingUIPlacement,\n      onOpenChange: setControlledVisible,\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n    const tooltipId = useId();\n\n    const hover = useHover(context, {\n      handleClose: interactive ? safePolygon() : undefined,\n      move: false,\n    });\n    const focus = useFocus(context);\n    const dismiss = useDismiss(context);\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, hover, focus]);\n\n    const contentIsFunction = typeof content === 'function';\n\n    const styles = useStyles2(getStyles);\n    const style = styles[theme ?? 'info'];\n\n    const handleRef = useCallback(\n      (ref: HTMLElement | null) => {\n        refs.setReference(ref);\n\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(ref);\n        } else if (forwardedRef) {\n          forwardedRef.current = ref;\n        }\n      },\n      [forwardedRef, refs]\n    );\n\n    // if the child has a matching aria-label, this should take precedence over the tooltip content\n    // otherwise we end up double announcing things in e.g. IconButton\n    const childHasMatchingAriaLabel = 'aria-label' in children.props && children.props['aria-label'] === content;\n\n    return (\n      <>\n        {cloneElement(children, {\n          ref: handleRef,\n          tabIndex: 0, // tooltip trigger should be keyboard focusable\n          'aria-describedby': !childHasMatchingAriaLabel && isOpen ? tooltipId : undefined,\n          ...getReferenceProps(),\n        })}\n        {isOpen && (\n          <Portal>\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <FloatingArrow className={style.arrow} ref={arrowRef} context={context} />\n              <div\n                data-testid={selectors.components.Tooltip.container}\n                id={tooltipId}\n                role=\"tooltip\"\n                className={style.container}\n              >\n                {typeof content === 'string' && content}\n                {isValidElement(content) && cloneElement(content)}\n                {contentIsFunction && content({})}\n              </div>\n            </div>\n          </Portal>\n        )}\n      </>\n    );\n  }\n);\n\nTooltip.displayName = 'Tooltip';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n  const info = buildTooltipTheme(\n    theme,\n    theme.components.tooltip.background,\n    theme.components.tooltip.background,\n    theme.components.tooltip.text,\n    { topBottom: 0.5, rightLeft: 1 }\n  );\n  const error = buildTooltipTheme(\n    theme,\n    theme.colors.error.main,\n    theme.colors.error.main,\n    theme.colors.error.contrastText,\n    { topBottom: 0.5, rightLeft: 1 }\n  );\n\n  return {\n    info,\n    ['info-alt']: info,\n    error,\n  };\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\ninterface Props {\n  children: ReactNode;\n  className?: string;\n  htmlFor?: string;\n  isFocused?: boolean;\n  isInvalid?: boolean;\n  tooltip?: PopoverContent;\n  width?: number | 'auto';\n  /** Make tooltip interactive */\n  interactive?: boolean;\n}\n\nexport const FormLabel = ({\n  children,\n  isFocused,\n  isInvalid,\n  className,\n  htmlFor,\n  tooltip,\n  width,\n  interactive,\n  ...rest\n}: Props) => {\n  const classes = classNames(className, `gf-form-label width-${width ? width : '10'}`, {\n    'gf-form-label--is-focused': isFocused,\n    'gf-form-label--is-invalid': isInvalid,\n  });\n\n  return (\n    <label className={classes} {...rest} htmlFor={htmlFor}>\n      {children}\n      {tooltip && (\n        <Tooltip placement=\"top\" content={tooltip} theme={'info'} interactive={interactive}>\n          <Icon name=\"info-circle\" size=\"sm\" style={{ marginLeft: '10px' }} />\n        </Tooltip>\n      )}\n    </label>\n  );\n};\n\nexport const InlineFormLabel = FormLabel;\n","import { css, cx } from '@emotion/css';\nimport { InputHTMLAttributes, useId } from 'react';\nimport * as React from 'react';\n\nimport { InlineFormLabel } from '../FormLabel/FormLabel';\nimport { Field } from '../Forms/Field';\nimport { InlineField } from '../Forms/InlineField';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props extends InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  tooltip?: PopoverContent;\n  labelWidth?: number;\n  // If null no width will be specified not even default one\n  inputWidth?: number | null;\n  inputEl?: React.ReactNode;\n  /** Make tooltip interactive */\n  interactive?: boolean;\n}\n\n/**\n * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass\n * custom inputEl if required in which case inputWidth and inputProps are ignored.\n *\n * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.\n * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-deprecated-formfield--docs\n */\nexport const FormField = ({\n  label,\n  tooltip,\n  labelWidth = 6,\n  inputWidth = 12,\n  inputEl,\n  className,\n  interactive,\n  ...inputProps\n}: Props) => {\n  const styles = getStyles();\n  const id = useId();\n  return (\n    <div className={cx(styles.formField, className)}>\n      <InlineFormLabel htmlFor={id} width={labelWidth} tooltip={tooltip} interactive={interactive}>\n        {label}\n      </InlineFormLabel>\n      {inputEl || (\n        <input\n          id={id}\n          type=\"text\"\n          className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`}\n          {...inputProps}\n          disabled={inputProps.disabled}\n        />\n      )}\n    </div>\n  );\n};\n\nFormField.displayName = 'FormField';\n\nconst getStyles = () => {\n  return {\n    formField: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n      textAlign: 'left',\n      position: 'relative',\n    }),\n  };\n};\n","import { ValidationRule, ValidationEvents } from '../types/input';\n\nexport enum EventsWithValidation {\n  onBlur = 'onBlur',\n  onFocus = 'onFocus',\n  onChange = 'onChange',\n}\n\nexport const validate = (value: string, validationRules: ValidationRule[]) => {\n  const errors = validationRules.reduce<string[]>((acc, currRule) => {\n    if (!currRule.rule(value)) {\n      return acc.concat(currRule.errorMessage);\n    }\n    return acc;\n  }, []);\n  return errors.length > 0 ? errors : null;\n};\n\nexport const hasValidationEvent = (event: EventsWithValidation, validationEvents: ValidationEvents | undefined) => {\n  return validationEvents && validationEvents[event];\n};\n\nexport const regexValidation = (pattern: string | RegExp, errorMessage?: string): ValidationRule => {\n  return {\n    rule: (valueToValidate: string) => {\n      return !!valueToValidate.match(pattern);\n    },\n    errorMessage: errorMessage || 'Value is not valid',\n  };\n};\n","import classNames from 'classnames';\nimport { PureComponent, ChangeEvent } from 'react';\nimport * as React from 'react';\n\nimport { ValidationEvents, ValidationRule } from '../../../../types/input';\nimport { validate, EventsWithValidation, hasValidationEvent } from '../../../../utils/validate';\n\n/** @deprecated Please use the `Input` component, which does not require this enum. */\nexport enum LegacyInputStatus {\n  Invalid = 'invalid',\n  Valid = 'valid',\n}\n\nexport interface Props extends React.HTMLProps<HTMLInputElement> {\n  validationEvents?: ValidationEvents;\n  hideErrorMessage?: boolean;\n  inputRef?: React.LegacyRef<HTMLInputElement>;\n\n  // Override event props and append status as argument\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;\n}\n\ninterface State {\n  error: string | null;\n}\n\n/** @deprecated Please use the `Input` component. {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-input--simple See Storybook for example.} */\nexport class Input extends PureComponent<Props, State> {\n  static defaultProps = {\n    className: '',\n  };\n\n  state: State = {\n    error: null,\n  };\n\n  get status() {\n    return this.state.error ? LegacyInputStatus.Invalid : LegacyInputStatus.Valid;\n  }\n\n  get isInvalid() {\n    return this.status === LegacyInputStatus.Invalid;\n  }\n\n  validatorAsync = (validationRules: ValidationRule[]) => {\n    return (evt: ChangeEvent<HTMLInputElement>) => {\n      const errors = validate(evt.target.va