@grafana/ui/dist/esm/components/Select/types.mjs.map

Grafana Components Library

{"version":3,"file":"types.mjs","sources":["../../../../src/components/Select/types.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActionMeta as SelectActionMeta,\n  CommonProps as ReactSelectCommonProps,\n  GroupBase,\n  OptionsOrGroups,\n} from 'react-select';\n\nimport { SelectableValue } from '@grafana/data';\n\nexport type SelectValue<T> = T | SelectableValue<T> | T[] | Array<SelectableValue<T>>;\nexport type ActionMeta = SelectActionMeta<{}>;\nexport type InputActionMeta = {\n  action: 'set-value' | 'input-change' | 'input-blur' | 'menu-close';\n};\nexport type LoadOptionsCallback<T> = (options: Array<SelectableValue<T>>) => void;\n\nexport enum ToggleAllState {\n  allSelected = 'allSelected',\n  indeterminate = 'indeterminate',\n  noneSelected = 'noneSelected',\n}\n\nexport interface SelectCommonProps<T> {\n  /** Aria label applied to the input field */\n  ['aria-label']?: string;\n  ['data-testid']?: string;\n  allowCreateWhileLoading?: boolean;\n  allowCustomValue?: boolean;\n  /** Focus is set to the Select when rendered*/\n  autoFocus?: boolean;\n  backspaceRemovesValue?: boolean;\n  blurInputOnSelect?: boolean;\n  captureMenuScroll?: boolean;\n  className?: string;\n  closeMenuOnSelect?: boolean;\n  /** Used for custom components. For more information, see `react-select` */\n  components?: any;\n  /** Sets the position of the createOption element in your options list. Defaults to 'last' */\n  createOptionPosition?: 'first' | 'last';\n  defaultValue?: any;\n  disabled?: boolean;\n  filterOption?: (option: SelectableValue<T>, searchQuery: string) => boolean;\n  formatOptionLabel?: (item: SelectableValue<T>, formatOptionMeta: FormatOptionLabelMeta<T>) => React.ReactNode;\n  /** Function for formatting the text that is displayed when creating a new value*/\n  formatCreateLabel?: (input: string) => React.ReactNode;\n  getOptionLabel?: (item: SelectableValue<T>) => React.ReactNode;\n  getOptionValue?: (item: SelectableValue<T>) => T | undefined;\n  hideSelectedOptions?: boolean;\n  inputValue?: string;\n  invalid?: boolean;\n  isClearable?: boolean;\n  /** The id to set on the SelectContainer component. To set the id for a label (with htmlFor), @see inputId instead */\n  id?: string;\n  isLoading?: boolean;\n  isMulti?: boolean;\n  /** The id of the search input. Use this to set a matching label with htmlFor */\n  inputId?: string;\n  isOpen?: boolean;\n  /** Disables the possibility to type into the input*/\n  isSearchable?: boolean;\n  showAllSelectedWhenOpen?: boolean;\n  maxMenuHeight?: number;\n  minMenuHeight?: number;\n  maxVisibleValues?: number;\n  menuPlacement?: 'auto' | 'bottom' | 'top';\n  menuPosition?: 'fixed' | 'absolute';\n  /**\n   * Setting to false will prevent the menu from portalling to the body.\n   */\n  menuShouldPortal?: boolean;\n  /** The message to display when no options could be found */\n  noOptionsMessage?: string;\n  onBlur?: () => void;\n  onChange: (value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void;\n  onCloseMenu?: () => void;\n  /** allowCustomValue must be enabled. Function decides what to do with that custom value. */\n  onCreateOption?: (value: string) => void;\n  onInputChange?: (value: string, actionMeta: InputActionMeta) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /** Callback which fires when the user scrolls to the bottom of the menu */\n  onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;\n  /** Callback which fires when the user scrolls to the top of the menu */\n  onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;\n  onOpenMenu?: () => void;\n  onFocus?: () => void;\n  toggleAllOptions?: {\n    enabled: boolean;\n    optionsFilter?: (v: SelectableValue<T>) => boolean;\n    determineToggleAllState?: (\n      selectedValues: Array<SelectableValue<T>>,\n      options: Array<SelectableValue<T>>\n    ) => ToggleAllState;\n  };\n  openMenuOnFocus?: boolean;\n  options?: Array<SelectableValue<T>>;\n  placeholder?: string;\n  /** item to be rendered in front of the input */\n  prefix?: JSX.Element | string | null;\n  /** Use a custom element to control Select. A proper ref to the renderControl is needed if 'portal' isn't set to null*/\n  renderControl?: ControlComponent<T>;\n  tabSelectsValue?: boolean;\n  value?: T | SelectValue<T> | null;\n  /** Will wrap the MenuList in a react-window FixedSizeVirtualList for improved performance, does not support options with \"description\" properties */\n  virtualized?: boolean;\n  /** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/\n  width?: number | 'auto';\n  isOptionDisabled?: (option: SelectableValue<T>) => boolean;\n  /** allowCustomValue must be enabled. Determines whether the \"create new\" option should be displayed based on the current input value, select value and options array. */\n  isValidNewOption?: (\n    inputValue: string,\n    value: SelectableValue<T> | null,\n    options: OptionsOrGroups<SelectableValue<T>, GroupBase<SelectableValue<T>>>\n  ) => boolean;\n  /** Message to display isLoading=true*/\n  loadingMessage?: string;\n  /** Disables wrapping of multi value values when closed */\n  noMultiValueWrap?: boolean;\n  /** Use a custom ref because generic component as output of React.forwardRef is not directly possible */\n  selectRef?: React.Ref<HTMLElement>;\n}\n\nexport interface SelectAsyncProps<T> {\n  /** When specified as boolean the loadOptions will execute when component is mounted */\n  defaultOptions?: boolean | Array<SelectableValue<T>>;\n\n  /** Asynchronously load select options */\n  loadOptions?: (query: string, cb?: LoadOptionsCallback<T>) => Promise<Array<SelectableValue<T>>> | void;\n\n  /** If cacheOptions is true, then the loaded data will be cached. The cache will remain until cacheOptions changes value. */\n  cacheOptions?: boolean;\n  /** Message to display when options are loading */\n  loadingMessage?: string;\n}\n\n/** The VirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */\nexport interface VirtualizedSelectProps<T> extends Omit<SelectCommonProps<T>, 'virtualized'> {\n  options?: Array<Pick<SelectableValue<T>, 'label' | 'value'>>;\n}\n\n/** The AsyncVirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */\nexport interface VirtualizedSelectAsyncProps<T>\n  extends Omit<SelectCommonProps<T>, 'virtualized'>,\n    SelectAsyncProps<T> {}\n\nexport interface MultiSelectCommonProps<T> extends Omit<SelectCommonProps<T>, 'onChange' | 'isMulti' | 'value'> {\n  value?: Array<SelectableValue<T>> | T[];\n  onChange: (item: Array<SelectableValue<T>>, actionMeta: ActionMeta) => {} | void;\n}\n\n// This is the type of *our* SelectBase component, not ReactSelect's prop, although\n// they should be mostly compatible.\nexport interface SelectBaseProps<T> extends SelectCommonProps<T>, SelectAsyncProps<T> {\n  invalid?: boolean;\n}\n\n// This is used for the `renderControl` prop on *our* SelectBase component\nexport interface CustomControlProps<T> {\n  ref: React.Ref<any>;\n  isOpen: boolean;\n  /** Currently selected value */\n  value?: SelectableValue<T>;\n  /** onClick will be automatically passed to custom control allowing menu toggle */\n  onClick: () => void;\n  /** onBlur will be automatically passed to custom control closing the menu on element blur */\n  onBlur: () => void;\n  disabled: boolean;\n  invalid: boolean;\n}\n\nexport type ControlComponent<T> = React.ComponentType<CustomControlProps<T>>;\n\nexport interface SelectableOptGroup<T = any> {\n  label: string;\n  options: Array<SelectableValue<T>>;\n\n  [key: string]: any;\n}\n\nexport type SelectOptions<T = any> =\n  | SelectableValue<T>\n  | Array<SelectableValue<T> | SelectableOptGroup<T> | Array<SelectableOptGroup<T>>>;\n\nexport type FormatOptionLabelMeta<T> = { context: string; inputValue: string; selectValue: Array<SelectableValue<T>> };\n\n// This is the type of `selectProps` our custom components (like SelectContainer, etc) recieve\n// It's slightly different to the base react select props because we pass in additional props directly to\n// react select\nexport type ReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = ReactSelectCommonProps<\n  Option,\n  IsMulti,\n  Group\n>['selectProps'] &\n  SelectCommonProps<Option> & {\n    autoWidth: boolean;\n  };\n\n// Use this type when implementing custom components for react select.\n// See SelectContainerProps in SelectContainer.tsx\nexport interface CustomComponentProps<Option, isMulti extends boolean, Group extends GroupBase<Option>> {\n  selectProps: ReactSelectProps<Option, isMulti, Group>;\n}\n"],"names":["ToggleAllState"],"mappings":";AAiBO,IAAK,cAAA,qBAAAA,eAAAA,KAAL;AACL,EAAAA,gBAAA,aAAA,CAAA,GAAc,aAAA;AACd,EAAAA,gBAAA,eAAA,CAAA,GAAgB,eAAA;AAChB,EAAAA,gBAAA,cAAA,CAAA,GAAe,cAAA;AAHL,EAAA,OAAAA,eAAAA;AAAA,CAAA,EAAA,cAAA,IAAA,EAAA;;;;"}