@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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"}