@atlaskit/inline-edit 13.4.0 → 13.5.0

package/README.md

@@ -8,4 +8,5 @@ yarn add @atlaskit/inline-edit
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/inline-edit).
+Detailed docs and example usage can be found
+[here](https://atlaskit.atlassian.com/packages/core/inline-edit).

package/__perf__/default.tsx

@@ -5,14 +5,14 @@ import Textfield from '@atlaskit/textfield';
 import InlineEdit from '../src';
 
 export default () => {
-  const [editValue, setEditValue] = useState('Field value');
-  return (
-    <InlineEdit
-      defaultValue={editValue}
-      label="Inline edit"
-      editView={(fieldProps) => <Textfield {...fieldProps} autoFocus />}
-      readView={() => <div>{editValue || 'Click to enter value'}</div>}
-      onConfirm={(value) => setEditValue(value)}
-    />
-  );
+	const [editValue, setEditValue] = useState('Field value');
+	return (
+		<InlineEdit
+			defaultValue={editValue}
+			label="Inline edit"
+			editView={(fieldProps) => <Textfield {...fieldProps} autoFocus />}
+			readView={() => <div>{editValue || 'Click to enter value'}</div>}
+			onConfirm={(value) => setEditValue(value)}
+		/>
+	);
 };

package/__perf__/inline-edit.tsx

@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
 
 import { fireEvent } from '@testing-library/dom';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
 
 import { type FieldProps } from '@atlaskit/form';
 import Textfield from '@atlaskit/textfield';
@@ -12,44 +9,42 @@ import Textfield from '@atlaskit/textfield';
 import InlineEdit from '../src';
 
 const InlineEditExample = () => {
-  const [editValue, setEditValue] = useState('Field value');
-  const renderEditView = (fieldProps: FieldProps<any>) => (
-    <Textfield {...fieldProps} autoFocus />
-  );
-  const renderReadView = () => (
-    <div data-testid="read-view">{editValue || 'Click to enter value'}</div>
-  );
-
-  return (
-    <InlineEdit
-      defaultValue={editValue}
-      label="Inline edit"
-      editView={renderEditView}
-      readView={renderReadView}
-      onConfirm={setEditValue}
-      validate={() => {}}
-    />
-  );
+	const [editValue, setEditValue] = useState('Field value');
+	const renderEditView = (fieldProps: FieldProps<any>) => <Textfield {...fieldProps} autoFocus />;
+	const renderReadView = () => (
+		<div data-testid="read-view">{editValue || 'Click to enter value'}</div>
+	);
+
+	return (
+		<InlineEdit
+			defaultValue={editValue}
+			label="Inline edit"
+			editView={renderEditView}
+			readView={renderReadView}
+			onConfirm={setEditValue}
+			validate={() => {}}
+		/>
+	);
 };
 
 const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'Change inline edit status',
-    description: 'Activate on input',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const readView = container.querySelector('[data-testid="read-view"]');
-      fireEvent.click(readView!);
-    },
-  },
+	{
+		name: 'Change inline edit status',
+		description: 'Activate on input',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const readView = container.querySelector('[data-testid="read-view"]');
+			fireEvent.click(readView!);
+		},
+	},
 ];
 
 InlineEditExample.story = {
-  name: 'InlineEdit Component',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'InlineEdit Component',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default InlineEditExample;

package/__perf__/inline-text-field.tsx

@@ -3,14 +3,14 @@ import React, { useState } from 'react';
 import { InlineEditableTextfield } from '../src';
 
 export default () => {
-  const [editValue, setEditValue] = useState('Field value');
+	const [editValue, setEditValue] = useState('Field value');
 
-  return (
-    <InlineEditableTextfield
-      defaultValue={editValue}
-      label="Inline editable textfield"
-      onConfirm={(value) => setEditValue(value)}
-      placeholder="Click to enter text"
-    />
-  );
+	return (
+		<InlineEditableTextfield
+			defaultValue={editValue}
+			label="Inline editable textfield"
+			onConfirm={(value) => setEditValue(value)}
+			placeholder="Click to enter text"
+		/>
+	);
 };

package/codemods/12.0.0-lite-mode.ts

@@ -6,10 +6,10 @@ import elevateComponentToDefault from './migrates/lift-InlineEditStateless-to-de
 import spreadErrorMessage from './migrates/spread-errorMessage-out-of-fieldProps';
 
 const transformer = createTransformer([
-  addCommentsWhenValidateFound,
-  liftInlineEditableTextField,
-  elevateComponentToDefault,
-  spreadErrorMessage,
+	addCommentsWhenValidateFound,
+	liftInlineEditableTextField,
+	elevateComponentToDefault,
+	spreadErrorMessage,
 ]);
 
 export default transformer;

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

@@ -3,10 +3,10 @@ import transformer from '../12.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('apply all transforms', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit, {InlineEditableTextfield} from "@atlaskit/inline-edit";
 
@@ -20,7 +20,7 @@ describe('apply all transforms', () => {
       </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.
@@ -63,13 +63,13 @@ describe('apply all transforms', () => {
       </Container>
     );
     `,
-    'should switch InlineEditableTextfield to a new entrypoint with default import',
-  );
+		'should switch InlineEditableTextfield to a new entrypoint with default import',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React, { PureComponent } from "react";
     import InlineEdit from "@atlaskit/inline-edit";
     import TextField from "@atlaskit/textfield";
@@ -163,7 +163,7 @@ describe('apply all transforms', () => {
       }
     }
     `,
-    `
+		`
     /* 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.
@@ -280,13 +280,13 @@ describe('apply all transforms', () => {
       }
     }
     `,
-    'ColumnEditableTitle - add comment when editView is not inline and validate is passed',
-  );
+		'ColumnEditableTitle - add comment when editView is not inline and validate is passed',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -343,7 +343,7 @@ describe('apply all transforms', () => {
       </InlineEditOffsetContainer>
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -400,6 +400,6 @@ describe('apply all transforms', () => {
       </InlineEditOffsetContainer>
     );
     `,
-    'should do nothing for editView is something other than arrow function',
-  );
+		'should do nothing for editView is something other than arrow function',
+	);
 });

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

@@ -7,10 +7,10 @@ const transformer = createTransformer([addCommentsWhenValidateFound]);
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('wrapEditViewWithInlineDialog prop', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -28,7 +28,7 @@ describe('wrapEditViewWithInlineDialog prop', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -46,13 +46,13 @@ describe('wrapEditViewWithInlineDialog prop', () => {
       />
     );
     `,
-    'should not do anything particular',
-  );
+		'should not do anything particular',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -71,7 +71,7 @@ describe('wrapEditViewWithInlineDialog prop', () => {
       />
     );
     `,
-    `
+		`
     /* 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.
@@ -113,6 +113,6 @@ describe('wrapEditViewWithInlineDialog prop', () => {
       />
     );
     `,
-    'add comment when validate function is defined',
-  );
+		'add comment when validate function is defined',
+	);
 });

package/codemods/__tests__/lift-InlineEditStateless-to-default.ts

@@ -7,10 +7,10 @@ const transformer = createTransformer([liftInlineEditStatelessToDefault]);
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('lift InlineEditStateless to default', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import { InlineEditableTextfield } from "@atlaskit/inline-edit";
 
@@ -18,7 +18,7 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEditableTextfield />
     );
     `,
-    `
+		`
     import React from "react";
     import { InlineEditableTextfield } from "@atlaskit/inline-edit";
 
@@ -26,13 +26,13 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEditableTextfield />
     );
     `,
-    'should not do anything other than stateless',
-  );
+		'should not do anything other than stateless',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import { InlineEditStateless } from "@atlaskit/inline-edit";
 
@@ -40,7 +40,7 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEditStateless />
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEditStateless from "@atlaskit/inline-edit";
 
@@ -48,13 +48,13 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEditStateless />
     );
     `,
-    'should lift the stateless to default',
-  );
+		'should lift the stateless to default',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import { InlineEditStateless as InlineEdit } from "@atlaskit/inline-edit";
 
@@ -62,7 +62,7 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEdit />
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -70,13 +70,13 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEdit />
     );
     `,
-    'should lift the stateless to default with alias',
-  );
+		'should lift the stateless to default with alias',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import { InlineEditableTextfield as InlineEdit } from "@atlaskit/inline-edit";
 
@@ -84,7 +84,7 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEdit />
     );
     `,
-    `
+		`
     import React from "react";
     import { InlineEditableTextfield as InlineEdit } from "@atlaskit/inline-edit";
 
@@ -92,13 +92,13 @@ describe('lift InlineEditStateless to default', () => {
       <InlineEdit />
     );
     `,
-    'should not lift the InlineEditableTextfield to default with alias',
-  );
+		'should not lift the InlineEditableTextfield to default with alias',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit, { InlineEditStateless } from "@atlaskit/inline-edit";
 
@@ -109,7 +109,7 @@ describe('lift InlineEditStateless to default', () => {
       </Container>
     );
     `,
-    `
+		`
     /* TODO: (from codemod) We could not automatically convert this code to the new API.
 
     This file uses \`InlineEdit\` and \`InlineEditStateless\` at the same time. We've merged these two types since version 12.0.0, and please use the merged version instead.
@@ -124,6 +124,6 @@ describe('lift InlineEditStateless to default', () => {
       </Container>
     );
     `,
-    'should add comments when cannot convert',
-  );
+		'should add comments when cannot convert',
+	);
 });

package/codemods/__tests__/lift-InlineEditableTextField-to-its-entry-point.tsx

@@ -7,10 +7,10 @@ const transformer = createTransformer([liftInlineEditableTextField]);
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('lift InlineEditableTextField to its own entry point', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import {InlineEditableTextfield} from "@atlaskit/inline-edit";
 
@@ -18,7 +18,7 @@ describe('lift InlineEditableTextField to its own entry point', () => {
       <InlineEditableTextfield />
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEditableTextfield from "@atlaskit/inline-edit/inline-editable-textfield";
 
@@ -26,13 +26,13 @@ describe('lift InlineEditableTextField to its own entry point', () => {
       <InlineEditableTextfield />
     );
     `,
-    'should switch InlineEditableTextfield to a new entrypoint',
-  );
+		'should switch InlineEditableTextfield to a new entrypoint',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import { InlineEditStateless } from "@atlaskit/inline-edit";
 
@@ -40,7 +40,7 @@ describe('lift InlineEditableTextField to its own entry point', () => {
       <InlineEditableTextfield />
     );
     `,
-    `
+		`
     import React from "react";
     import { InlineEditStateless } from "@atlaskit/inline-edit";
 
@@ -48,13 +48,13 @@ describe('lift InlineEditableTextField to its own entry point', () => {
       <InlineEditableTextfield />
     );
     `,
-    'should not do it to other things',
-  );
+		'should not do it to other things',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit, {InlineEditableTextfield} from "@atlaskit/inline-edit";
 
@@ -65,7 +65,7 @@ describe('lift InlineEditableTextField to its own entry point', () => {
       </Container>
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEditableTextfield from "@atlaskit/inline-edit/inline-editable-textfield";
     import InlineEdit from "@atlaskit/inline-edit";
@@ -77,6 +77,6 @@ describe('lift InlineEditableTextField to its own entry point', () => {
       </Container>
     );
     `,
-    'should switch InlineEditableTextfield to a new entrypoint with default import',
-  );
+		'should switch InlineEditableTextfield to a new entrypoint with default import',
+	);
 });

package/codemods/__tests__/spread-errorMessage-out-of-fieldProps.tsx

@@ -8,10 +8,10 @@ jest.autoMockOff();
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('spreadErrorMessage prop', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -30,7 +30,7 @@ describe('spreadErrorMessage prop', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -54,13 +54,13 @@ describe('spreadErrorMessage prop', () => {
       />
     );
     `,
-    'should spread errorMessage out',
-  );
+		'should spread errorMessage out',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -79,7 +79,7 @@ describe('spreadErrorMessage prop', () => {
       />
     );
     `,
-    `
+		`
     import React from "react";
     import InlineEdit from "@atlaskit/inline-edit";
 
@@ -103,13 +103,13 @@ describe('spreadErrorMessage prop', () => {
       />
     );
     `,
-    'should spread errorMessage out - with alias',
-  );
+		'should spread errorMessage out - with alias',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React, { PureComponent } from "react";
     import InlineEdit from "@atlaskit/inline-edit";
     import TextField from "@atlaskit/textfield";
@@ -202,7 +202,7 @@ describe('spreadErrorMessage prop', () => {
       }
     }
     `,
-    `
+		`
     import React, { PureComponent } from "react";
     import InlineEdit from "@atlaskit/inline-edit";
     import TextField from "@atlaskit/textfield";
@@ -295,13 +295,13 @@ describe('spreadErrorMessage prop', () => {
       }
     }
     `,
-    'ColumnEditableTitle - add comment when editView is not inline',
-  );
+		'ColumnEditableTitle - add comment when editView is not inline',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React, { PureComponent } from "react";
     import InlineEdit from "@atlaskit/inline-edit";
     import TextField from "@atlaskit/textfield";
@@ -393,7 +393,7 @@ describe('spreadErrorMessage prop', () => {
       }
     }
     `,
-    `
+		`
     import React, { PureComponent } from "react";
     import InlineEdit from "@atlaskit/inline-edit";
     import TextField from "@atlaskit/textfield";
@@ -488,6 +488,6 @@ describe('spreadErrorMessage prop', () => {
       }
     }
     `,
-    'ColumnEditableTitle - convert when editView is inline',
-  );
+		'ColumnEditableTitle - convert when editView is inline',
+	);
 });