@atlaskit/inline-edit 12.3.3 → 12.3.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-edit
 
+## 12.3.5
+
+### Patch Changes
+
+- [`7257459df07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7257459df07) - Fixed a regression: onCancel in InlinedEditableTextfield now resets the editable input to the defaultValue
+
+## 12.3.4
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
 ## 12.3.3
 
 ### Patch Changes

package/dist/cjs/inline-edit.js

@@ -32,7 +32,7 @@ var buttonStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.3.3"
+  packageVersion: "12.3.5"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {

package/dist/cjs/inline-editable-textfield.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
@@ -16,11 +17,11 @@ var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 var _constants = require("./internal/constants");
 var _excluded = ["errorMessage", "isInvalid"];
 /** @jsx jsx */
-var errorIconContainerStyles = (0, _react.css)({
+var errorIconContainerStyles = (0, _react2.css)({
   paddingRight: "var(--ds-space-075, 6px)",
   lineHeight: '100%'
 });
-var readViewForTextFieldStyles = (0, _react.css)({
+var readViewForTextFieldStyles = (0, _react2.css)({
   display: 'flex',
   maxWidth: '100%',
   minHeight: "".concat(8 * 2.5 / _constants.fontSize, "em"),
@@ -29,31 +30,43 @@ var readViewForTextFieldStyles = (0, _react.css)({
   lineHeight: 8 * 2.5 / _constants.fontSize,
   wordBreak: 'break-word'
 });
-var compactStyles = (0, _react.css)({
+var compactStyles = (0, _react2.css)({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
 });
+var noop = function noop() {};
 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;
-  return (0, _react.jsx)(_inlineEdit.default, (0, _extends2.default)({}, props, {
+    testId = props.testId,
+    _props$onCancel = props.onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel;
+  var textFieldRef = (0, _react.useRef)();
+  var onCancel = (0, _react.useCallback)(function () {
+    if (textFieldRef.current) {
+      textFieldRef.current.value = defaultValue || '';
+    }
+    providedOnCancel();
+  }, [defaultValue, providedOnCancel]);
+  return (0, _react2.jsx)(_inlineEdit.default, (0, _extends2.default)({}, props, {
+    onCancel: onCancel,
     defaultValue: defaultValue,
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
         isInvalid = _ref.isInvalid,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return (0, _react.jsx)(_inlineDialog.default, {
+      return (0, _react2.jsx)(_inlineDialog.default, {
         isOpen: isInvalid,
-        content: (0, _react.jsx)("div", {
+        content: (0, _react2.jsx)("div", {
           id: "error-message"
         }, errorMessage),
         placement: "right"
-      }, (0, _react.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
-        elemAfterInput: isInvalid && (0, _react.jsx)("div", {
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
+        ref: textFieldRef,
+        elemAfterInput: isInvalid && (0, _react2.jsx)("div", {
           css: errorIconContainerStyles
-        }, (0, _react.jsx)(_error.default, {
+        }, (0, _react2.jsx)(_error.default, {
           label: "error",
           primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
         })),
@@ -63,7 +76,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
       })));
     },
     readView: function readView() {
-      return (0, _react.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: [readViewForTextFieldStyles, isCompact && compactStyles],
         "data-compact": isCompact,
         "data-testid": testId && "read-view-".concat(testId)

package/dist/cjs/internal/buttons.js

@@ -17,24 +17,24 @@ var buttonsContainerStyles = (0, _react.css)({
   display: 'flex',
   marginTop: "var(--ds-space-075, 6px)",
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   right: 0,
   flexShrink: 0
 });
 var buttonWrapperElevationDarkStyles = (0, _react.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.DN60, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(_colors.B75, ")"),
     color: "var(--ds-text, ".concat(_colors.B400, ")")
@@ -43,15 +43,15 @@ var buttonWrapperElevationDarkStyles = (0, _react.css)({
 var buttonWrapperElevationLightStyles = (0, _react.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
     color: "var(--ds-text, ".concat(_colors.B400, ")")
@@ -62,7 +62,7 @@ var buttonWrapperBaseStyles = (0, _react.css)({
   width: "var(--ds-space-400, 32px)",
   zIndex: 200,
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius, 3px)",
   fontSize: _constants.fontSize,
   '&:last-child': {
     marginLeft: "var(--ds-space-050, 4px)"

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.3.3",
+	"version": "12.3.5",
 	"sideEffects": false
 }

package/dist/es2019/inline-edit.js

@@ -19,7 +19,7 @@ const buttonStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.3.3"
+  packageVersion: "12.3.5"
 };
 const noop = () => {};
 const InnerInlineEdit = props => {

package/dist/es2019/inline-editable-textfield.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
@@ -23,14 +24,24 @@ const readViewForTextFieldStyles = css({
 const compactStyles = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
 });
+const noop = () => {};
 const InlineEditableTextfield = props => {
   const {
     isCompact = false,
     defaultValue,
     placeholder,
-    testId
+    testId,
+    onCancel: providedOnCancel = noop
   } = props;
+  const textFieldRef = useRef();
+  const onCancel = useCallback(() => {
+    if (textFieldRef.current) {
+      textFieldRef.current.value = defaultValue || '';
+    }
+    providedOnCancel();
+  }, [defaultValue, providedOnCancel]);
   return jsx(InlineEdit, _extends({}, props, {
+    onCancel: onCancel,
     defaultValue: defaultValue,
     editView: ({
       errorMessage,
@@ -43,6 +54,7 @@ const InlineEditableTextfield = props => {
       }, errorMessage),
       placement: "right"
     }, jsx(Textfield, _extends({}, props, {
+      ref: textFieldRef,
       elemAfterInput: isInvalid && jsx("div", {
         css: errorIconContainerStyles
       }, jsx(ErrorIcon, {

package/dist/es2019/internal/buttons.js

@@ -10,24 +10,24 @@ const buttonsContainerStyles = css({
   display: 'flex',
   marginTop: "var(--ds-space-075, 6px)",
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   right: 0,
   flexShrink: 0
 });
 const buttonWrapperElevationDarkStyles = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`,
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: `var(--ds-surface-overlay, ${DN70})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: `var(--ds-surface-overlay-hovered, ${DN60})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: `var(--ds-surface-overlay-pressed, ${B75})`,
     color: `var(--ds-text, ${B400})`
@@ -36,15 +36,15 @@ const buttonWrapperElevationDarkStyles = css({
 const buttonWrapperElevationLightStyles = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: `var(--ds-surface-overlay, ${N20A})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
     color: `var(--ds-text, ${B400})`
@@ -55,7 +55,7 @@ const buttonWrapperBaseStyles = css({
   width: "var(--ds-space-400, 32px)",
   zIndex: 200,
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius, 3px)",
   fontSize: fontSize,
   '&:last-child': {
     marginLeft: "var(--ds-space-050, 4px)"

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.3.3",
+	"version": "12.3.5",
 	"sideEffects": false
 }

package/dist/esm/inline-edit.js

@@ -23,7 +23,7 @@ var buttonStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.3.3"
+  packageVersion: "12.3.5"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {

package/dist/esm/inline-editable-textfield.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["errorMessage", "isInvalid"];
 /** @jsx jsx */
+import { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
@@ -25,13 +26,24 @@ var readViewForTextFieldStyles = css({
 var compactStyles = css({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
 });
+var noop = function noop() {};
 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;
+    testId = props.testId,
+    _props$onCancel = props.onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel;
+  var textFieldRef = useRef();
+  var onCancel = useCallback(function () {
+    if (textFieldRef.current) {
+      textFieldRef.current.value = defaultValue || '';
+    }
+    providedOnCancel();
+  }, [defaultValue, providedOnCancel]);
   return jsx(InlineEdit, _extends({}, props, {
+    onCancel: onCancel,
     defaultValue: defaultValue,
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
@@ -44,6 +56,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
         }, errorMessage),
         placement: "right"
       }, jsx(Textfield, _extends({}, props, {
+        ref: textFieldRef,
         elemAfterInput: isInvalid && jsx("div", {
           css: errorIconContainerStyles
         }, jsx(ErrorIcon, {

package/dist/esm/internal/buttons.js

@@ -10,24 +10,24 @@ var buttonsContainerStyles = css({
   display: 'flex',
   marginTop: "var(--ds-space-075, 6px)",
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   right: 0,
   flexShrink: 0
 });
 var buttonWrapperElevationDarkStyles = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(DN70, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(DN60, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(B75, ")"),
     color: "var(--ds-text, ".concat(B400, ")")
@@ -36,15 +36,15 @@ var buttonWrapperElevationDarkStyles = css({
 var buttonWrapperElevationLightStyles = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(N20A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(N30A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
     color: "var(--ds-text, ".concat(B400, ")")
@@ -55,7 +55,7 @@ var buttonWrapperBaseStyles = css({
   width: "var(--ds-space-400, 32px)",
   zIndex: 200,
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  borderRadius: '3px',
+  borderRadius: "var(--ds-border-radius, 3px)",
   fontSize: fontSize,
   '&:last-child': {
     marginLeft: "var(--ds-space-050, 4px)"

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.3.3",
+	"version": "12.3.5",
 	"sideEffects": false
 }

package/dist/types/inline-editable-textfield.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InlineEditableTextfieldProps } from './types';
 declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;

package/dist/types-ts4.5/inline-editable-textfield.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InlineEditableTextfieldProps } from './types';
 declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.3.3",
+  "version": "12.3.5",
   "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
   "homepage": "https://atlassian.design/components/inline-edit/",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Inline edit",
       "category": "Components"
@@ -33,14 +33,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/inline-dialog": "^13.6.0",
-    "@atlaskit/textfield": "^5.4.0",
+    "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -48,14 +48,14 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/datetime-picker": "^12.5.0",
+    "@atlaskit/datetime-picker": "^12.7.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "^11.5.0",
     "@atlaskit/tag-group": "^10.2.0",
-    "@atlaskit/textarea": "^4.6.0",
+    "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,62 @@
+## API Report File for "@atlaskit/inline-edit"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { FieldProps } from '@atlaskit/form';
+import { jsx } from '@emotion/react';
+import { default as React_2 } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+// @public (undocumented)
+interface CommonProps extends WithAnalyticsEventsProps {
+    analyticsContext?: Record<string, any>;
+    cancelButtonLabel?: string;
+    confirmButtonLabel?: string;
+    defaultValue: any;
+    editButtonLabel?: string;
+    hideActionButtons?: boolean;
+    isRequired?: boolean;
+    keepEditViewOpenOnBlur?: boolean;
+    label?: string;
+    onCancel?: () => void;
+    readViewFitContainerWidth?: boolean;
+    startWithEditViewOpen?: boolean;
+    validate?: (value: any, formState: {}, fieldState: {}) => Promise<string | void> | string | void;
+}
+
+// @public (undocumented)
+interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
+    // (undocumented)
+    errorMessage?: string | undefined;
+}
+
+// @public (undocumented)
+const InlineEdit: <FieldValue extends unknown = string>(props: InlineEditProps<FieldValue>) => jsx.JSX.Element;
+export default InlineEdit;
+
+// @public (undocumented)
+export const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface InlineEditableTextfieldProps extends CommonProps {
+    isCompact?: boolean;
+    onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
+    placeholder: string;
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface InlineEditProps<FieldValue> extends CommonProps {
+    editView: (fieldProps: ExtendedFieldProps<FieldValue>, ref: React_2.RefObject<any>) => React_2.ReactNode;
+    isEditing?: boolean;
+    onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
+    onEdit?: () => void;
+    readView: () => React_2.ReactNode;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```