@atlaskit/inline-edit 12.2.0 → 12.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-edit
 
+## 12.2.2
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 12.2.1
+
+### Patch Changes
+
+- [`be93a207731`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be93a207731) - Action buttons now use interactive elevation design tokens. There is no change to their appearance when design tokens are not enabled.
+
 ## 12.2.0
 
 ### Minor Changes

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.0"
+  packageVersion: "12.2.2"
 };
 
 var noop = function noop() {};

package/dist/cjs/internal/buttons.js

@@ -29,10 +29,38 @@ var buttonsContainerStyles = (0, _react.css)({
   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), ")")
+  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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.DN60, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(_colors.B75, ")"),
+    color: "var(--ds-text, ".concat(_colors.B400, ")")
+  }
 });
 var buttonWrapperElevationLightStyles = (0, _react.css)({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+  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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: "var(--ds-text, ".concat(_colors.B400, ")")
+  }
 });
 var buttonWrapperBaseStyles = (0, _react.css)({
   boxSizing: 'border-box',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.2.0",
+	"version": "12.2.2",
 	"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.0"
+  packageVersion: "12.2.2"
 };
 
 const noop = () => {};

package/dist/es2019/internal/buttons.js

@@ -3,7 +3,7 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize, gridSize } from './constants';
 const buttonsContainerStyles = css({
   display: 'flex',
@@ -14,10 +14,38 @@ const buttonsContainerStyles = css({
   flexShrink: 0
 });
 const buttonWrapperElevationDarkStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
+  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
+  '& > button': {
+    backgroundColor: `var(--ds-surface-overlay, ${DN70})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: `var(--ds-surface-overlay-hovered, ${DN60})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: `var(--ds-surface-overlay-pressed, ${B75})`,
+    color: `var(--ds-text, ${B400})`
+  }
 });
 const buttonWrapperElevationLightStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+  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
+  '& > button': {
+    backgroundColor: `var(--ds-surface-overlay, ${N20A})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: `var(--ds-text, ${B400})`
+  }
 });
 const buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.2.0",
+	"version": "12.2.2",
 	"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.0"
+  packageVersion: "12.2.2"
 };
 
 var noop = function noop() {};

package/dist/esm/internal/buttons.js

@@ -3,7 +3,7 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize, gridSize } from './constants';
 var buttonsContainerStyles = css({
   display: 'flex',
@@ -14,10 +14,38 @@ var buttonsContainerStyles = css({
   flexShrink: 0
 });
 var buttonWrapperElevationDarkStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
+  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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(DN70, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(DN60, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(B75, ")"),
+    color: "var(--ds-text, ".concat(B400, ")")
+  }
 });
 var buttonWrapperElevationLightStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+  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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(N20A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(N30A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: "var(--ds-text, ".concat(B400, ")")
+  }
 });
 var buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',

package/dist/esm/version.json

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,5 @@
+/** @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

@@ -0,0 +1,13 @@
+/// <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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,8 @@
+/// <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

@@ -0,0 +1,13 @@
+/** @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

@@ -0,0 +1,68 @@
+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 {};

package/inline-edit/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/inline-edit.js",
   "module:es2019": "../dist/es2019/entry-points/inline-edit.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/inline-edit.d.ts"
+  "types": "../dist/types/entry-points/inline-edit.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/inline-edit.d.ts"
+      ]
+    }
+  }
 }

package/inline-editable-textfield/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/inline-editable-textfield.js",
   "module:es2019": "../dist/es2019/entry-points/inline-editable-textfield.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/inline-editable-textfield.d.ts"
+  "types": "../dist/types/entry-points/inline-editable-textfield.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/inline-editable-textfield.d.ts"
+      ]
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.2.0",
+  "version": "12.2.2",
   "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,6 +12,13 @@
   "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/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "homepage": "https://atlassian.design/components/inline-edit/",
@@ -52,13 +59,13 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "ast-types": "^0.13.3",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/types.d.ts"
+  "types": "../dist/types/entry-points/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/types.d.ts"
+      ]
+    }
+  }
 }