@atlaskit/inline-edit 12.2.3 → 12.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-edit
 
+## 12.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.2.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.2.3
 
 ### Patch Changes

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

@@ -12,58 +12,56 @@ const commentMessage = `We could not automatically convert this code to the new
 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.
 `;
 
-const elevateComponentToDefault = (
-  pkg: string,
-  toPkg: string,
-  innerElementName: string,
-) => (j: core.JSCodeshift, root: any) => {
-  const importDeclarations = root
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
-    );
+const elevateComponentToDefault =
+  (pkg: string, toPkg: string, innerElementName: string) =>
+  (j: core.JSCodeshift, root: any) => {
+    const importDeclarations = root
+      .find(j.ImportDeclaration)
+      .filter(
+        (path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
+      );
 
-  const defaultSpecifier = importDeclarations
-    .find(j.ImportDefaultSpecifier)
-    .nodes();
-  const otherSpecifier = importDeclarations.find(j.ImportSpecifier).nodes();
+    const defaultSpecifier = importDeclarations
+      .find(j.ImportDefaultSpecifier)
+      .nodes();
+    const otherSpecifier = importDeclarations.find(j.ImportSpecifier).nodes();
 
-  const isImportingStateless =
-    otherSpecifier.filter(
-      (s: ImportSpecifier) =>
-        s.imported && s.imported.name === innerElementName,
-    ).length > 0;
+    const isImportingStateless =
+      otherSpecifier.filter(
+        (s: ImportSpecifier) =>
+          s.imported && s.imported.name === innerElementName,
+      ).length > 0;
 
-  if (defaultSpecifier.length > 0 && isImportingStateless) {
-    addCommentToStartOfFile({ j, base: root, message: commentMessage });
-    return;
-  }
+    if (defaultSpecifier.length > 0 && isImportingStateless) {
+      addCommentToStartOfFile({ j, base: root, message: commentMessage });
+      return;
+    }
 
-  const newDefaultSpecifier = defaultSpecifier.map(
-    (s: ImportDefaultSpecifier) => {
-      return j.importDeclaration(
-        [j.importDefaultSpecifier(s.local)],
-        j.literal(pkg),
-      );
-    },
-  );
+    const newDefaultSpecifier = defaultSpecifier.map(
+      (s: ImportDefaultSpecifier) => {
+        return j.importDeclaration(
+          [j.importDefaultSpecifier(s.local)],
+          j.literal(pkg),
+        );
+      },
+    );
 
-  const newOtherSpecifiers = otherSpecifier.map((s: ImportSpecifier) => {
-    if (s.imported.name === innerElementName) {
-      return j.importDeclaration(
-        [j.importDefaultSpecifier(s.local)],
-        j.literal(toPkg),
-      );
-    } else {
-      return j.importDeclaration([s], j.literal(pkg));
-    }
-  });
+    const newOtherSpecifiers = otherSpecifier.map((s: ImportSpecifier) => {
+      if (s.imported.name === innerElementName) {
+        return j.importDeclaration(
+          [j.importDefaultSpecifier(s.local)],
+          j.literal(toPkg),
+        );
+      } else {
+        return j.importDeclaration([s], j.literal(pkg));
+      }
+    });
 
-  importDeclarations.forEach((path: ASTPath<ImportDeclaration>) => {
-    j(path).replaceWith(newDefaultSpecifier);
-    j(path).insertBefore(newOtherSpecifiers);
-  });
-};
+    importDeclarations.forEach((path: ASTPath<ImportDeclaration>) => {
+      j(path).replaceWith(newDefaultSpecifier);
+      j(path).insertBefore(newOtherSpecifiers);
+    });
+  };
 
 export default elevateComponentToDefault(
   '@atlaskit/inline-edit',

package/codemods/migrates/lift-InlineEditableTextField-to-its-entry-point.ts

@@ -5,47 +5,45 @@ import core, {
   ImportSpecifier,
 } from 'jscodeshift';
 
-const elevateComponentToNewEntryPoint = (
-  pkg: string,
-  toPkg: string,
-  innerElementName: string,
-) => (j: core.JSCodeshift, root: any) => {
-  const importDeclarations = root
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
-    );
+const elevateComponentToNewEntryPoint =
+  (pkg: string, toPkg: string, innerElementName: string) =>
+  (j: core.JSCodeshift, root: any) => {
+    const importDeclarations = root
+      .find(j.ImportDeclaration)
+      .filter(
+        (path: ASTPath<ImportDeclaration>) => path.node.source.value === pkg,
+      );
 
-  const defaultSpecifier = importDeclarations
-    .find(j.ImportDefaultSpecifier)
-    .nodes();
-  const otherSpecifier = importDeclarations.find(j.ImportSpecifier).nodes();
+    const defaultSpecifier = importDeclarations
+      .find(j.ImportDefaultSpecifier)
+      .nodes();
+    const otherSpecifier = importDeclarations.find(j.ImportSpecifier).nodes();
 
-  const newDefaultSpecifier = defaultSpecifier.map(
-    (s: ImportDefaultSpecifier) => {
-      return j.importDeclaration(
-        [j.importDefaultSpecifier(s.local)],
-        j.literal(pkg),
-      );
-    },
-  );
+    const newDefaultSpecifier = defaultSpecifier.map(
+      (s: ImportDefaultSpecifier) => {
+        return j.importDeclaration(
+          [j.importDefaultSpecifier(s.local)],
+          j.literal(pkg),
+        );
+      },
+    );
 
-  const newOtherSpecifiers = otherSpecifier.map((s: ImportSpecifier) => {
-    if (s.imported.name === innerElementName) {
-      return j.importDeclaration(
-        [j.importDefaultSpecifier(s.local)],
-        j.literal(toPkg),
-      );
-    } else {
-      return j.importDeclaration([s], j.literal(pkg));
-    }
-  });
+    const newOtherSpecifiers = otherSpecifier.map((s: ImportSpecifier) => {
+      if (s.imported.name === innerElementName) {
+        return j.importDeclaration(
+          [j.importDefaultSpecifier(s.local)],
+          j.literal(toPkg),
+        );
+      } else {
+        return j.importDeclaration([s], j.literal(pkg));
+      }
+    });
 
-  importDeclarations.forEach((path: ASTPath<ImportDeclaration>) => {
-    j(path).replaceWith(newDefaultSpecifier);
-    j(path).insertBefore(newOtherSpecifiers);
-  });
-};
+    importDeclarations.forEach((path: ASTPath<ImportDeclaration>) => {
+      j(path).replaceWith(newDefaultSpecifier);
+      j(path).insertBefore(newOtherSpecifiers);
+    });
+  };
 
 export default elevateComponentToNewEntryPoint(
   '@atlaskit/inline-edit',

package/dist/cjs/inline-edit.js

@@ -51,7 +51,7 @@ var buttonStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.3"
+  packageVersion: "12.2.5"
 };
 
 var noop = function noop() {};

