@atlaskit/inline-edit/dist/es2019/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 "./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';
const errorIconContainerStyles = {
  root: "_vwz41osq _y4ti12x7"
};
const readViewForTextFieldStyles = {
  root: "_11c8fhey _1rjcu2gc _18zr12x7 _1e0c1txw _p12f1osq _1nmz1hna"
};
const 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)
 */
const InlineEditableTextfield = props => {
  const {
    isCompact = false,
    defaultValue,
    placeholder,
    testId,
    onCancel: providedOnCancel
  } = props;
  const textFieldRef = useRef();
  const onCancel = useCallback(() => {
    if (textFieldRef.current) {
      textFieldRef.current.value = defaultValue || '';
    }
    providedOnCancel === null || providedOnCancel === void 0 ? 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: ({
      errorMessage,
      isInvalid,
      ...props
    }) => /*#__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: () => /*#__PURE__*/React.createElement(Box, {
      xcss: cx(readViewForTextFieldStyles.root, isCompact && compactStyles.root),
      "data-compact": isCompact,
      testId: testId && `read-view-${testId}`
    }, defaultValue || placeholder)
  }));
};
export default InlineEditableTextfield;