@atlaskit/inline-edit 12.1.2 → 12.1.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/inline-edit
 
+## 12.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.5
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 12.1.4
+
+### Patch Changes
+
+- [`d9d76592b37`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d76592b37) - This change bumps the @atlaskit/inline-dialog dependency to the latest version 13.1.8. This fixes a bug where the inline dialog opens incorrectly.
+
+## 12.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "InlineEditableTextfield", {
   enumerable: true,
   get: function get() {
-    return _inlineEdit.default;
+    return _inlineEditableTextfield.default;
   }
 });
-Object.defineProperty(exports, "InlineEditableTextfield", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _inlineEditableTextfield.default;
+    return _inlineEdit.default;
   }
 });
 

package/dist/cjs/inline-edit.js

@@ -41,14 +41,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.2"
+  packageVersion: "12.1.6"
 };
 
 var noop = function noop() {};

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

@@ -21,13 +21,12 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 
 var _styles = require("./internal/styles");
 
-/** @jsx jsx */
+var _excluded = ["errorMessage", "isInvalid"];
+
 var InlineEditableTextfield = function InlineEditableTextfield(props) {
   var _props$isCompact = props.isCompact,
       isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
@@ -39,7 +38,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
           isInvalid = _ref.isInvalid,
-          props = (0, _objectWithoutProperties2.default)(_ref, ["errorMessage", "isInvalid"]);
+          props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
       return (0, _core.jsx)(_inlineDialog.default, {
         isOpen: isInvalid,
         content: (0, _core.jsx)("div", {
@@ -51,7 +50,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
           css: _styles.errorIconContainerStyles
         }, (0, _core.jsx)(_error.default, {
           label: "error",
-          primaryColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400)
+          primaryColor: "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")")
         })),
         testId: testId,
         isCompact: isCompact,

package/dist/cjs/internal/styles.js

@@ -3,19 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.readViewWrapperStyles = exports.readViewContainerStyles = exports.readViewForTextFieldStyles = exports.errorIconContainerStyles = exports.editButtonStyles = exports.getButtonWrapperStyles = exports.buttonsContainerStyles = void 0;
+exports.readViewWrapperStyles = exports.readViewForTextFieldStyles = exports.readViewContainerStyles = exports.getButtonWrapperStyles = exports.errorIconContainerStyles = exports.editButtonStyles = exports.buttonsContainerStyles = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var spacingUnit = (0, _constants.gridSize)();
 var fontSizeUnit = (0, _constants.fontSize)();
 var elevations = {
-  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
-  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A))
+  light: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  dark: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
 };
 var buttonsContainerStyles = {
   display: 'flex',
@@ -30,7 +28,7 @@ exports.buttonsContainerStyles = buttonsContainerStyles;
 var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
   return {
     boxShadow: elevations[mode],
-    backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
+    backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
     width: spacingUnit * 4,
     zIndex: 200,
     borderRadius: spacingUnit / 2 - 1,
@@ -53,7 +51,7 @@ var editButtonStyles = {
   padding: '0',
   outline: '0',
   '&:focus + div': {
-    border: "2px solid ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
+    border: "2px solid ".concat("var(--ds-border-focus, ".concat(_colors.B100, ")"))
   }
 };
 exports.editButtonStyles = editButtonStyles;
@@ -91,7 +89,7 @@ var readViewWrapperStyles = {
     width: '100%'
   },
   '&:hover': {
-    background: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30)
+    background: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")")
   }
 };
 exports.readViewWrapperStyles = readViewWrapperStyles;

package/dist/cjs/version.json

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

package/dist/es2019/inline-edit.js

@@ -13,7 +13,7 @@ import ReadView from './internal/read-view';
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.2"
+  packageVersion: "12.1.6"
 };
 
 const noop = () => {};

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

@@ -6,7 +6,6 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import InlineEdit from './inline-edit';
 import { errorIconContainerStyles, readViewForTextFieldStyles } from './internal/styles';
 
@@ -34,7 +33,7 @@ const InlineEditableTextfield = props => {
         css: errorIconContainerStyles
       }, jsx(ErrorIcon, {
         label: "error",
-        primaryColor: token('color.iconBorder.danger', R400)
+        primaryColor: `var(--ds-iconBorder-danger, ${R400})`
       })),
       testId: testId,
       isCompact: isCompact,

package/dist/es2019/internal/styles.js