package/dist/cjs/version.json

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

package/dist/es2019/inline-edit.js

@@ -20,7 +20,7 @@ const buttonStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.3"
+  packageVersion: "12.2.5"
 };
 
 const noop = () => {};

package/dist/es2019/version.json

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

package/dist/esm/inline-edit.js

@@ -26,7 +26,7 @@ var buttonStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.3"
+  packageVersion: "12.2.5"
 };
 
 var noop = function noop() {};

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.2.3",
+  "version": "12.2.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/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "homepage": "https://atlassian.design/components/inline-edit/",
@@ -34,14 +26,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/form": "^8.8.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/inline-dialog": "^13.4.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -52,7 +44,7 @@
     "@atlaskit/datetime-picker": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/select": "^16.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "^11.4.0",
     "@atlaskit/tag-group": "^10.1.0",

package/report.api.md

@@ -1,8 +1,17 @@
-## API Report File for "@atlaskit/inline-edit".
+<!-- API Report Version: 2.2 -->
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+## API Report File for "@atlaskit/inline-edit"
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { FieldProps } from '@atlaskit/form';
@@ -11,90 +20,65 @@ import { default as React_2 } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 
-declare interface CommonProps extends WithAnalyticsEventsProps {
-  /** Additional information to be included in the `context` of analytics events that come from button. */
+// @public (undocumented)
+interface CommonProps extends WithAnalyticsEventsProps {
   analyticsContext?: Record<string, any>;
-  /** Accessibility label for the cancel action button. */
   cancelButtonLabel?: string;
-  /** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
   confirmButtonLabel?: string;
-  /** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
   defaultValue: any;
-  /** Label above the input field that communicates what value should be entered. */
+  editButtonLabel?: string;
+  hideActionButtons?: boolean;
+  isRequired?: boolean;
+  keepEditViewOpenOnBlur?: boolean;
   label?: string;
-  /** Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`. */
+  onCancel?: () => void;
+  readViewFitContainerWidth?: boolean;
+  startWithEditViewOpen?: boolean;
   validate?: (
     value: any,
     formState: {},
     fieldState: {},
-  ) => string | void | Promise<string | void>;
-  /**
-   * Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
-   * When set to true, inline edit stays in `editView` when blurred. */
-  keepEditViewOpenOnBlur?: boolean;
-  /** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
-  hideActionButtons?: boolean;
-  /** Determines whether the input value can be confirmed as empty. */
-  isRequired?: boolean;
-  /** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
-  readViewFitContainerWidth?: boolean;
-  /** Accessibility label for button, which is used to enter `editView` from keyboard. */
-  editButtonLabel?: string;
-  /** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
-  onCancel?: () => void;
-  /**
-   * Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
-   * starts in `editView`.
-   */
-  startWithEditViewOpen?: boolean;
+  ) => Promise<string | void> | string | void;
 }
 
