@grafana/plugin-ui 0.10.2 → 0.10.4

package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,+CACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,UAAY,EAAA,EAAA,EAAI,WAAY,CAAA,OAAA,EAAS,CACnD,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,+CACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,UAAY,EAAA,EAAA,EAAI,WAAY,CAAA,OAAA,EAAS,CACnD,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js

@@ -12,6 +12,7 @@ import '../../QueryEditor/Space.js';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
 import 'sql-formatter-plus';
+import '../../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '../../SQLEditor/utils/debugger.js';
 import '../../SQLEditor/standardSql/macros.js';

package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n      {queryStats && config.featureToggles.lokiQuerySplitting && (\n        <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n          <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n        </Tooltip>\n      )}\n\n      {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React from 'react';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n      {queryStats && config.featureToggles.lokiQuerySplitting && (\n        <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n          <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n        </Tooltip>\n      )}\n\n      {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":["React"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -1274,5 +1274,6 @@ declare const openSelect: (container: HTMLElement, optionLabel?: string) => void
  * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect
  */
 declare const selectOption: (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => Promise<void>;
+declare const generateOptions: () => Array<SelectableValue<string>>;
 
-export { AccessoryButton, AdvancedHttpSettings, type Aggregate, Auth, AuthMethod, type Props$c as AuthProps, BINARY_OPERATIONS_KEY, type ColumnDefinition, CompletionItemInsertTextRule, CompletionItemKind, CompletionItemPriority, ConfigDescriptionLink, ConfigSection, ConfigSubSection, ConnectionSettings, CustomHeadersSettings, type DB, DataLink, type DataLinkConfig, DataLinks, DataSourceDescription, DataSourcePicker, DatePicker, type DatePickerProps, DatePickerWithInput, type DatePickerWithInputProps, DebounceInput, type DebounceInputProps, EditorField, EditorFieldGroup, EditorHeader, EditorList, EditorMode, EditorRow, EditorRows, EditorStack, EditorSwitch, FlexItem, GroupByRow, InlineSelect, InputGroup, LabelFilters, type LanguageCompletionProvider, type LanguageDefinition, LinkedToken, MacroType, type MetaDefinition, type NameValue, OperationExplainedBox, OperationList, OperationListExplained, OperationsEditorRow, OperatorType, type PositionContext, type Props$s as Props, QUERY_FORMAT_OPTIONS, QueryBuilderHints, type QueryBuilderLabelFilter, type QueryBuilderOperation, type QueryBuilderOperationDefinition, type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps, type QueryBuilderOperationParamValue, QueryEditorMode, QueryEditorModeToggle, type QueryEditorProps, QueryEditorRow, QueryFormat, QueryHeaderSwitch, QueryModellerBase, QueryOptionGroup, type QueryRowFilter, type QueryStats, type RAQBFieldTypes, RawQuery, type ResourceSelectorProps, type ResponseParser, RunQueryButton, type SQLConnectionLimits, SQLEditor, SQLEditorMode, SQLEditorTestUtils, type SQLExpression, type SQLFilters, type SQLMonarchLanguage, type SQLOptions, type SQLQuery, type SQLSelectableValue, type SchemaDefinition, SecureSocksProxyToggle, Segment, type SegmentProps, Space, SqlDatasource, SqlQueryEditor, type SqlQueryForInterpolation, type SqlQueryModel, type State$1 as State, type StatementPlacementProvider, StatementPosition, SuggestionKind, type SuggestionKindProvider, TLSSettings, type Props$f as TLSSettingsProps, type TableDefinition, type TableFieldSchema, type TableIdentifier, type TableSchema, type TestQueryModel, TokenType, type ValidationResults, type VisualQuery, type VisualQueryBinary, type VisualQueryModeller, convertLegacyAuthProps, formatDate, generateArrayOf, generateBoolean, getStandardSQLCompletionProvider, language as grafanaStandardSQLLanguage, conf as grafanaStandardSQLLanguageConf, mockDataQuery, mockDataSourcePluginMeta, mockDatasource, mockDatasourceInstanceSettings, mockLoadingState, mockPluginDependencies, mockPluginInclude, mockPluginIncludeType, mockPluginMeta, mockPluginMetaInfo, mockPluginSignatureStatus, mockPluginState, mockPluginType, mockQueryEditorProps, mockTimeRange, openSelect, selectOption, toOption, undefinedOr };
+export { AccessoryButton, AdvancedHttpSettings, type Aggregate, Auth, AuthMethod, type Props$c as AuthProps, BINARY_OPERATIONS_KEY, type ColumnDefinition, CompletionItemInsertTextRule, CompletionItemKind, CompletionItemPriority, ConfigDescriptionLink, ConfigSection, ConfigSubSection, ConnectionSettings, CustomHeadersSettings, type DB, DataLink, type DataLinkConfig, DataLinks, DataSourceDescription, DataSourcePicker, DatePicker, type DatePickerProps, DatePickerWithInput, type DatePickerWithInputProps, DebounceInput, type DebounceInputProps, EditorField, EditorFieldGroup, EditorHeader, EditorList, EditorMode, EditorRow, EditorRows, EditorStack, EditorSwitch, FlexItem, GroupByRow, InlineSelect, InputGroup, LabelFilters, type LanguageCompletionProvider, type LanguageDefinition, LinkedToken, MacroType, type MetaDefinition, type NameValue, OperationExplainedBox, OperationList, OperationListExplained, OperationsEditorRow, OperatorType, type PositionContext, type Props$s as Props, QUERY_FORMAT_OPTIONS, QueryBuilderHints, type QueryBuilderLabelFilter, type QueryBuilderOperation, type QueryBuilderOperationDefinition, type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps, type QueryBuilderOperationParamValue, QueryEditorMode, QueryEditorModeToggle, type QueryEditorProps, QueryEditorRow, QueryFormat, QueryHeaderSwitch, QueryModellerBase, QueryOptionGroup, type QueryRowFilter, type QueryStats, type RAQBFieldTypes, RawQuery, type ResourceSelectorProps, type ResponseParser, RunQueryButton, type SQLConnectionLimits, SQLEditor, SQLEditorMode, SQLEditorTestUtils, type SQLExpression, type SQLFilters, type SQLMonarchLanguage, type SQLOptions, type SQLQuery, type SQLSelectableValue, type SchemaDefinition, SecureSocksProxyToggle, Segment, type SegmentProps, Space, SqlDatasource, SqlQueryEditor, type SqlQueryForInterpolation, type SqlQueryModel, type State$1 as State, type StatementPlacementProvider, StatementPosition, SuggestionKind, type SuggestionKindProvider, TLSSettings, type Props$f as TLSSettingsProps, type TableDefinition, type TableFieldSchema, type TableIdentifier, type TableSchema, type TestQueryModel, TokenType, type ValidationResults, type VisualQuery, type VisualQueryBinary, type VisualQueryModeller, convertLegacyAuthProps, formatDate, generateArrayOf, generateBoolean, generateOptions, getStandardSQLCompletionProvider, language as grafanaStandardSQLLanguage, conf as grafanaStandardSQLLanguageConf, mockDataQuery, mockDataSourcePluginMeta, mockDatasource, mockDatasourceInstanceSettings, mockLoadingState, mockPluginDependencies, mockPluginInclude, mockPluginIncludeType, mockPluginMeta, mockPluginMetaInfo, mockPluginSignatureStatus, mockPluginState, mockPluginType, mockQueryEditorProps, mockTimeRange, openSelect, selectOption, toOption, undefinedOr };

package/dist/esm/index.js

@@ -58,5 +58,5 @@ export { mockDatasource, mockDatasourceInstanceSettings } from './test/mocks/Dat
 export { mockDataQuery } from './test/mocks/DataQuery.js';
 export { mockDataSourcePluginMeta, mockPluginDependencies, mockPluginInclude, mockPluginIncludeType, mockPluginMeta, mockPluginMetaInfo, mockPluginSignatureStatus, mockPluginState, mockPluginType } from './test/mocks/Plugin.js';
 export { mockLoadingState, mockQueryEditorProps, mockTimeRange } from './test/mocks/QueryEditorProps.js';
-export { generateArrayOf, generateBoolean, openSelect, selectOption, undefinedOr } from './test/mocks/utils.js';
+export { generateArrayOf, generateBoolean, generateOptions, openSelect, selectOption, undefinedOr } from './test/mocks/utils.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/test/mocks/utils.js

@@ -1,7 +1,9 @@
+import '@grafana/data';
 import { c as chanceExports } from '../../_virtual/chance.js';
 import { fireEvent } from '../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js';
 import { userEvent } from '../../node_modules/@testing-library/user-event/dist/esm/setup/index.js';
 import '../../node_modules/@testing-library/user-event/dist/esm/options.js';
+import { kebabCase } from 'lodash';
 import { getQueriesForElement, waitFor as waitForWrapper } from '../../node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js';
 
 const generateBoolean = () => chanceExports.Chance().pickone([true, false]);
@@ -17,6 +19,16 @@ const selectOption = async (container, optionLabel, typeOptionLabel) => {
   const option = await waitForWrapper(() => getQueriesForElement(container).getByText(optionLabel));
   userEvent.click(option);
 };
+const generateOptions = () => {
+  const numberOfOptions = 5;
+  return Array.from(new Array(numberOfOptions), () => {
+    const name = chanceExports.Chance().name();
+    return {
+      label: name,
+      value: kebabCase(name)
+    };
+  });
+};
 
-export { generateArrayOf, generateBoolean, openSelect, selectOption, undefinedOr };
+export { generateArrayOf, generateBoolean, generateOptions, openSelect, selectOption, undefinedOr };
 //# sourceMappingURL=utils.js.map

package/dist/esm/test/mocks/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/test/mocks/utils.ts"],"sourcesContent":["import { Chance } from 'chance';\nimport { within, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nexport const generateBoolean = () => Chance().pickone([true, false]);\n\nexport const undefinedOr = (fn: Function) => Chance().pickone([undefined, fn()]);\n\nexport const generateArrayOf = (fn: Function, numberOf = 3) => Array.from(new Array(numberOf), () => fn());\n\n// react-select (used by @grafana/ui) renders very differently from the native Select HTML element\n// and because they are not accessible and do not pass data-testid or aria-labels down,\n// it is difficult to grab the correct element and simulate selecting different options\n// the helper functions below can be used instead\n\n/**\n * Opens a Select or MultiSelect dropdown\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option text we want to type or search\n */\nexport const openSelect = (container: HTMLElement, optionLabel?: string) => {\n  const selectInput = within(container).getByRole('textbox');\n\n  // this needs to be here to support autoFocus=true prop\n  fireEvent.blur(selectInput);\n\n  // if we have an async Select, we want to type the option label to make the option available\n  // otherwise, just press down to open the dropdown\n  userEvent.type(selectInput, optionLabel ?? '{arrowdown}');\n};\n\n/**\n * Selects an option from the Select or MultiSelect component\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option we want to select\n * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect\n */\nexport const selectOption = async (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => {\n  openSelect(container, typeOptionLabel ? optionLabel : undefined);\n\n  // wait for the list to show\n  const option = await waitFor(() => within(container).getByText(optionLabel));\n\n  // select the option\n  userEvent.click(option);\n};\n"],"names":["Chance","within","waitFor"],"mappings":";;;;;;AAIa,MAAA,eAAA,GAAkB,MAAMA,oBAAO,EAAA,CAAE,QAAQ,CAAC,IAAA,EAAM,KAAK,CAAC;AAEtD,MAAA,WAAA,GAAc,CAAC,EAAA,KAAiBA,oBAAO,EAAA,CAAE,QAAQ,CAAC,SAAA,EAAW,EAAG,EAAC,CAAC;AAExE,MAAM,eAAkB,GAAA,CAAC,EAAc,EAAA,QAAA,GAAW,CAAM,KAAA,KAAA,CAAM,IAAK,CAAA,IAAI,KAAM,CAAA,QAAQ,CAAG,EAAA,MAAM,IAAI;AAa5F,MAAA,UAAA,GAAa,CAAC,SAAA,EAAwB,WAAyB,KAAA;AAC1E,EAAA,MAAM,WAAc,GAAAC,oBAAA,CAAO,SAAS,CAAA,CAAE,UAAU,SAAS,CAAA;AAGzD,EAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAI1B,EAAU,SAAA,CAAA,IAAA,CAAK,WAAa,EAAA,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,aAAa,CAAA;AAC1D;AASO,MAAM,YAAe,GAAA,OAAO,SAAwB,EAAA,WAAA,EAAqB,eAA8B,KAAA;AAC5G,EAAW,UAAA,CAAA,SAAA,EAAW,eAAkB,GAAA,WAAA,GAAc,SAAS,CAAA;AAG/D,EAAM,MAAA,MAAA,GAAS,MAAMC,cAAQ,CAAA,MAAMD,qBAAO,SAAS,CAAA,CAAE,SAAU,CAAA,WAAW,CAAC,CAAA;AAG3E,EAAA,SAAA,CAAU,MAAM,MAAM,CAAA;AACxB;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/test/mocks/utils.ts"],"sourcesContent":["import { type SelectableValue } from '@grafana/data';\nimport { Chance } from 'chance';\nimport { within, fireEvent, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { kebabCase } from 'lodash';\n\nexport const generateBoolean = () => Chance().pickone([true, false]);\n\nexport const undefinedOr = (fn: Function) => Chance().pickone([undefined, fn()]);\n\nexport const generateArrayOf = (fn: Function, numberOf = 3) => Array.from(new Array(numberOf), () => fn());\n\n// react-select (used by @grafana/ui) renders very differently from the native Select HTML element\n// and because they are not accessible and do not pass data-testid or aria-labels down,\n// it is difficult to grab the correct element and simulate selecting different options\n// the helper functions below can be used instead\n\n/**\n * Opens a Select or MultiSelect dropdown\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option text we want to type or search\n */\nexport const openSelect = (container: HTMLElement, optionLabel?: string) => {\n  const selectInput = within(container).getByRole('textbox');\n\n  // this needs to be here to support autoFocus=true prop\n  fireEvent.blur(selectInput);\n\n  // if we have an async Select, we want to type the option label to make the option available\n  // otherwise, just press down to open the dropdown\n  userEvent.type(selectInput, optionLabel ?? '{arrowdown}');\n};\n\n/**\n * Selects an option from the Select or MultiSelect component\n *\n * @param {HTMLElement} container The container wrapping the Select or MultiSelect component\n * @param {string} optionLabel The option we want to select\n * @param {boolean} [typeOptionLabel=false] If we should type the optional label after opening - this is useful for AsyncSelect\n */\nexport const selectOption = async (container: HTMLElement, optionLabel: string, typeOptionLabel?: boolean) => {\n  openSelect(container, typeOptionLabel ? optionLabel : undefined);\n\n  // wait for the list to show\n  const option = await waitFor(() => within(container).getByText(optionLabel));\n\n  // select the option\n  userEvent.click(option);\n};\n\nexport const generateOptions = (): Array<SelectableValue<string>> => {\n  const numberOfOptions = 5;\n\n  return Array.from(new Array(numberOfOptions), () => {\n    const name = Chance().name();\n\n    return {\n      label: name,\n      value: kebabCase(name),\n    };\n  });\n};\n"],"names":["Chance","within","waitFor"],"mappings":";;;;;;;;AAMa,MAAA,eAAA,GAAkB,MAAMA,oBAAO,EAAA,CAAE,QAAQ,CAAC,IAAA,EAAM,KAAK,CAAC;AAEtD,MAAA,WAAA,GAAc,CAAC,EAAA,KAAiBA,oBAAO,EAAA,CAAE,QAAQ,CAAC,SAAA,EAAW,EAAG,EAAC,CAAC;AAExE,MAAM,eAAkB,GAAA,CAAC,EAAc,EAAA,QAAA,GAAW,CAAM,KAAA,KAAA,CAAM,IAAK,CAAA,IAAI,KAAM,CAAA,QAAQ,CAAG,EAAA,MAAM,IAAI;AAa5F,MAAA,UAAA,GAAa,CAAC,SAAA,EAAwB,WAAyB,KAAA;AAC1E,EAAA,MAAM,WAAc,GAAAC,oBAAA,CAAO,SAAS,CAAA,CAAE,UAAU,SAAS,CAAA;AAGzD,EAAA,SAAA,CAAU,KAAK,WAAW,CAAA;AAI1B,EAAU,SAAA,CAAA,IAAA,CAAK,WAAa,EAAA,WAAA,IAAA,IAAA,GAAA,WAAA,GAAe,aAAa,CAAA;AAC1D;AASO,MAAM,YAAe,GAAA,OAAO,SAAwB,EAAA,WAAA,EAAqB,eAA8B,KAAA;AAC5G,EAAW,UAAA,CAAA,SAAA,EAAW,eAAkB,GAAA,WAAA,GAAc,SAAS,CAAA;AAG/D,EAAM,MAAA,MAAA,GAAS,MAAMC,cAAQ,CAAA,MAAMD,qBAAO,SAAS,CAAA,CAAE,SAAU,CAAA,WAAW,CAAC,CAAA;AAG3E,EAAA,SAAA,CAAU,MAAM,MAAM,CAAA;AACxB;AAEO,MAAM,kBAAkB,MAAsC;AACnE,EAAA,MAAM,eAAkB,GAAA,CAAA;AAExB,EAAA,OAAO,MAAM,IAAK,CAAA,IAAI,KAAM,CAAA,eAAe,GAAG,MAAM;AAClD,IAAM,MAAA,IAAA,GAAOD,oBAAO,EAAA,CAAE,IAAK,EAAA;AAE3B,IAAO,OAAA;AAAA,MACL,KAAO,EAAA,IAAA;AAAA,MACP,KAAA,EAAO,UAAU,IAAI;AAAA,KACvB;AAAA,GACD,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-ui",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "repository": "git@github.com:grafana/plugin-ui.git",
   "author": "Grafana Labs",
   "type": "module",
@@ -83,7 +83,7 @@
     "chance": "^1.1.7",
     "copyfiles": "^2.4.1",
     "cspell": "^8.14.4",
-    "esbuild": "^0.24.2",
+    "esbuild": "^0.25.0",
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsdoc": "^46.8.2",
@@ -121,5 +121,8 @@
   "files": [
     "dist"
   ],
+  "resolutions": {
+    "uplot": "^1.6.31"
+  },
   "packageManager": "yarn@4.6.0"
 }