@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    }),\n  };\n};\n"],"names":[],"mappings":"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"}