@atlaskit/inline-edit 12.3.2 → 12.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-edit
 
+## 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
+
+- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
 ## 12.3.2
 
 ### 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.2"
+  packageVersion: "12.3.4"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {

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

@@ -23,10 +23,10 @@ var errorIconContainerStyles = (0, _react.css)({
 var readViewForTextFieldStyles = (0, _react.css)({
   display: 'flex',
   maxWidth: '100%',
-  minHeight: "".concat(_constants.gridSize * 2.5 / _constants.fontSize, "em"),
+  minHeight: "".concat(8 * 2.5 / _constants.fontSize, "em"),
   padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
   fontSize: _constants.fontSize,
-  lineHeight: _constants.gridSize * 2.5 / _constants.fontSize,
+  lineHeight: 8 * 2.5 / _constants.fontSize,
   wordBreak: 'break-word'
 });
 var compactStyles = (0, _react.css)({

package/dist/cjs/internal/buttons.js

@@ -17,9 +17,9 @@ 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
 });
@@ -59,10 +59,10 @@ var buttonWrapperElevationLightStyles = (0, _react.css)({
 });
 var buttonWrapperBaseStyles = (0, _react.css)({
   boxSizing: 'border-box',
-  width: _constants.gridSize * 4,
+  width: "var(--ds-space-400, 32px)",
   zIndex: 200,
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  borderRadius: _constants.gridSize / 2 - 1,
+  borderRadius: "var(--ds-border-radius, 3px)",
   fontSize: _constants.fontSize,
   '&:last-child': {
     marginLeft: "var(--ds-space-050, 4px)"

package/dist/cjs/internal/constants.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridSize = exports.fontSize = exports.borderRadius = void 0;
+exports.fontSize = exports.borderRadius = void 0;
 var _constants = require("@atlaskit/theme/constants");
-var gridSize = (0, _constants.gridSize)();
-exports.gridSize = gridSize;
 var fontSize = (0, _constants.fontSize)();
 exports.fontSize = fontSize;
 var borderRadius = (0, _constants.borderRadius)();

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.3.2",
+	"version": "12.3.4",
 	"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.2"
+  packageVersion: "12.3.4"
 };
 const noop = () => {};
 const InnerInlineEdit = props => {

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

@@ -6,7 +6,7 @@ import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
 import InlineEdit from './inline-edit';
-import { fontSize, gridSize } from './internal/constants';
+import { fontSize } from './internal/constants';
 const errorIconContainerStyles = css({
   paddingRight: "var(--ds-space-075, 6px)",
   lineHeight: '100%'
@@ -14,10 +14,10 @@ const errorIconContainerStyles = css({
 const readViewForTextFieldStyles = css({
   display: 'flex',
   maxWidth: '100%',
-  minHeight: `${gridSize * 2.5 / fontSize}em`,
+  minHeight: `${8 * 2.5 / fontSize}em`,
   padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`,
   fontSize: fontSize,
-  lineHeight: gridSize * 2.5 / fontSize,
+  lineHeight: 8 * 2.5 / fontSize,
   wordBreak: 'break-word'
 });
 const compactStyles = css({

package/dist/es2019/internal/buttons.js

@@ -5,14 +5,14 @@ import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
 import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
-import { fontSize, gridSize } from './constants';
+import { fontSize } from './constants';
 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
 });
@@ -52,10 +52,10 @@ const buttonWrapperElevationLightStyles = css({
 });
 const buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',
-  width: gridSize * 4,
+  width: "var(--ds-space-400, 32px)",
   zIndex: 200,
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: gridSize / 2 - 1,
+  borderRadius: "var(--ds-border-radius, 3px)",
   fontSize: fontSize,
   '&:last-child': {
     marginLeft: "var(--ds-space-050, 4px)"

package/dist/es2019/internal/constants.js

@@ -1,4 +1,3 @@
-import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
-export const gridSize = getGridSize();
+import { borderRadius as getBorderRadius, fontSize as getFontSize } from '@atlaskit/theme/constants';
 export const fontSize = getFontSize();
 export const borderRadius = getBorderRadius();

package/dist/es2019/version.json

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

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

@@ -8,7 +8,7 @@ import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
 import InlineEdit from './inline-edit';
-import { fontSize, gridSize } from './internal/constants';
+import { fontSize } from './internal/constants';
 var errorIconContainerStyles = css({
   paddingRight: "var(--ds-space-075, 6px)",
   lineHeight: '100%'
@@ -16,10 +16,10 @@ var errorIconContainerStyles = css({
 var readViewForTextFieldStyles = css({
   display: 'flex',
   maxWidth: '100%',
-  minHeight: "".concat(gridSize * 2.5 / fontSize, "em"),
+  minHeight: "".concat(8 * 2.5 / fontSize, "em"),
   padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
   fontSize: fontSize,
-  lineHeight: gridSize * 2.5 / fontSize,
+  lineHeight: 8 * 2.5 / fontSize,
   wordBreak: 'break-word'
 });
 var compactStyles = css({

package/dist/esm/internal/buttons.js

@@ -5,14 +5,14 @@ import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
 import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
-import { fontSize, gridSize } from './constants';
+import { fontSize } from './constants';
 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
 });
@@ -52,10 +52,10 @@ var buttonWrapperElevationLightStyles = css({
 });
 var buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',
-  width: gridSize * 4,
+  width: "var(--ds-space-400, 32px)",
   zIndex: 200,
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  borderRadius: gridSize / 2 - 1,
+  borderRadius: "var(--ds-border-radius, 3px)",
   fontSize: fontSize,
   '&:last-child': {
     marginLeft: "var(--ds-space-050, 4px)"

package/dist/esm/internal/constants.js

@@ -1,4 +1,3 @@
-import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
-export var gridSize = getGridSize();
+import { borderRadius as getBorderRadius, fontSize as getFontSize } from '@atlaskit/theme/constants';
 export var fontSize = getFontSize();
 export var borderRadius = getBorderRadius();

package/dist/esm/version.json

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

package/dist/types/internal/constants.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.3.2",
+  "version": "12.3.4",
   "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.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.11.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)
+
+```