diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx index 2fa3bde2bd3..9d3bc5fbfb8 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.story.tsx @@ -6,9 +6,10 @@ import React, { useEffect, useState } from 'react'; import { Alert } from '../Alert/Alert'; import { Field } from '../Forms/Field'; -import { Combobox, ComboboxOption, ComboboxProps } from './Combobox'; +import { Combobox, ComboboxProps } from './Combobox'; import mdx from './Combobox.mdx'; import { fakeSearchAPI, generateOptions } from './storyUtils'; +import { ComboboxOption } from './types'; type PropsAndCustomArgs = ComboboxProps & { numberOfOptions: number; diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx index ab9e63fbb3b..7787e38d00c 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.test.tsx @@ -2,7 +2,8 @@ import { act, render, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; -import { Combobox, ComboboxOption } from './Combobox'; +import { Combobox } from './Combobox'; +import { ComboboxOption } from './types'; // Mock data for the Combobox options const options: ComboboxOption[] = [ diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx index 34645d76aca..cf59c4910f8 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx @@ -16,15 +16,10 @@ import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; import { AsyncError, NotFoundError } from './MessageRows'; import { fuzzyFind, itemToString } from './filter'; import { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles'; +import { ComboboxOption } from './types'; import { useComboboxFloat } from './useComboboxFloat'; import { StaleResultError, useLatestAsyncCall } from './useLatestAsyncCall'; -export type ComboboxOption = { - label?: string; - value: T; - description?: string; -}; - // TODO: It would be great if ComboboxOption["label"] was more generic so that if consumers do pass it in (for async), // then the onChange handler emits ComboboxOption with the label as non-undefined. export interface ComboboxBaseProps diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx index e247536c8ce..0dc4f2e9128 100644 --- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx +++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx @@ -2,9 +2,9 @@ import { action } from '@storybook/addon-actions'; import { useArgs, useEffect, useState } from '@storybook/preview-api'; import type { Meta, StoryFn, StoryObj } from '@storybook/react'; -import { ComboboxOption } from './Combobox'; import { MultiCombobox } from './MultiCombobox'; import { generateOptions } from './storyUtils'; +import { ComboboxOption } from './types'; const meta: Meta = { title: 'Forms/MultiCombobox', diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx index 8099fb595d6..0cede71af9e 100644 --- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx @@ -14,18 +14,17 @@ import { Spinner } from '../Spinner/Spinner'; import { Text } from '../Text/Text'; import { Tooltip } from '../Tooltip'; -import { ComboboxOption, ComboboxBaseProps, AutoSizeConditionals, VIRTUAL_OVERSCAN_ITEMS } from './Combobox'; +import { ComboboxBaseProps, AutoSizeConditionals, VIRTUAL_OVERSCAN_ITEMS } from './Combobox'; import { NotFoundError } from './MessageRows'; import { OptionListItem } from './OptionListItem'; import { ValuePill } from './ValuePill'; import { itemFilter, itemToString } from './filter'; import { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles'; import { getMultiComboboxStyles } from './getMultiComboboxStyles'; +import { ALL_OPTION_VALUE, ComboboxOption } from './types'; import { useComboboxFloat } from './useComboboxFloat'; import { MAX_SHOWN_ITEMS, useMeasureMulti } from './useMeasureMulti'; -export const ALL_OPTION_VALUE = '__GRAFANA_INTERNAL_MULTICOMBOBOX_ALL_OPTION__'; - interface MultiComboboxBaseProps extends Omit, 'value' | 'onChange'> { value?: T[] | Array>; onChange: (items?: T[]) => void; diff --git a/packages/grafana-ui/src/components/Combobox/filter.ts b/packages/grafana-ui/src/components/Combobox/filter.ts index 94419efe9ca..cb7a14d86fe 100644 --- a/packages/grafana-ui/src/components/Combobox/filter.ts +++ b/packages/grafana-ui/src/components/Combobox/filter.ts @@ -1,7 +1,6 @@ import uFuzzy from '@leeoniya/ufuzzy'; -import { ComboboxOption } from './Combobox'; -import { ALL_OPTION_VALUE } from './MultiCombobox'; +import { ALL_OPTION_VALUE, ComboboxOption } from './types'; // https://catonmat.net/my-favorite-regex :) const REGEXP_NON_ASCII = /[^ -~]/m; diff --git a/packages/grafana-ui/src/components/Combobox/storyUtils.ts b/packages/grafana-ui/src/components/Combobox/storyUtils.ts index 809ac047cb1..48563324f54 100644 --- a/packages/grafana-ui/src/components/Combobox/storyUtils.ts +++ b/packages/grafana-ui/src/components/Combobox/storyUtils.ts @@ -1,4 +1,4 @@ -import { ComboboxOption } from './Combobox'; +import { ComboboxOption } from './types'; let fakeApiOptions: Array>; export async function fakeSearchAPI(urlString: string): Promise>> { diff --git a/packages/grafana-ui/src/components/Combobox/types.ts b/packages/grafana-ui/src/components/Combobox/types.ts new file mode 100644 index 00000000000..c942d7a6357 --- /dev/null +++ b/packages/grafana-ui/src/components/Combobox/types.ts @@ -0,0 +1,7 @@ +export const ALL_OPTION_VALUE = '__GRAFANA_INTERNAL_MULTICOMBOBOX_ALL_OPTION__'; + +export type ComboboxOption = { + label?: string; + value: T; + description?: string; +}; diff --git a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts index 23433b6560a..83eb2631a62 100644 --- a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts +++ b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts @@ -3,7 +3,6 @@ import { useMemo, useRef, useState } from 'react'; import { measureText } from '../../utils'; -import { ComboboxOption } from './Combobox'; import { MENU_ITEM_FONT_SIZE, MENU_ITEM_FONT_WEIGHT, @@ -11,6 +10,7 @@ import { MENU_OPTION_HEIGHT, POPOVER_MAX_HEIGHT, } from './getComboboxStyles'; +import { ComboboxOption } from './types'; // Only consider the first n items when calculating the width of the popover. const WIDTH_CALCULATION_LIMIT_ITEMS = 100_000; diff --git a/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts b/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts index 4ff65a7d41f..f64bd007307 100644 --- a/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts +++ b/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts @@ -3,7 +3,7 @@ import { useMeasure } from 'react-use'; import { measureText } from '../../utils'; -import { ComboboxOption } from './Combobox'; +import { ComboboxOption } from './types'; const FONT_SIZE = 12; const EXTRA_PILL_SIZE = 50; diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx index 5e98db356b8..bd047f8be99 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx @@ -3,7 +3,8 @@ import { useCallback, useMemo } from 'react'; import { BootData } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { Combobox, ComboboxOption } from '../Combobox/Combobox'; +import { Combobox } from '../Combobox/Combobox'; +import { ComboboxOption } from '../Combobox/types'; export interface Props { onChange: (weekStart: string) => void; diff --git a/packages/grafana-ui/src/components/DateTimePickers/options.ts b/packages/grafana-ui/src/components/DateTimePickers/options.ts index d96209d2bf4..8f64046cf41 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/options.ts +++ b/packages/grafana-ui/src/components/DateTimePickers/options.ts @@ -1,6 +1,6 @@ import { TimeOption } from '@grafana/data'; -import { ComboboxOption } from '../Combobox/Combobox'; +import { ComboboxOption } from '../Combobox/types'; export const quickOptions: TimeOption[] = [ { from: 'now-5m', to: 'now', display: 'Last 5 minutes' }, diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index fc76cf7eabd..900190b9acf 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -239,7 +239,8 @@ export { SelectMenuOptions } from './Select/SelectMenu'; export { getSelectStyles } from './Select/getSelectStyles'; export * from './Select/types'; -export { Combobox, type ComboboxOption } from './Combobox/Combobox'; +export { Combobox } from './Combobox/Combobox'; +export { type ComboboxOption } from './Combobox/types'; export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout'; export { Badge, type BadgeColor, type BadgeProps } from './Badge/Badge';