@atlaskit/inline-edit 14.3.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/inline-edit
 
+## 15.0.0
+
+### Major Changes
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.3.1
+
+### Patch Changes
+
+- [#116462](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116462)
+  [`6f296bda0bac5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6f296bda0bac5) -
+  Remove old codemods and update dependencies.
+
 ## 14.3.0
 
 ### Minor Changes

package/dist/cjs/inline-edit.js

@@ -29,7 +29,7 @@ var fieldStyles = null;
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "14.3.0"
+  packageVersion: "15.0.0"
 };
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,

package/dist/es2019/inline-edit.js

@@ -15,7 +15,7 @@ const fieldStyles = null;
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "14.3.0"
+  packageVersion: "15.0.0"
 };
 const InnerInlineEdit = props => {
   const {

package/dist/esm/inline-edit.js

@@ -19,7 +19,7 @@ var fieldStyles = null;
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "14.3.0"
+  packageVersion: "15.0.0"
 };
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "14.3.0",
+	"version": "15.0.0",
 	"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/"
@@ -34,44 +34,42 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^10.3.0",
-		"@atlaskit/button": "^20.5.0",
+		"@atlaskit/analytics-next": "^11.0.0",
+		"@atlaskit/button": "^21.0.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/css": "^0.9.0",
-		"@atlaskit/form": "^11.2.0",
-		"@atlaskit/icon": "^23.10.0",
-		"@atlaskit/inline-dialog": "^16.2.0",
+		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/form": "^12.0.0",
+		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/inline-dialog": "^17.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^13.6.0",
-		"@atlaskit/textfield": "^7.0.0",
-		"@atlaskit/theme": "^16.0.0",
-		"@atlaskit/tokens": "^3.3.0",
-		"@atlaskit/visually-hidden": "^1.6.0",
+		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/textfield": "^8.0.0",
+		"@atlaskit/theme": "^17.0.0",
+		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/visually-hidden": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.2"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/datetime-picker": "^15.13.0",
+		"@atlaskit/datetime-picker": "^16.0.0",
 		"@atlaskit/docs": "*",
-		"@atlaskit/ds-lib": "^3.5.0",
-		"@atlaskit/heading": "^4.3.0",
+		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/heading": "^5.0.0",
 		"@atlaskit/link": "*",
-		"@atlaskit/section-message": "^6.9.0",
-		"@atlaskit/select": "^18.10.0",
+		"@atlaskit/section-message": "^8.0.0",
+		"@atlaskit/select": "^19.0.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tag": "^13.1.0",
-		"@atlaskit/tag-group": "^11.2.0",
-		"@atlaskit/textarea": "^7.1.0",
+		"@atlaskit/tag": "^14.0.0",
+		"@atlaskit/tag-group": "^12.0.0",
+		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^13.4.0",
-		"ast-types": "^0.13.3",
-		"jscodeshift": "^0.13.0",
 		"react-dom": "^18.2.0",
 		"react-select-event": "^5.5.0",
 		"typescript": "~5.4.2"

package/codemods/12.0.0-lite-mode.ts

@@ -1,15 +0,0 @@
-import { createTransformer } from '@atlaskit/codemod-utils';
-
-import addCommentsWhenValidateFound from './migrates/add-comments-when-validate-found';
-import liftInlineEditableTextField from './migrates/lift-InlineEditableTextField-to-its-entry-point';
-import elevateComponentToDefault from './migrates/lift-InlineEditStateless-to-default';
-import spreadErrorMessage from './migrates/spread-errorMessage-out-of-fieldProps';
-
-const transformer = createTransformer([
-	addCommentsWhenValidateFound,
-	liftInlineEditableTextField,
-	elevateComponentToDefault,
-	spreadErrorMessage,
-]);
-
-export default transformer;

package/codemods/__tests__/12.0.0-lite-mode.tsx

@@ -1,405 +0,0 @@
-import transformer from '../12.0.0-lite-mode';
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('apply all transforms', () => {
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from "react";
-    import InlineEdit, {InlineEditableTextfield} from "@atlaskit/inline-edit";
-
-    export default () => (
-      <Container>
-        <InlineEdit
-          editView={fieldProps => <Textfield {...fieldProps} autoFocus />}
-          validate={() => {}}
-        />
-        <InlineEditableTextfield />
-      </Container>
-    );
-    `,
-		`
-    /* TODO: (from codemod) We could not automatically convert this code to the new API.
-
-    This file uses \`inline-edit\`’s \`validate\` prop which previously would use \`react-loadable\` and the \`inline-dialog\` packages. Version 12.0.0 of \`inline-edit\` now no longer includes these dependencies out of the box and instead allows you to compose your own experience.
-
-    If you are using an editable textfield you can move over to the \`@atlaskit/inline-edit/inline-editable-textfield\` instead which comes with the previous error message behavior.
-
-    To migrate you can use the \`isInvalid\` and \`errorMessage\` props passed to \`editView\`, like so:
-
-    \`\`\`ts
-    import InlineDialog from '@atlaskit/inline-dialog';
-    import InlineEdit from '@atlaskit/inline-edit';
-
-    const MyEditView = (
-      <InlineEdit
-        editView={({ errorMessage, isInvalid, ...props }) => (
-          <InlineDialog content={errorMessage} isOpen={isInvalid}>
-            <Textfield {...props} />
-          </InlineDialog>
-        )}
-      />
-    );
-    \`\`\`
-     */
-    import React from "react";
-    import InlineEditableTextfield from "@atlaskit/inline-edit/inline-editable-textfield";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <Container>
-        <InlineEdit
-          editView={(
-            {
-              errorMessage,
-              ...fieldProps
-            }
-          ) => <Textfield {...fieldProps} autoFocus />}
-          validate={() => {}}
-        />
-        <InlineEditableTextfield />
-      </Container>
-    );
-    `,
-		'should switch InlineEditableTextfield to a new entrypoint with default import',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React, { PureComponent } from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-    import TextField from "@atlaskit/textfield";
-
-    export default class ColumnEditableTitle extends PureComponent {
-      handleChange = (event) => {
-        this.setState({ editValue: event.target.value });
-      };
-
-      handleEditChange = () => {
-        this.setState({ isEditing: true });
-        if (this.props.onEditChange) {
-          this.props.onEditChange(true);
-        }
-      };
-
-      handleConfirm = () => {
-        const newValue = this.state.editValue.trim();
-
-        if (isBlank(newValue) || hasNotChange(newValue, this.props.text)) {
-          this.handleCancel();
-        } else {
-          this.setState({ isEditing: false });
-          this.props.onConfirm(this.props.columnId, newValue);
-          if (this.props.onEditChange) {
-            this.props.onEditChange(false);
-          }
-        }
-      };
-
-      handleCancel = () => {
-        this.setState({
-          editValue: this.props.text,
-          isEditing: false,
-        });
-        this.props.onCancel(this.props.columnId);
-        if (isNotNewColumn(this.props) && this.props.onEditChange) {
-          this.props.onEditChange(false);
-        }
-      };
-
-      handleKeyDown = (event) => {
-        if (isEscape(event)) {
-          this.handleCancel();
-        }
-      };
-
-      renderReading = () => (
-        <Reading>
-          <ColumnTitle {...this.props} text={this.state.editValue} />
-        </Reading>
-      );
-
-      renderEditing = (fieldProps) => (
-        <TextField
-          {...fieldProps}
-          autoFocus
-          value={this.state.editValue}
-          onChange={this.handleChange}
-          onMouseDown={(event) => event.stopPropagation()}
-          onKeyDown={this.handleKeyDown}
-          isCompact
-        />
-      );
-
-      render() {
-        const { isDisabled } = this.props;
-
-        // if this component is disabled or in case this component belongs to a
-        // new column (id < 0) and is no longer being edited then <ColumnTitle/>
-        // should be rendered instead (not in editable mode).
-        const shouldRenderColumnTitle =
-          isDisabled || (isNewColumn(this.props) && !this.state.isEditing);
-
-        return shouldRenderColumnTitle ? (
-          <ColumnTitle {...this.props} text={this.state.editValue} />
-        ) : (
-          <Container>
-            <InlineEdit
-              defaultValue={this.state.editValue}
-              startWithEditViewOpen
-              validate={() => {}}
-              editView={this.renderEditing}
-              readView={this.renderReading}
-              onConfirm={this.handleConfirm}
-              // OnCancel will be exposed back once https://product-fabric.atlassian.net/browse/DST-1865 is released
-              onCancel={this.handleCancel}
-            />
-          </Container>
-        );
-      }
-    }
-    `,
-		`
-    /* TODO: (from codemod) We could not automatically convert this code to the new API.
-
-    This file uses \`inline-edit\`’s \`validate\` prop which previously would use \`react-loadable\` and the \`inline-dialog\` packages. Version 12.0.0 of \`inline-edit\` now no longer includes these dependencies out of the box and instead allows you to compose your own experience.
-
-    If you are using an editable textfield you can move over to the \`@atlaskit/inline-edit/inline-editable-textfield\` instead which comes with the previous error message behavior.
-
-    To migrate you can use the \`isInvalid\` and \`errorMessage\` props passed to \`editView\`, like so:
-
-    \`\`\`ts
-    import InlineDialog from '@atlaskit/inline-dialog';
-    import InlineEdit from '@atlaskit/inline-edit';
-
-    const MyEditView = (
-      <InlineEdit
-        editView={({ errorMessage, isInvalid, ...props }) => (
-          <InlineDialog content={errorMessage} isOpen={isInvalid}>
-            <Textfield {...props} />
-          </InlineDialog>
-        )}
-      />
-    );
-    \`\`\`
-     */
-    import React, { PureComponent } from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-    import TextField from "@atlaskit/textfield";
-
-    export default class ColumnEditableTitle extends PureComponent {
-      handleChange = (event) => {
-        this.setState({ editValue: event.target.value });
-      };
-
-      handleEditChange = () => {
-        this.setState({ isEditing: true });
-        if (this.props.onEditChange) {
-          this.props.onEditChange(true);
-        }
-      };
-
-      handleConfirm = () => {
-        const newValue = this.state.editValue.trim();
-
-        if (isBlank(newValue) || hasNotChange(newValue, this.props.text)) {
-          this.handleCancel();
-        } else {
-          this.setState({ isEditing: false });
-          this.props.onConfirm(this.props.columnId, newValue);
-          if (this.props.onEditChange) {
-            this.props.onEditChange(false);
-          }
-        }
-      };
-
-      handleCancel = () => {
-        this.setState({
-          editValue: this.props.text,
-          isEditing: false,
-        });
-        this.props.onCancel(this.props.columnId);
-        if (isNotNewColumn(this.props) && this.props.onEditChange) {
-          this.props.onEditChange(false);
-        }
-      };
-
-      handleKeyDown = (event) => {
-        if (isEscape(event)) {
-          this.handleCancel();
-        }
-      };
-
-      renderReading = () => (
-        <Reading>
-          <ColumnTitle {...this.props} text={this.state.editValue} />
-        </Reading>
-      );
-
-      renderEditing = (fieldProps) => (
-        <TextField
-          {...fieldProps}
-          autoFocus
-          value={this.state.editValue}
-          onChange={this.handleChange}
-          onMouseDown={(event) => event.stopPropagation()}
-          onKeyDown={this.handleKeyDown}
-          isCompact
-        />
-      );
-
-      render() {
-        const { isDisabled } = this.props;
-
-        // if this component is disabled or in case this component belongs to a
-        // new column (id < 0) and is no longer being edited then <ColumnTitle/>
-        // should be rendered instead (not in editable mode).
-        const shouldRenderColumnTitle =
-          isDisabled || (isNewColumn(this.props) && !this.state.isEditing);
-
-        return shouldRenderColumnTitle ? (
-          <ColumnTitle {...this.props} text={this.state.editValue} />
-        ) : (
-          <Container>
-            <InlineEdit
-              defaultValue={this.state.editValue}
-              startWithEditViewOpen
-              validate={() => {}}
-              editView={this.renderEditing}
-              readView={this.renderReading}
-              onConfirm={this.handleConfirm}
-              // OnCancel will be exposed back once https://product-fabric.atlassian.net/browse/DST-1865 is released
-              onCancel={this.handleCancel}
-            />
-          </Container>
-        );
-      }
-    }
-    `,
-		'ColumnEditableTitle - add comment when editView is not inline and validate is passed',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <InlineEditOffsetContainer>
-        <InlineEdit
-            {...inlineEditProps}
-            label={label}
-            editButtonLabel={intl.formatMessage(
-                inlineEditableMessages.editButtonLabel,
-                i18nValues,
-            )}
-            confirmButtonLabel={intl.formatMessage(
-                inlineEditableMessages.confirmButtonLabel,
-                i18nValues,
-            )}
-            cancelButtonLabel={intl.formatMessage(
-                inlineEditableMessages.cancelButtonLabel,
-                i18nValues,
-            )}
-            isLabelHidden
-            isFitContainerWidthReadView
-            shouldConfirmOnEnter
-            isWaiting={isWaiting}
-            isInvalid={isInvalid}
-            invalidMessage={invalidMessage}
-            editView={
-                // We forward props from Title to SingleLineTextInput
-                // so the props InlineEdit injets are passed through.
-                <TitleThatForwardsProps>
-                    <SingleLineTextInput
-                        isEditing
-                        isInitiallySelected
-                        style={inheritStyles}
-                        onChange={(e) =>
-                            inlineEditProps.onChange(e.target.value)
-                        }
-                        value={inlineEditProps.value}
-                    />
-                </TitleThatForwardsProps>
-            }
-            readView={
-                // We forward props from Title to SingleLineTextInput
-                // so the props InlineEdit injets are passed through.
-                <TitleThatForwardsProps>
-                    <SingleLineTextInput
-                        style={inheritStyles}
-                        isEditing={false}
-                        value={children}
-                    />
-                </TitleThatForwardsProps>
-            }
-        />
-      </InlineEditOffsetContainer>
-    );
-    `,
-		`
-    import React from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <InlineEditOffsetContainer>
-        <InlineEdit
-            {...inlineEditProps}
-            label={label}
-            editButtonLabel={intl.formatMessage(
-                inlineEditableMessages.editButtonLabel,
-                i18nValues,
-            )}
-            confirmButtonLabel={intl.formatMessage(
-                inlineEditableMessages.confirmButtonLabel,
-                i18nValues,
-            )}
-            cancelButtonLabel={intl.formatMessage(
-                inlineEditableMessages.cancelButtonLabel,
-                i18nValues,
-            )}
-            isLabelHidden
-            isFitContainerWidthReadView
-            shouldConfirmOnEnter
-            isWaiting={isWaiting}
-            isInvalid={isInvalid}
-            invalidMessage={invalidMessage}
-            editView={
-                // We forward props from Title to SingleLineTextInput
-                // so the props InlineEdit injets are passed through.
-                <TitleThatForwardsProps>
-                    <SingleLineTextInput
-                        isEditing
-                        isInitiallySelected
-                        style={inheritStyles}
-                        onChange={(e) =>
-                            inlineEditProps.onChange(e.target.value)
-                        }
-                        value={inlineEditProps.value}
-                    />
-                </TitleThatForwardsProps>
-            }
-            readView={
-                // We forward props from Title to SingleLineTextInput
-                // so the props InlineEdit injets are passed through.
-                <TitleThatForwardsProps>
-                    <SingleLineTextInput
-                        style={inheritStyles}
-                        isEditing={false}
-                        value={children}
-                    />
-                </TitleThatForwardsProps>
-            }
-        />
-      </InlineEditOffsetContainer>
-    );
-    `,
-		'should do nothing for editView is something other than arrow function',
-	);
-});

