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

Grafana Components Library

{"version":3,"file":"SelectOptionGroup.mjs","sources":["../../../../../../src/components/Forms/Legacy/Select/SelectOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { PureComponent } from 'react';\nimport { GroupProps } from 'react-select';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { withTheme2 } from '../../../../themes/ThemeContext';\nimport { stylesFactory } from '../../../../themes/stylesFactory';\nimport { Themeable2 } from '../../../../types/theme';\nimport { Icon } from '../../../Icon/Icon';\n\ninterface ExtendedGroupProps extends Omit<GroupProps<any, any>, 'theme'>, Themeable2 {\n  data: {\n    label: string;\n    expanded: boolean;\n    options: any[];\n  };\n}\n\ninterface State {\n  expanded: boolean;\n}\n\nconst getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme2) => {\n  return {\n    header: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'flex-start',\n      justifyItems: 'center',\n      cursor: 'pointer',\n      padding: '7px 10px',\n      width: '100%',\n      borderBottom: `1px solid ${theme.colors.background.secondary}`,\n\n      '&:hover': {\n        color: theme.colors.text.maxContrast,\n      },\n    }),\n    label: css({\n      flexGrow: 1,\n    }),\n    icon: css({\n      paddingRight: '2px',\n    }),\n  };\n});\n\nclass UnthemedSelectOptionGroup extends PureComponent<ExtendedGroupProps, State> {\n  state = {\n    expanded: false,\n  };\n\n  componentDidMount() {\n    if (this.props.data.expanded) {\n      this.setState({ expanded: true });\n    } else if (this.props.selectProps && this.props.selectProps.value) {\n      const { value } = this.props.selectProps.value;\n\n      if (value && this.props.options.some((option) => option.value === value)) {\n        this.setState({ expanded: true });\n      }\n    }\n  }\n\n  componentDidUpdate(nextProps: ExtendedGroupProps) {\n    if (nextProps.selectProps.inputValue !== '') {\n      this.setState({ expanded: true });\n    }\n  }\n\n  onToggleChildren = () => {\n    this.setState((prevState) => ({\n      expanded: !prevState.expanded,\n    }));\n  };\n\n  render() {\n    const { children, label, theme } = this.props;\n    const { expanded } = this.state;\n    const styles = getSelectOptionGroupStyles(theme);\n\n    return (\n      <div>\n        {/*React Select doesn't support focusable option group headers, this will be skipped when using\n      the keyboard */}\n        <div className={styles.header} onClick={this.onToggleChildren} role=\"presentation\">\n          <span className={styles.label}>{label}</span>\n          <Icon className={styles.icon} name={expanded ? 'angle-up' : 'angle-down'} />\n        </div>\n        {expanded && children}\n      </div>\n    );\n  }\n}\n\nexport const SelectOptionGroup = withTheme2(UnthemedSelectOptionGroup);\n"],"names":[],"mappings":"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"}