@grafana/ui/dist/esm/components/TextArea/TextArea.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { forwardRef } from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { useFieldContext } from '../Forms/FieldContext.mjs';
import { sharedInputStyle, getFocusStyle } from '../Forms/commonStyles.mjs';

"use strict";
const TextArea = forwardRef(
  ({
    "aria-describedby": ariaDescribedByProp,
    disabled: disabledProp,
    invalid: invalidProp,
    id: idProp,
    className,
    ...props
  }, ref) => {
    const 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 = useStyles2(getTextAreaStyle, invalid);
    return /* @__PURE__ */ jsx(
      "textarea",
      {
        ...props,
        id,
        disabled,
        "aria-describedby": ariaDescribedBy,
        className: cx(styles.textarea, className),
        ref
      }
    );
  }
);
const getTextAreaStyle = (theme, invalid = false) => ({
  textarea: cx(
    sharedInputStyle(theme),
    getFocusStyle(theme),
    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";

export { TextArea };
//# sourceMappingURL=TextArea.mjs.map