@@ -1,11 +1,10 @@
 import { B100, DN50A, DN60A, N0, N30, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const spacingUnit = gridSize();
 const fontSizeUnit = fontSize();
 const elevations = {
-  light: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
-  dark: token('shadow.overlay', `0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`)
+  light: `var(--ds-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  dark: `var(--ds-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
 };
 export const buttonsContainerStyles = {
   display: 'flex',
@@ -17,7 +16,7 @@ export const buttonsContainerStyles = {
 };
 export const getButtonWrapperStyles = mode => ({
   boxShadow: elevations[mode],
-  backgroundColor: token('color.background.overlay', N0),
+  backgroundColor: `var(--ds-background-overlay, ${N0})`,
   width: spacingUnit * 4,
   zIndex: 200,
   borderRadius: spacingUnit / 2 - 1,
@@ -37,7 +36,7 @@ export const editButtonStyles = {
   padding: '0',
   outline: '0',
   '&:focus + div': {
-    border: `2px solid ${token('color.border.focus', B100)}`
+    border: `2px solid ${`var(--ds-border-focus, ${B100})`}`
   }
 };
 export const errorIconContainerStyles = {
@@ -71,6 +70,6 @@ export const readViewWrapperStyles = {
     width: '100%'
   },
   '&:hover': {
-    background: token('color.background.transparentNeutral.hover', N30)
+    background: `var(--ds-background-transparentNeutral-hover, ${N30})`
   }
 };

package/dist/es2019/version.json

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

package/dist/esm/inline-edit.js

@@ -5,9 +5,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
@@ -22,7 +22,7 @@ import ReadView from './internal/read-view';
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.2"
+  packageVersion: "12.1.6"
 };
 
 var noop = function noop() {};

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["errorMessage", "isInvalid"];
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
@@ -7,7 +8,6 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import InlineEdit from './inline-edit';
 import { errorIconContainerStyles, readViewForTextFieldStyles } from './internal/styles';
 
@@ -22,7 +22,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
           isInvalid = _ref.isInvalid,
-          props = _objectWithoutProperties(_ref, ["errorMessage", "isInvalid"]);
+          props = _objectWithoutProperties(_ref, _excluded);
 
       return jsx(InlineDialog, {
         isOpen: isInvalid,
@@ -35,7 +35,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
           css: errorIconContainerStyles
         }, jsx(ErrorIcon, {
           label: "error",
-          primaryColor: token('color.iconBorder.danger', R400)
+          primaryColor: "var(--ds-iconBorder-danger, ".concat(R400, ")")
         })),
         testId: testId,
         isCompact: isCompact,

package/dist/esm/internal/styles.js

@@ -1,11 +1,10 @@
 import { B100, DN50A, DN60A, N0, N30, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var spacingUnit = gridSize();
 var fontSizeUnit = fontSize();
 var elevations = {
-  light: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
-  dark: token('shadow.overlay', "0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A))
+  light: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+  dark: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
 };
 export var buttonsContainerStyles = {
   display: 'flex',
@@ -18,7 +17,7 @@ export var buttonsContainerStyles = {
 export var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
   return {
     boxShadow: elevations[mode],
-    backgroundColor: token('color.background.overlay', N0),
+    backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
     width: spacingUnit * 4,
     zIndex: 200,
     borderRadius: spacingUnit / 2 - 1,
@@ -39,7 +38,7 @@ export var editButtonStyles = {
   padding: '0',
   outline: '0',
   '&:focus + div': {
-    border: "2px solid ".concat(token('color.border.focus', B100))
+    border: "2px solid ".concat("var(--ds-border-focus, ".concat(B100, ")"))
   }
 };
 export var errorIconContainerStyles = {
@@ -73,6 +72,6 @@ export var readViewWrapperStyles = {
     width: '100%'
   },
   '&:hover': {
-    background: token('color.background.transparentNeutral.hover', N30)
+    background: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")")
   }
 };

package/dist/esm/version.json

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

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

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InlineEditableTextfieldProps } from './types';
 declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => JSX.Element;
 export default InlineEditableTextfield;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.1.2",
+  "version": "12.1.6",
   "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/"
@@ -17,7 +17,6 @@
   "homepage": "https://atlassian.design/components/inline-edit/",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Inline edit"
@@ -28,11 +27,11 @@
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/codemod-utils": "^3.4.0",
     "@atlaskit/form": "^8.4.0",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/inline-dialog": "^13.1.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/inline-dialog": "^13.2.0",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -40,9 +39,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-dialog": "^13.1.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
     "@atlaskit/ssr": "*",
@@ -75,7 +72,10 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "af:exports": {