@atlaskit/inline-edit/dist/esm/inline-editable-textfield.js

An inline edit displays a custom input component that switches between reading and editing on the same page.

/* inline-editable-textfield.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["errorMessage", "isInvalid"];
import "./inline-editable-textfield.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useRef } from 'react';
import { cx } from '@atlaskit/css';
import ErrorIcon from '@atlaskit/icon/core/status-error';
import InlineDialog from '@atlaskit/inline-dialog/inline-dialog';
import { Box } from '@atlaskit/primitives/compiled';
import Textfield from '@atlaskit/textfield/text-field';
import InlineEdit from './inline-edit';
var errorIconContainerStyles = {
  root: "_vwz41osq _y4ti12x7"
};
var readViewForTextFieldStyles = {
  root: "_11c8fhey _1rjcu2gc _18zr12x7 _1e0c1txw _p12f1osq _1nmz1hna"
};
var compactStyles = {
  root: "_1rjc1b66 _18zr12x7"
};

// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
// Remove links that the component does not have (such as usage). If there are no links remove them all.
/**
 * __Inline editable textfield__
 *
 * An inline editable textfield {description}.
 *
 * - [Examples](https://atlassian.design/components/{packageName}/examples)
 * - [Code](https://atlassian.design/components/{packageName}/code)
 * - [Usage](https://atlassian.design/components/{packageName}/usage)
 */
var InlineEditableTextfield = function InlineEditableTextfield(props) {
  var _props$isCompact = props.isCompact,
    isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
    defaultValue = props.defaultValue,
    placeholder = props.placeholder,
    testId = props.testId,
    providedOnCancel = props.onCancel;
  var textFieldRef = useRef();
  var onCancel = useCallback(function () {
    if (textFieldRef.current) {
      textFieldRef.current.value = defaultValue || '';
    }
    providedOnCancel === null || providedOnCancel === void 0 || providedOnCancel();
  }, [defaultValue, providedOnCancel]);
  return /*#__PURE__*/React.createElement(InlineEdit
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  , _extends({}, props, {
    onCancel: onCancel,
    defaultValue: defaultValue,
    editView: function editView(_ref) {
      var errorMessage = _ref.errorMessage,
        isInvalid = _ref.isInvalid,
        props = _objectWithoutProperties(_ref, _excluded);
      return /*#__PURE__*/React.createElement(InlineDialog, {
        isOpen: isInvalid,
        content: /*#__PURE__*/React.createElement("div", {
          id: "error-message"
        }, errorMessage),
        placement: "right"
      }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
        ref: textFieldRef,
        elemAfterInput: isInvalid && /*#__PURE__*/React.createElement(Box, {
          xcss: errorIconContainerStyles.root
        }, /*#__PURE__*/React.createElement(ErrorIcon, {
          label: "error",
          color: "var(--ds-icon-danger, #C9372C)",
          size: "small"
        })),
        testId: testId,
        isCompact: isCompact,
        autoFocus: true
      })));
    },
    readView: function readView() {
      return /*#__PURE__*/React.createElement(Box, {
        xcss: cx(readViewForTextFieldStyles.root, isCompact && compactStyles.root),
        "data-compact": isCompact,
        testId: testId && "read-view-".concat(testId)
      }, defaultValue || placeholder);
    }
  }));
};
export default InlineEditableTextfield;