package/codemods/__tests__/add-comments-when-validate-found.ts

@@ -1,118 +0,0 @@
-import { createTransformer } from '@atlaskit/codemod-utils';
-
-import addCommentsWhenValidateFound from '../migrates/add-comments-when-validate-found';
-
-const transformer = createTransformer([addCommentsWhenValidateFound]);
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('wrapEditViewWithInlineDialog prop', () => {
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <InlineEdit
-        defaultValue={editValue}
-        label="Inline edit"
-        editView={fieldProps => <Textfield {...fieldProps} autoFocus />}
-        readView={() => (
-          <ReadViewContainer data-testid="read-view">
-            {editValue || 'Click to enter value'}
-          </ReadViewContainer>
-        )}
-        onConfirm={value => setEditValue(value)}
-      />
-    );
-    `,
-		`
-    import React from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <InlineEdit
-        defaultValue={editValue}
-        label="Inline edit"
-        editView={fieldProps => <Textfield {...fieldProps} autoFocus />}
-        readView={() => (
-          <ReadViewContainer data-testid="read-view">
-            {editValue || 'Click to enter value'}
-          </ReadViewContainer>
-        )}
-        onConfirm={value => setEditValue(value)}
-      />
-    );
-    `,
-		'should not do anything particular',
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <InlineEdit
-        defaultValue={editValue}
-        label="Inline edit"
-        editView={fieldProps => <Textfield {...fieldProps} autoFocus />}
-        readView={() => (
-          <ReadViewContainer data-testid="read-view">
-            {editValue || 'Click to enter value'}
-          </ReadViewContainer>
-        )}
-        onConfirm={value => setEditValue(value)}
-        validate={() => {}}
-      />
-    );
-    `,
-		`
-    /* TODO: (from codemod) We could not automatically convert this code to the new API.
-
-    This file uses \`inline-edit\`’s \`validate\` prop which previously would use \`react-loadable\` and the \`inline-dialog\` packages. Version 12.0.0 of \`inline-edit\` now no longer includes these dependencies out of the box and instead allows you to compose your own experience.
-
-    If you are using an editable textfield you can move over to the \`@atlaskit/inline-edit/inline-editable-textfield\` instead which comes with the previous error message behavior.
-
-    To migrate you can use the \`isInvalid\` and \`errorMessage\` props passed to \`editView\`, like so:
-
-    \`\`\`ts
-    import InlineDialog from '@atlaskit/inline-dialog';
-    import InlineEdit from '@atlaskit/inline-edit';
-
-    const MyEditView = (
-      <InlineEdit
-        editView={({ errorMessage, isInvalid, ...props }) => (
-          <InlineDialog content={errorMessage} isOpen={isInvalid}>
-            <Textfield {...props} />
-          </InlineDialog>
-        )}
-      />
-    );
-    \`\`\`
-     */
-    import React from "react";
-    import InlineEdit from "@atlaskit/inline-edit";
-
-    export default () => (
-      <InlineEdit
-        defaultValue={editValue}
-        label="Inline edit"
-        editView={fieldProps => <Textfield {...fieldProps} autoFocus />}
-        readView={() => (
-          <ReadViewContainer data-testid="read-view">
-            {editValue || 'Click to enter value'}
-          </ReadViewContainer>
-        )}
-        onConfirm={value => setEditValue(value)}
-        validate={() => {}}
-      />
-    );
-    `,
-		'add comment when validate function is defined',
-	);
-});