-declare interface ExtendedFieldProps<FieldValue>
-  extends FieldProps<FieldValue> {
+// @public (undocumented)
+interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
+  // (undocumented)
   errorMessage?: string | undefined;
 }
 
-declare const InlineEdit: <FieldValue extends unknown = string>(
+// @public (undocumented)
+const InlineEdit: <FieldValue extends unknown = string>(
   props: InlineEditProps<FieldValue>,
 ) => jsx.JSX.Element;
 export default InlineEdit;
 
-export declare const InlineEditableTextfield: (
+// @public (undocumented)
+export const InlineEditableTextfield: (
   props: InlineEditableTextfieldProps,
 ) => jsx.JSX.Element;
 
-export declare interface InlineEditableTextfieldProps extends CommonProps {
-  /** Sets height of the text field to compact. The top and bottom padding is decreased. */
+// @public (undocumented)
+export interface InlineEditableTextfieldProps extends CommonProps {
   isCompact?: boolean;
-  /**
-   * Calls the `editView` handler. It confirms the changes.
-   * The field value is passed as an argument to this function.
-   */
   onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
-  /** Text shown in `readView` when the field value is an empty string. */
   placeholder: string;
-  /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
-   */
   testId?: string;
 }
 
-export declare interface InlineEditProps<FieldValue> extends CommonProps {
-  /** The component shown when user is editing (when the inline edit is not in `readView`). */
+// @public (undocumented)
+export interface InlineEditProps<FieldValue> extends CommonProps {
   editView: (
     fieldProps: ExtendedFieldProps<FieldValue>,
     ref: React_2.RefObject<any>,
   ) => React_2.ReactNode;
-  /** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
   isEditing?: boolean;
-  /**
-     Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
-     */
   onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
-  /** Handler called when readView is clicked. */
   onEdit?: () => void;
-  /** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
   readView: () => React_2.ReactNode;
 }
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/entry-points/inline-edit.d.ts

@@ -1 +0,0 @@
-export { default } from '../inline-edit';

package/dist/types-ts4.0/entry-points/inline-editable-textfield.d.ts

@@ -1 +0,0 @@
-export { default } from '../inline-editable-textfield';

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { InlineEditableTextfieldProps, InlineEditProps } from '../types';

package/dist/types-ts4.0/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './inline-edit';
-export { default as InlineEditableTextfield } from './inline-editable-textfield';
-export type { InlineEditProps, InlineEditableTextfieldProps } from './types';

package/dist/types-ts4.0/inline-edit.d.ts

@@ -1,4 +0,0 @@
-import { jsx } from '@emotion/react';
-import { InlineEditProps } from './types';
-declare const InlineEdit: <FieldValue extends unknown = string>(props: InlineEditProps<FieldValue>) => jsx.JSX.Element;
-export default InlineEdit;

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

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

package/dist/types-ts4.0/internal/buttons.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-interface ButtonsProp {
-    mode: ThemeModes;
-    confirmButtonLabel: string;
-    cancelButtonLabel: string;
-    onMouseDown: () => void;
-    onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
-}
-declare const Buttons: ({ mode, confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
-export default Buttons;

package/dist/types-ts4.0/internal/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const gridSize: number;
-export declare const fontSize: number;
-export declare const borderRadius: number;

package/dist/types-ts4.0/internal/hooks/use-button-focus-hook.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare const useButtonFocusHook: (isEditing: boolean | undefined, isEditingState: boolean) => {
-    editButtonRef: import("react").RefObject<HTMLButtonElement>;
-    editViewRef: import("react").MutableRefObject<HTMLElement | undefined>;
-    shouldBeEditing: boolean;
-    doNotFocusOnEditButton: () => boolean;
-};
-export default useButtonFocusHook;

package/dist/types-ts4.0/internal/read-view.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-interface ReadViewProps {
-    editButtonLabel: string;
-    onEditRequested: () => void;
-    postReadViewClick: () => void;
-    editButtonRef: React.RefObject<HTMLButtonElement>;
-    readViewFitContainerWidth?: boolean;
-    readView: () => React.ReactNode;
-}
-declare const ReadView: ({ editButtonLabel, onEditRequested, postReadViewClick, editButtonRef, readViewFitContainerWidth, readView, }: ReadViewProps) => jsx.JSX.Element;
-export default ReadView;

package/dist/types-ts4.0/types.d.ts

@@ -1,68 +0,0 @@
-import React from 'react';
-import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { FieldProps } from '@atlaskit/form';
-interface CommonProps extends WithAnalyticsEventsProps {
-    /** Additional information to be included in the `context` of analytics events that come from button. */
-    analyticsContext?: Record<string, any>;
-    /** Accessibility label for the cancel action button. */
-    cancelButtonLabel?: string;
-    /** Accessibility label for the confirm action button, which saves the field value into `editValue`. */
-    confirmButtonLabel?: string;
-    /** The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`. */
-    defaultValue: any;
-    /** Label above the input field that communicates what value should be entered. */
-    label?: string;
-    /** Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`. */
-    validate?: (value: any, formState: {}, fieldState: {}) => string | void | Promise<string | void>;
-    /**
-     * Sets the view when the element blurs and loses focus (this can happen when a user clicks away).
-     * When set to true, inline edit stays in `editView` when blurred. */
-    keepEditViewOpenOnBlur?: boolean;
-    /** Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field. */
-    hideActionButtons?: boolean;
-    /** Determines whether the input value can be confirmed as empty. */
-    isRequired?: boolean;
-    /** Determines whether the `readView` has 100% width within its container, or whether it fits the content. */
-    readViewFitContainerWidth?: boolean;
-    /** Accessibility label for button, which is used to enter `editView` from keyboard. */
-    editButtonLabel?: string;
-    /** Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked. */
-    onCancel?: () => void;
-    /**
-     * Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit
-     * starts in `editView`.
-     */
-    startWithEditViewOpen?: boolean;
-}
-export interface ExtendedFieldProps<FieldValue> extends FieldProps<FieldValue> {
-    errorMessage?: string | undefined;
-}
-export interface InlineEditProps<FieldValue> extends CommonProps {
-    /** The component shown when user is editing (when the inline edit is not in `readView`). */
-    editView: (fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode;
-    /** Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit. */
-    isEditing?: boolean;
-    /**
-    Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
-     */
-    onConfirm: (value: any, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Handler called when readView is clicked. */
-    onEdit?: () => void;
-    /** The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.*/
-    readView: () => React.ReactNode;
-}
-export interface InlineEditableTextfieldProps extends CommonProps {
-    /** Sets height of the text field to compact. The top and bottom padding is decreased. */
-    isCompact?: boolean;
-    /**
-     * Calls the `editView` handler. It confirms the changes.
-     * The field value is passed as an argument to this function.
-     */
-    onConfirm: (value: string, analyticsEvent: UIAnalyticsEvent) => void;
-    /** Text shown in `readView` when the field value is an empty string. */
-    placeholder: string;
-    /** A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
-     */
-    testId?: string;
-}
-export {};