@grafana/ui/dist/cjs/components/TextArea/TextArea.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 FieldContext = require('../Forms/FieldContext.cjs');
var commonStyles = require('../Forms/commonStyles.cjs');

"use strict";
const TextArea = React.forwardRef(
  ({
    "aria-describedby": ariaDescribedByProp,
    disabled: disabledProp,
    invalid: invalidProp,
    id: idProp,
    className,
    ...props
  }, ref) => {
    const fieldContext = FieldContext.useFieldContext();
    const invalid = invalidProp != null ? invalidProp : fieldContext.invalid;
    const id = idProp != null ? idProp : fieldContext.id;
    const disabled = disabledProp != null ? disabledProp : fieldContext.disabled;
    const ariaDescribedBy = ariaDescribedByProp != null ? ariaDescribedByProp : fieldContext["aria-describedby"];
    const styles = ThemeContext.useStyles2(getTextAreaStyle, invalid);
    return /* @__PURE__ */ jsxRuntime.jsx(
      "textarea",
      {
        ...props,
        id,
        disabled,
        "aria-describedby": ariaDescribedBy,
        className: css.cx(styles.textarea, className),
        ref
      }
    );
  }
);
const getTextAreaStyle = (theme, invalid = false) => ({
  textarea: css.cx(
    commonStyles.sharedInputStyle(theme),
    commonStyles.getFocusStyle(theme),
    css.css({
      display: "block",
      borderRadius: theme.shape.radius.default,
      padding: `${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px`,
      width: "100%",
      borderColor: invalid ? theme.colors.error.border : theme.components.input.borderColor
    })
  )
});
TextArea.displayName = "TextArea";

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