@grafana/ui/dist/esm/components/Dropdown/ButtonSelect.mjs.map

Grafana Components Library

{"version":3,"file":"ButtonSelect.mjs","sources":["../../../../src/components/Dropdown/ButtonSelect.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from '@floating-ui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { memo, HTMLAttributes, useState } from 'react';\n\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Menu } from '../Menu/Menu';\nimport { MenuItem } from '../Menu/MenuItem';\nimport { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport interface Props<T> extends HTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  options: Array<SelectableValue<T>>;\n  value?: SelectableValue<T>;\n  onChange: (item: SelectableValue<T>) => void;\n  /** @deprecated use tooltip instead, tooltipContent is not being processed in ToolbarButton*/\n  tooltipContent?: PopoverContent;\n  narrow?: boolean;\n  variant?: ToolbarButtonVariant;\n  tooltip?: string;\n}\n\n/**\n * @deprecated Use Combobox or Dropdown instead\n */\nconst ButtonSelectComponent = <T,>(props: Props<T>) => {\n  const { className, options, value, onChange, narrow, variant, ...restProps } = props;\n  const styles = useStyles2(getStyles);\n  const [isOpen, setIsOpen] = useState(false);\n\n  // the order of middleware is important!\n  const middleware = [\n    offset(0),\n    flip({\n      fallbackAxisSideDirection: 'end',\n      // see https://floating-ui.com/docs/flip#combining-with-shift\n      crossAxis: false,\n      boundary: document.body,\n    }),\n    shift(),\n  ];\n\n  const { context, refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: 'bottom-end',\n    onOpenChange: setIsOpen,\n    middleware,\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click]);\n\n  const onChangeInternal = (item: SelectableValue<T>) => {\n    onChange(item);\n    setIsOpen(false);\n  };\n\n  return (\n    <div className={styles.wrapper}>\n      <ToolbarButton\n        className={className}\n        isOpen={isOpen}\n        narrow={narrow}\n        variant={variant}\n        ref={refs.setReference}\n        {...getReferenceProps()}\n        {...restProps}\n      >\n        {value?.label || (value?.value != null ? String(value?.value) : null)}\n      </ToolbarButton>\n      {isOpen && (\n        <div className={styles.menuWrapper} ref={refs.setFloating} {...getFloatingProps()} style={floatingStyles}>\n          <FocusScope contain autoFocus restoreFocus>\n            {/*\n              tabIndex=-1 is needed here to support highlighting text within the menu when using FocusScope\n              see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668\n            */}\n            <Menu tabIndex={-1} onClose={() => setIsOpen(false)}>\n              {options.map((item) => (\n                <MenuItem\n                  key={`${item.value}`}\n                  label={item.label ?? String(item.value)}\n                  onClick={() => onChangeInternal(item)}\n                  active={item.value === value?.value}\n                  ariaChecked={item.value === value?.value}\n                  ariaLabel={item.ariaLabel || item.label}\n                  disabled={item.isDisabled}\n                  component={item.component}\n                  role=\"menuitemradio\"\n                />\n              ))}\n            </Menu>\n          </FocusScope>\n        </div>\n      )}\n    </div>\n  );\n};\n\nButtonSelectComponent.displayName = 'ButtonSelect';\n\n// needed to properly forward the generic type through React.memo\n// see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623\n// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\nexport const ButtonSelect = memo(ButtonSelectComponent) as typeof ButtonSelectComponent;\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    wrapper: css({\n      position: 'relative',\n      display: 'inline-flex',\n    }),\n    menuWrapper: css({\n      zIndex: theme.zIndex.dropdown,\n      maxHeight: '100vh',\n      overflow: 'auto',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}