@grafana/ui/dist/cjs/components/Forms/Legacy/Select/SelectOptionGroup.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../../../themes/ThemeContext.cjs');
var stylesFactory = require('../../../../themes/stylesFactory.cjs');
var Icon = require('../../../Icon/Icon.cjs');

"use strict";
const getSelectOptionGroupStyles = stylesFactory.stylesFactory((theme) => {
  return {
    header: css.css({
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-start",
      justifyItems: "center",
      cursor: "pointer",
      padding: "7px 10px",
      width: "100%",
      borderBottom: `1px solid ${theme.colors.background.secondary}`,
      "&:hover": {
        color: theme.colors.text.maxContrast
      }
    }),
    label: css.css({
      flexGrow: 1
    }),
    icon: css.css({
      paddingRight: "2px"
    })
  };
});
class UnthemedSelectOptionGroup extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      expanded: false
    };
    this.onToggleChildren = () => {
      this.setState((prevState) => ({
        expanded: !prevState.expanded
      }));
    };
  }
  componentDidMount() {
    if (this.props.data.expanded) {
      this.setState({ expanded: true });
    } else if (this.props.selectProps && this.props.selectProps.value) {
      const { value } = this.props.selectProps.value;
      if (value && this.props.options.some((option) => option.value === value)) {
        this.setState({ expanded: true });
      }
    }
  }
  componentDidUpdate(nextProps) {
    if (nextProps.selectProps.inputValue !== "") {
      this.setState({ expanded: true });
    }
  }
  render() {
    const { children, label, theme } = this.props;
    const { expanded } = this.state;
    const styles = getSelectOptionGroupStyles(theme);
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, onClick: this.onToggleChildren, role: "presentation", children: [
        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: label }),
        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: styles.icon, name: expanded ? "angle-up" : "angle-down" })
      ] }),
      expanded && children
    ] });
  }
}
const SelectOptionGroup = ThemeContext.withTheme2(UnthemedSelectOptionGroup);

exports.SelectOptionGroup = SelectOptionGroup;
//# sourceMappingURL=SelectOptionGroup.cjs.map