@grafana/ui/dist/esm/components/Forms/Legacy/Select/Select.mjs.map

Grafana Components Library

{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Forms/Legacy/Select/Select.tsx"],"sourcesContent":["// Libraries\nimport classNames from 'classnames';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\nimport { default as ReactSelect, components, MenuListProps } from 'react-select';\nimport { default as ReactAsyncSelect } from 'react-select/async';\nimport Creatable from 'react-select/creatable';\n\n// Components\nimport { SelectableValue, ThemeContext } from '@grafana/data';\n\nimport { ScrollContainer } from '../../../ScrollContainer/ScrollContainer';\nimport { SingleValue } from '../../../Select/SingleValue';\nimport resetSelectStyles from '../../../Select/resetSelectStyles';\nimport { SelectCommonProps, SelectAsyncProps } from '../../../Select/types';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { PopoverContent } from '../../../Tooltip/types';\n\nimport IndicatorsContainer from './IndicatorsContainer';\nimport NoOptionsMessage from './NoOptionsMessage';\nimport { SelectOption } from './SelectOption';\nimport { SelectOptionGroup } from './SelectOptionGroup';\n\n/**\n * Changes in new selects:\n * - noOptionsMessage & loadingMessage is of string type\n * - isDisabled is renamed to disabled\n */\ntype LegacyCommonProps<T> = Omit<SelectCommonProps<T>, 'noOptionsMessage' | 'disabled' | 'value' | 'loadingMessage'>;\n\ninterface AsyncProps<T> extends LegacyCommonProps<T>, Omit<SelectAsyncProps<T>, 'loadingMessage'> {\n  loadingMessage?: () => string;\n  noOptionsMessage?: () => string;\n  tooltipContent?: PopoverContent;\n  isDisabled?: boolean;\n  value?: SelectableValue<T>;\n}\n\nexport interface LegacySelectProps<T> extends LegacyCommonProps<T> {\n  tooltipContent?: PopoverContent;\n  noOptionsMessage?: () => string;\n  isDisabled?: boolean;\n  value?: SelectableValue<T>;\n}\n\nexport const MenuList = (props: MenuListProps) => {\n  return (\n    <components.MenuList {...props}>\n      <ScrollContainer showScrollIndicators overflowX=\"hidden\" maxHeight=\"inherit\">\n        {props.children}\n      </ScrollContainer>\n    </components.MenuList>\n  );\n};\n\n/** @deprecated Please use the `Select` component, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic in Storybook}. */\nexport class Select<T> extends PureComponent<LegacySelectProps<T>> {\n  declare context: React.ContextType<typeof ThemeContext>;\n  static contextType = ThemeContext;\n\n  static defaultProps: Partial<LegacySelectProps<unknown>> = {\n    className: '',\n    isDisabled: false,\n    isSearchable: true,\n    isClearable: false,\n    isMulti: false,\n    openMenuOnFocus: false,\n    autoFocus: false,\n    isLoading: false,\n    backspaceRemovesValue: true,\n    maxMenuHeight: 300,\n    tabSelectsValue: true,\n    allowCustomValue: false,\n    components: {\n      Option: SelectOption,\n      SingleValue,\n      IndicatorsContainer,\n      MenuList,\n      Group: SelectOptionGroup,\n    },\n  };\n\n  render() {\n    const {\n      defaultValue,\n      getOptionLabel,\n      getOptionValue,\n      onChange,\n      options,\n      placeholder,\n      width,\n      value,\n      className,\n      isDisabled,\n      isLoading,\n      isSearchable,\n      isClearable,\n      backspaceRemovesValue,\n      isMulti,\n      autoFocus,\n      openMenuOnFocus,\n      onBlur,\n      maxMenuHeight,\n      noOptionsMessage,\n      isOpen,\n      components,\n      tooltipContent,\n      tabSelectsValue,\n      onCloseMenu,\n      onOpenMenu,\n      allowCustomValue,\n      formatCreateLabel,\n      'aria-label': ariaLabel,\n    } = this.props;\n\n    let widthClass = '';\n    if (width) {\n      widthClass = 'width-' + width;\n    }\n\n    let SelectComponent = ReactSelect;\n    const creatableOptions: any = {};\n\n    if (allowCustomValue) {\n      SelectComponent = Creatable;\n      creatableOptions.formatCreateLabel = formatCreateLabel ?? ((input: string) => input);\n    }\n\n    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);\n    const selectComponents = { ...Select.defaultProps.components, ...components };\n    return (\n      <WrapInTooltip onCloseMenu={onCloseMenu} onOpenMenu={onOpenMenu} tooltipContent={tooltipContent} isOpen={isOpen}>\n        {(onOpenMenuInternal, onCloseMenuInternal) => {\n          return (\n            <SelectComponent\n              captureMenuScroll={false}\n              classNamePrefix=\"gf-form-select-box\"\n              className={selectClassNames}\n              components={selectComponents}\n              defaultValue={defaultValue}\n              value={value}\n              getOptionLabel={getOptionLabel}\n              getOptionValue={getOptionValue}\n              menuShouldScrollIntoView={false}\n              isSearchable={isSearchable}\n              onChange={onChange}\n              options={options}\n              placeholder={placeholder || 'Choose'}\n              styles={resetSelectStyles(this.context)}\n              isDisabled={isDisabled}\n              isLoading={isLoading}\n              isClearable={isClearable}\n              autoFocus={autoFocus}\n              onBlur={onBlur}\n              openMenuOnFocus={openMenuOnFocus}\n              maxMenuHeight={maxMenuHeight}\n              noOptionsMessage={noOptionsMessage}\n              isMulti={isMulti}\n              backspaceRemovesValue={backspaceRemovesValue}\n              menuIsOpen={isOpen}\n              onMenuOpen={onOpenMenuInternal}\n              onMenuClose={onCloseMenuInternal}\n              tabSelectsValue={tabSelectsValue}\n              aria-label={ariaLabel}\n              {...creatableOptions}\n            />\n          );\n        }}\n      </WrapInTooltip>\n    );\n  }\n}\n\n/** @deprecated Please use the `Select` component with async functionality, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic-select-async in Storybook}. */\nexport class AsyncSelect<T> extends PureComponent<AsyncProps<T>> {\n  static contextType = ThemeContext;\n\n  static defaultProps: Partial<AsyncProps<unknown>> = {\n    className: '',\n    components: {},\n    loadingMessage: () => 'Loading...',\n    isDisabled: false,\n    isClearable: false,\n    isMulti: false,\n    isSearchable: true,\n    backspaceRemovesValue: true,\n    autoFocus: false,\n    openMenuOnFocus: false,\n    maxMenuHeight: 300,\n  };\n\n  render() {\n    const {\n      defaultValue,\n      getOptionLabel,\n      getOptionValue,\n      onChange,\n      placeholder,\n      width,\n      value,\n      className,\n      loadOptions,\n      defaultOptions,\n      isLoading,\n      loadingMessage,\n      noOptionsMessage,\n      isDisabled,\n      isSearchable,\n      isClearable,\n      backspaceRemovesValue,\n      autoFocus,\n      onBlur,\n      openMenuOnFocus,\n      maxMenuHeight,\n      isMulti,\n      tooltipContent,\n      onCloseMenu,\n      onOpenMenu,\n      isOpen,\n    } = this.props;\n\n    let widthClass = '';\n    if (width) {\n      widthClass = 'width-' + width;\n    }\n\n    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);\n\n    return (\n      <WrapInTooltip onCloseMenu={onCloseMenu} onOpenMenu={onOpenMenu} tooltipContent={tooltipContent} isOpen={isOpen}>\n        {(onOpenMenuInternal, onCloseMenuInternal) => {\n          return (\n            <ReactAsyncSelect\n              captureMenuScroll={false}\n              classNamePrefix=\"gf-form-select-box\"\n              className={selectClassNames}\n              components={{\n                Option: SelectOption,\n                SingleValue,\n                IndicatorsContainer,\n                NoOptionsMessage,\n              }}\n              defaultValue={defaultValue}\n              value={value}\n              //@ts-expect-error\n              getOptionLabel={getOptionLabel}\n              //@ts-expect-error\n              getOptionValue={getOptionValue}\n              menuShouldScrollIntoView={false}\n              //@ts-expect-error\n              onChange={onChange}\n              loadOptions={loadOptions}\n              isLoading={isLoading}\n              defaultOptions={defaultOptions}\n              placeholder={placeholder || 'Choose'}\n              //@ts-expect-error\n              styles={resetSelectStyles(this.context)}\n              loadingMessage={loadingMessage}\n              noOptionsMessage={noOptionsMessage}\n              isDisabled={isDisabled}\n              isSearchable={isSearchable}\n              isClearable={isClearable}\n              autoFocus={autoFocus}\n              onBlur={onBlur}\n              openMenuOnFocus={openMenuOnFocus}\n              maxMenuHeight={maxMenuHeight}\n              isMulti={isMulti}\n              backspaceRemovesValue={backspaceRemovesValue}\n            />\n          );\n        }}\n      </WrapInTooltip>\n    );\n  }\n}\n\nexport interface TooltipWrapperProps {\n  children: (onOpenMenu: () => void, onCloseMenu: () => void) => React.ReactNode;\n  onOpenMenu?: () => void;\n  onCloseMenu?: () => void;\n  isOpen?: boolean;\n  tooltipContent?: PopoverContent;\n}\n\nexport interface TooltipWrapperState {\n  isOpenInternal: boolean;\n}\n\nexport class WrapInTooltip extends PureComponent<TooltipWrapperProps, TooltipWrapperState> {\n  state: TooltipWrapperState = {\n    isOpenInternal: false,\n  };\n\n  onOpenMenu = () => {\n    const { onOpenMenu } = this.props;\n    if (onOpenMenu) {\n      onOpenMenu();\n    }\n    this.setState({ isOpenInternal: true });\n  };\n\n  onCloseMenu = () => {\n    const { onCloseMenu } = this.props;\n    if (onCloseMenu) {\n      onCloseMenu();\n    }\n    this.setState({ isOpenInternal: false });\n  };\n\n  render() {\n    const { children, isOpen, tooltipContent } = this.props;\n    const { isOpenInternal } = this.state;\n\n    let showTooltip: boolean | undefined = undefined;\n\n    if (isOpenInternal || isOpen) {\n      showTooltip = false;\n    }\n\n    if (tooltipContent) {\n      return (\n        <Tooltip show={showTooltip} content={tooltipContent} placement=\"bottom\">\n          <div>\n            {/* div needed for tooltip */}\n            {children(this.onOpenMenu, this.onCloseMenu)}\n          </div>\n        </Tooltip>\n      );\n    } else {\n      return <div>{children(this.onOpenMenu, this.onCloseMenu)}</div>;\n    }\n  }\n}\n\nexport default Select;\n"],"names":["components"],"mappings":"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"}